/* =====================================================================
   ASTRALIS FOOD LLC — Brand Film (cinematic showcase)
   Pure CSS/JS motion piece. Reuses design tokens from styles.css.
   Concept: "From this earth, a star." — grains of light rising from
   Punjab soil and resolving into the Stellar mark.
   ===================================================================== */

/* ---------- STAGE ---------- */
.film{
  position:relative;width:100%;height:100vh;min-height:600px;overflow:hidden;
  background:linear-gradient(165deg,#070d20 0%,#0c1730 52%,#0a1228 100%);
  isolation:isolate;
}
.film *{will-change:auto}

/* ---------- PERSISTENT BACKGROUND LAYERS ---------- */
.film-glow{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}
.film-glow--a{width:60vw;height:60vw;top:-18%;right:-10%;
  background:radial-gradient(circle,rgba(201,162,75,.20),transparent 68%);
  animation:glowDriftA 22s var(--ease) infinite}
.film-glow--b{width:46vw;height:46vw;bottom:-20%;left:-12%;
  background:radial-gradient(circle,rgba(91,103,184,.16),transparent 70%);
  animation:glowDriftB 28s var(--ease) infinite}
@keyframes glowDriftA{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-8%,10%) scale(1.18)}}
@keyframes glowDriftB{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(12%,-8%) scale(1.12)}}

/* drifting gold motes (generated by JS) */
.film-field{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mote{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(228,201,126,.9),rgba(201,162,75,.1) 70%,transparent);
  opacity:0;animation:moteRise linear infinite}
@keyframes moteRise{
  0%{opacity:0;transform:translateY(20px) scale(.6)}
  12%{opacity:var(--mo,.7)}
  88%{opacity:var(--mo,.7)}
  100%{opacity:0;transform:translateY(-92vh) scale(1.1)}}

/* fine vignette + grain for depth */
.film-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 42%,transparent 52%,rgba(4,8,20,.55) 100%)}

/* ---------- HEADER OVERRIDE (let film own the top) ---------- */
body.film-page header{background:transparent;border-bottom:none}
body.film-page header.scrolled{background:rgba(10,18,40,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}

/* ---------- SCENES ---------- */
.scene{position:absolute;inset:0;z-index:5;display:flex;align-items:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 1s var(--ease),visibility 1s var(--ease)}
.scene.is-active{opacity:1;visibility:visible}
.scene .wrap{position:relative;z-index:3;width:100%}

/* generic animated child — fade/rise, staggered via --d */
.anim{opacity:0;transform:translateY(30px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);
  transition-delay:0s}
.scene.is-active .anim{opacity:1;transform:none;transition-delay:var(--d,0s)}
.anim--blur{filter:blur(12px)}
.scene.is-active .anim--blur{filter:blur(0)}
.anim--scale{transform:translateY(30px) scale(.92)}
.scene.is-active .anim--scale{transform:none}

/* kinetic word/letter reveal */
.kin{display:inline-block;overflow:hidden;vertical-align:top}
.kin>span{display:inline-block;transform:translateY(108%);
  transition:transform .9s var(--ease);transition-delay:var(--d,0s)}
.scene.is-active .kin>span{transform:none}

/* shared film typography */
.film-eyebrow{display:inline-flex;align-items:center;gap:13px;font-family:var(--sans);
  font-size:12px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:24px}
.film-eyebrow::before,.film-eyebrow::after{content:'';width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.film-eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent)}
.film-h{font-family:var(--serif);font-weight:600;line-height:1.04;letter-spacing:.004em;
  font-size:clamp(40px,7vw,104px);color:var(--cream)}
.film-h em{font-style:italic;background:linear-gradient(120deg,#e4c97e,#c9a24b 55%,#f0dca0);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.film-sub{font-family:var(--sans);font-weight:300;font-size:clamp(15px,1.8vw,21px);
  color:#cfd6e6;max-width:560px;margin-top:22px;line-height:1.55}

/* ---------- SCENE 0 · INTRO ---------- */
.s-intro .wrap{text-align:center}
.s-intro .mark-wrap{display:flex;justify-content:center;margin-bottom:30px}
.brand-draw{width:clamp(74px,9vw,118px);height:auto}
.brand-draw .stroke{stroke:var(--cream);stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.5s var(--ease);transition-delay:var(--d,0s)}
.scene.is-active .brand-draw .stroke{stroke-dashoffset:0}
.brand-draw .star{fill:var(--gold);opacity:0;transform-origin:center;transform:scale(.4) rotate(-30deg);
  transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:var(--d2,1s)}
.scene.is-active .brand-draw .star{opacity:1;transform:none}
.s-intro .wordmark{font-family:var(--serif);font-size:clamp(15px,2.2vw,26px);letter-spacing:.42em;
  text-transform:uppercase;color:var(--cream);margin-bottom:8px}
.s-intro .wordmark b{color:var(--gold);font-weight:600}

/* ---------- SCENE 1 · ORIGIN (ken burns) ---------- */
.s-origin{overflow:hidden}
.s-origin .ken{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  transform:scale(1.18);filter:saturate(1.05) brightness(.74);
  transition:transform 6.5s linear,opacity 1.1s var(--ease);opacity:0}
.scene.is-active .ken{opacity:1;transform:scale(1.02) translate(1.5%,-1%)}
.s-origin .ken-shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(7,12,30,.92) 0%,rgba(7,12,30,.6) 46%,rgba(7,12,30,.1) 100%)}
.s-origin .wrap{z-index:3}
.s-origin .film-h{max-width:760px}

/* ---------- SCENE 2 · SUSTAINABILITY (stat grid) ---------- */
.s-sustain .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:48px}
.film-stat{padding:30px 20px;border:1px solid var(--line);border-radius:8px;
  background:linear-gradient(170deg,rgba(22,38,79,.5),rgba(10,18,40,.3));text-align:center}
