:root{
  --pink:#ec96a8;
  --green:#a6d8a2;
  --bright-green:#4fe36e;
  --cream:#f6efe4;
  --ink:#16110f;
  --red:#c4322f;
  --bg:#120d12;
  --maxw:1180px;
  --fun:"filmotype-maxwell","Inter",Arial,sans-serif;
  --body:"Inter",Arial,Helvetica,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
em{font-style:normal;color:var(--pink);font-weight:700}
a{color:inherit;text-decoration:none}

/* ---------- film grain ---------- */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  overflow:hidden;
  padding:6vh 5vw;
}
.hero-bg{
  position:absolute;inset:-6%;
  /* cover so the image always fills behind the logo at every width / on mobile */
  background:url("assets/main-bg.jpeg?v=8c8fab48") center top / cover no-repeat;
  transform:scale(1.06);
  will-change:transform;
  filter:saturate(1.05) contrast(1.05);
}
.hero-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(125% 95% at 50% 40%, rgba(18,13,18,0) 38%, rgba(18,13,18,.48) 80%, rgba(18,13,18,.82) 100%),
    linear-gradient(180deg, rgba(18,13,18,.22), rgba(18,13,18,.06) 40%, rgba(18,13,18,.72));
}
.hero-inner{position:relative;z-index:2;max-width:880px}

/* logo dominates */
.hero-logo{
  width:min(624px,74vw);
  height:auto;
  margin-bottom:.4em;
  filter:drop-shadow(0 14px 36px rgba(0,0,0,.6));
  animation:logoIn 1s cubic-bezier(.2,.9,.25,1) both, sway 7s ease-in-out 1s infinite;
}
@keyframes logoIn{from{opacity:0;transform:translateY(24px) rotate(-3deg) scale(.9)}to{opacity:1;transform:none}}
@keyframes sway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}

.hero-copy{
  font-size:clamp(1rem,1.4vw,1.18rem);
  line-height:1.6;
  max-width:60ch;margin:0 auto 1em;
  color:#efe7da;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
  animation:fadeUp 1s ease .4s both;
}
.hero-tag{
  font-family:var(--fun);
  font-size:clamp(1.8rem,5vw,3.4rem);
  line-height:1;
  color:var(--pink);
  margin-top:.35em;
  text-shadow:0 3px 18px rgba(0,0,0,.7);
  animation:fadeUp 1s ease .6s both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.scroll-cue{
  display:inline-flex;flex-direction:column;align-items:center;gap:.3em;
  margin-top:2.2em;
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--green);
  animation:fadeUp 1s ease .9s both;
}
.scroll-cue .arrow{font-size:1.3rem;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* ===================== GENRES (vertical) ===================== */
.genres{
  position:relative;
  padding:clamp(4rem,9vw,7rem) 0 clamp(3rem,6vw,5rem);
  background:
    linear-gradient(rgba(18,13,18,.88), rgba(18,13,18,.93)),
    url("assets/tex-genres.png?v=8c8fab48") center/cover fixed no-repeat,
    var(--bg);
}
.genres-head{
  max-width:var(--maxw);margin:0 auto 2.6rem;padding:0 6vw;
}
.section-title{
  font-family:var(--fun);
  font-size:clamp(2.6rem,8vw,5.6rem);
  line-height:.95;
  color:var(--bright-green);
}
.section-title::after{
  content:"";display:block;width:4.5rem;height:.4rem;margin-top:.4rem;
  background:linear-gradient(90deg,var(--pink),var(--green));
  border-radius:2px;
}
.section-sub{margin-top:.9rem;color:#b9b1a6;letter-spacing:.02em}

.scroller{max-width:var(--maxw);margin:0 auto;padding:0 6vw}
.track{display:flex;flex-direction:column;gap:clamp(1.6rem,3vw,2.6rem)}

/* ---- card ---- */
.card{
  display:grid;grid-template-columns:0.95fr 1.05fr;
  background:#1c151b;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.7);
  opacity:0;transform:translateY(46px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.25,1);
}
.card.in{opacity:1;transform:none}

/* media is now a clickable link with hover play button */
.card-media{
  position:relative;min-height:420px;
  background-size:cover;background-position:center;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.6rem;
  color:#fff;
  overflow:hidden;
}
.card-media::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 55%, transparent) 0%, rgba(10,8,10,.2) 35%, rgba(10,8,10,.85) 100%);
  mix-blend-mode:multiply;
  transition:opacity .4s ease;
}
.card-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.6));
}
.card-media img{transition:transform .6s ease}
.card-media:hover{transform:none}
.card-media > *{transition:transform .5s cubic-bezier(.2,.9,.25,1)}

