/* Slider: full width & height */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Swiper container should fill */
.hero-swiper,
.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide {
  height: 100%;
}

/* Slide background */
.swiper-slide {
  background-size: cover;
  background-position: center;
  position: relative;
}

/* dark overlay for better text contrast */
.swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}

/* Slide inner for positioning */
/* Slide inner full height */
.slide-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
/* Vintage Movie Ticket Card */
.slide-content {
  position: absolute;
  bottom: 20%;      /* distance from bottom */
  left: 10%;        /* distance from left */
  max-width: 480px;
  padding: 15px 30px; /* smaller padding for slim height */
  background: #f5e6c8; /* parchment color */
  color: #2b2b2b;
  border: 2px dashed #8b5e3c;
  border-radius: 12px;
  text-align: center;
  font-family: 'Georgia', serif;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  z-index: 10;
}

/* Perforation circles (adjust size for smaller ticket) */
.slide-content::before,
.slide-content::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;   /* smaller circles */
  height: 22px;
  border-radius: 50%;
  background: #111;
  z-index: 2;
}
.slide-content::before {
  left: -12px;
}
.slide-content::after {
  right: -12px;
}

/* Divider (thinner) */
.slide-divider {
  width: 100%;
  height: 1px;
  margin: 10px 0;
  border-top: 1px dashed #8b5e3c;
  opacity: 0.7;
}

/* Title */
.slide-title {
  font-size: 1rem;  /* reduced size */
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 8px;
  color: #4b2e1f;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.slide-title .slide-logo {
  height: 50px;
  width: auto;
  object-fit: contain;
}

/* Subtitle */
.slide-sub {
  font-size: 1rem;
  font-style: italic;
  color: #5c4431;
  margin-bottom: 12px;
}

/* Make video cover the entire slide */
.slide-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
/* CTA button */
.btn-ticket {
  display: inline-block;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  background: #b22222;
  border-radius: 4px;
  border: 2px solid #8b1a1a;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.btn-ticket:hover {
  background: #8b1a1a;
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0,0,0,0.4);
}



/* Navigation arrows (desktop) */
.hero-nav {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-nav button {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

/* Progress bar bottom-left */
.hero-progress {
  position: absolute;
  left: 20px;
  bottom: 24px;
  width: calc(35% + 120px);
  max-width: 420px;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
  z-index: 20;
}

.hero-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,#f39c12,#f6d365);
  transition: width 0.2s linear;
}




/* ----------------- Camera Interface ----------------- */
.camera-interface {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  font-family: monospace;
  color: #fff;
}

/* Top-left: REC & Timer */
.top-left {
  position: absolute;
  top: 15px;
  left: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  font-size: 16px;
}
.rec-dot {
  width: 14px; height: 14px;
  background: red; border-radius: 50%;
  animation: blink 1s infinite;
}
.rec-text { color: red; }
.timer { color: #fff; font-size: 16px; }
@keyframes blink { 0%,50%,100% {opacity:1;} 25%,75% {opacity:0;} }

/* Top-right: Battery */
.top-right {
  position: absolute; top: 15px; right: 15px;
  display: flex; align-items: center; gap: 8px;
}
.battery { width: 40px; height: 14px; border: 2px solid #fff; border-radius: 2px; position: relative; }
.battery-level { width: 100%; height: 100%; background: limegreen; border-radius: 2px; }

/* Top-center: Camera Settings */
.top-center {
  position: absolute; top: 15px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 20px;
  font-size: 14px;
  font-weight: bold;
  color: #0ff;
}

/* Frame borders */
.frame-border { position: absolute; background: rgba(255,255,255,0.6); }
.frame-border.top, .frame-border.bottom { height: 4px; width: 100%; }
.frame-border.left, .frame-border.right { width: 4px; height: 100%; }
.frame-border.top { top:0; left:0; } .frame-border.bottom { bottom:0; left:0; }
.frame-border.left { top:0; left:0; } .frame-border.right { top:0; right:0; }

/* Center grid & focus box */
.center-grid { position:absolute; top:50%; left:50%; width:80%; height:80%; transform:translate(-50%,-50%);}
.grid-line.horizontal { position:absolute; top:50%; left:0; width:100%; height:1px; background: rgba(255,255,255,0.3);}
.grid-line.vertical { position:absolute; left:50%; top:0; width:1px; height:100%; background: rgba(255,255,255,0.3);}
.focus-box {
  position:absolute; top:50%; left:50%; width:60px; height:60px;
  transform:translate(-50%, -50%);
  border: 2px solid rgba(0,255,255,0.8);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0,255,255,0.5);
  animation: focusPulse 2s infinite;
}
@keyframes focusPulse { 0%,100% {transform:translate(-50%, -50%) scale(1);} 50% {transform:translate(-50%, -50%) scale(1.1);}}

/* Lens overlay & scanlines */
.lens-overlay {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.03), rgba(0,0,0,0.2));
}
.camera-interface::after {
  content:""; position:absolute; top:0; left:0; width:100%; height:100%;
  background: repeating-linear-gradient(rgba(255,255,255,0.02) 0 2px, transparent 2px 4px);
}

/* Glitch Overlay for the slider */
.glitch-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 45; /* below camera-interface */
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.02) 0 2px,
    transparent 2px 4px
  );
  overflow: hidden;
}

/* Moving horizontal scan lines */
@keyframes scanLineMove {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}
.glitch-overlay {
  animation: scanLineMove 1s linear infinite;
}

/* Glitch flicker / RGB split */
.glitch-flicker {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  background: rgba(255,255,255,0.03);
  animation: flicker 0.1s infinite;
}

@keyframes flicker {
  0%, 50%, 100% { opacity: 0.03; }
  25%, 75% { opacity: 0.15; }
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .hero-overlay { right: 20px; }
  .hero-progress { left: 16px; right: 16px; max-width: none; width: calc(50% - 40px); }
}

@media (max-width: 768px) {
  .overlay-card { display: none; } /* hide overlay on small screens */
  .hero-nav { right: 12px; top: 12px; transform: none; flex-direction: row; gap: 8px; }
  .hero-progress { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .slide-inner { padding-left: 18px; }
  .video-wrap iframe { height: 50vh; }
  .top-center{ font-size: 12px; left: 52%;}
  .top-left{font-size: 12px;}
  .top-left .timer{font-size: 10px;}
  .battery { width: 25px; height: 12px;}
  .top-right .battery-text {font-size: 0.6rem;}
  .slide-content{max-width: 3400px; left: 5%; right:5%; bottom: 5%;}
}