/* Centered cinematic hero: desktop and mobile artwork are separate assets. */
.hero-centered{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100svh - var(--header-height));color:#f5faff;background:#0b1f38}
.hero-scene,.hero-shade,.hero-cast,.hero-feathers{position:absolute;inset:0;pointer-events:none}
.hero-scene{z-index:-3}.hero-scene img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-shade{z-index:-2;background:radial-gradient(ellipse at 50% 46%,#071b3445 0%,transparent 48%),linear-gradient(180deg,#06162b10 25%,#07193030 70%,#081b31e8 100%)}
.hero-stage{display:grid;place-items:center;position:relative;z-index:3;min-height:calc(100svh - var(--header-height));padding:65px 0 112px;pointer-events:none}
.hero-center{width:min(570px,100%);text-align:center;pointer-events:none}.hero-center .eyebrow{display:block;color:#beddf7;font-size:10px;letter-spacing:3px;text-shadow:0 2px 15px #061b32}.hero-center h1{font-size:clamp(24px,2.2vw,34px);font-weight:500;line-height:1.45;letter-spacing:-.5px;margin:26px 0 13px;color:#fff;text-shadow:0 3px 16px #031023}.hero-center h1 span{color:#b5dfff}.hero-intro{font-size:13px;line-height:1.95;color:#c4d9eb;text-shadow:0 2px 12px #031023}
.hero-logo-motion{margin:27px auto 0;width:min(100%,545px);filter:drop-shadow(0 8px 14px #03102570)}
.art-crop{position:relative;aspect-ratio:var(--art-ratio);overflow:hidden}.art-crop>img{position:absolute;max-width:none;width:var(--art-width);height:auto;left:var(--art-left);top:var(--art-top)}
.hero-logo{--art-ratio:1460/512;--art-width:136.98630%;--art-left:-16.09589%;--art-top:-68.55469%;width:100%}
.logo-sheen{position:absolute;width:var(--art-width);aspect-ratio:2000/1200;left:var(--art-left);top:var(--art-top);background:linear-gradient(110deg,transparent 40%,#fff2 45%,#ffff 49%,#fff9 52%,transparent 59%) 180% 0/300% 100%;mask:url('../img/branding/logo-server-original.png') center/100% 100% no-repeat;-webkit-mask:url('../img/branding/logo-server-original.png') center/100% 100% no-repeat;mix-blend-mode:screen;opacity:0;pointer-events:none}
.hero-centered .hero-actions{display:flex;justify-content:center;gap:15px;max-width:none;margin:27px auto 0;pointer-events:auto;position:relative;z-index:1}.hero-centered .hero-actions .button{min-width:178px;min-height:52px;padding:13px 24px;font-size:14px;box-shadow:inset 0 1px #e8f6ff80,0 8px 30px #020d2459}.hero-motto{font-size:8px;letter-spacing:2.5px;color:#8babca;margin-top:28px}
.hero-cast{z-index:1;overflow:hidden}.hero-actor{position:absolute;bottom:-12px;transform-origin:center bottom;filter:drop-shadow(0 15px 24px #00102475)}.actor-motion{transform-origin:center bottom}.actor-knight{width:min(47vw,750px);left:-8vw}.actor-knight .art-crop{--art-ratio:1271/961;--art-width:151.06216%;--art-left:-35.01180%;--art-top:-12.38293%}.actor-swordswoman{width:min(34vw,550px);right:-1vw}.actor-swordswoman .art-crop{--art-ratio:961/998;--art-width:199.79188%;--art-left:-44.84912%;--art-top:-8.21643%}.hero-cast:after{content:'';position:absolute;inset:70% 0 0;background:linear-gradient(transparent,#081b31aa)}
.hero-feathers{z-index:2;overflow:hidden;display:none}.feather-flight{position:absolute;top:-90px;left:var(--x);width:var(--size);height:calc(var(--size)*1.28333);opacity:0;filter:drop-shadow(0 0 4px #e7f5ff35)}.feather-flight i{display:block;width:100%;height:100%;background-image:url('../img/art/trc-feathers.webp');background-repeat:no-repeat;background-size:827.33333% 382.33766%;background-position:17.18607% 84.63661%}
.hero-centered .scroll-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:150px;min-height:62px;padding:6px 12px;color:#d0eaff;letter-spacing:1.8px;font-size:9px;text-shadow:0 2px 10px #00152c}.hero-centered .scroll-label{font-size:9px}.hero-centered .scroll-arrow{display:block;width:21px;height:29px;animation:scroll-invite 1.9s ease-in-out infinite}.scroll-arrow svg{display:block;width:100%;height:100%}
@keyframes scroll-invite{0%,100%{transform:translateY(-3px);opacity:.5}55%{transform:translateY(5px);opacity:1}}
@keyframes character-breathe{0%,100%{transform:translate3d(0,0,0) rotate(-.2deg)}50%{transform:translate3d(3px,-9px,0) rotate(.35deg)}}
@keyframes logo-float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-6px,0) scale(1.012)}}
@keyframes logo-light{0%,8%{background-position:180% 0;opacity:0}14%{opacity:.85}75%{background-position:-80% 0;opacity:.8}82%,100%{background-position:-80% 0;opacity:0}}
@keyframes feather-drift{0%{transform:translate3d(0,-80px,0) rotate(-22deg);opacity:0}12%{opacity:.7}50%{transform:translate3d(calc(var(--drift)*.35),50svh,0) rotate(42deg);opacity:.85}90%{opacity:.45}100%{transform:translate3d(var(--drift),calc(100svh + 90px),0) rotate(95deg);opacity:0}}
@keyframes feather-sway{0%,100%{transform:translateX(-12px) rotate(-15deg)}50%{transform:translateX(12px) rotate(18deg)}}
@media(min-width:1081px) and (prefers-reduced-motion:no-preference){.hero-logo-motion{animation:logo-float 7s ease-in-out infinite}.logo-sheen{animation:logo-light 10s linear .5s infinite}.actor-motion{animation:character-breathe 8s ease-in-out infinite}.actor-swordswoman .actor-motion{animation-delay:-3s;animation-duration:9.5s}.hero-feathers{display:block}.feather-flight{animation:feather-drift var(--duration) linear var(--delay) infinite}.feather-flight i{animation:feather-sway 7s ease-in-out var(--delay) infinite}}
.hero-centered.is-paused *{animation-play-state:paused!important}
@media(min-width:1700px){.actor-knight{left:-2vw;width:min(43vw,840px)}.actor-swordswoman{right:2vw;width:min(33vw,660px)}.hero-center{width:650px}.hero-logo-motion{width:615px}}
@media(max-width:1080px){.hero-stage{padding:65px 0 105px}.hero-center{width:520px}.hero-cast{opacity:.65}.actor-knight{width:47vw;left:-16vw}.actor-swordswoman{width:35vw;right:-10vw}.hero-centered .hero-actions{max-width:none}.hero-center h1{font-size:29px}.hero-logo-motion{width:min(100%,490px)}}
@media(max-width:760px){.hero-scene img{object-position:center}.hero-shade{background:linear-gradient(180deg,#06172c10,#07182c15 25%,#07182c45 80%,#07182c9c)}.hero-cast{display:none}.hero-stage{padding:60px 0 105px}.hero-center{width:100%;max-width:440px}.hero-logo-motion{width:100%;max-width:410px;margin-top:26px}.hero-center .eyebrow{font-size:8px;letter-spacing:1.8px}.hero-center h1{font-size:25px;margin:25px 0 12px;line-height:1.5;letter-spacing:-.4px}.hero-center h1 span{display:block}.hero-intro{font-size:12px}.hero-centered .hero-actions{display:flex;gap:10px;margin-top:24px}.hero-centered .hero-actions .button{min-width:0;flex:1;max-width:200px;font-size:12px;min-height:49px;padding:12px 9px}.hero-centered .hero-actions .icon{width:19px;height:19px}.hero-motto{font-size:7px;letter-spacing:1.4px;margin-top:24px}.hero-centered .scroll-hint{bottom:15px;left:50%;font-size:8px}.hero-centered .scroll-label{font-size:8px}}
@media(max-height:650px) and (min-width:761px){.hero-stage{padding:24px 0 75px}.hero-logo-motion{width:330px;margin-top:12px}.hero-center h1{margin:12px 0 6px;font-size:24px}.hero-intro{font-size:11px}.hero-centered .hero-actions{margin-top:14px}.hero-motto{display:none}.hero-centered .scroll-hint{bottom:5px}.hero-actor{width:34vw}.actor-knight{left:-9vw}.actor-swordswoman{right:-5vw}}
@media(prefers-reduced-motion:reduce){.hero-centered *{animation:none!important}.hero-feathers,.logo-sheen{display:none}}

/* Original user-provided WebP is sampled with CSS sprite windows, unchanged. */
.feather-flight:nth-child(even){height:calc(var(--size)*1.040816)}
.feather-flight:nth-child(even) i{background-size:506.53061% 288.62745%;background-position:84.33735% 92.51559%}

/* Custom ImageGen alpha wisps: soft overlapping plumes behind the characters. */
.hero-mist{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.smoke-bank{position:absolute;bottom:-12%;width:46%;height:86%;pointer-events:none;mask-image:radial-gradient(ellipse at 50% 60%,#000 22%,#000b 44%,transparent 73%)}
.smoke-left{left:-8%}.smoke-right{right:-8%;transform:scaleX(-1)}
.smoke-bank i{position:absolute;inset:0 -6% -8%;background:url('../img/art/smoke-wisp-v1.webp') center bottom/contain no-repeat;filter:blur(7px);mix-blend-mode:screen;opacity:0;transform-origin:50% 80%;will-change:transform,opacity}
.smoke-bank i:nth-child(2){inset:5% 4% -14%;filter:blur(11px)}
.smoke-bank i:nth-child(3){inset:17% -8% -10%;filter:blur(5px)}
@keyframes smoke-unfurl{0%{transform:translate3d(-18px,70px,0) scale(.9) rotate(-6deg);opacity:0}25%{opacity:.3}60%{opacity:.22}100%{transform:translate3d(24px,-95px,0) scale(1.14) rotate(7deg);opacity:0}}
@media(min-width:761px) and (prefers-reduced-motion:no-preference){.smoke-bank i{animation:smoke-unfurl 30s ease-in-out -4s infinite}.smoke-bank i:nth-child(2){animation-delay:-14s}.smoke-bank i:nth-child(3){animation-delay:-24s}.smoke-right i{animation-delay:-9s}.smoke-right i:nth-child(2){animation-delay:-19s}.smoke-right i:nth-child(3){animation-delay:-29s}}
@media(max-width:760px),(prefers-reduced-motion:reduce){.hero-mist{display:none}.smoke-bank i{will-change:auto}}

/* Newly illustrated registered blink sprites. Original artwork is kept in archive. */
.illustrated-actor.actor-knight{width:570px;left:calc(50% - 800px)}
.illustrated-actor.actor-swordswoman{width:570px;right:calc(50% - 800px)}
.animated-portrait{position:relative;aspect-ratio:3/4;mask-image:linear-gradient(#000 0%,#000 88%,transparent 100%)}
.animated-portrait .portrait-fallback,.animated-portrait canvas{display:block;width:100%;height:100%;object-fit:contain}
.animated-portrait canvas{position:absolute;inset:0;visibility:hidden}
.animated-portrait.is-ready canvas{visibility:visible}.animated-portrait.is-ready .portrait-fallback{visibility:hidden}
.illustrated-actor .actor-motion{animation:none!important}



/* Keep the transparent WebGL surface out of nested filter/mask compositing.
   The shared hero-cast gradient supplies the lower edge fade. */
.illustrated-actor{filter:none}
.illustrated-actor .animated-portrait{mask-image:none;-webkit-mask-image:none;isolation:isolate}
.animated-portrait canvas{background:transparent;opacity:0;visibility:visible}
.animated-portrait.is-ready canvas{opacity:1}

/* Reference-video motion: layered diagonal feather flight and sequential text reveal. */
.feather-flight{top:-170px;filter:blur(var(--blur)) drop-shadow(0 0 3px #eaf7ff40)}
@keyframes feather-drift{0%{transform:translate3d(70px,-120px,0) rotate(var(--tilt));opacity:0}10%{opacity:.65}35%{transform:translate3d(calc(var(--drift)*.25 + 45px),30svh,0) rotate(calc(var(--tilt) + 30deg));opacity:.8}65%{transform:translate3d(calc(var(--drift)*.65 - 35px),65svh,0) rotate(calc(var(--tilt) - 24deg));opacity:.7}90%{opacity:.45}100%{transform:translate3d(var(--drift),calc(100svh + 210px),0) rotate(calc(var(--tilt) + 55deg));opacity:0}}
@keyframes feather-sway{0%,100%{transform:translateX(-18px) rotate(-15deg) scaleX(.8)}50%{transform:translateX(22px) rotate(20deg) scaleX(1)}}
.hero-center h1 .hero-glyph,.hero-intro .hero-glyph{display:inline-block;white-space:pre;color:inherit;animation:hero-text-reveal 11s ease-in-out var(--glyph-delay) infinite}
@keyframes hero-text-reveal{0%{opacity:0;transform:translateY(8px);filter:none}9%,82%{opacity:1;transform:translateY(0);filter:blur(0)}94%,100%{opacity:0;transform:translateY(-4px);filter:none}}
.home-loading .hero-text-animated .hero-glyph,.home-loading .feather-flight,.home-loading .feather-flight i{animation-play-state:paused}
@media(max-width:760px){.hero-center h1 .hero-glyph{display:inline-block}.hero-center h1 .hero-glyph,.hero-intro .hero-glyph{animation:none;will-change:auto}}
@media(prefers-reduced-motion:reduce){.hero-center h1 .hero-glyph,.hero-intro .hero-glyph{animation:none;opacity:1;transform:none;filter:none;will-change:auto}}