/* NEW ERA 137 — studio opening (≈16.7s, first visit of a session). Every scene cross-fades into the next.
   0.5 'NEW ERA 137 presents' · 1.0 projector warms up · 2.5 leader 3-2-1 · 5.9 reel accelerates · 8.0 three film glimpses
   11.0 soft burn · 11.7 title · 13.8 studio mark · 15.3 the mark glides into the header and the hero opens. */
@property --iris{syntax:'<percentage>';inherits:false;initial-value:0%}

.opening{position:fixed;inset:0;z-index:300;overflow:hidden;pointer-events:none;color:var(--ivory);font-family:var(--ui);animation:op-done 16.7s linear forwards}
html:not(.has-intro) .opening:not(.is-leaving){display:none}
.opening.is-leaving{animation:none;opacity:0;transition:opacity .5s var(--ease)}
@keyframes op-done{0%,99%{visibility:visible}100%{visibility:hidden}}
.opening>*,.op-stage>*{position:absolute}

/* Dark room, opened by an iris at the end. */
.op-backdrop{inset:0;background:radial-gradient(ellipse 90% 80% at 50% 50%,#0a1924 0%,#06131d 55%,#03080c 100%);
  -webkit-mask-image:radial-gradient(circle at 50% 46%,transparent calc(var(--iris) - 22%),#000 var(--iris));mask-image:radial-gradient(circle at 50% 46%,transparent calc(var(--iris) - 22%),#000 var(--iris));
  animation:op-iris 1.4s cubic-bezier(.45,0,.2,1) 15.3s both,op-fade .5s ease 16.2s forwards}
@keyframes op-iris{from{--iris:0%}to{--iris:165%}}
@keyframes op-fade{to{opacity:0}}
.op-grain{inset:-50%;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");animation:op-grain .6s steps(3) 28,op-fade .9s ease 15.3s forwards}
@keyframes op-grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}}
.op-vignette{inset:0;background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 50%,rgba(0,0,0,.7) 100%);animation:op-fade .9s ease 15.3s forwards}