.film-stat .fig{font-family:var(--serif);font-size:clamp(34px,4.6vw,58px);color:var(--gold-light);line-height:1;display:block}
.film-stat .lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:12px;display:block}
.film-stat .bar{height:3px;border-radius:3px;background:rgba(201,162,75,.18);margin-top:18px;overflow:hidden}
.film-stat .bar i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold));
  transition:width 1.4s var(--ease);transition-delay:var(--d,0s)}
.scene.is-active .film-stat .bar i{width:var(--w,80%)}

/* ---------- SCENE 3 · STELLAR REVEAL ---------- */
.s-stellar .wrap{display:grid;grid-template-columns:1fr .9fr;gap:40px;align-items:center}
.s-stellar .copy{max-width:520px}
.s-stellar .star-mark{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.s-stellar .star-mark svg{width:42px;height:42px}
.s-stellar .star-mark span{font-family:var(--serif);font-size:clamp(26px,3vw,38px);letter-spacing:.22em;color:var(--cream)}
.s-stellar .tagline{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.6vw,32px);color:var(--gold-light);line-height:1.3}
.s-stellar .pack-stage{position:relative;display:flex;justify-content:center;align-items:center;height:74vh;min-height:420px}
.s-stellar .pack-glow{position:absolute;width:min(46vh,420px);height:min(46vh,420px);border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,75,.32),transparent 68%);filter:blur(28px)}
.s-stellar .pack-glow{animation:packPulse 5s var(--ease) infinite}
@keyframes packPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1}}
.s-stellar .pack-img{height:68vh;max-height:620px;width:auto;position:relative;z-index:2;
  filter:drop-shadow(0 38px 66px rgba(0,0,0,.6));
  transform:translateY(40px) scale(.94);opacity:0;
  transition:opacity 1.2s var(--ease),transform 1.3s var(--ease);transition-delay:var(--d,.2s)}
.scene.is-active .pack-img{opacity:1;transform:none;animation:packFloat 7s var(--ease) infinite 1.3s}
@keyframes packFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ---------- SCENE 4 · THE RANGE ---------- */
.s-range .wrap{text-align:center}
.s-range .pack-row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,2vw,30px);margin-top:46px}
.s-range .pack-row img{height:clamp(180px,34vh,340px);width:auto;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.5));
  opacity:0;transform:translateY(46px) scale(.9);
  transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.scene.is-active .pack-row img{opacity:1;transform:none}
.scene.is-active .pack-row img:hover{transform:translateY(-8px)}

/* ---------- SCENE 5 · CLOSE ---------- */
.s-close .wrap{text-align:center}
.s-close .star-lockup{display:flex;justify-content:center;margin-bottom:26px}
.s-close .star-lockup svg{width:clamp(52px,6vw,76px);height:auto}
.s-close .lock-name{font-family:var(--serif);font-size:clamp(30px,5vw,68px);letter-spacing:.04em;color:var(--cream);line-height:1.1}
.s-close .lock-name sup{font-size:.34em;color:var(--gold-light);top:-1.1em;position:relative}
.s-close .lock-tag{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.2vw,26px);color:var(--gold-light);margin-top:14px}
.s-close .lock-co{font-family:var(--sans);font-size:12px;letter-spacing:.36em;text-transform:uppercase;color:var(--muted);margin-top:30px}

/* ---------- HUD (subtle, non-intrusive) ---------- */
.film-hud{position:absolute;left:0;right:0;bottom:26px;z-index:20;
  display:flex;align-items:center;justify-content:center;gap:22px;pointer-events:none}
.film-dots{display:flex;gap:10px}
.film-dots button{width:30px;height:3px;border-radius:3px;border:none;cursor:pointer;padding:0;
  background:rgba(246,241,231,.22);transition:.3s;pointer-events:auto}
.film-dots button.on{background:var(--gold)}
.film-dots button .fill{display:block;height:100%;width:0;background:var(--gold);border-radius:3px}
.film-ctrl{position:absolute;right:28px;bottom:0;display:flex;gap:8px;pointer-events:auto}
.film-ctrl button{display:flex;align-items:center;justify-content:center;gap:7px;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  background:rgba(10,18,40,.5);color:var(--gold);transition:.3s}
.film-ctrl button:hover{border-color:var(--gold);background:rgba(201,162,75,.12)}
.film-ctrl button svg{width:16px;height:16px}
.film-skip{position:absolute;right:28px;top:50%;transform:translateY(-50%);z-index:20}
.film-enter{position:absolute;left:50%;transform:translateX(-50%);bottom:78px;z-index:20;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  opacity:0;transition:opacity .8s;pointer-events:auto}
.film-enter.show{opacity:.8}
.film-enter:hover{color:var(--gold-light)}

/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  .film-glow--a,.film-glow--b,.mote,.pack-glow,.pack-img{animation:none!important}
  .scene{transition:opacity .35s linear,visibility .35s linear}
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .s-stellar .wrap{grid-template-columns:1fr;gap:20px;text-align:center}
  .s-stellar .copy{max-width:none;margin:0 auto}
  .s-stellar .star-mark{justify-content:center}
  .s-stellar .pack-stage{height:46vh;order:-1}
  .s-stellar .pack-img{height:42vh}
  .s-sustain .stat-grid{grid-template-columns:1fr 1fr;gap:14px}
  .s-range .pack-row{flex-wrap:wrap;gap:12px}
  .s-range .pack-row img{height:clamp(120px,22vh,180px)}
}
@media(max-width:560px){
  .film-eyebrow{font-size:10.5px;letter-spacing:.26em}
  .film-skip{right:16px}.film-ctrl{right:16px}
}