/* 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}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ink);color-scheme:dark;-webkit-text-size-adjust:100%}
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;overflow-x:hidden}
::selection{background:rgba(159,211,255,.28);color:var(--bone)}

/* the hall, its light and its dust: three layers sized by script to the plate's own proportions. The hall is still. */
.layer{position:fixed;left:0;top:0;width:100vw;height:100vh;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:fixed;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")}

/* his column: at 12.5 % from the left, vertically centred */
.stage{position:relative;z-index:3;min-height:100vh;min-height:100svh}
.col{position:absolute;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;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}
  .stage{height:100vh;height:100svh;min-height:0;overflow:hidden}
  .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))}
  /* the corners stand on the floor, where the light falls: a soft ink scrim lets the light fade before it reaches them */
  .stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(110px + env(safe-area-inset-bottom));z-index:-1;pointer-events:none;
    background:linear-gradient(to top,rgba(5,5,7,.88) 0,rgba(5,5,7,.6) 40%,rgba(5,5,7,0) 100%)}
}
/* phones held sideways: the desktop layout, smaller */
@media (max-height:499px) and (orientation:landscape){
  :root{--side:max(9vw,env(safe-area-inset-left))}
  .stage{height:100vh;height:100svh;min-height:0;overflow:hidden}
  .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))}
}

/* 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}
}