/* ---------- Projector (1.0 – 8.8): warms up gently, no hard flicker ---------- */
.op-stage{inset:0;animation:op-stage-out .9s ease-in-out 8s forwards}
@keyframes op-stage-out{to{opacity:0}}
.op-projector{position:absolute;left:calc(clamp(120px,11vw,190px) * -1);top:50%;width:clamp(220px,21vw,360px);aspect-ratio:1;transform:translateY(-50%);opacity:0;animation:op-power 8.8s ease-in-out both}
.op-reel{width:100%;height:100%;fill:none;stroke:rgba(217,181,109,.4);stroke-width:2;filter:blur(1.2px);animation:op-spin 8.8s cubic-bezier(.4,0,.9,.6) both}
.op-reel circle:first-child{fill:rgba(10,24,34,.9)}
.op-reel g circle{fill:#04090e}
@keyframes op-spin{to{transform:rotate(2160deg)}}
.op-lens{position:absolute;right:-5%;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:radial-gradient(circle,#fffaf0 0%,#f3d79f 35%,rgba(231,199,126,0) 70%);box-shadow:0 0 50px 18px rgba(243,215,159,.45)}
.op-beam{left:clamp(60px,9vw,160px);top:50%;width:115vw;height:120vh;transform:translateY(-50%);filter:blur(18px);opacity:0;animation:op-power 8.8s ease-in-out both}
.op-beam:before{content:'';position:absolute;inset:0;clip-path:polygon(0 47%,100% 0,100% 100%,0 53%);background:radial-gradient(ellipse 100% 55% at 0% 50%,rgba(255,243,220,.5) 0%,rgba(243,215,159,.2) 28%,rgba(231,199,126,.06) 62%,transparent 88%)}
@keyframes op-power{0%,11%{opacity:0}22%{opacity:.8}26%{opacity:.62}31%,68%{opacity:.85}86%{opacity:1}100%{opacity:0}}
.op-beam i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff4dc;opacity:0;animation:op-dust 6.5s linear 1.4s both}
.op-beam i:nth-child(1){left:8%;top:49%}.op-beam i:nth-child(2){left:16%;top:44%;animation-delay:1.1s}.op-beam i:nth-child(3){left:24%;top:55%;animation-delay:1s}.op-beam i:nth-child(4){left:31%;top:38%;animation-delay:1.3s}.op-beam i:nth-child(5){left:38%;top:60%;animation-delay:1.2s}.op-beam i:nth-child(6){left:46%;top:33%;animation-delay:1.5s}.op-beam i:nth-child(7){left:53%;top:66%;animation-delay:1.05s}.op-beam i:nth-child(8){left:61%;top:42%;animation-delay:1.4s}.op-beam i:nth-child(9){left:69%;top:28%;animation-delay:1.25s}.op-beam i:nth-child(10){left:77%;top:58%;animation-delay:1.35s}
@keyframes op-dust{0%{opacity:0;transform:translate(0,0)}20%{opacity:.9}80%{opacity:.5}100%{opacity:0;transform:translate(60px,-40px)}}

/* ---------- Leader 3-2-1 (2.5 – 6.3), each number ~1s with overlapping fades ---------- */
.op-leader{left:50%;top:50%;width:min(64vh,82vw);aspect-ratio:16/10;transform:translate(-50%,-50%);opacity:0;animation:op-leader 3.8s ease-in-out 2.5s both}
@keyframes op-leader{0%{opacity:0;transform:translate(-50%,-50%) scale(1.04)}13%,87%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.96)}}
.op-gate{position:absolute;inset:0;border-radius:18px;border:1px solid rgba(244,240,231,.16);background:radial-gradient(ellipse at 50% 50%,rgba(40,52,60,.55),rgba(8,20,30,.85) 70%);box-shadow:inset 0 0 80px rgba(0,0,0,.7)}
.op-gate:before,.op-gate:after{content:'';position:absolute;background:rgba(244,240,231,.14)}
.op-gate:before{left:0;right:0;top:50%;height:1px}.op-gate:after{top:0;bottom:0;left:50%;width:1px}
.op-dial{position:absolute;left:50%;top:50%;width:76%;aspect-ratio:1;max-height:118%;transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(244,240,231,.5);box-shadow:0 0 0 14px rgba(244,240,231,.05),inset 0 0 0 10px rgba(6,19,29,.55),inset 0 0 0 11.5px rgba(244,240,231,.3);overflow:hidden}
.op-dial{width:auto;height:84%}
.op-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(244,240,231,.22),rgba(244,240,231,0) 28%,transparent 100%);animation:op-sweep 1s linear 2.7s 3 both}
@keyframes op-sweep{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.op-count{position:absolute;inset:0;display:grid;place-items:center}
.op-count b{grid-area:1/1;font-family:var(--display);font-weight:500;font-size:min(30vh,38vw);line-height:1;color:var(--gold-2);text-shadow:0 0 40px rgba(231,199,126,.35);opacity:0;animation:op-num 1.2s ease-in-out forwards}
.op-count b:nth-child(1){animation-delay:2.65s}.op-count b:nth-child(2){animation-delay:3.65s}.op-count b:nth-child(3){animation-delay:4.65s}
@keyframes op-num{0%{opacity:0;transform:scale(1.05)}18%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.97)}}

