/* Studio reveal: a Y lit in a dark room settles onto a bright page, where a navy wedge carries it, stacked from boxes. */
:root{
  color-scheme:light;
  --paper:#eef3f9;--ink:#0e1b3a;--ink-soft:#4a5a78;--navy:#0e1b3a;
  --blue:#2b78e4;--sky:#3da5ff;--white:#f4f7fb;
  --display:Manrope,'Segoe UI',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--display);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.wrap{width:100%;padding-left:max(16px,env(safe-area-inset-left,0px),4vw);padding-right:max(16px,env(safe-area-inset-right,0px),4vw)}
.y-body,.y-head{fill:none;stroke-width:13}
.y-body{stroke:var(--body,var(--ink))}
.y-head{stroke:var(--head,var(--blue))}

/* Stage */
.stage{position:relative;min-height:100vh;min-height:100svh;display:flex;overflow:hidden;isolation:isolate;background:var(--paper)}
.stage.pre{background:#05080f}
.wedge{position:absolute;inset:0;background:var(--navy);clip-path:polygon(64% 0,100% 0,100% 100%,36% 100%)}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.fallback-y{display:none;position:absolute;right:8%;top:50%;height:60%;width:42%;transform:translateY(-50%) skewX(-11deg);--body:var(--white);--head:var(--sky)}
.stage.no-3d .fallback-y{display:block}
.stage.no-3d #scene{display:none}
.ui{position:relative;z-index:2;flex:1;min-width:0;display:flex;flex-direction:column;pointer-events:none}
.ui a,.ui button{pointer-events:auto}
.stage.pre .ui{visibility:hidden}

/* Page */
.top{padding-block:clamp(18px,3vh,30px) 0}
.brand{display:inline-block;white-space:nowrap;transform:skewX(-11deg);transform-origin:left bottom;font-weight:800;font-size:clamp(30px,2.8vw,40px);letter-spacing:-.065em;line-height:1}
.brand svg{height:.94em;width:.858em;vertical-align:-.2em;margin-right:-.015em}
.brand span{font-weight:500;color:var(--ink-soft)}
.hero{margin-block:auto;padding-block:24px;max-width:62%}
.eyebrow{display:flex;align-items:center;gap:12px;font:500 clamp(10px,.85vw,12px) var(--mono);letter-spacing:.15em;color:var(--ink-soft);margin-bottom:clamp(14px,2.2vh,24px)}
.eyebrow span{width:28px;height:2px;background:var(--blue);flex:none}
h1{margin:0;font-weight:800;font-size:clamp(44px,min(7.4vw,15vh),136px);line-height:1.04;letter-spacing:-.06em;text-wrap:balance}
h1 em{font-style:normal;color:var(--blue)}
.w{display:inline-block}
.thin{font-weight:500;color:var(--ink)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:8px max(14px,env(safe-area-inset-bottom,0px));font-size:13px;color:var(--ink-soft)}
.foot-end{display:flex;align-items:center;gap:16px;color:var(--white)}
.replay{background:none;border:0;border-bottom:1px solid #ffffff55;padding:2px 0;font-size:13px;transition:border-color .2s}
.replay:hover{border-color:var(--sky)}
.motion{width:32px;height:32px;border:1px solid #ffffff44;border-radius:50%;background:none;font-size:12px}

/* Page entrance */
.stage.play .w{animation:wordIn .85s cubic-bezier(.16,.84,.24,1) both}
.stage.play .w:nth-child(2){animation-delay:.07s}
.stage.play .w:nth-child(3){animation-delay:.15s}
.stage.play .w:nth-child(5){animation-delay:.24s}
.stage.play .w:nth-child(6){animation-delay:.32s}
.stage.play .top,.stage.play .eyebrow,.stage.play .foot{animation:wordIn .7s .3s both}
@keyframes wordIn{from{opacity:0;transform:translateY(.5em)}}

/* The opening, about 4.9 seconds. The Y itself lives in the 3D scene; this is the room and the wordmark. */
.skip[hidden]{display:none}
.skip{position:absolute;right:max(16px,4vw);top:calc(env(safe-area-inset-top,0px) + 20px);z-index:7;background:#0b1730aa;border:1px solid #ffffff33;border-radius:30px;padding:10px 16px;font-size:13px;color:#e2ebf6;transition:border-color .2s}
.skip:hover{border-color:var(--sky)}
.studio-bg{position:absolute;inset:0;background:var(--navy);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.studio-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 70% at 50% 42%,#101a30,#05080f 72%)}
.studio-bg[hidden]{display:none}
.stage.opening .studio-bg{animation:curtain 1.05s 3.55s cubic-bezier(.72,0,.14,1) both}
.stage.opening .studio-bg::before{animation:fadeOut .9s 3.6s both}
.studio{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.studio[hidden]{display:none}
.st-word{position:absolute;left:0;right:0;top:calc(50% + min(24vh,30vw));text-align:center;font-weight:500;font-size:clamp(26px,3.5vw,52px);letter-spacing:-.02em;line-height:1.2;white-space:nowrap;color:#eef3f9}
.st-word b{font-weight:500;color:var(--sky)}
.st-word i{display:inline-block;font-style:normal;opacity:0}
/* The name arrives like the Y did, out of focus, opening from its centre; a light runs across it; then it leaves along the arrow's direction. */
.stage.opening .st-word i{animation:letterIn .8s cubic-bezier(.16,.8,.2,1) both,letterGlow .55s ease-out both,letterOut .46s cubic-bezier(.6,0,.8,.4) forwards;animation-delay:calc(1.72s + var(--c) * 48ms),calc(2.56s + var(--i) * 42ms),calc(3.22s + var(--i) * 24ms)}
@keyframes letterIn{from{opacity:0;transform:translateY(.42em) scale(1.12);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes letterGlow{0%,100%{text-shadow:0 0 0 transparent}40%{text-shadow:0 0 22px #bfe2ff,0 0 6px #fff}}
@keyframes letterOut{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:translate(.5em,-.55em);filter:blur(10px)}}
@keyframes fadeOut{to{opacity:0}}
@keyframes curtain{to{clip-path:polygon(64% 0,100% 0,100% 100%,36% 100%)}}

@media(max-width:900px){
  .wedge{clip-path:polygon(0 50%,100% 36%,100% 100%,0 100%)}
  .hero{max-width:none;margin-block:clamp(12px,3vh,28px) auto;padding-block:0}
  .foot{margin-top:auto;color:#d6e0ee}
  .fallback-y{right:20%;top:72%;height:38%;width:60%}
  @keyframes curtain{to{clip-path:polygon(0 50%,100% 36%,100% 100%,0 100%)}}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
}