/* =====================================================================
   NATOKGHOR — POLISH LAYER  (home page)
   Restrained, theatre-themed motion. Every effect has a purpose.
   Loaded AFTER style.css; safe to remove by deleting one <link>.
   All motion disables itself under prefers-reduced-motion.
   ===================================================================== */

/* ---- 1. Hero: stage spotlight that follows the cursor, gently ---- */
.hero{cursor:default;}
.hero::after{/* keep the gold footlight strip from style.css */}
.hero-spot{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,38%),
    rgba(232,184,75,.16), rgba(232,184,75,.05) 40%, transparent 65%);
  transition:background .25s ease-out;mix-blend-mode:screen;
}
.hero>*{position:relative;z-index:1;}

/* hero wordmark: a slow, breathing glow — like stage light on a marquee */
.hero-mark{
  text-shadow:0 0 0 rgba(232,184,75,0);
  animation:marquee-glow 6s ease-in-out infinite;
}
@keyframes marquee-glow{
  0%,100%{text-shadow:0 1px 30px rgba(232,184,75,.15);}
  50%{text-shadow:0 1px 46px rgba(232,184,75,.42);}
}

/* curtain reveal: hero content rises once on load, staggered */
.hero-mark,.hero-en,.hero-tag,.hero-tag-bn,.search-wrap,.hero-stats{
  animation:rise .8s cubic-bezier(.2,.7,.3,1) both;
}
.hero-en{animation-delay:.06s;}
.hero-tag{animation-delay:.12s;}
.hero-tag-bn{animation-delay:.18s;}
.search-wrap{animation-delay:.24s;}
.hero-stats{animation-delay:.32s;}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* stat numbers get a soft gold underline that grows on hover of the row */
.hero-stats>div{position:relative;transition:transform .25s ease;}
.hero-stats>div::after{
  content:"";position:absolute;left:50%;bottom:-6px;width:0;height:2px;
  background:var(--gold);transform:translateX(-50%);transition:width .3s ease;border-radius:2px;
}
.hero-stats>div:hover{transform:translateY(-2px);}
.hero-stats>div:hover::after{width:70%;}

/* ---- 2. Cards: cursor-reactive warmth + lift (the "meaningful" hover) ---- */
/* A pointer-tracking glow sits under the content; the card lifts toward the cursor.
   Applied to drama cards and the "how scoring works" cards on home. */
.drama-card,.how-card{position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;}
.drama-card::before,.how-card::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(240px circle at var(--cx,50%) var(--cy,50%),
    rgba(201,150,26,.14), transparent 60%);
  transition:opacity .3s ease;
}
.drama-card:hover::before,.how-card:hover::before{opacity:1;}
.drama-card>*,.how-card>*{position:relative;z-index:1;}
.drama-card:hover,.how-card:hover{box-shadow:0 14px 34px rgba(58,8,8,.16);}

/* the drama poster panel: a faint sheen sweeps across on hover */
.dp{position:relative;overflow:hidden;}
.dp::after{
  content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);transition:none;
}
.drama-card:hover .dp::after{animation:sheen .9s ease;}
@keyframes sheen{from{left:-60%;}to{left:130%;}}

/* ---- 3. This-week ticket cards: gold edge draws in from the left ---- */
.t-card{position:relative;scroll-snap-align:start;}
.t-card::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--gold);transform:scaleY(0);transform-origin:top;
  transition:transform .3s ease;border-radius:3px;
}
.t-card:hover::after{transform:scaleY(1);}

/* ---- 3b. Netflix-style carousel for "This week's shows" ---- */
.carousel{position:relative;}
.carousel .t-row{
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:0;scroll-padding-left:0;
}
.carousel .t-row::-webkit-scrollbar{display:none;}   /* hide the utilitarian bar */
.car-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:20;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(245,240,232,.92);color:var(--red-dark);
  box-shadow:0 4px 16px rgba(0,0,0,.32);
  opacity:0;transition:opacity .25s ease,transform .2s ease,background .2s ease;
  pointer-events:none;
}
.carousel:hover .car-arrow{opacity:1;pointer-events:auto;}
.car-arrow:hover{background:var(--gold);color:#fff;transform:translateY(-50%) scale(1.08);}
.car-arrow:active{transform:translateY(-50%) scale(.96);}
.car-arrow:disabled{opacity:0!important;pointer-events:none;}
.car-prev{left:-14px;}
.car-next{right:-14px;}
/* soft fade hints at more content beyond each edge */
.carousel::before,.carousel::after{
  content:"";position:absolute;top:0;bottom:0;width:48px;z-index:10;pointer-events:none;
  transition:opacity .25s ease;
}
.carousel::before{left:0;background:linear-gradient(90deg,var(--charcoal),transparent);opacity:0;}
.carousel::after{right:0;background:linear-gradient(270deg,var(--charcoal),transparent);opacity:0;}
.carousel.has-prev::before{opacity:.9;}
.carousel.has-next::after{opacity:.9;}
@media(max-width:640px){
  .car-arrow{display:none;}                 /* phones: natural swipe instead */
  .carousel::before,.carousel::after{display:none;}
}

/* ---- 4. Nav: active link underline grows; links lift a hair ---- */
.nav-links a{position:relative;}
.nav-links a::after{
  content:"";position:absolute;left:.7rem;right:.7rem;bottom:10px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;border-radius:2px;
}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-links a.active::after{transform:scaleX(1);opacity:.9;}
.nav-links a.active{box-shadow:none;} /* replace the hard inset bar with the smooth underline */

/* ---- 5. Section headings: the gold rule wipes in when scrolled to ---- */
.sec-line{transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.sec-line.in{transform:scaleX(1);}

/* ---- 6. CTA band: subtle living gradient (slow, never distracting) ---- */
.cta-band{background:linear-gradient(120deg,var(--red-dark),var(--red),var(--red-deep));
  background-size:180% 180%;animation:drift 14s ease-in-out infinite;}
@keyframes drift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

/* ---- 7. Buttons: gentle press + sheen on primary ---- */
.btn-gold,.btn-red{position:relative;overflow:hidden;}
.btn-gold::after,.btn-red::after{
  content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-18deg);transition:none;
}
.btn-gold:hover::after,.btn-red:hover::after{animation:sheen .8s ease;}
.btn:active{transform:translateY(1px);}

/* ---- reduced motion: honour the user's OS setting ---- */
@media (prefers-reduced-motion:reduce){
  .hero-mark{animation:none;}
  .hero-mark,.hero-en,.hero-tag,.hero-tag-bn,.search-wrap,.hero-stats{animation:none;}
  .hero-spot,.cta-band{animation:none;}
  .dp::after,.btn-gold::after,.btn-red::after{display:none;}
  .sec-line{transform:scaleX(1);}
}