/* ---------- Reel accelerates (5.8 – 8.4) ---------- */
.op-strip{left:0;top:50%;width:100%;transform:translateY(-50%) rotate(-4deg);opacity:0;animation:op-strip-in .8s ease-out 5.8s both}
@keyframes op-strip-in{to{opacity:1}}
.op-frames{display:flex;gap:10px;width:max-content;padding:26px 10px;background:#0b0a08;box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 1px 0 rgba(217,181,109,.4),inset 0 -1px 0 rgba(217,181,109,.4);will-change:transform;animation:op-run 2.6s cubic-bezier(.45,0,.85,.55) 5.8s both;position:relative}
.op-frames:before,.op-frames:after{content:'';position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,transparent 0 8px,rgba(244,234,210,.75) 8px 20px,transparent 20px 28px)}
.op-frames:before{top:8px}.op-frames:after{bottom:8px}
.op-frames img{height:clamp(110px,24vh,250px);aspect-ratio:16/9;width:auto;object-fit:cover;border-radius:3px;filter:saturate(.85) contrast(1.05)}
.op-ghost{position:absolute;top:0;left:0;filter:blur(9px);opacity:0;animation:op-run 2.6s cubic-bezier(.45,0,.85,.55) 5.8s both,op-ghost 2.6s ease-in 5.8s both}
@keyframes op-run{from{transform:translateX(15vw)}to{transform:translateX(calc(-100% + 40vw))}}
@keyframes op-ghost{0%,45%{opacity:0}100%{opacity:.6}}

/* ---------- Film glimpses (8.0 – 11.3): slow dissolves with a gentle push-in ---------- */
.op-shots{inset:0;opacity:0;animation:op-shots-on 3.4s linear 7.95s both}
@keyframes op-shots-on{0%{opacity:0}2%,96%{opacity:1}100%{opacity:0}}
.op-shots:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 50%,transparent 40%,rgba(3,8,12,.75) 100%),linear-gradient(0deg,rgba(3,8,12,.4),transparent 40%)}
.op-shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:contrast(1.08) saturate(.92);animation:op-shot 1.3s ease-in-out both}
.op-shots img:nth-child(1){animation-delay:8s;object-position:50% 60%}.op-shots img:nth-child(2){animation-delay:9s;object-position:40% 50%}.op-shots img:nth-child(3){animation-delay:10s;animation-duration:1.35s;object-position:60% 40%}
@keyframes op-shot{0%{opacity:0;transform:scale(1.08)}22%{opacity:1}80%{opacity:1}100%{opacity:0;transform:scale(1.01)}}

