/* Desk-to-monitor opening. The photo sits behind #site; #site is projected into the monitor. */
/* #site stacks above the photo only while the intro runs; afterwards the nav must stay above the menu sheet */
html.intro-on #site{position:relative;z-index:1}
html.intro-on{overflow:hidden}
/* until the desk photo is decoded the frame stays black: no floating screen, no half-drawn room */
.intro__scene,html.intro-on #site,.intro__skip{transition:opacity .45s var(--ease)}
html.intro-wait .intro__scene,html.intro-wait #site,html.intro-wait .intro__skip{opacity:0}
html.intro-on #site{pointer-events:none;will-change:transform;backface-visibility:hidden}
html.intro-hold .hero__title span,html.intro-hold .hero__aside,html.intro-hold .af{animation-play-state:paused}
html.intro-hold #ohero > *,html.intro-hold #oread{opacity:0!important}
#ohero > *{transition:opacity .9s var(--ease)}
.intro{position:fixed;inset:0;z-index:0;background:#000;overflow:hidden;cursor:pointer}
.intro__scene{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;backface-visibility:hidden}
.intro__img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.intro__blur{opacity:0}
.intro__screen{position:absolute;inset:0;background:#000}
.intro__light{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(52,100,255,.26),rgba(40,90,255,.09) 58%,rgba(40,90,255,0) 100%);mix-blend-mode:screen;pointer-events:none;opacity:.25}
.intro__vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 92% at 52% 44%,rgba(0,0,0,0) 52%,rgba(0,0,0,.6) 100%)}
.intro__skip{position:fixed;right:var(--gutter);bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:100;display:flex;flex-direction:column;align-items:flex-end;gap:9px;padding:8px 0 8px 12px;border:0;background:none;color:rgba(255,255,255,.7);font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;animation:rise .6s .3s var(--ease) both}
.intro__skip i{display:block;width:96px;height:1px;background:rgba(255,255,255,.2)}
.intro__skip b{display:block;height:100%;background:var(--blue-ink);transform-origin:left center;transform:scaleX(0)}
.intro__skip:hover,.intro__skip:focus-visible{color:#fff}
/* what the monitor shows before it becomes Vire: fragments, then relationships, then order */
.iui{position:fixed;left:0;top:0;width:100%;height:100vh;height:100svh;z-index:66;pointer-events:none}
.iui__links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.iui__links path{fill:none;stroke:var(--blue-chart);stroke-width:1.6;stroke-linecap:round}
.iui__p{position:absolute;left:0;top:0;display:flex;flex-direction:column;gap:5px;padding:14px 16px;border:1px solid var(--line-2);border-radius:10px;background:rgba(9,9,11,.94);box-shadow:0 22px 50px -22px #000;transition:border-color .35s,box-shadow .35s,background .35s;will-change:transform,opacity}
.iui__p.is-hot{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 22px 60px -22px rgba(0,87,255,.5);background:#08112a}
.iui__l{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.iui__p.is-hot .iui__l{color:var(--blue-ink)}
.iui__v{font-size:25px;font-weight:500;letter-spacing:-.02em;color:var(--fg);font-variant-numeric:tabular-nums;line-height:1.1}
.iui__d{font-size:12px;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iui__spark{position:absolute;right:14px;top:16px;width:34px;height:2px;border-radius:2px;background:#2a2a30}
.iui__p.is-hot .iui__spark{background:var(--blue-chart)}
.iui__note{position:absolute;left:var(--gutter);right:var(--gutter);top:29vh;margin:0;text-align:center;font-size:clamp(20px,2.3vw,34px);font-weight:500;letter-spacing:-.03em;color:var(--fg);opacity:0}
.iui__tag{position:absolute;left:var(--gutter);bottom:66px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.iui__l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:30px}
@media (max-width:900px){
  .iui__p{padding:10px 11px;gap:3px}
  .iui__v{font-size:19px}
  .iui__l{font-size:8.5px;letter-spacing:.1em}
  .iui__d{font-size:11px}
  .iui__spark{right:10px;top:13px;width:22px}
}
@media (max-width:760px){
  .iui__note{top:15vh;font-size:20px}
  .iui__v{font-size:21px}
  .iui__p{padding:11px 12px}
}