/* ===== SANDBOX animated home page ===== */
html{scroll-behavior:smooth}
body.ha{overflow-x:hidden}
/* header hidden over the intro, slides in after */
.ha .ha-hdr{position:fixed; top:0; left:0; right:0; transform:translateY(-110%); transition:transform .45s cubic-bezier(.2,.8,.2,1); z-index:60}
.ha.past-intro .ha-hdr{transform:none}
/* progress bar */
.ha-progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:80; pointer-events:none}
.ha-bar{position:absolute; left:0; top:0; height:3px; width:calc(var(--p,0) * 100%); background:linear-gradient(90deg,#ff3fa4,#9b4dff,#22f0d5); box-shadow:0 0 8px #ff3fa4,0 0 14px rgba(34,240,213,.6)}
.ha-paw{position:absolute; top:-5px; left:calc(var(--p,0) * 100% - 7px); width:14px; height:14px; fill:#22f0d5; filter:drop-shadow(0 0 4px #22f0d5); opacity:calc(var(--p,0) * 50)}
/* intro */
.ha-intro{position:relative; height:100vh; height:100svh; min-height:520px; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(ellipse 55% 48% at 50% 46%,rgba(92,40,160,.55) 0%,rgba(52,20,96,.35) 40%,rgba(20,8,40,.15) 70%,transparent 100%),#000}
.ha-bg{position:absolute; inset:0; width:100%; height:100%}
.ha-intro-in{position:relative; z-index:2; text-align:center; padding:0 20px}
/* wordmark: 3 stacked copies, each masked to one letter (soft edges); glow on the parent so it is never boxed */
.ha-logo{position:relative; margin:0; padding:40px 60px; line-height:0; width:min(600px,78vw); box-sizing:content-box; overflow:visible; background:none;
  filter:drop-shadow(0 0 14px rgba(255,63,164,.45)) drop-shadow(0 0 30px rgba(155,77,255,.3))}
.ha-l{display:block; width:100%; height:auto; opacity:0; --edge:linear-gradient(transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-composite:source-in; mask-composite:intersect}
.ha-l.l2,.ha-l.l3{position:absolute; left:60px; top:40px; width:calc(100% - 120px)}
.ha-l.l1{-webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 9%,#000 34%,transparent 36%),var(--edge); mask-image:linear-gradient(90deg,transparent 2%,#000 9%,#000 34%,transparent 36%),var(--edge)}
.ha-l.l2{-webkit-mask-image:linear-gradient(90deg,transparent 33%,#000 35%,#000 65%,transparent 67%),var(--edge); mask-image:linear-gradient(90deg,transparent 33%,#000 35%,#000 65%,transparent 67%),var(--edge)}
.ha-l.l3{-webkit-mask-image:linear-gradient(90deg,transparent 64%,#000 66%,#000 91%,transparent 98%),var(--edge); mask-image:linear-gradient(90deg,transparent 64%,#000 66%,#000 91%,transparent 98%),var(--edge)}
@media (max-width:820px){ .ha-logo{padding:30px 20px; width:min(600px,82vw)} .ha-l.l2,.ha-l.l3{left:20px; top:30px; width:calc(100% - 40px)} }
@keyframes ha-flicker{0%{opacity:0}10%{opacity:1}14%{opacity:.15}22%{opacity:1}30%{opacity:.3}38%,100%{opacity:1}}
@keyframes ha-hum{0%,100%{filter:none}50%{filter:brightness(1.18)}}
.ha.loaded .ha-l{animation:ha-flicker 1.1s steps(1) forwards, ha-hum 4s 2.2s ease-in-out infinite}
.ha.loaded .l2{animation-delay:.35s,2.4s} .ha.loaded .l3{animation-delay:.7s,2.6s}
.ha-tag{margin:22px 0 0; min-height:1.6em; font:700 clamp(1rem,2.4vw,1.45rem) "Nunito",sans-serif; color:#d9d2f0; letter-spacing:.04em}
.ha-caret{display:inline-block; width:2px; height:1.1em; vertical-align:-3px; margin-left:3px; background:#22f0d5; box-shadow:0 0 8px #22f0d5; animation:ha-blink 1s steps(1) infinite}
@keyframes ha-blink{50%{opacity:0}}
.ha-down{position:absolute; z-index:2; bottom:28px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:4px;
  color:#22f0d5; text-decoration:none; font:700 .78rem "Nunito",sans-serif; letter-spacing:.2em; text-transform:uppercase; opacity:0; transition:opacity .8s 2.4s}
.ha.loaded .ha-down{opacity:1}
.ha-down svg{width:34px; height:34px; fill:none; stroke:#ff3fa4; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 6px #ff3fa4); animation:ha-bob 1.6s ease-in-out infinite}
@keyframes ha-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
/* reveal on scroll */
.rv{opacity:0; transform:translateY(40px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1; transform:none}
.ha-stagger > *{opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--i,0) * 120ms + 200ms)}
.rv.in .ha-stagger > *{opacity:1; transform:none}
.ha-kb{display:block; flex:0 1 300px; clip-path:inset(0 100% 0 0); transition:clip-path 1.1s .25s cubic-bezier(.6,.1,.2,1)}
.ha-kb .kitty-bar{max-width:300px; width:100%}
.rv.in .ha-kb{clip-path:inset(0 0 0 0)}
/* light streak between sections */
.ha-streak{position:relative; height:2px; margin:10px auto; max-width:1200px; overflow:hidden; opacity:.9}
.ha-streak::after{content:""; position:absolute; top:0; left:-40%; width:40%; height:2px; background:linear-gradient(90deg,transparent,#ff3fa4,#fff,#22f0d5,transparent); filter:drop-shadow(0 0 6px #ff3fa4)}
.ha-streak.in::after{animation:ha-sweep 1.4s cubic-bezier(.5,0,.3,1) forwards}
@keyframes ha-sweep{to{left:110%}}
/* feature boxes: tilt */
.ha .feat{transform-style:preserve-3d; transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .25s ease, box-shadow .25s ease}
.ha .feat > img{transition:transform .5s ease}
.ha .feat:hover > img{transform:scale(1.08)}
.ha .feat:hover{box-shadow:0 0 30px color-mix(in srgb,var(--c) 80%,transparent), inset 0 0 22px color-mix(in srgb,var(--c) 25%,transparent)}
/* cast */
.ha-cast{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1100px; margin:0 auto}
.ha-cc{position:relative; display:block; aspect-ratio:16/10; border-radius:16px; overflow:hidden; text-decoration:none; color:#fff; border:2px solid #ff3fa4; box-shadow:0 0 18px rgba(255,63,164,.45);
  opacity:0; transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1), box-shadow .3s}
.ha-cc.from-l{transform:translateX(-80px)} .ha-cc.from-r{transform:translateX(80px); border-color:#22f0d5; box-shadow:0 0 18px rgba(34,240,213,.45)}
.rv.in .ha-cc{opacity:1; transform:none} .rv.in .ha-cc.from-r{transition-delay:.15s}
.ha-cc img{width:100%; height:100%; object-fit:cover; object-position:50% 25%; display:block; transition:transform .6s ease, filter .4s}
.ha-cc::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 45%,rgba(7,6,12,.9))}
.ha-cc-name{position:absolute; z-index:1; left:22px; bottom:18px; font:800 italic 2rem "Grandstander","Fredoka",sans-serif; text-shadow:0 0 10px rgba(255,63,164,.7); transition:transform .4s}
.ha-quote{position:absolute; z-index:1; left:22px; right:22px; bottom:20px; font:700 1.05rem "Nunito",sans-serif; color:#ffd6ee; opacity:0; transform:translateY(14px); transition:opacity .35s, transform .35s}
.ha-cc:hover img,.ha-cc:focus-visible img{transform:scale(1.06); filter:brightness(.8)}
.ha-cc:hover .ha-cc-name,.ha-cc:focus-visible .ha-cc-name{transform:translateY(-34px)}
.ha-cc:hover .ha-quote,.ha-cc:focus-visible .ha-quote{opacity:1; transform:none}
/* story strip */
.ha-strip-view{overflow:hidden; padding:16px 0 10px}
.ha-strip{display:flex; gap:20px; width:max-content; padding:0 40px; transform:translateX(var(--sx,0px)); will-change:transform}
.ha-strip img{height:clamp(150px,22vw,260px); aspect-ratio:16/9; object-fit:cover; border-radius:12px; border:2px solid rgba(155,77,255,.6); box-shadow:0 0 14px rgba(155,77,255,.4); display:block}
.ha-strip-cta{text-align:center; padding:14px 0 30px}
/* about parallax */
.ha-about{position:relative; overflow:hidden; padding:30px 0}
.ha-about-bg{position:absolute; inset:-20% 0; background-size:cover; background-position:center; opacity:.28; filter:saturate(1.2) blur(1px); transform:translateY(var(--py,0px)); will-change:transform}
.ha-about::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(#07060c,transparent 25%,transparent 75%,#07060c)}
.ha-about .section{position:relative; z-index:2}
.ha-glass{background:rgba(12,9,21,.72); backdrop-filter:blur(4px)}
/* stats */
.ha-stats{display:flex; justify-content:center; flex-wrap:wrap; gap:26px}
.ha-stat{min-width:200px; text-align:center; padding:24px 28px; border-radius:14px; border:1.5px solid rgba(155,77,255,.6); background:#0c0915; box-shadow:0 0 16px rgba(155,77,255,.3)}
.ha-num{display:block; font:700 3rem/1 "Fredoka",sans-serif; background:linear-gradient(90deg,#ff3fa4,#9b4dff,#22f0d5); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.1em}
.ha-stat span{color:#cfc8e6; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.8rem}
/* phones: lighter */
@media (max-width:820px){
  .ha-cast{grid-template-columns:1fr; gap:18px}
  .ha-cc.from-l,.ha-cc.from-r{transform:translateY(30px)}
  .ha-quote{opacity:1; transform:none; font-size:.92rem} .ha-cc-name{transform:translateY(-30px); font-size:1.6rem}
  .ha .feat{transform:none}
  .ha-strip{padding:0 16px}
}
/* reduced motion: everything just shows */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ha *,.ha *::before,.ha *::after{animation:none !important; transition:none !important}
  .rv,.ha-stagger > *,.ha-cc,.ha-l,.ha-down{opacity:1 !important; transform:none !important}
  .ha-kb{clip-path:none} .ha-strip{transform:none} .ha-about-bg{transform:none}
}

/* hero after the intro */
.ha-hero.rv{transform:translateY(60px) scale(.98)} .ha-hero.rv.in{transform:none}
.ha-hero .hero-content{opacity:0; transform:translateX(-40px); transition:opacity .9s .25s ease, transform .9s .25s cubic-bezier(.2,.8,.2,1)}
.ha-hero.in .hero-content{opacity:1; transform:none}


@media (prefers-reduced-motion:reduce){ .ha-hero .hero-content,.ha-hero .hero-bg{opacity:1 !important; transform:none !important} }

/* intro bottom is pure black; next section fades up out of black (no hard edge) */
.ha-intro::after{content:""; position:absolute; left:0; right:0; bottom:0; height:30%; background:linear-gradient(transparent,#000); pointer-events:none; z-index:1}
.ha-hero::before{content:""; position:absolute; left:0; right:0; top:0; height:28%; background:linear-gradient(#000,transparent); pointer-events:none; z-index:2}
.ha-main{background:#000}

/* hero picture slides in from the right */




/* About: full-width (edge to edge) parallax band with Mika art, text fully visible */
.ha-about{width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:90px 0; overflow:hidden}
.ha-about-bg{inset:-22% 0; background-position:center 30%; opacity:.42; filter:saturate(1.15)}
.ha-about::before{background:linear-gradient(#000 0%,rgba(0,0,0,.35) 22%,rgba(0,0,0,.35) 78%,#000 100%),radial-gradient(ellipse at 50% 50%,transparent 35%,rgba(0,0,0,.75) 100%)}
.ha-about .section{max-width:1200px; margin:0 auto; padding:0 clamp(20px,5vw,64px); box-sizing:border-box; overflow:visible}
.ha-about .gal-title-text{padding:0 .15em; overflow:visible; width:auto !important; margin-right:0 !important}
@media (max-width:820px){ .ha-about{padding:60px 0} .ha-about-bg{inset:-8% 0; background-position:60% 30%} }
@media (prefers-reduced-motion:reduce){ .ha-hero .hero-bg{opacity:1 !important; transform:none !important} }
/* hero picture slides in from the right. Uses the separate "translate" property because
   style.css already runs a slow heroZoom animation on transform (that was overriding the slide). */
.ha-hero .hero-bg{translate:35% 0; opacity:0; transition:translate 1.1s cubic-bezier(.15,.75,.25,1), opacity 1s ease-out}
.ha-hero.in .hero-bg{translate:0 0; opacity:1}
@media (max-width:820px){ .ha-hero .hero-bg{translate:25% 0} .ha-hero.in .hero-bg{translate:0 0} }
@media (prefers-reduced-motion:reduce){ .ha-hero .hero-bg{translate:none !important; opacity:1 !important} }
/* Willow card (3rd cast card) */
.ha-cc.from-u{transform:translateY(60px); border-color:#ffd166; box-shadow:0 0 18px rgba(255,209,102,.45)} .rv.in .ha-cc.from-u{transition-delay:.3s}
.ha-cc{aspect-ratio:4/5} .ha-cc-name{font-size:1.6rem; left:18px; bottom:14px}
@media (max-width:820px){ .ha-cast{grid-template-columns:1fr} .ha-cc{aspect-ratio:16/10} .ha-cc.from-u{transform:translateY(30px)} }
/* Nyx's Diary: one white section, picture fades into the page on the right */
.ha-diary{position:relative; display:grid; grid-template-columns:1.3fr 1fr; align-items:center; max-width:1200px; margin:0 auto; background:#fff; border-radius:18px; overflow:hidden}
.ha-diary-pic{align-self:stretch}
.ha-diary-pic img,.ha-diary-pic video{width:100%; height:100%; min-height:420px; object-fit:cover; object-position:30% 50%; display:block;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent 100%); mask-image:linear-gradient(90deg,#000 55%,transparent 100%)}
.ha-diary-note{padding:34px 40px 34px 10px; color:#3a2a33; font:500 1.05rem/1.7 "Fredoka",sans-serif}
.ha-diary-date{font:800 italic 1.5rem "Grandstander","Fredoka",sans-serif; color:#d6287f; margin-bottom:10px}
.ha-diary-note p{margin:0 0 10px}
.ha-diary-sign{text-align:right; font:800 italic 1.3rem "Grandstander","Fredoka",sans-serif; color:#d6287f; margin:8px 0 16px}
@media (max-width:820px){ .ha-diary{grid-template-columns:1fr}
  .ha-diary-pic img,.ha-diary-pic video{min-height:240px; -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%); mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}
  .ha-diary-note{padding:6px 24px 26px} }
/* sandbox: shorter hero for the video */
.hero{min-height:0 !important; height:440px; max-height:440px; overflow:hidden}
.hero-bg{object-position:center 35%}
/* sandbox: align sections to a shared left/right inset */
.ha-mod{padding-left:60px !important; padding-right:60px !important; box-sizing:border-box}
.ha-cast{max-width:none !important; gap:22px}
.ha-diary{max-width:none !important}
.feature-row{max-width:none !important}
.ha-hero .hero-content{padding-left:60px !important}
@media (max-width:820px){ .ha-mod{padding-left:16px !important; padding-right:16px !important} .ha-hero .hero-content{padding-left:20px !important} }
/* sandbox: black body fills the full screen width */
.ha-main{max-width:none !important; width:100%; box-sizing:border-box}
/* sandbox: cast videos */
.ha-cc video{width:100%; height:100%; object-fit:cover; object-position:50% 25%; display:block; transition:transform .6s ease, filter .4s}