/* Opening trailer. One unit u is 1% of the stage width, so every size scales with the film. */
.intro { --u:calc(min(100vw, 177.7778vh) / 100); --u:calc(min(100vw, 177.7778svh) / 100); --band:#0e1934;
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center; background:#080519; }
.intro.hidden { display:none !important; }
.intro-stage { position:relative; width:calc(var(--u) * 100); height:calc(var(--u) * 56.25); overflow:hidden; background:var(--band); color:var(--paper); }
.intro-picture { position:absolute; left:0; top:0; width:100%; height:calc(var(--u) * 46.5); overflow:hidden; background:var(--band); }
.intro-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .55s ease; }
.intro-img.on { opacity:1; }
#introA { transform-origin:46% 40%; }
#introA.zoom { transform:scale(1.07); transition:opacity .55s ease, transform 3.7s linear; }
.intro-dim { position:absolute; inset:0; background:rgba(8,5,25,.62); opacity:0; transition:opacity .5s ease; }
.intro.dimmed .intro-dim { opacity:1; }

.intro-panels { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:calc(var(--u) * 2); }
.intro-panel { margin:0; width:calc(var(--u) * 29); height:calc(var(--u) * 29); overflow:hidden; border:calc(var(--u) * .45) solid var(--gold); border-radius:calc(var(--u) * 1.6);
  box-shadow:0 calc(var(--u) * 1.2) calc(var(--u) * 3) rgba(0,0,0,.55); opacity:0; transform:translateY(calc(var(--u) * 2.5)) rotate(var(--r)) scale(.88); transition:opacity .4s ease, transform .5s cubic-bezier(.2,1.3,.4,1); }
.intro-panel.on { opacity:1; transform:rotate(var(--r)) scale(1); }
.intro-panel img { width:100%; height:100%; display:block; object-fit:cover; transform:scale(1.12); }

