*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#05070c;--fg:#dfe6f2;--mut:#8a96ab;--acc:#9ec0ff;--line:rgba(158,192,255,.18)}
body{background:radial-gradient(ellipse at 70% -10%,#13203a 0,#05070c 60%);color:var(--fg);font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}
a{color:inherit}
nav{display:flex;justify-content:space-between;align-items:center;padding:22px 6vw;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:12px}
.logo{letter-spacing:.28em;font-size:13px;text-transform:uppercase;text-decoration:none;background:linear-gradient(90deg,#fff,#9ec0ff);-webkit-background-clip:text;color:transparent}
nav ul{display:flex;gap:22px;list-style:none;font-size:14px;flex-wrap:wrap}
nav ul a{text-decoration:none;color:var(--mut)}nav ul a:hover{color:#fff}
.hero{padding:16vh 6vw 12vh;max-width:900px}
.eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--acc);margin-bottom:22px}
h1{font-weight:300;font-size:clamp(30px,5vw,54px);line-height:1.15;margin-bottom:22px}
.lead{color:var(--mut);max-width:620px;font-size:18px}
.cta{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
.btn{padding:13px 24px;border-radius:999px;text-decoration:none;font-size:14px;letter-spacing:.04em;border:1px solid var(--line)}
.btn.pri{background:linear-gradient(90deg,#c9d6ea,#9ec0ff);color:#05070c;border:0}
.btn:hover{border-color:var(--acc)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.card{background:var(--bg);padding:34px 6vw 34px 34px}
.card h3{font-weight:400;font-size:18px;margin-bottom:8px}.card p{color:var(--mut);font-size:14px}
.card a{color:var(--acc);font-size:13px;text-decoration:none}
footer{padding:40px 6vw;color:var(--mut);font-size:13px}
footer h4{color:var(--fg);font-weight:500;margin-bottom:8px}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px}
/* === Welcome / craft nav === */
.welcome{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#0b1220 0%,#03050a 70%);text-align:center;padding:2rem 1rem}
#stars{position:absolute;inset:0;width:100%;height:100%}
.glow-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 52%,rgba(170,200,235,.16),transparent 55%);opacity:0;transition:opacity .8s ease;pointer-events:none}
.welcome.lit .glow-bg{opacity:1}
.greet{position:relative;letter-spacing:.5em;text-transform:uppercase;font-size:.8rem;color:#aab8cc;opacity:0;animation:fadeIn 2s 1s forwards}
.tagline{position:relative;max-width:34rem;color:#8d99ab;font-size:.95rem;opacity:0;animation:fadeIn 2s 4.2s forwards}
.craft-wrap{position:relative;width:min(480px,88vw);aspect-ratio:3/4;margin:1rem 0;animation:arrive 4.2s cubic-bezier(.2,.7,.2,1) both}
.craft{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;animation:hover 7s 4.2s ease-in-out infinite}
.light{position:absolute;transform:translate(-50%,-50%);color:#cfd8e6;text-decoration:none;font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;padding:.55rem .9rem;border-radius:999px;opacity:0;animation:fadeIn 1.4s forwards;transition:color .4s,text-shadow .4s,background .4s,box-shadow .4s}
.light::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#b9c9de;margin-right:.6em;vertical-align:middle;box-shadow:0 0 6px rgba(185,205,230,.6)}
.light:hover,.light:focus-visible{color:#fff;text-shadow:0 0 12px rgba(175,205,240,.85);background:rgba(160,190,230,.08);box-shadow:0 0 24px rgba(160,195,240,.25);outline:none}
.l-tracker{left:50%;top:6%;font-size:.95rem;animation-delay:9.4s}
.l-stories{left:12%;top:50%;animation-delay:9.8s}
.l-unknown{left:88%;top:50%;animation-delay:10.2s;color:#6f7a8c;cursor:default;opacity:0;animation-name:fadeDim}
.l-unknown::before{background:#4d5666;box-shadow:none}
.l-art{left:50%;top:90%;font-size:.78rem;animation-delay:10.6s}
.greet{animation:materialize 3.2s 2.2s forwards}
.craft-wrap{animation:emerge 4s 5s cubic-bezier(.2,.7,.2,1) both}
.craft{animation:hover 7s 9s ease-in-out infinite}
.tagline{animation:fadeIn 2s 11s forwards}
.fog{position:absolute;inset:-20%;pointer-events:none;opacity:.5;background:radial-gradient(ellipse 40% 25% at 30% 60%,rgba(150,175,210,.10),transparent 70%),radial-gradient(ellipse 35% 22% at 70% 40%,rgba(140,165,205,.09),transparent 70%);animation:drift 38s ease-in-out infinite alternate}
.fog.f2{opacity:.4;background:radial-gradient(ellipse 45% 20% at 60% 70%,rgba(160,180,215,.08),transparent 70%),radial-gradient(ellipse 30% 25% at 20% 30%,rgba(130,160,200,.08),transparent 70%);animation-duration:52s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:translate3d(-4%,1%,0)}to{transform:translate3d(4%,-2%,0)}}
@keyframes materialize{0%{opacity:0;filter:blur(14px);letter-spacing:1.2em;text-shadow:0 0 30px rgba(170,205,255,.9)}60%{opacity:.8;text-shadow:0 0 18px rgba(170,205,255,.7)}100%{opacity:1;filter:none;letter-spacing:.5em;text-shadow:0 0 6px rgba(170,205,255,.25)}}
@keyframes emerge{0%{opacity:0;filter:blur(18px) brightness(2.2);transform:scale(.94)}35%{opacity:.5;filter:blur(8px) brightness(1.6)}100%{opacity:1;filter:none;transform:none}}
@keyframes fadeDim{to{opacity:.55}}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2%)}}
@keyframes fadeIn{to{opacity:1}}
@media (max-width:640px){.light{font-size:.72rem;letter-spacing:.12em;padding:.6rem .7rem}.l-stories{left:12%}.l-unknown{left:88%}}
@media (prefers-reduced-motion:reduce){.craft-wrap,.craft,.light,.greet,.tagline,.fog{animation:none!important;opacity:1!important;filter:none!important}.l-unknown{opacity:.55!important}}
/* === v3 entrance: storm grows 0–2.5 · Welcome rises 2.0–3.6 · craft 3.6–6.6 · FX 5.0→ · lights 6.6–7.5 · tagline 7.4 === */
.welcome{--cw:min(480px,88vw)}
.greet{z-index:5;animation:rise 1.6s 2s cubic-bezier(.25,.6,.2,1) both}
@keyframes rise{0%{opacity:0;filter:blur(12px);letter-spacing:1.1em;transform:translateY(calc(var(--cw)*.375 + 1rem)) scale(1.15);text-shadow:0 0 30px rgba(170,205,255,.95)}
40%{opacity:.85;filter:blur(3px);transform:translateY(calc(var(--cw)*.3)) scale(1.08)}
100%{opacity:1;filter:none;letter-spacing:.5em;transform:none;text-shadow:0 0 6px rgba(170,205,255,.25)}}
.craft-wrap{overflow:visible;animation:none}
.craft{position:relative;z-index:1;opacity:0;animation:smooth 3s 3.6s cubic-bezier(.33,0,.2,1) forwards,hover 7s 6.6s ease-in-out infinite}
@keyframes smooth{0%{opacity:0;filter:blur(22px) brightness(1.15);transform:scale(.97)}40%{opacity:.45;filter:blur(10px) brightness(1.1)}100%{opacity:1;filter:none;transform:none}}
@keyframes hover{0%,100%{translate:0 0}50%{translate:0 -1.2%}}
.sfog{position:absolute;left:50%;top:50%;width:70vmin;height:40vmin;margin:-20vmin 0 0 -35vmin;border-radius:50%;pointer-events:none;filter:blur(30px);background:radial-gradient(ellipse,rgba(160,185,225,.22),transparent 65%);opacity:0;animation:sgrow 2.5s ease-in forwards,swirl 9s ease-in-out infinite alternate}
.sfog.s2{width:50vmin;height:50vmin;margin:-25vmin 0 0 -25vmin;animation:sgrow 2.5s .3s ease-in forwards,swirl 12s ease-in-out infinite alternate-reverse}
@keyframes sgrow{0%{opacity:0;scale:.2}100%{opacity:.8;scale:1}}
@keyframes swirl{0%{transform:translate3d(-6%,2%,0) rotate(-8deg)}100%{transform:translate3d(6%,-3%,0) rotate(10deg)}}
.l-tracker{animation-delay:6.6s}.l-stories{animation-delay:6.9s}.l-unknown{animation-delay:7.2s}.l-art{animation-delay:7.5s}
.light{z-index:4}
.tagline{animation:fadeIn 1.4s 7.4s forwards}
/* craft fog: steady visible opacity, transform-only drift so it visibly moves */
.cfog{position:absolute;pointer-events:none;border-radius:50%;filter:blur(16px);opacity:0}
.cf1{inset:30% -22% 35% -22%;z-index:0;background:radial-gradient(ellipse at 40% 50%,rgba(170,190,220,.28),transparent 65%);animation:cfogIn 2s 4.6s forwards,cdrift1 9s ease-in-out infinite alternate}
.cf2{inset:55% -14% 5% -14%;z-index:0;background:radial-gradient(ellipse at 60% 50%,rgba(150,175,215,.26),transparent 65%);animation:cfogIn 2s 4.9s forwards,cdrift2 11s ease-in-out infinite alternate}
.cf3{inset:70% 0 -8% 0;z-index:3;background:radial-gradient(ellipse at 50% 40%,rgba(175,195,225,.2),transparent 65%);animation:cfogIn 2s 5.2s forwards,cdrift1 13s ease-in-out infinite alternate-reverse}
@keyframes cfogIn{from{opacity:0}to{opacity:.8}}
.cfog{animation-fill-mode:forwards,none}
@keyframes cdrift1{0%{transform:translate3d(-10%,0,0) scale(1)}100%{transform:translate3d(10%,-4%,0) scale(1.12)}}
@keyframes cdrift2{0%{transform:translate3d(9%,3%,0) scale(1.06)}100%{transform:translate3d(-9%,-3%,0) scale(.94)}}
@media (prefers-reduced-motion:reduce){.craft,.greet,.sfog,.cfog,.light,.tagline{animation:none!important;filter:none!important;transform:none!important}.craft,.greet,.light,.tagline{opacity:1!important}.cfog{opacity:.6!important}.sfog{opacity:0!important}.l-unknown{opacity:.55!important}}
/* === v4 separate craft FX layer (siblings of the hull image) === */
.fx-back,.fx-front{position:absolute;inset:-12%;width:124%;height:124%;pointer-events:none;opacity:0;transition:opacity 1.5s}
.fx-back{z-index:0}.fx-front{z-index:2;mix-blend-mode:screen}
.fx-back,.fx-front{opacity:1}
.fxfog{position:absolute;pointer-events:none;border-radius:50%;filter:blur(22px);opacity:0;transition:opacity 2.5s}
.craft-wrap.fx-on .fxfog{opacity:1}
.fb1{inset:28% -30% 30% -30%;z-index:0;background:radial-gradient(ellipse at 40% 50%,rgba(175,195,230,.38),transparent 65%);animation:fxd1 8s ease-in-out infinite alternate}
.fb2{inset:50% -20% 0 -20%;z-index:0;background:radial-gradient(ellipse at 60% 50%,rgba(160,185,225,.34),transparent 65%);animation:fxd2 10s ease-in-out infinite alternate}
.ff1{inset:68% -8% -12% -8%;z-index:3;background:radial-gradient(ellipse at 50% 40%,rgba(185,205,235,.3),transparent 65%);animation:fxd1 12s ease-in-out infinite alternate-reverse}
@keyframes fxd1{0%{transform:translate(-9%,2%) scale(1)}50%{transform:translate(4%,-3%) scale(1.15)}100%{transform:translate(10%,3%) scale(.95)}}
@keyframes fxd2{0%{transform:translate(8%,0) scale(1.1)}100%{transform:translate(-10%,-4%) scale(.92)}}
.light{z-index:4}
.fx-back,.fx-front{animation:hover 7s 6.6s ease-in-out infinite}

/* v5: darker thicker fog, partly surrounding; front canvas normal blend so dark fog shows; no bg on craft */
.craft-wrap,.craft{background:transparent!important}
.fx-front{mix-blend-mode:normal}
.fxfog{filter:blur(34px)}
.fb1{inset:20% -45% 22% -45%;background:radial-gradient(ellipse at 40% 50%,rgba(30,38,54,.75),rgba(40,50,70,.35) 45%,transparent 70%)}
.fb2{inset:45% -35% -10% -35%;background:radial-gradient(ellipse at 60% 50%,rgba(26,32,46,.8),rgba(40,50,70,.35) 45%,transparent 70%)}
.ff1{inset:62% -20% -20% -20%;background:radial-gradient(ellipse at 50% 45%,rgba(28,34,48,.7),rgba(40,48,66,.3) 45%,transparent 70%)}

/* v6: kill visible box — diamond clip on hull, no rectangular plate */
.craft{clip-path:polygon(50% 0%, 82% 48%, 50% 100%, 18% 48%);-webkit-clip-path:polygon(50% 0%, 82% 48%, 50% 100%, 18% 48%);background:transparent!important}

.fx-back,.fx-front{background:transparent!important}

/* v7: feather rectangular FX canvas edges — soft elliptical mask so no invisible box */
.craft-wrap{background:transparent!important;isolation:auto;outline:none;border:none;box-shadow:none}
.craft,.fx-back,.fx-front,.fxfog{outline:none;border:none;box-shadow:none}
.fx-back,.fx-front{
  background:transparent!important;
  -webkit-mask-image:radial-gradient(ellipse 58% 72% at 50% 50%,#000 35%,rgba(0,0,0,.85) 55%,transparent 78%);
  mask-image:radial-gradient(ellipse 58% 72% at 50% 50%,#000 35%,rgba(0,0,0,.85) 55%,transparent 78%);
}
.fxfog{
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 55%,#000 40%,transparent 85%);
  mask-image:radial-gradient(ellipse 70% 80% at 50% 55%,#000 40%,transparent 85%);
}

.fx-back,.fx-front{animation:none!important;will-change:auto;transform:none!important}


/* v9: box was craft-wrap compositing fog into a 3:4 plate — kill isolation, hide CSS fog plates, mask canvases */
.craft-wrap{isolation:auto!important;overflow:visible!important;background:transparent!important;contain:none!important}
.fxfog{display:none!important} /* canvas fog only; CSS plates were rectangular */
.fx-back,.fx-front{
  -webkit-mask-image:radial-gradient(ellipse 55% 70% at 50% 50%,#000 30%,rgba(0,0,0,.7) 52%,transparent 72%)!important;
  mask-image:radial-gradient(ellipse 55% 70% at 50% 50%,#000 30%,rgba(0,0,0,.7) 52%,transparent 72%)!important;
  animation:none!important;transform:none!important;
}

/* welcome-i18n-cycle */
.greet{min-height:1.2em;transition:opacity .48s ease,filter .48s ease,letter-spacing .48s ease}
.greet.greet-out{opacity:0;filter:blur(6px)}
.greet.greet-in{opacity:1;filter:none}
.greet.script-cjk,.greet.script-rtl{text-transform:none;letter-spacing:.12em}
.greet.script-cyr{text-transform:none;letter-spacing:.22em}
.greet.script-cjk{letter-spacing:.28em;font-size:.95rem}

/* === signal letter (below craft) === */
.signal{
  position:relative;z-index:2;
  max-width:920px;margin:0 auto;padding:4rem 6vw 5rem;
  text-align:center;
}
.sig-hello{
  margin:0 0 2.4rem;
  font-size:clamp(1.35rem,3.2vw,1.85rem);font-weight:300;letter-spacing:.12em;
  background:linear-gradient(180deg,#f2f6ff 0%,#b8c9e8 55%,#7a93b8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sig-cols{
  display:grid;grid-template-columns:1fr 1fr;gap:2rem 2.8rem;
  text-align:left;margin:0 auto 2.8rem;max-width:860px;
}
.sig-col{
  margin:0;font-size:clamp(.95rem,1.6vw,1.05rem);line-height:1.75;font-weight:350;
}
.sig-left{
  background:linear-gradient(180deg,#d7e2f5 0%,#8fa6c7 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sig-right{
  background:linear-gradient(180deg,#c5d4ec 0%,#7e96b8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sig-choice{margin:0 auto 2.6rem;max-width:520px}
.sig-stay{
  margin:0 0 .85rem;font-size:clamp(1.02rem,2vw,1.15rem);font-weight:400;letter-spacing:.02em;
  background:linear-gradient(90deg,#e8f0ff,#9eb6d8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sig-or{
  margin:0 0 .85rem;font-size:.85rem;letter-spacing:.35em;text-transform:uppercase;font-weight:400;
  color:#5c6f8c;opacity:.85;
}
.sig-leave{
  margin:0;font-size:clamp(.98rem,1.9vw,1.08rem);font-weight:350;letter-spacing:.02em;
  background:linear-gradient(90deg,#a8b8d0,#6d7f9a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sig-luck{
  margin:2.8rem 0 .35rem;font-size:.95rem;letter-spacing:.06em;
  color:#8a9cb8;
}
.sig-sign{
  margin:0;font-size:clamp(1.15rem,2.4vw,1.45rem);font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  background:linear-gradient(90deg,#ffffff 0%,#c5d8f5 35%,#7eb0ff 70%,#b8c9e8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(126,176,255,.28));
}
@media (max-width:720px){
  .sig-cols{grid-template-columns:1fr;gap:1.4rem;text-align:center}
  .sig-hello{margin-bottom:1.8rem}
}

.sig-hello{position:relative;min-height:1.4em}
.sig-hello .ch{display:inline-block;min-width:.28em;transition:opacity .12s ease,filter .12s ease,transform .18s ease}
.sig-hello.morphing .ch{filter:blur(.6px);opacity:.72}
.sig-hello.resolved{filter:drop-shadow(0 0 14px rgba(158,192,255,.35))}
.sig-hello .ch.space{min-width:.35em}
.sig-col.sig-right{
  background:linear-gradient(180deg,#d7e2f5 0%,#8fa6c7 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@media (prefers-reduced-motion:reduce){
  .sig-hello.morphing .ch{filter:none;opacity:1}
}