/* SN27 — the film. Palette: Tuscan sky, cypress, terracotta, lemon, cream, navy ink. */
:root{
  --cream:#FBF4E4; --navy:#2E3A4A; --sky:#9CC7DA; --blue:#2F6F9F; --olive:#6E8B4A;
  --terracotta:#C8673F; --lemon:#F2C94C; --pink:#D86A8C;
  --jost:"Jost","Futura","Helvetica Neue",Arial,sans-serif;
  --corm:"Cormorant Garamond",Georgia,serif;
  --panel-w: calc(100vh * 16 / 9);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--navy);color:var(--navy);font-family:var(--jost);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- stage & scenes ---------- */
.stage{position:fixed;inset:0;overflow:hidden;background:var(--navy)}
.scene{position:absolute;inset:0;z-index:1;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
.scene-door.is-opening{z-index:3;background:transparent}
.scene.is-active{opacity:1;visibility:visible;transition:opacity .9s ease}
.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.screen{position:absolute;inset:0;overflow:hidden}
.journey-caption,.door-caption{display:none}

/* ---------- type ---------- */
.eyebrow{font-family:var(--jost);font-weight:500;font-size:11px;letter-spacing:.55em;text-transform:uppercase;color:var(--lemon);padding-left:.55em}
.eyebrow.terracotta{color:var(--terracotta)}
.title-italic{font-family:var(--corm);font-style:italic;font-weight:400;font-size:clamp(34px,6vw,64px);line-height:1;color:var(--cream);margin:0}
.title-italic.small{font-size:clamp(28px,4.5vw,44px)}
.title-italic.tiny{font-size:22px;color:var(--navy)}
.title-italic.blue{color:var(--blue);font-size:clamp(24px,3.4vw,30px)}
.rule{width:64px;height:1px;background:var(--lemon);opacity:.9}
.chapter-line{font-family:var(--jost);font-weight:400;font-size:11px;letter-spacing:.45em;color:var(--cream);padding-left:.45em}
.chapter-sub{font-family:var(--corm);font-style:italic;font-size:18px;color:var(--sky);margin-top:-4px}

/* ---------- loading ---------- */
.scene-loading{display:grid;place-items:center}
.curtain-mark{display:flex;flex-direction:column;align-items:center;gap:22px}
.loader{width:120px;height:1px;background:rgba(251,244,228,.25);position:relative;overflow:hidden}
.loader span{position:absolute;left:-40%;top:0;width:40%;height:100%;background:var(--lemon);animation:load 1.4s ease-in-out infinite}
@keyframes load{to{left:100%}}

/* ---------- welcome ---------- */
.scene-welcome{background:#CFE3EC}
.welcome-still{z-index:1}
.welcome-video{z-index:2;opacity:0;transition:opacity .4s ease}
.welcome-video.is-on{opacity:1}
.welcome-hold{z-index:3;opacity:0;transition:opacity .4s ease}
.welcome-hold.is-on{opacity:1}
.caption{position:absolute;z-index:5;left:50%;top:max(28px,env(safe-area-inset-top));transform:translate(-50%,-10px);width:min(640px,calc(100vw - 40px));background:var(--cream);border:2px solid var(--navy);box-shadow:0 0 0 7px var(--lemon),0 0 0 9px var(--navy),0 22px 44px rgba(46,58,74,.28);padding:18px 24px 16px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;opacity:0;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.caption.is-on{opacity:1;transform:translate(-50%,0)}
.caption-line{font-family:var(--corm);font-style:italic;font-size:clamp(22px,3.6vw,32px);line-height:1.15;color:var(--navy);opacity:0;transition:opacity .7s ease}
.caption-line.is-on{opacity:1}

/* ---------- title ---------- */
.scene-title{display:grid;place-items:center;background:var(--navy)}
.card-title{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding:0 24px;opacity:0;transform:translateY(8px);transition:opacity 1.2s ease,transform 1.2s ease}
.scene-title.is-active .card-title{opacity:1;transform:none}

/* ---------- journey ---------- */
.scene-journey{background:var(--sky)}
.journey-video{z-index:1;object-position:50% 50%;transform-origin:88% 55%;transition:transform 1.3s cubic-bezier(.65,0,.35,1)}
.journey-video.is-zooming{transform:scale(1.28)}
.strip{position:absolute;left:0;top:0;height:100%;display:flex;will-change:transform;z-index:2}
.strip[hidden]{display:none}
.panel{display:block;height:100%;width:var(--panel-w);flex:0 0 auto;object-fit:cover}
.chapter-card{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--navy);opacity:0;pointer-events:none;transition:opacity .35s ease}
.chapter-card.is-on{opacity:1}
.skip{position:absolute;z-index:4;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));background:rgba(46,58,74,.82);color:var(--cream);border:1px solid rgba(251,244,228,.35);padding:10px 14px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.skip.is-on{opacity:1;transform:none;pointer-events:auto}

/* ---------- door ---------- */
.scene-door{background:#E9D7B0}
.scene-welcome .gate{bottom:max(22px,env(safe-area-inset-bottom))}
@media (min-width:960px) and (min-height:560px){.scene-welcome .gate{left:auto;right:max(32px,7vw);bottom:auto;top:54%;transform:translateY(-50%)}}
.door-stage{position:absolute;inset:0;perspective:1400px}
.door-still{z-index:1}
.door-video{z-index:2;opacity:0;transition:opacity .4s ease}
.door-video.is-on{opacity:1}
.door-open-still{z-index:3;opacity:0;transition:opacity .4s ease}
.door-open-still.is-on{opacity:1}
.door-stage.is-shaking .door-still,.door-stage.is-shaking .door-open-still{animation:knock .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes knock{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}

.leaves{position:absolute;inset:0;z-index:4;display:none;transform-style:preserve-3d}
.leaves.is-on{display:block}
.leaf{position:absolute;top:0;bottom:0;width:50%;background-image:url("../img/A2-gate-loki-v2.jpg");background-size:200% 100%;backface-visibility:hidden;transition:transform 1.7s cubic-bezier(.65,0,.35,1)}
.leaf-l{left:0;background-position:0 50%;transform-origin:left center}
.leaf-r{right:0;background-position:100% 50%;transform-origin:right center}
.leaves.is-open .leaf-l{transform:rotateY(-105deg)}
.leaves.is-open .leaf-r{transform:rotateY(105deg)}

.knock{position:absolute;z-index:5;left:50%;top:60%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;border:0;background:transparent;color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;transition:opacity .6s ease}
.knock.is-on{opacity:1}
.knock-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(251,244,228,.9);animation:ring 2.2s ease-out infinite}
.knock-ring::after{content:"";position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(251,244,228,.7)}
@keyframes ring{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.knock-label{font-size:11px;letter-spacing:.45em;text-transform:uppercase;padding-left:.45em;text-shadow:0 1px 8px rgba(46,58,74,.6)}
.knock:hover .knock-ring,.knock:focus-visible .knock-ring{animation-duration:1.2s}

.gate{position:absolute;z-index:6;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(440px,calc(100vw - 32px));background:rgba(251,244,228,.96);border:1px solid var(--navy);box-shadow:0 0 0 6px var(--lemon),0 0 0 8px var(--navy),0 18px 40px rgba(46,58,74,.35);padding:20px 22px 18px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;opacity:0;transition:opacity .6s ease,transform .6s ease}
.gate[hidden]{display:none}
.gate.is-on{opacity:1}
.gate-speech{display:flex;flex-direction:column;align-items:center;gap:6px}
.gate-speech .eyebrow{color:var(--terracotta)}
.gate-speech .title-italic{color:var(--navy)}
.gate-field{width:100%}
.gate-field input{width:100%;border:0;border-bottom:1px solid var(--navy);background:transparent;padding:10px 4px;font-family:var(--jost);font-size:18px;letter-spacing:.3em;text-align:center;text-transform:uppercase;color:var(--navy);outline:none}
.gate-field input::placeholder{letter-spacing:.08em;text-transform:none;color:rgba(46,58,74,.5)}
.btn{background:var(--navy);color:var(--cream);border:0;padding:12px 28px;font-size:11px;letter-spacing:.45em;text-transform:uppercase;padding-left:calc(28px + .45em)}
.btn[disabled]{opacity:.6;cursor:default}
.gate-msg{min-height:18px;font-family:var(--corm);font-style:italic;font-size:16px;color:var(--terracotta)}

.greeting{position:absolute;z-index:6;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;background:rgba(46,58,74,.55);opacity:0;transition:opacity .7s ease}
.greeting[hidden]{display:none}
.greeting.is-on{opacity:1}

/* ---------- garden & placard ---------- */
.scene-garden{background:#BFD8C4}
.garden-still{z-index:1;transform:scale(1.06);transition:transform 2.4s ease-out}
.scene-garden.is-active .garden-still{transform:scale(1)}
.garden-video{z-index:2;opacity:0;transition:opacity .4s ease}
.garden-video.is-on{opacity:1}
.garden-hold{z-index:3;opacity:0;transition:opacity .5s ease}
.garden-hold.is-on{opacity:1}

.placard{position:absolute;z-index:5;left:50%;top:max(28px,env(safe-area-inset-top));transform:translate(-50%,-14px);width:min(660px,calc(100vw - 40px));background:var(--cream);border:2px solid var(--navy);box-shadow:0 0 0 7px var(--lemon),0 0 0 9px var(--navy),0 22px 44px rgba(46,58,74,.28);padding:22px 26px 20px;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;opacity:0;transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.placard.is-on{opacity:1;transform:translate(-50%,0)}
.names{font-family:var(--corm);font-weight:500;font-size:clamp(34px,5.2vw,56px);letter-spacing:.14em;padding-left:.14em;line-height:1;color:var(--navy);text-transform:uppercase;white-space:nowrap}
.names .amp{font-style:italic;font-weight:400;font-size:.8em;letter-spacing:0;color:var(--pink);text-transform:none;margin:0 .08em}
.lemon-rule{display:flex;align-items:center;gap:10px}
.lemon-rule i{display:block;width:70px;height:2px;background:var(--lemon)}
.lemon-rule b{display:block;width:7px;height:7px;background:var(--terracotta);transform:rotate(45deg)}
.date{font-family:var(--jost);font-weight:500;font-size:13px;letter-spacing:.45em;padding-left:.45em;color:var(--navy)}
.schedule{font-family:var(--corm);font-style:italic;font-size:clamp(15px,2.2vw,19px);color:var(--terracotta);margin:-2px 0}
.venue{font-family:var(--jost);font-weight:400;font-size:12px;letter-spacing:.4em;padding-left:.4em;color:var(--olive)}

.ribbon{position:absolute;z-index:5;left:0;right:0;bottom:0;display:flex;align-items:stretch;height:64px;transform:translateY(100%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ribbon.is-on{transform:none}
.ribbon .bar{flex:0 0 16px}
.ribbon .bar.olive{background:var(--olive)}
.ribbon .bar.terracotta{background:var(--terracotta)}
.ribbon-inner{flex:1;background:var(--cream);border-top:2px solid var(--navy);display:flex;align-items:center;justify-content:center;gap:18px;padding:0 12px;flex-wrap:wrap}
.ribbon .dot{width:6px;height:6px;border-radius:50%;background:var(--pink)}
.linkish{background:none;border:0;padding:0;color:var(--blue);font-size:10px;letter-spacing:.4em;text-transform:uppercase}
.linkish:hover{color:var(--terracotta)}

@media (max-width:640px){
  .ribbon{height:auto;padding:10px 0}
  .ribbon-inner{gap:10px;padding:6px 10px}
  .ribbon .eyebrow{font-size:9px}
  .title-italic.tiny{font-size:18px}
  .placard{padding:16px 16px 14px}
  .knock{top:62%}
}
/* ---------- portrait: the cinema frame ----------
   Phones (and tablets held upright) show the whole 16:9 film in a framed screen on watercolor paper,
   with Loki's lines above it and the code card / placard / ribbon around it. Nothing is cropped. */
@media (orientation:portrait){
  .scene-welcome,.scene-journey,.scene-door,.scene-garden{background:var(--cream);background-image:radial-gradient(ellipse at 50% 40%,rgba(242,201,76,.16),transparent 70%),linear-gradient(0deg,rgba(46,58,74,.06),transparent 30%)}
  .scene-door.is-opening{background:transparent;background-image:none}
  .scene-door.is-opening .screen{background:transparent;box-shadow:none;border-color:transparent}
  .screen{position:absolute;left:0;right:0;inset:auto 0;top:var(--screen-y,50%);transform:translateY(-50%);aspect-ratio:16/9;height:auto;border-top:2px solid var(--navy);border-bottom:2px solid var(--navy);box-shadow:0 0 0 8px var(--lemon),0 0 0 10px var(--navy),0 18px 40px rgba(46,58,74,.22);background:var(--navy)}
  .door-stage.screen{perspective:900px}
  .fill{object-position:50% 50%}
  .journey-video{transform-origin:88% 55%}
  .caption{top:max(14px,env(safe-area-inset-top));width:calc(100vw - 32px);padding:12px 16px 10px;box-shadow:0 0 0 5px var(--lemon),0 0 0 7px var(--navy),0 14px 30px rgba(46,58,74,.22)}
  .caption-line{font-size:clamp(19px,5.4vw,26px)}
  .scene-welcome .gate{bottom:max(14px,env(safe-area-inset-bottom));width:calc(100vw - 32px);padding:14px 16px 12px;gap:8px;box-shadow:0 0 0 5px var(--lemon),0 0 0 7px var(--navy),0 14px 30px rgba(46,58,74,.22)}
  .scene-welcome .gate .title-italic.small{font-size:clamp(22px,6vw,28px)}
  .journey-caption{display:flex;position:absolute;left:0;right:0;top:calc(50% + 50vw * 9 / 16 + 34px);flex-direction:column;align-items:center;gap:6px;text-align:center;padding:0 24px}
  .door-caption{display:flex;position:absolute;left:0;right:0;top:calc(50% + 50vw * 9 / 16 + 34px);flex-direction:column;align-items:center;gap:6px;text-align:center;padding:0 24px}
  .journey-caption .eyebrow,.door-caption .eyebrow{color:var(--terracotta)}
  .journey-caption .title-italic,.door-caption .title-italic{color:var(--navy)}
  .journey-caption .chapter-sub,.door-caption .chapter-sub{color:var(--olive)}
  .scene-door.is-opening .door-caption{opacity:0;transition:opacity .6s ease}
  .skip{right:50%;transform:translate(50%,6px);bottom:max(18px,env(safe-area-inset-bottom))}
  .skip.is-on{transform:translate(50%,0)}
  .knock{top:62%}
  .placard{top:max(14px,env(safe-area-inset-top));width:calc(100vw - 32px);padding:14px 14px 12px;gap:7px;box-shadow:0 0 0 5px var(--lemon),0 0 0 7px var(--navy),0 14px 30px rgba(46,58,74,.22)}
  .placard .eyebrow{font-size:10px}
  .names{font-size:clamp(30px,8.6vw,44px)}
  .schedule{font-size:15px}
  .ribbon{height:auto;padding:0}
  .ribbon-inner{flex-direction:column;gap:8px;padding:12px 10px calc(12px + env(safe-area-inset-bottom))}
  .ribbon .dot{display:none}
}
@media (prefers-reduced-motion:reduce){
  .leaf,.placard,.ribbon,.garden-still{transition-duration:.01s}
}