/* ---------- Soft film burn (11.0 – 12.1) ---------- */
.op-burn{inset:0;opacity:0;animation:op-burn 1.1s ease-in-out 11s both}
@keyframes op-burn{0%{opacity:0}40%{opacity:.85}100%{opacity:0}}
.op-burn-core{position:absolute;left:50%;top:50%;width:60vmax;height:60vmax;margin:-30vmax 0 0 -30vmax;border-radius:50%;background:radial-gradient(circle,#fffdf7 0%,#ffeac2 22%,#f2a650 42%,rgba(196,88,24,.55) 58%,transparent 72%);animation:op-core 1.1s cubic-bezier(.3,.6,.3,1) 11s both}
@keyframes op-core{from{transform:scale(.3)}to{transform:scale(2.6)}}
.op-leak{position:absolute;top:-10%;bottom:-10%;left:-10%;width:45%;background:linear-gradient(90deg,rgba(232,120,40,.85),rgba(255,190,110,.45) 45%,transparent);filter:blur(30px)}
.op-leak-r{left:auto;right:-10%;transform:scaleX(-1)}
.op-flash{inset:0;background:#fffaf0;opacity:0;animation:op-flash 1s ease-in-out 11.15s both}
@keyframes op-flash{0%{opacity:0}35%{opacity:.5}100%{opacity:0}}

/* ---------- Title (11.7 – 14.1) ---------- */
.op-title{left:50%;top:50%;width:min(92vw,1300px);margin:0;transform:translate(-50%,-50%);text-align:center;font-family:var(--display);font-weight:500;font-size:clamp(34px,5.4vw,104px);line-height:1.05;text-transform:uppercase;text-wrap:balance;color:var(--ivory);text-shadow:0 0 60px rgba(231,199,126,.25);opacity:0;animation:op-title 2.4s cubic-bezier(.45,0,.25,1) 11.7s both}
@keyframes op-title{0%{opacity:0;letter-spacing:.34em;filter:blur(10px);transform:translate(-50%,-50%) scale(1.04)}32%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}82%{opacity:1;letter-spacing:.1em}100%{opacity:0;letter-spacing:.09em;filter:blur(5px);transform:translate(-50%,-50%) scale(.98)}}

/* ---------- Studio mark → header logo (13.8 – 16.6) ----------
   Placed exactly over the header wordmark by app.js (--lx/--ly/--lw), started large in the centre (--dx/--dy/--k). */
.op-logo{position:fixed;left:var(--lx,calc(50vw - 63px));top:var(--ly,30px);width:var(--lw,126px);margin:0;color:var(--ivory);transform-origin:50% 50%;opacity:0;z-index:2;animation:op-logo 2.8s cubic-bezier(.55,0,.25,1) 13.8s both}
@keyframes op-logo{
  0%{opacity:0;transform:translate(var(--dx,0),var(--dy,40vh)) scale(calc(var(--k,3) * 1.05));filter:blur(8px);text-shadow:0 0 24px rgba(231,199,126,.6)}
  25%,55%{opacity:1;transform:translate(var(--dx,0),var(--dy,40vh)) scale(var(--k,3));filter:blur(0);text-shadow:0 0 18px rgba(231,199,126,.45)}
  100%{opacity:1;transform:none;filter:blur(0);text-shadow:0 0 0 rgba(231,199,126,0)}}
.op-logo small i{transform:scaleX(0);animation:op-line 1s cubic-bezier(.22,.61,.36,1) 14.3s both}
@keyframes op-line{to{transform:scaleX(1)}}

/* ---------- 'NEW ERA 137 presents' (0.5 – 2.6) ---------- */
.op-presents{left:50%;top:50%;width:90vw;margin:0;transform:translate(-50%,-50%);text-align:center;font-family:var(--ui);font-size:clamp(11px,1vw,14px);font-weight:500;letter-spacing:.5em;text-transform:uppercase;color:var(--gold-2);opacity:0;animation:op-presents 2.1s ease-in-out .5s both}
@keyframes op-presents{0%{opacity:0;letter-spacing:.62em}35%,70%{opacity:1}100%{opacity:0;letter-spacing:.46em}}

/* ---------- Skip ---------- */
.op-skip{top:22px;right:var(--gx);z-index:5;pointer-events:auto;font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,240,231,.72);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:10px 18px;opacity:0;animation:op-skip-in .8s ease 1.2s both,op-fade .5s ease 15.1s forwards;transition:color .3s,border-color .3s,background .3s}
@keyframes op-skip-in{to{opacity:1}}
.op-skip:hover{color:var(--ivory);border-color:rgba(231,199,126,.55);background:rgba(231,199,126,.08)}
[dir=rtl] .op-skip{right:auto;left:var(--gx)}

/* ---------- Mobile: same story, lighter layers ---------- */
@media(max-width:760px){
  .op-projector{width:150px;left:-95px}
  .op-beam{filter:blur(12px)}
  .op-leader{width:88vw}
  .op-ghost{display:none}
  .op-frames img{height:clamp(96px,20vh,170px)}
  .op-skip{top:16px}
}

/* ---------- Reduced motion: a still studio card, then straight in ---------- */
.intro-lite .opening,.intro-lite .opening *{animation:none!important}
.intro-lite .op-stage,.intro-lite .op-shots,.intro-lite .op-burn,.intro-lite .op-flash,.intro-lite .op-grain,.intro-lite .op-skip,.intro-lite .op-presents{display:none}
.intro-lite .op-title{opacity:1;top:38%;font-size:clamp(28px,4.6vw,64px);letter-spacing:.1em}
.intro-lite .op-logo{opacity:1;transform:translate(var(--dx,0),calc(var(--dy,40vh) + 60px)) scale(calc(var(--k,3) * .7))}
.intro-lite .op-logo small i{transform:none}