@font-face{font-family:Manrope;src:url('./assets/manrope.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}
:root{font-family:Manrope,Arial,sans-serif;color:#edf1ed;background:#071216;font-synthesis:none;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;isolation:isolate}main{position:relative;z-index:1}button{font:inherit}button:focus-visible{outline:2px solid #d7b479;outline-offset:6px}::selection{background:#9faeaa;color:#0b161b}
.universe-background{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 18% 41%,#174e5b70 0,transparent 44%),radial-gradient(ellipse at 80% 30%,#65503738 0,transparent 39%),radial-gradient(ellipse at 63% 87%,#30274065 0,transparent 45%),#071216}
.universe-background canvas{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:1}
.universe{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);align-items:center;height:100svh;min-height:620px;padding:160px 5.5% 112px;overflow:hidden}
.word-sculpture{--brand-opacity:.38;position:absolute;z-index:0;top:7.5%;left:5.5%;width:89%;line-height:1;font-size:clamp(90px,13.6vw,250px);font-weight:800;letter-spacing:-.075em;padding-right:.075em;white-space:nowrap;color:#87a8aa;background:linear-gradient(120deg,#6b989a 8%,#9ab9b6 44%,#bda884 77%,#807c78);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;opacity:var(--brand-opacity);pointer-events:none;user-select:none;animation:brand-settle .6s cubic-bezier(.16,1,.3,1) both}
.atmosphere{position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 50% 42%,transparent 36%,#030a0f30 100%)}
.light-shaft{position:absolute;z-index:0;width:50%;height:155%;left:20%;top:-70%;transform:rotate(-37deg);background:linear-gradient(90deg,transparent,#79a9ac1a 45%,#aec4b11c 56%,transparent);filter:blur(35px);pointer-events:none}
.stage{position:absolute;left:43%;right:-1%;top:15%;bottom:9%;z-index:1;cursor:default;touch-action:pan-y;outline:none}.stage.over-owl{cursor:grab}.stage.dragging{cursor:grabbing}.stage.is-reassembling{cursor:default}.stage:focus-visible{outline:1px solid #a5bcbd55;outline-offset:-20px;border-radius:30px}.stage canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .26s ease}.stage.ready canvas{opacity:1}.scene-fallback{display:none;position:absolute;left:50%;top:49%;width:72%;max-width:700px;height:auto;transform:translate(-50%,-50%);opacity:.8;filter:brightness(1.6)}.stage.unavailable .scene-fallback{display:block}.stage.unavailable{cursor:default}
.hero-copy{position:relative;grid-column:1;z-index:3;min-width:0;width:100%;margin-top:40px;text-align:left;pointer-events:none}
h1{margin:0;font-size:clamp(34px,4.2vw,72px);font-weight:420;letter-spacing:-.04em;word-spacing:.035em;line-height:1.18;text-wrap:balance}h1 span{display:block;animation:message-settle .55s cubic-bezier(.16,1,.3,1) .12s both}h1 span+span{color:#d1b48c;margin-top:6px;animation-delay:.28s}
.hero-description{max-width:28em;margin:25px 0 0;font-size:clamp(16px,1.4vw,20px);line-height:1.65;letter-spacing:-.01em;color:#b4c7c9;text-wrap:pretty;animation:message-settle .48s cubic-bezier(.16,1,.3,1) .44s both}
.scroll-cue{position:absolute;z-index:4;left:50%;bottom:max(clamp(12px,2.8svh,28px),calc(env(safe-area-inset-bottom,0px) + 10px));display:grid;place-items:center;width:46px;height:46px;border:1px solid #b4d3d33d;border-radius:50%;background:linear-gradient(145deg,#304c547a,#0a191fa8);box-shadow:inset 0 1px 0 #d3e4de14,0 8px 24px #02090d40;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-decoration:none;cursor:pointer;touch-action:manipulation;user-select:none;transform:translateX(-50%);animation:scroll-cue-drift 2.6s ease-in-out infinite}
.scroll-cue:hover{border-color:#bfdedb8a;box-shadow:inset 0 1px 0 #d3e4de21,0 8px 26px #02090d55}.scroll-cue:focus-visible{outline:2px solid #d7b479;outline-offset:5px}
.scroll-cue svg{flex:none;color:#d1b48c}.motion-paused .scroll-cue{animation-play-state:paused}
@keyframes scroll-cue-drift{0%,100%{translate:0 0}50%{translate:0 5px}}
.language-toggle{position:absolute;top:26px;right:31px;z-index:5;display:grid;place-items:center;width:48px;height:48px;border:0;background:none;color:#bcc8c9;cursor:pointer;border-radius:50%;transition:color .2s,background .2s,transform .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.language-toggle:hover{background:#a4c6c610;color:#f0e4ce;transform:translateY(-2px)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html[lang=en] h1{font-size:clamp(32px,3.3vw,58px)}
/* Short, one-time copy entrances finish independently of stage visibility. */
@keyframes brand-settle{from{opacity:0;transform:translateY(12px)}to{opacity:var(--brand-opacity);transform:none}}
@keyframes message-settle{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(min-width:901px) and (max-height:650px){.universe{min-height:560px;padding-top:125px;padding-bottom:94px}.word-sculpture{top:7%;font-size:12.8vw}.hero-copy{margin-top:15px}h1{font-size:clamp(34px,3.8vw,58px)}.hero-description{margin-top:18px}.scroll-cue{bottom:15px}}
@media(max-width:900px){
 .universe{display:flex;flex-direction:column;align-items:stretch;height:auto;min-height:max(680px,100svh);padding:112px 6% 86px;gap:16px}
 .word-sculpture{--brand-opacity:.68;top:29px;left:6%;width:78%;font-size:clamp(34px,10.8vw,74px)}
 .hero-copy{order:1;margin:0;width:100%;flex:none}.hero-description{font-size:17px;max-width:30em;margin-top:18px}
 h1{font-size:clamp(31px,5.7vw,48px);line-height:1.17;letter-spacing:-.035em}h1 span+span{margin-top:4px}
 html[lang=en] h1{font-size:clamp(28px,4.9vw,43px)}
 .stage{position:relative;order:2;inset:auto;flex:none;width:100%;height:clamp(280px,43svh,480px);margin-block:auto;border-radius:0}.stage:focus-visible{outline-offset:-10px}
 .scene-fallback{width:75%}.light-shaft{left:-30%;top:-60%;width:150%}
 .language-toggle{top:17px;right:16px;width:44px;height:44px}
}
@media(max-width:480px){.universe{padding-top:102px}.hero-description{font-size:16px;max-width:22em}h1{font-size:clamp(31px,7.4vw,36px)}html[lang=en] h1{font-size:clamp(25px,6.4vw,31px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}