/* Neuvora, opening soon. The hall (still), its breathing light, the dust in the shaft, his logo and column of type. */
:root{--ink:#050507;--bone:#f4f2ee;--stone:#a9adb8;--ice:#9fd3ff;--e:cubic-bezier(.22,1,.36,1);--side:12.5vw;--ext:0px}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ink);color-scheme:dark;-webkit-text-size-adjust:100%}
/* one still screen: the document never scrolls or bounces (pinch zoom stays allowed) */
/* as tall as the large viewport: on an iPhone the page runs on under Safari's floating bar (the bar is translucent),
   instead of stopping above it and leaving the bar on bare ink; the corners are lifted above the bar below */
html,body{height:100vh;height:calc(100vh + var(--ext));overflow:hidden;overscroll-behavior:none;touch-action:pinch-zoom}
body{position:relative}
body{margin:0;background:var(--ink);color:var(--bone);font:300 1rem/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:rgba(159,211,255,.28);color:var(--bone)}

/* the hall, its light and its dust: three layers inside the stage, sized by script to the plate's own proportions and
   clipped by the stage, so they move with the words and never detach from them. The hall is still. */
.layer{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;opacity:0;will-change:opacity;pointer-events:none}
.hall{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none}
.lightwrap{mix-blend-mode:screen}
.light{position:absolute;inset:0;width:100%;height:100%;display:block}
.dust{position:absolute;inset:0;width:100%;height:100%;display:block}
.grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* the stage is the one screen: the pictures (0), the phone scrim (1), the grain (2), the words (3); it clips the plate */
.stage{position:relative;overflow:hidden;height:100vh;height:calc(100vh + var(--ext));min-height:0}
/* his column: at 12.5 % from the left, vertically centred */
.col{position:absolute;z-index:3;left:var(--side);top:50%;transform:translateY(-50%);width:min(620px,calc(100vw - var(--side) - 24px))}

/* one left guide for the column: the logo's N, the C of COMING, the line, the field, the note.
   Vertical rhythm: logo 28 px, COMING / SOON 18 px, the line 26 px, the form 10 px, the note (phones 20 / 14 / 20 / 8). */
.col{--r1:28px;--r2:18px;--r3:26px;--r4:10px}

/* the logo: his sign, cut tight at its letters (the N at x = 0), its glow given back by a drop shadow */
.logo{--lg:clamp(150px,14.64vw,240px);display:block;width:var(--lg);max-width:none;height:auto;margin:0 0 var(--r1);
  filter:drop-shadow(0 0 10px rgba(244,242,238,.35));will-change:opacity;user-select:none;pointer-events:none}
.js .logo{opacity:0}

/* the serif capitals carry a side bearing: the optical correction puts the C's stroke on the guide
   (Instrument Serif's C measures 0.031 em in the browser; the plan's estimate was 0.045 em) */
.head{margin:0 0 0 var(--optical,-.031em);font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:min(clamp(3.4rem,9.5vw,8.2rem),17vh);line-height:.92;letter-spacing:.005em;color:var(--bone)}
.head .ln{display:block}
.head .ln>span{display:inline-block}
.sub{margin:var(--r2) 0 0;max-width:26ch;font-size:1.1rem;font-weight:300;line-height:1.55;color:rgba(244,242,238,.84)}
.sub,.note,.done-sub{text-wrap:pretty}
.sub,.note,.done-sub,.status,.ig{text-shadow:0 0 18px rgba(5,5,7,.9),0 0 3px rgba(5,5,7,.7)}

/* the door: one field, the button inside it */
.door{margin-top:var(--r3);width:min(420px,100%)}
.join{position:relative;margin:0}
.row{display:flex;align-items:center;height:56px;padding:5px;border:1px solid rgba(244,242,238,.25);border-radius:999px;background:rgba(5,5,7,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .4s var(--e),background-color .4s}
.row:focus-within{border-color:rgba(159,211,255,.55);background:rgba(5,5,7,.7)}
.row.bad{border-color:rgba(207,231,255,.7)}
.row input{flex:1;min-width:0;height:100%;margin:0;padding:0 14px 0 20px;border:0;border-radius:999px;outline:0;background:transparent;color:var(--bone);font:300 16px/1 Inter,system-ui,sans-serif;letter-spacing:.01em}
.row input::placeholder{color:rgba(169,173,184,.9);opacity:1}
.row input:-webkit-autofill{-webkit-text-fill-color:var(--bone);-webkit-box-shadow:0 0 0 40px #0a0a0e inset;caret-color:var(--bone);transition:background-color 9999s}
.row button{flex:none;height:44px;margin:0;padding:0 22px;border:0;border-radius:999px;background:var(--bone);color:var(--ink);font:500 .9rem/1 Inter,system-ui,sans-serif;letter-spacing:.01em;cursor:pointer;transition:background-color .3s,transform .3s var(--e),opacity .3s}
.row button:hover{background:#fff}
.row button:active{transform:scale(.98)}
.row button:focus-visible{outline:1px solid var(--ice);outline-offset:3px}
.row button[disabled]{opacity:.62;cursor:default}
.row.shake{animation:shake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{0%,100%{transform:translateX(0)}18%{transform:translateX(-7px)}36%{transform:translateX(6px)}54%{transform:translateX(-4px)}72%{transform:translateX(2px)}}
.hp{position:absolute;left:-10000px;top:0;width:1px;height:1px;overflow:hidden}
.note{margin:var(--r4) 0 0;max-width:420px;min-height:1.5em;font-size:.78rem;line-height:1.5;color:rgba(169,173,184,.92);transition:color .3s}
.note.err{color:#d6ebff}
.done{min-height:56px}
.done-line{margin:0;font-family:"Instrument Serif",Georgia,serif;font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1.15;color:var(--bone)}
.done-sub{margin:8px 0 0;font-size:.88rem;line-height:1.5;color:rgba(169,173,184,.95)}
.done.in{animation:rise .7s var(--e) both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.bottom{position:absolute;z-index:3;left:max(var(--side),env(safe-area-inset-left));right:max(24px,4vw,env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.status{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-weight:300;font-size:.72rem;line-height:1.4;letter-spacing:.06em;color:var(--stone);white-space:nowrap}
.ig{display:inline-block;padding:14px 0;margin:-14px 0;font-size:.76rem;line-height:1.4;letter-spacing:.06em;color:var(--stone);text-decoration:none;transition:color .3s}
.ig:hover,.ig:focus-visible{color:var(--bone)}
.ig:focus-visible{outline:1px solid rgba(159,211,255,.6);outline-offset:4px}

/* the handle keeps the right corner */
.bottom .ig{margin-left:auto}

/* the arrival (4.6 s, script and these): the hall fades in dark, the shaft opens, the logo lights up in its slot and
   has the hall to itself until 3.2 s, then the words rise (cues in --d, set by the script) */
.js .r{opacity:0;transform:translateY(24px)}
.js .r.fade{transform:none}
.js .head .ln>span{opacity:0;transform:translateY(24px)}
.go .r,.go .head .ln>span{opacity:1;transform:none;transition:opacity .7s var(--e) var(--d,0s),transform .7s var(--e) var(--d,0s)}
.go .r.fade{transition:opacity .5s ease var(--d,0s)}

/* phones held upright (and other tall screens): their own composition. The tall plate sits at the bottom with the
   light and the figure lower right; the words stand on the dark wall above it; exactly one screen. */
@media (max-width:699px) and (orientation:portrait),(max-aspect-ratio:9/10){
  :root{--side:7vw;--ext:calc(env(safe-area-inset-bottom) + 120px)}
  .col{--r1:20px;--r2:14px;--r3:20px;--r4:8px;top:calc(env(safe-area-inset-top) + clamp(20px,3.4svh,36px));transform:none;width:auto;right:var(--side)}
  .logo{--lg:140px}
  .head{font-size:min(clamp(3rem,17vw,4.4rem),8.4svh)}
  .sub{font-size:1rem;line-height:1.5}
  .door{width:100%}
  .row{flex-direction:column;align-items:stretch;height:auto;padding:0;gap:10px;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .row:focus-within{background:none}
  .row input{flex:none;width:100%;height:52px;padding:0 22px;border:1px solid rgba(244,242,238,.25);background:rgba(5,5,7,.6);transition:border-color .4s var(--e)}
  .row input:focus{border-color:rgba(159,211,255,.55)}
  .row.bad input{border-color:rgba(207,231,255,.7)}
  .row button{width:100%;height:52px}
  .done-line{font-size:1.7rem}
  .bottom{left:var(--side);right:var(--side);bottom:calc(14px + env(safe-area-inset-bottom) + var(--ext));bottom:calc(100lvh - 100svh + 14px + env(safe-area-inset-bottom) + var(--ext))}
  /* no scrim on the floor (Rastin, 2026-10-22: it read as a black bar); the corner text carries its own shadow */
}
/* phones held sideways: the desktop layout, smaller */
@media (max-height:499px) and (orientation:landscape){
  :root{--side:max(9vw,env(safe-area-inset-left));--ext:calc(env(safe-area-inset-bottom) + 120px)}
  .col{--r1:20px;--r2:14px;--r3:20px;--r4:8px;top:calc(50% - 16px)}
  .logo{--lg:130px}
  .head{font-size:min(9.5vw,12.5vh)}
  .sub{max-width:30ch;font-size:1rem;line-height:1.5}
  .door{width:min(320px,38vw)}
  .note{max-width:320px}
  .bottom{bottom:calc(16px + env(safe-area-inset-bottom) + var(--ext));bottom:calc(100lvh - 100svh + 16px + env(safe-area-inset-bottom) + var(--ext))}
}

/* reduced motion: the final frame, still */
@media (prefers-reduced-motion:reduce){
  .js .r,.js .head .ln>span,.js .logo{opacity:1!important;transform:none!important;transition:none!important}
  .row.shake,.done.in{animation:none!important}
  .dustwrap{display:none}
}