/* PrimeCircle cinematic intro: an overlay on top of the homepage, built by intro.js.
   Without JS none of this renders and the site at / is untouched. */

/* While the intro is pending or open: lock scroll and cover the site so it never flashes. */
html.intro-on,html.intro-on body{overflow:hidden}
html.intro-on body::before{content:"";position:fixed;inset:0;z-index:999;background:var(--void)}

.intro{position:fixed;inset:0;z-index:1000;background:var(--void);color:var(--text);overflow:hidden;
  container-type:size;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
  transition:opacity .7s var(--ease),visibility 0s linear .7s;
  /* The cover-fitted 16:9 art box, in the same units everywhere so captions and hotspots track the image. */
  --aw:max(100cqw,177.778cqh);--ah:max(100cqh,56.25cqw);
  --ax:calc((100cqw - var(--aw)) / 2);--ay:calc((100cqh - var(--ah)) / 2)}
.intro:focus{outline:none}
.intro.is-closing{opacity:0;visibility:hidden}
.intro button,.intro a{cursor:pointer}

.intro-art{position:absolute;left:var(--ax);top:var(--ay);width:var(--aw);height:var(--ah);pointer-events:none}
.intro-art img,.intro-art video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.intro-art img{opacity:0;transition:opacity .9s var(--ease)}
.intro-art img.on{opacity:1}
.intro-art video{opacity:0;background:transparent}
.intro-art video.on{opacity:1}
.intro-art video.out{transition:opacity .6s var(--ease)}
.intro:not(.reduced) .intro-art img.on{animation:introBreath 11s ease-in-out infinite}
@keyframes introBreath{0%,100%{filter:brightness(.97) saturate(.97)}50%{filter:brightness(1.07) saturate(1.1)}}

.intro-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,10,.45) 0,transparent 14%,transparent 82%,rgba(5,7,10,.5) 100%)}

/* Top bar: progress in the middle, skip on the right */
.intro-top{position:absolute;top:max(14px,env(safe-area-inset-top));right:calc(max(16px,env(safe-area-inset-right)) + 134px);display:flex;justify-content:flex-end;pointer-events:none}
.intro-prog{display:flex;align-items:center;gap:4px;padding:4px 6px;border-radius:999px;background:rgba(5,7,10,.55);
  border:1px solid var(--hair);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:auto}
.intro-count{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--dim);padding:0 8px 0 10px;min-width:62px}
.intro-dots{display:flex;align-items:center}
.intro-dot{width:24px;height:24px;border:0;padding:0;background:transparent;display:grid;place-items:center;border-radius:50%}
.intro-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(143,163,176,.35);transition:background .3s,transform .3s,box-shadow .3s}
.intro-dot.seen::before{background:rgba(24,191,255,.45)}
.intro-dot[aria-current="step"]::before{background:var(--cyan);transform:scale(1.3);box-shadow:0 0 10px rgba(24,191,255,.8)}
.intro-step{width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--soft);font:400 16px/1 var(--sans);display:grid;place-items:center}
.intro-step:hover{background:rgba(24,191,255,.12)}
.intro-step:disabled{opacity:.3;cursor:default;background:transparent}

.intro-skip{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));min-height:40px;padding:0 16px;
  border-radius:999px;border:1px solid rgba(143,163,176,.35);background:rgba(5,7,10,.6);color:var(--text);
  font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.intro-skip:hover{border-color:var(--soft);color:var(--soft)}

