.hero{position:relative;min-height:112vh;overflow:hidden;
  background:linear-gradient(180deg,#e9ecef 0%,#eceef2 30%,#ffd9e4 58%,#ff8fb8 72%,#8aa3ea 86%,#5b78c9 100%)}
.hero .copy{position:relative;z-index:5;text-align:center;padding-top:19vh}
.eyebrow{font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--mute);opacity:0;animation:fade 1.4s 1.6s forwards}
h1{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(64px,13vw,190px);line-height:.95;letter-spacing:-.03em;margin:14px 0 8px;color:#2a2b45}
h1 .ch{display:inline-block;opacity:0;filter:blur(22px);transform:translateY(24px) scale(1.15);animation:chin 1.6s forwards cubic-bezier(.2,.8,.2,1)}
@keyframes chin{to{opacity:1;filter:blur(0);transform:none}}
@keyframes fade{to{opacity:1}}
.role{font-family:var(--serif);font-size:clamp(18px,2.6vw,28px);color:var(--mute);min-height:1.5em;opacity:0;animation:fade 1.4s 2.4s forwards}
.role em{color:var(--mag);font-style:italic}

.scroll{position:absolute;bottom:26px;left:50%;z-index:6;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#fff;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;opacity:.9}
.scroll i{width:1px;height:46px;background:linear-gradient(#fff,transparent);animation:drip 2s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.scene{position:absolute;left:0;right:0;bottom:0;height:68vh;z-index:3}
.castle{position:absolute;left:50%;bottom:30%;width:min(640px,86vw);transform:translateX(-50%);z-index:2;filter:blur(.6px);cursor:pointer;will-change:transform}
.castle .sp{transform-origin:50% 100%;animation:sway 7s ease-in-out infinite}
.castle .sp:nth-child(2n){animation-duration:9s;animation-delay:-3s}
@keyframes sway{50%{transform:rotate(.8deg) scaleY(1.01)}}
.castle.lit .win{opacity:1}

.mist{position:absolute;left:-10%;right:-10%;bottom:0;height:60%;z-index:3;background:radial-gradient(60% 50% at 50% 100%,rgba(255,255,255,.55),transparent 70%);filter:blur(20px)}
.blob{position:absolute;border-radius:50%;filter:blur(26px);animation:drift 14s ease-in-out infinite alternate;will-change:transform}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(var(--dx,30px),var(--dy,-20px)) scale(1.15)}}
.stip{position:absolute;inset:0;z-index:4;pointer-events:none;background-image:radial-gradient(rgba(30,30,60,.5) 1px,transparent 1.4px);background-size:5px 5px;mix-blend-mode:soft-light;opacity:.5;mask-image:linear-gradient(transparent 35%,#000)}
.dark-hill{position:absolute;bottom:-8%;right:-6%;width:46%;height:34%;z-index:4;background:radial-gradient(ellipse at 50% 100%,#1c2b2b,#223 55%,transparent 72%);filter:blur(5px)}
.dark-hill.l{right:auto;left:-10%;width:38%}