/* Royal Luxe Cutz scroll film - scenes 02-08, scrubbed by the page scroll.
   The site's own fixed nav, crown plate and type stay in charge; this only adds the movie.
   Layout rule: the picture is absolute, everything you READ sits in a normal flow column
   pinned to the bottom, so the caption and the buttons can never land on top of each other. */
#film{position:relative;z-index:1;background:#05040a}
#film .fw{position:sticky;top:0;height:100svh;overflow:hidden;background:#05040a;
  display:flex;flex-direction:column;justify-content:flex-end}
#film .layer{position:absolute;inset:0;opacity:0;will-change:opacity}
#film .layer>img,#film .layer>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform;transform-origin:center}
#film .layer.contain>img,#film .layer.contain>video{object-fit:contain}
#film .grade{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 30%,rgba(0,0,0,0) 35%,rgba(5,4,10,.62) 100%),
             linear-gradient(180deg,rgba(5,4,10,.82) 0,rgba(5,4,10,.18) 24%,rgba(5,4,10,.34) 48%,rgba(5,4,10,.95) 100%)}
#film .bars{position:absolute;left:0;right:0;height:5.2svh;background:#05040a;pointer-events:none;z-index:3}
#film .bars.t{top:0}#film .bars.b{bottom:0}
#film .rail{position:absolute;left:0;right:0;top:0;height:2px;z-index:6;background:rgba(255,255,255,.1)}
#film .rail i{display:block;height:100%;width:0;background:linear-gradient(90deg,#c99b45,#f5c542)}

/* the readable column: caption on top, controls under it, always clear of each other */
#film .stack{position:relative;z-index:4;display:flex;flex-direction:column;gap:clamp(16px,2.4svh,26px);
  padding:0 clamp(18px,5vw,64px) calc(5.2svh + clamp(18px,3svh,34px))}
#film .cap{display:grid;align-items:end;pointer-events:none}
#film .cap>div{grid-area:1/1;opacity:0;transform:translateY(14px);will-change:opacity,transform}
#film .k{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#c99b45}
#film h2{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(2.1rem,6.6vw,5.2rem);line-height:.96;letter-spacing:.01em;text-transform:uppercase;color:#fff8e7;margin:10px 0 8px;text-shadow:0 10px 44px rgba(0,0,0,.85)}
#film .ln{font-size:clamp(14.5px,1.5vw,19px);line-height:1.5;color:#d8cdb8;max-width:34ch;text-shadow:0 3px 18px rgba(0,0,0,.9)}

#film .hud{display:flex;align-items:center;justify-content:space-between;gap:12px 14px;flex-wrap:wrap}
#film .acts{display:flex;gap:10px;flex-wrap:wrap}
#film .acts a{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:13px;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
#film .acts a.gold{background:linear-gradient(180deg,#f5c542,#c99b45);color:#0b1220}
#film .acts a.ghost{border:1px solid rgba(245,197,66,.5);color:#fff8e7;background:rgba(9,7,15,.72)}
#film .meta{display:flex;align-items:center;gap:14px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#a99e8b}
#film .meta b{color:#f5c542}
#film .skip{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:11px;border:1px solid rgba(255,255,255,.2);
  color:#cbbfa8;text-decoration:none;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
#film .cue{position:absolute;left:50%;bottom:clamp(30px,5svh,48px);transform:translateX(-50%);z-index:5;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:#a99e8b;transition:opacity .4s ease}
#film .cue span{display:block;text-align:center;font-size:17px;animation:filmCue 1.7s ease-in-out infinite}
@keyframes filmCue{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}

@media(max-width:640px){
  /* phone: the controls stack under the words, full width, nothing overlapping */
  #film .stack{gap:14px;padding-bottom:calc(5.2svh + 16px)}
  #film .ln{max-width:30ch}
  #film .hud{flex-direction:column;align-items:stretch;gap:10px}
  #film .acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #film .acts a{min-height:44px;padding:0 10px;font-size:13px;justify-content:center;text-align:center}
  #film .acts a.gold{grid-column:1/-1}
  #film .meta{justify-content:space-between;font-size:11px;letter-spacing:.14em;gap:10px}
  #film .skip{min-height:38px;font-size:12px}
  #film .cue{display:none}
}
@media(prefers-reduced-motion:reduce){
  #film .layer>img,#film .layer>video{transform:none!important}
  #film .cue span{animation:none}
}