/* Ten empty slots drawn over the tile in Lumi's hand. They light one by one. */
.intro-frame { position:absolute; left:44.1%; top:61.2%; width:19.8%; height:23.1%; display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(2,1fr); gap:calc(var(--u) * .5); pointer-events:none; }
.intro-cell { border-radius:calc(var(--u) * .7); background:rgba(255,212,92,0); box-shadow:none; transition:background .3s ease, box-shadow .3s ease; }
.intro-cell.on { background:radial-gradient(circle,#fff6cf 0%,rgba(255,212,92,.92) 55%,rgba(67,220,193,.6) 100%); box-shadow:0 0 calc(var(--u) * 1.6) rgba(255,212,92,.9), 0 0 calc(var(--u) * 3.2) rgba(67,220,193,.55); }

.intro-say { position:absolute; left:calc(var(--u) * 6); margin:0; opacity:0; transform:translateY(calc(var(--u) * 1.2)); transition:opacity .5s ease, transform .5s ease;
  font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif; font-weight:900; line-height:1; text-shadow:0 calc(var(--u) * .3) calc(var(--u) * 1.4) rgba(0,0,0,.7); }
.intro-say.on { opacity:1; transform:none; }
.intro-say1 { top:calc(var(--u) * 15); font-size:calc(var(--u) * 5.4); color:var(--paper); }
.intro-say2 { top:calc(var(--u) * 21.5); font-size:calc(var(--u) * 4.2); color:var(--gold); }

.intro-title { position:absolute; left:0; right:0; top:calc(var(--u) * 1.6); margin:0; text-align:center; font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif; font-weight:900;
  font-size:calc(var(--u) * 6.4); letter-spacing:.1em; color:var(--gold); opacity:0; transform:scale(.92); transition:opacity .8s ease, transform .9s cubic-bezier(.2,1.2,.4,1);
  text-shadow:0 0 calc(var(--u) * 2.4) rgba(255,212,92,.55), 0 calc(var(--u) * .35) 0 #7a4a12, 0 calc(var(--u) * .8) calc(var(--u) * 1.6) rgba(0,0,0,.7); }
.intro-title.on { opacity:1; transform:none; }

.intro-flash { position:absolute; inset:0; background:#f3eeff; opacity:0; pointer-events:none; }
.intro-stage.shake { animation:introShake .5s linear; }
@keyframes introShake { 0%,100% { transform:none; } 15% { transform:translate(-.6%,.4%); } 35% { transform:translate(.7%,-.3%); } 55% { transform:translate(-.4%,-.3%); } 75% { transform:translate(.3%,.3%); } }

.intro-band { position:absolute; left:0; bottom:0; width:100%; height:calc(var(--u) * 9.75); display:flex; align-items:center; justify-content:center; background:var(--band); }
.intro-caption { margin:0; padding:0 4%; text-align:center; font-size:max(14px, calc(var(--u) * 2.7)); font-weight:700; letter-spacing:.01em; color:var(--paper); }

.intro-play { position:absolute; left:50%; bottom:calc(var(--u) * 1.4); transform:translateX(-50%) scale(.9); min-height:48px; padding:0 calc(var(--u) * 4); border:0; border-radius:18px; cursor:pointer;
  font-size:max(18px, calc(var(--u) * 2.6)); font-weight:900; color:#140d35; background:linear-gradient(135deg,var(--gold),#ffac5c); box-shadow:0 6px 0 #b95e44, 0 12px 26px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .5s ease, transform .5s ease; }
.intro-play span { margin-left:10px; }
.intro-play.on { opacity:1; pointer-events:auto; transform:translateX(-50%) scale(1); animation:introPulse 1.6s ease-in-out .6s infinite; }
@keyframes introPulse { 0%,100% { box-shadow:0 6px 0 #b95e44, 0 0 0 0 rgba(255,212,92,.55); } 50% { box-shadow:0 6px 0 #b95e44, 0 0 0 14px rgba(255,212,92,0); } }

.intro-skip { position:absolute; right:calc(var(--u) * 1.6); top:calc(var(--u) * 1.4); z-index:5; font-size:15px; }
.intro-gate { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(var(--u) * 1.4); text-align:center;
  background:linear-gradient(rgba(8,5,25,.55), rgba(8,5,25,.82)), url("assets/intro/intro-a.jpg") center top/100% auto no-repeat var(--band); }
.intro-gate .eyebrow { margin:0; font-size:max(11px, calc(var(--u) * 1.4)); }
.intro-gate h2 { margin:0 0 calc(var(--u) * 1.4); font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif; font-size:calc(var(--u) * 8); letter-spacing:.1em; color:var(--gold); text-shadow:0 0 calc(var(--u) * 2.4) rgba(255,212,92,.5); }
.intro-quiet { min-height:48px; padding:0 18px; border:0; background:none; color:rgba(255,250,240,.82); font-size:16px; text-decoration:underline; cursor:pointer; }

.intro-turn { display:none; margin:6px 0 0; font-size:14px; color:rgba(255,250,240,.7); }
@media (orientation:portrait) {
  .intro-gate { position:fixed; inset:0; gap:14px; padding:24px; background:linear-gradient(rgba(8,5,25,.5), rgba(8,5,25,.86)), url("assets/intro/intro-a.jpg") 46% 38%/auto 72% no-repeat var(--band); }
  .intro-gate h2 { font-size:clamp(32px, 11vw, 56px); }
  .intro-gate .eyebrow { font-size:12px; }
  .intro-turn { display:block; }
  .intro-skip { position:fixed; top:auto; bottom:16px; right:16px; }
}
@media (max-height:420px) { .intro-gate { gap:6px; } .intro-gate .primary { min-height:48px; font-size:16px; } }
@media (prefers-reduced-motion: reduce) {
  #introA.zoom { transform:none; transition:opacity .55s ease; }
  .intro-play.on { animation:none; }
  .intro-panel, .intro-title { transition:opacity .4s ease; transform:none; }
}