.card-kicker{
  position:relative;z-index:2;
  font-family:var(--body);font-weight:700;
  font-size:1rem;letter-spacing:.14em;
  color:var(--accent2);
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.card-title{
  position:relative;z-index:2;
  font-family:var(--fun);
  font-size:clamp(2.8rem,5.5vw,5rem);
  line-height:.9;margin-top:.12em;
  color:var(--bright-green);
  text-shadow:3px 3px 0 rgba(0,0,0,.55);
}

/* play button overlay */
.play{
  position:absolute;z-index:3;top:50%;left:50%;
  width:92px;height:92px;border-radius:50%;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 88%, #000 0%);
  box-shadow:0 12px 30px -8px rgba(0,0,0,.6);
  transform:translate(-50%,-50%) scale(.6);
  opacity:0;
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,1.3,.4,1);
  pointer-events:none;
}
.play::after{
  content:"";position:absolute;inset:-8px;border-radius:50%;
  border:2px solid rgba(255,255,255,.6);
  animation:ping 1.8s ease-out infinite;
  opacity:0;
}
@keyframes ping{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.25);opacity:0}}
.play-ico{font-size:2rem;color:#fff;margin-left:6px;line-height:1}

.card-media:hover .play,
.card-media:focus-visible .play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.card-media:hover::before{opacity:.85}
.card-media:hover .card-title{transform:translateY(-2px)}

/* ---- copy ---- */
.card-copy{
  display:flex;align-items:center;
  padding:clamp(1.6rem,2.5vw,2.8rem);
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb,var(--accent) 14%, transparent), transparent 60%),
    #1c151b;
}
.card-copy-inner p{
  font-size:clamp(.95rem,1.05vw,1.05rem);
  line-height:1.62;color:#ddd5ca;margin-bottom:.85em;
}
.card-copy-inner p:last-child{margin-bottom:0}
.card-copy-inner strong{color:var(--cream);font-weight:600}
.funfact{
  font-size:.9rem!important;color:#c8bfb4!important;
  border-left:3px solid var(--accent);
  padding-left:.9em;margin:1em 0 0;
}
.funfact span{
  display:inline-block;font-family:var(--body);font-weight:700;
  font-size:.66rem;letter-spacing:.1em;color:var(--accent2);
  text-transform:uppercase;margin-right:.4em;
}

/* ===================== VIDEO CLIPS ===================== */
.clips{
  --accent:#c4322f; --accent2:#f2b134;
  position:relative;
  padding:clamp(3.5rem,8vw,6rem) 0 clamp(3.5rem,8vw,6rem);
  background:
    radial-gradient(70% 60% at 15% 0%, rgba(166,216,162,.10), transparent 60%),
    radial-gradient(70% 60% at 90% 100%, rgba(196,50,47,.14), transparent 60%),
    var(--bg);
}
.clips-head{max-width:var(--maxw);margin:0 auto 2.4rem;padding:0 6vw}

.clips-grid{
  max-width:var(--maxw);margin:0 auto;padding:0 6vw;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2vw,1.8rem);
}
.clip{
  display:flex;flex-direction:column;gap:.7rem;
  transition:transform .3s cubic-bezier(.2,.9,.25,1);
}
.clip:hover{transform:translateY(-5px)}

.clip-thumb{
  position:relative;display:block;
  aspect-ratio:16/9;
  background-size:cover;background-position:center;
  border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 36px -18px rgba(0,0,0,.7);
}
.clip-thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45));
  transition:opacity .3s ease;opacity:.7;
}
.clip:hover .clip-thumb::after{opacity:.4}
/* reuse the .play button; reveal on hover (always on for touch) */
.clip-thumb .play{width:64px;height:64px}
.clip-thumb .play-ico{font-size:1.4rem}
.clip:hover .clip-thumb .play,
.clip:focus-visible .clip-thumb .play{opacity:1;transform:translate(-50%,-50%) scale(1)}