/* Caption: placed per scene in art coordinates (--x, --y, --w as fractions of the art box). */
.intro-cap{position:absolute;left:clamp(16px,calc(var(--ax) + var(--aw) * var(--x,.06)),calc(100cqw - 16px - var(--aw) * var(--w,.28)));top:calc(var(--ay) + var(--ah) * var(--y,.7));
  width:calc(var(--aw) * var(--w,.28));padding:calc(var(--aw) * .009 * var(--fs,1)) calc(var(--aw) * .011 * var(--fs,1));border-radius:12px;
  background:linear-gradient(180deg,rgba(5,7,10,.5),rgba(5,7,10,.72));border:1px solid var(--hair);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:default;text-align:var(--align,left);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.intro-cap.hide{opacity:0;transform:translateY(8px)}
.intro-label{margin:0 0 .55em;font:500 clamp(10px,calc(var(--aw) * .0068 * var(--fs,1)),13px)/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.intro-title{margin:0 0 .3em;font:400 clamp(22px,calc(var(--aw) * .021 * var(--fs,1)),44px)/1.08 var(--display);letter-spacing:-.015em;color:#F4FBFF}
.intro-line{margin:0;font:400 clamp(13px,calc(var(--aw) * .0094 * var(--fs,1)),18px)/1.5 var(--sans);color:#C9D7E0}
.intro-members{display:none;margin-top:.8em;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-decoration:none}
.intro-members:hover{color:var(--soft)}
.intro[data-scene="7"] .intro-members{display:inline-block}

.intro[data-scene="1"]{--x:.06;--y:.72;--w:.29}
.intro[data-scene="2"]{--x:.045;--y:.79;--w:.3}
.intro[data-scene="3"]{--x:.355;--y:.035;--w:.29;--align:center}
.intro[data-scene="4"]{--x:.19;--y:.006;--w:.22;--fs:.82}
.intro[data-scene="5"]{--x:.6;--y:.073;--w:.325}
.intro[data-scene="6"]{--x:.29;--y:.006;--w:.3;--fs:.82}
.intro[data-scene="7"]{--x:.05;--y:.66;--w:.2}

.intro-hint{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;white-space:nowrap;
  font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);transition:opacity .4s;pointer-events:none}
.intro:not([data-scene="1"]) .intro-hint{opacity:0}

/* Scene 7: real buttons laid exactly over the two buttons painted in the art. */
.intro-hot{position:absolute;top:calc(var(--ay) + var(--ah) * .8463);height:calc(var(--ah) * .0741);width:calc(var(--aw) * .224);
  border:1px solid transparent;border-radius:calc(var(--aw) * .004);background:transparent;padding:0;color:transparent;
  transition:box-shadow .25s,border-color .25s,background .25s}
.intro-hot.enter{left:calc(var(--ax) + var(--aw) * .263)}
.intro-hot.contact{left:calc(var(--ax) + var(--aw) * .5109);width:calc(var(--aw) * .2214)}
.intro-hot:hover{border-color:rgba(114,220,255,.7);background:rgba(24,191,255,.08);box-shadow:0 0 28px rgba(24,191,255,.35)}
.intro-hot:focus-visible{outline:2px solid var(--soft);outline-offset:4px}
.intro:not([data-scene="7"]) .intro-hot{visibility:hidden}

/* Fallback buttons: shown when the painted buttons are cropped out of view (phones, tall windows). */
.intro-cta{display:none;position:absolute;left:0;right:0;padding:0 16px;top:calc(var(--ay) + var(--ah) * .838);gap:10px;cursor:default;background:linear-gradient(90deg,rgba(5,7,10,.96),rgba(5,7,10,.9) 50%,rgba(5,7,10,.96))}
.intro-cta .btn{flex:1 1 0;justify-content:center;min-height:max(50px,calc(var(--ah) * .088));padding:0 14px;font-size:15px}
.intro-cta .btn-ghost{background:rgba(5,7,10,.94)}
.intro.fallback[data-scene="7"] .intro-cta{display:flex}
.intro.fallback .intro-hot{visibility:hidden}

/* Phone and tall windows: captions leave the art and sit in a sheet at the top or bottom. */
@media (max-width:760px),(max-aspect-ratio:5/4){
  .intro-top{top:auto;bottom:max(10px,env(safe-area-inset-bottom))}
  .intro-skip{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));min-height:38px;padding:0 14px}
  .intro-hint{bottom:auto;top:max(25px,env(safe-area-inset-top));left:16px;transform:none}
  .intro-cap{left:16px;right:16px;width:auto;top:auto;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 52px);padding:14px 16px 15px;text-align:left;
    background:linear-gradient(180deg,rgba(5,7,10,.66),rgba(5,7,10,.84))}
  .intro-cap.at-top{top:calc(max(12px,env(safe-area-inset-top)) + 50px);bottom:auto}
  .intro-label{font-size:10.5px}
  .intro-title{font-size:26px}
  .intro-line{font-size:14.5px}
  .intro[data-scene="7"] .intro-cap{bottom:calc(100cqh - var(--ay) - var(--ah) * .838 + 12px)}
  .intro[data-scene="7"] .intro-skip{display:none} /* Enter does the same; keeps the painted wordmark clear */
  .intro-top{right:0;left:0;justify-content:center}
  /* touch: every control at least 44 px; the dots carry the count, so the number goes */
  .intro-skip{min-height:44px}
  .intro-step{width:44px;height:44px}
  .intro-dot{width:30px;height:44px}
  .intro-count{display:none}
  .intro-cap{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 60px)}
}

/* Phones in landscape: little height, so captions and the scene 7 buttons sit on the bottom edge,
   clear of the notch and the home bar. */
@media (max-height:500px) and (min-aspect-ratio:5/4){
  .intro-top{top:max(8px,env(safe-area-inset-top));bottom:auto}
  .intro-skip{top:max(8px,env(safe-area-inset-top));min-height:44px}
  .intro[data-scene="7"] .intro-cap{bottom:max(12px,env(safe-area-inset-bottom))}
  .intro-step{width:44px;height:44px}
  .intro-dot{width:30px;height:44px}
  .intro-count{display:none}
  .intro-hint{display:none}
  .intro-cap,.intro-cap.at-top{top:auto;left:max(16px,env(safe-area-inset-left));right:auto;bottom:max(12px,env(safe-area-inset-bottom));
    width:min(46%,380px);padding:10px 14px 12px;text-align:left}
  .intro-title{font-size:22px}
  .intro-line{font-size:14px}
  .intro-cta{top:auto;bottom:max(12px,env(safe-area-inset-bottom));left:auto;right:max(16px,env(safe-area-inset-right));padding:0;width:min(48%,400px);background:none}
  .intro-cta .btn{min-height:48px}
}

/* Reduced motion: no videos are created, scenes only cross-fade. */
.intro.reduced .intro-art img{transition:opacity .45s linear}
@media (prefers-reduced-motion:reduce){
  .intro,.intro-cap,.intro-dot::before{transition-duration:.01s}
  .intro-art img.on{animation:none}
}

/* "Replay intro" link that intro.js adds to the footer once the intro has been seen. */
.intro-replay{background:none;border:0;padding:0;font:inherit;color:var(--dim);cursor:pointer;text-decoration:none}
.intro-replay:hover{color:var(--text)}