/* ESEKAI hero — layered intro from the 美工 final artwork.
   Design canvas 3840x2160. Every layer is placed as a % of that canvas
   so the composite matches 终稿+质感.png at any viewport size.
   Three transform owners, never sharing a property:
     .hx-stage  = scroll        .hx-logo/.hx-star = intro        .hx-shift = pointer  */

.hero.hx-host { min-height:100svh; position:relative; overflow:hidden; isolation:isolate;
  background:#08070a; display:block; place-items:unset; }
.hero.hx-host .hero-grid,.hero.hx-host .ambient,.hero.hx-host .logo-stage { display:none; }

.hx { position:absolute; inset:0; overflow:hidden; }
.hx-stage { position:absolute; inset:0; transform-origin:50% 42%;
  transform:translate3d(0,calc(var(--sy,0) * -1px),0) scale(var(--ss,1)); opacity:var(--so,1);
  will-change:transform,opacity; }

/* --- environment --- */
.hx-bg,.hx-prism { position:absolute; left:0; top:0; width:100%; height:100%;
  object-fit:cover; user-select:none; -webkit-user-drag:none; }
.hx-bg { transform:translate3d(calc(var(--hpx,0) * 3px),calc(var(--hpy,0) * 3px),0) scale(1.03);
  transition:transform .9s cubic-bezier(.16,1,.3,1); }
.hx-prism { mix-blend-mode:screen; opacity:var(--prism,1); object-position:50% 100%;
  transform:translate3d(calc(var(--hpx,0) * 6px),0,0) scale(1.02);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1); }

/* --- design box: contain-fitted so the logo is never cropped --- */
.hx-fit { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(100%, calc(100svh * 16 / 9)); aspect-ratio:16/9; }
.hx-logo { position:absolute; inset:0; transform-origin:50% 52%;
  transform:scale(calc(var(--logoScale,1) * var(--introScale,1))); }
.hx-shift { position:absolute; inset:0;
  transform:translate3d(calc(var(--hpx,0) * 5px),calc(var(--hpy,0) * 4px),0);
  transition:transform .75s cubic-bezier(.16,1,.3,1); }

.hx-fit img { position:absolute; user-select:none; -webkit-user-drag:none; }
.hx-en,.hx-en-ghost { left:19.2448%; top:2.6389%; width:62.0573%; }
.hx-cn,.hx-cn-ghost { left:19.0625%; top:43.0556%; width:62.8125%; }
.hx-en-glow { left:18.7500%; top:11.3889%; width:63.0208%; }
.hx-cn-glow { left:18.9844%; top:46.7130%; width:61.9792%; }
.hx-star    { left:45.3646%; top:53.9815%; width:11.8490%; }

/* faint outline so the brand is never a blank screen while it lights up */
.hx-en-ghost,.hx-cn-ghost { opacity:.08; filter:brightness(.55) saturate(.5); }

/* soft top-to-bottom reveal: no hard light bar, edge stays ~35% of the height */
.hx-en,.hx-cn { -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.hx-en {
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--revEn,1) * 145% - 45%),transparent calc(var(--revEn,1) * 145% - 8%));
          mask-image:linear-gradient(to bottom,#000 calc(var(--revEn,1) * 145% - 45%),transparent calc(var(--revEn,1) * 145% - 8%));
  filter:brightness(calc(.72 + var(--revEn,1) * .28)); }
.hx-cn {
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--revCn,1) * 145% - 45%),transparent calc(var(--revCn,1) * 145% - 8%));
          mask-image:linear-gradient(to bottom,#000 calc(var(--revCn,1) * 145% - 45%),transparent calc(var(--revCn,1) * 145% - 8%));
  filter:brightness(calc(.72 + var(--revCn,1) * .28)); }

/* gloss: the glow art is already letter-shaped, so a radial mask on it
   can never show a rectangle. Intro sweeps it; idle parks it under the pointer. */
.hx-en-glow,.hx-cn-glow { mix-blend-mode:screen; opacity:var(--gi,0); pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at var(--gx,50%) var(--gy,50%),#000 0%,#000 14%,transparent 46%);
          mask-image:radial-gradient(circle at var(--gx,50%) var(--gy,50%),#000 0%,#000 14%,transparent 46%);
  transition:opacity .5s ease; }

.hx-star { transform-origin:50% 50%;
  transform:translate3d(0,calc(var(--starY,0) * 1px),0) scale(var(--starS,1));
  opacity:var(--starO,1);
  filter:brightness(var(--starB,1)) drop-shadow(0 0 calc(var(--starB,1) * 14px) rgba(255,236,170,calc(var(--starB,1) * .35))); }

/* accessible page title; the wordmark itself is artwork */
.hx-title { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* --- foreground copy --- */
.hero.hx-host .hero-line,.hero.hx-host .scroll-cue { z-index:4; opacity:var(--ui,1);
  transition:opacity .6s ease; }

/* --- loading / fallback --- */
.hx-fallback { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .4s ease; pointer-events:none; z-index:2; }
.hx-host[data-hx="fallback"] .hx-fallback { opacity:1; }
.hx-host[data-hx="fallback"] .hx-stage { opacity:0; }
.hx-host[data-hx="loading"] .hx-stage { opacity:0; }

/* --- mobile: keep the whole wordmark visible, just bigger in frame --- */
/* width is chosen so the English wordmark (62.06% of the box) never exceeds
   ~88% of the viewport, i.e. the logo is scaled down to fit, never cropped. */
@media (max-width:820px){
  .hx-fit { width:min(132%, calc(100svh * 16 / 9)); }
  .hx-logo { --logoScale:1; }
  .hx-shift { transform:none; }
}
@media (max-width:520px){ .hx-fit { width:min(142%, calc(100svh * 16 / 9)); } }

@media (prefers-reduced-motion:reduce){
  .hx-stage,.hx-bg,.hx-prism,.hx-shift,.hx-star { transform:none!important; transition:none!important; }
  .hx-en,.hx-cn { --revEn:1!important; --revCn:1!important; filter:none!important; }
  .hx-en-glow,.hx-cn-glow { opacity:.28!important; -webkit-mask-image:none!important; mask-image:none!important; }
  .hx-star { opacity:1!important; filter:none!important; }
  .hx-stage { opacity:1!important; }
}

/* dev-only replay button, preview build */
.hx-replay { position:fixed; left:14px; bottom:76px; z-index:90; padding:.5rem .8rem;
  border:1px solid rgba(255,236,169,.4); border-radius:2rem; background:rgba(0,0,0,.6);
  color:#e8d398; font:600 .7rem/1 system-ui,sans-serif; letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer; backdrop-filter:blur(6px); }