.clip-meta{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;padding:0 .15rem}
.clip-title{font-weight:600;color:var(--cream);font-size:1rem}
.clip-tag{
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:#8c8479;border:1px solid rgba(255,255,255,.14);
  padding:.2em .5em;border-radius:100px;white-space:nowrap;
}

@media (max-width:900px){
  .clips-grid{grid-template-columns:repeat(2,1fr)}
  /* touch devices can't hover — keep play visible */
  .clip-thumb .play{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .clip-thumb::after{opacity:.5}
}
@media (max-width:480px){
  .clips-grid{grid-template-columns:1fr;max-width:420px}
}

/* ===================== SCENE DIVIDER ===================== */
.scene{
  position:relative;
  min-height:46vh;
  display:grid;place-items:center;
  /* texture fades into the dark sections above and below */
  background:
    linear-gradient(rgba(18,13,18,1) 0%, rgba(18,13,18,.35) 30%, rgba(18,13,18,.35) 70%, rgba(13,9,13,1) 100%),
    url("assets/tex-divider.png?v=8c8fab48") center/cover fixed no-repeat,
    var(--bg);
}
.scene-line{
  font-family:var(--fun);
  font-size:clamp(1.8rem,5vw,3.4rem);
  color:var(--cream);
  text-shadow:0 4px 22px rgba(0,0,0,.75);
  letter-spacing:.01em;
  padding:0 6vw;text-align:center;
}

/* ===================== FOOTER ===================== */
.footer{
  position:relative;
  text-align:center;padding:clamp(3rem,6vw,5rem) 6vw 3rem;
  background:
    linear-gradient(rgba(13,9,13,.84), rgba(13,9,13,.93)),
    url("assets/tex-footer.png?v=8c8fab48") center/cover no-repeat,
    #0d090d;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer > *{position:relative;z-index:1}
.footer-logo{width:240px;max-width:60vw;height:auto;opacity:.95;margin-bottom:1.2rem}
.footer-line{font-family:var(--fun);font-size:clamp(1.6rem,4vw,2.6rem);color:var(--green)}
.footer-small{margin-top:1rem;color:#7d756c;font-size:.85rem;letter-spacing:.03em}

/* ===================== VIDEO LIGHTBOX ===================== */
.lightbox{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:max(4vh,1rem) max(4vw,1rem);
  background:rgba(8,6,8,.86);
  backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}
.lightbox.open{opacity:1;visibility:visible}
.lb-stage{
  position:relative;width:min(1100px,100%);
  transform:scale(.96);transition:transform .35s cubic-bezier(.2,.9,.25,1);
}
.lightbox.open .lb-stage{transform:none}
.lb-stage video{
  width:100%;max-height:82vh;
  display:block;border-radius:14px;background:#000;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.8);
}
.lb-caption{
  margin-top:.9rem;text-align:center;
  font-family:var(--fun);font-size:clamp(1.3rem,3.5vw,2rem);
  color:var(--bright-green);
}
.lb-close{
  position:absolute;top:-3rem;right:-.4rem;
  width:44px;height:44px;border:none;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;
  font-size:1.6rem;line-height:1;cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.lb-close:hover{background:var(--red);transform:scale(1.08)}
@media (max-width:760px){
  .lb-close{top:-3.2rem;right:0}
}

/* ===================== MOBILE ===================== */
@media (max-width:760px){
  .card{grid-template-columns:1fr}
  .card-media{min-height:280px}
  /* on touch, play button is always visible */
  .play{opacity:1;transform:translate(-50%,-50%) scale(1);width:74px;height:74px}
  .play-ico{font-size:1.6rem}
  /* fixed backgrounds misbehave on iOS — use scroll on small screens */
  .genres,.scene{background-attachment:scroll,scroll,scroll}
  .scene{min-height:32vh}
  /* logo dominates on mobile */
  .hero{padding:5vh 3vw}
  .hero-logo{width:76vw}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .card{opacity:1;transform:none}
}