:root{
  --bg:#07080c; --ice:#dfe9f5; --ice-dim:#8f9bb0; --white:#f6f8fc;
  --red:#b3261e; --red-glow:rgba(179,38,30,.4);
  --font-head:'Libre Baskerville',Georgia,serif; --font-body:'Montserrat',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ice);font-family:var(--font-body);overflow:hidden;-webkit-font-smoothing:antialiased}

.welcome{position:relative;height:100vh;height:100dvh;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;padding-top:clamp(28px,7vh,70px)}
.welcome.leaving{animation:fadeOut .7s ease forwards}
@keyframes fadeOut{to{opacity:0;filter:blur(8px)}}

/* ---------- background ---------- */
.bg{position:absolute;inset:-5%;background:url('/assets/img/bg-desktop.webp') center/cover no-repeat;animation:kenburns 30s ease-in-out infinite alternate}
@media(max-width:768px){.bg{background-image:url('/assets/img/bg-mobile.webp')}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.1)}}
.bg-dark{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(7,8,12,.6) 0%,rgba(7,8,12,.4) 45%,rgba(7,8,12,.92) 100%),
  radial-gradient(ellipse at 50% 35%,transparent 25%,rgba(7,8,12,.7) 100%)}

.fog{position:absolute;left:-30%;width:160%;pointer-events:none;filter:blur(40px)}
.fog-1{bottom:-15%;height:50%;background:radial-gradient(ellipse at 50% 100%,rgba(223,233,245,.26),transparent 70%);animation:fogDrift 28s ease-in-out infinite alternate}
.fog-2{bottom:-5%;height:40%;background:radial-gradient(ellipse at 30% 100%,rgba(223,233,245,.2),transparent 65%);animation:fogDrift 38s ease-in-out infinite alternate-reverse}
.fog-floor{position:absolute;left:0;right:0;bottom:0;height:26%;pointer-events:none;
  background:linear-gradient(0deg,rgba(223,233,245,.18),rgba(223,233,245,.06) 50%,transparent);animation:fogBreathe 9s ease-in-out infinite}
@keyframes fogDrift{from{transform:translateX(-8%) translateY(2%)}to{transform:translateX(8%) translateY(-4%)}}
@keyframes fogBreathe{0%,100%{opacity:.7}50%{opacity:1}}
#snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---------- content (fits in screen, no scroll) ---------- */
.content{position:relative;z-index:2;text-align:center;padding:12px 20px;width:100%;max-width:520px;
  display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.6vh,26px);transition:transform .15s ease-out}

.eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.45em;text-transform:uppercase;color:var(--ice-dim);font-weight:500;
  padding-left:.45em;opacity:0;animation:rise 1s ease .2s forwards}
.eyebrow .line{width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--ice-dim));opacity:.7}
.eyebrow .line:last-child{transform:scaleX(-1)}

/* ---------- logo card + dragon on border ---------- */
.logo-card{position:relative;width:min(46vw,170px);aspect-ratio:2/1;margin-top:0;border-radius:18px;padding:2px;
  opacity:0;animation:cardIn 1.2s cubic-bezier(.2,.8,.2,1) .5s forwards}
.trail{position:absolute;inset:-1px;border-radius:19px;overflow:hidden}
.trail::before{content:"";position:absolute;inset:-50%;
  background:conic-gradient(from 0deg,transparent 0 80%,rgba(223,233,245,.95) 97%,transparent 100%);
  animation:spin 5s linear infinite}
.logo-inner{position:relative;height:100%;border-radius:16px;overflow:hidden;
  background:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 50px rgba(0,0,0,.6)}
.logo{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes cardIn{from{opacity:0;transform:scale(.85) translateY(10px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ---------- Curtain wipe title ---------- */
.title{font-family:var(--font-head);font-weight:700;letter-spacing:.18em;color:var(--white);font-size:clamp(18px,4.5vw,26px);line-height:1.1;white-space:nowrap;
  text-shadow:0 0 28px rgba(223,233,245,.25);opacity:0;animation:rise 1s ease 1.1s forwards}
.title{margin:8px 0 0;transition:opacity .5s ease,transform .5s ease}
.title.swap{opacity:0;transform:translateY(6px)}

.kanji{font-family:var(--font-head);color:var(--red);letter-spacing:.4em;font-size:11px;padding-left:.4em;margin-top:-6px;margin-bottom:10px;opacity:0;animation:rise 1s ease 1.5s forwards}

/* ---------- quote ---------- */
.quote{position:relative;width:100%;max-width:440px;padding:22px 24px 16px;border-radius:14px;margin-top:18px;
  background:rgba(223,233,245,.05);border:1px solid rgba(223,233,245,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 16px 50px rgba(0,0,0,.5);opacity:0;animation:rise 1s ease 1.9s forwards}
.qmark{position:absolute;top:-8px;left:12px;font-family:var(--font-head);font-size:48px;line-height:1;color:var(--red);opacity:.8}
.qtext{font-family:var(--font-head);font-style:italic;font-size:clamp(14px,3.6vw,17px);line-height:1.5;color:var(--white);min-height:2.2em}
.qtext::after{content:"|";margin-left:2px;color:var(--ice-dim);animation:blink 1s step-end infinite}
.qtext.done::after{content:"";animation:none}
@keyframes blink{50%{opacity:0}}
.qauthor{margin-top:8px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ice-dim)}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- CTA ---------- */
.cta{display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:rise 1s ease 2.4s forwards}
.chevrons{display:flex;flex-direction:column;gap:3px}
.chevrons span{width:11px;height:11px;border-right:1.5px solid var(--ice-dim);border-bottom:1.5px solid var(--ice-dim);transform:rotate(45deg);animation:bounce 1.6s ease-in-out infinite}
.chevrons span:nth-child(2){animation-delay:.2s;opacity:.5}
@keyframes bounce{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.3}50%{transform:rotate(45deg) translate(3px,3px);opacity:1}}

.go{position:relative;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;
  color:var(--bg);background:linear-gradient(145deg,#fff,#cfdbea);font-family:var(--font-head);font-weight:700;letter-spacing:.15em;font-size:13px;
  box-shadow:0 0 0 1px rgba(255,255,255,.2),0 12px 40px rgba(0,0,0,.6);transition:transform .25s,box-shadow .25s}
.go:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 50px rgba(223,233,245,.35)}
.go:active{transform:scale(.95)}
.go-text{position:relative;z-index:2}
.go-ring{position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(223,233,245,.5);animation:pulse 2.4s ease-out infinite}
.go-ring.r2{border-color:rgba(179,38,30,.55);animation-delay:.8s}
@keyframes pulse{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.6);opacity:0}}

.seal{position:absolute;right:18px;bottom:18px;z-index:2;width:34px;height:34px;border:1.5px solid var(--red);color:var(--red);font-family:var(--font-head);font-size:16px;
  display:flex;align-items:center;justify-content:center;opacity:0;animation:stamp .5s cubic-bezier(.2,1.4,.4,1) 2.8s forwards;box-shadow:0 0 18px var(--red-glow)}
@keyframes stamp{from{opacity:0;transform:scale(1.8) rotate(-8deg)}to{opacity:.9;transform:scale(1) rotate(-4deg)}}

/* ---------- small phones ---------- */
@media(max-height:680px){
  .logo-card{width:min(70vw,240px)}
  .quote{padding:14px 16px 10px}
  .go{width:56px;height:56px;font-size:12px}
}
@media(min-width:900px){
  .content{max-width:560px}
  .logo-card{width:185px}
  .go{width:72px;height:72px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-delay:0s!important}}