/* Golden Crumb: scroll-story homepage (custom animation, Premium) */
.scroll-story{position:relative;height:300vh;--sky1:#1B1530;--sky2:#2E2140;--ink2:#F6EBDD}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:linear-gradient(180deg,var(--sky1),var(--sky2));color:var(--ink2);transition:color .6s}
.stage-in{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px;padding-top:80px}
.stars{position:absolute;inset:0;pointer-events:none;transition:opacity .4s}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.8;animation:tw 3s ease-in-out infinite}
@keyframes tw{50%{opacity:.2}}
.clock{position:absolute;left:0;top:100px;display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.14em;font-size:.8rem;text-transform:uppercase}
.clock svg{width:34px;height:34px}
.clock b{font-family:var(--serif);font-weight:600;font-size:1.6rem;letter-spacing:0;text-transform:none}
.dots{position:absolute;right:0;top:50%;transform:translateY(-50%);display:grid;gap:12px}
.dots i{display:block;width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;opacity:.55;transition:background .3s,opacity .3s,transform .3s}
.dots i.on{background:currentColor;opacity:1;transform:scale(1.25)}
.scenes{position:relative;min-height:340px}
.scene{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);opacity:0;visibility:hidden;transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.1,1),visibility .5s}
.scene.on{opacity:1;visibility:visible;transform:translateY(-50%)}
.scene.before{transform:translateY(-42%)}.scene.after{transform:translateY(-58%)}
.scene .kicker{color:var(--butter)}
.scene h1,.scene h2{font-size:clamp(2.8rem,6.2vw,5.6rem);margin:16px 0 18px;color:inherit}
.scene h1 em,.scene h2 em{color:var(--butter)}
.scene p{font-size:1.12rem;max-width:30em;opacity:.85}
.big-num{display:flex;align-items:baseline;gap:10px;margin-top:22px;font-family:var(--serif)}
.big-num b{font-size:4rem;line-height:1;font-weight:600;color:var(--butter);font-variant-numeric:tabular-nums}
.big-num span{font-size:1.1rem;opacity:.8}
.scene .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.scene .btn.line{color:inherit;border-color:currentColor}
.skip{position:absolute;right:24px;bottom:26px;z-index:3;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:inherit;text-decoration:none;border:1.5px solid currentColor;border-radius:999px;padding:9px 16px;opacity:.75;transition:opacity .3s,background .3s,color .3s}
.skip:hover,.skip:focus-visible{opacity:1;background:currentColor}.skip:hover span,.skip:focus-visible span{color:var(--sky2)}
.hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:.75;transition:opacity .4s}
.hint i{width:22px;height:36px;border:1.5px solid currentColor;border-radius:12px;position:relative}
.hint i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:currentColor;animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{60%{transform:translateY(10px);opacity:0}}
.art{position:relative;width:100%;max-width:520px;justify-self:center;aspect-ratio:1/1}
.art svg{width:100%;height:100%;overflow:visible}
.art .g{opacity:0;transition:opacity .5s}
.art .g.on{opacity:1}
#glow{transition:opacity .4s}
.heat path{animation:heat 1.8s ease-in-out infinite}
.heat path:nth-child(2){animation-delay:-.6s}.heat path:nth-child(3){animation-delay:-1.2s}
@keyframes heat{50%{transform:translateY(-8px);opacity:.3}}
#sign{transform-origin:200px 70px;transform-box:view-box}
#sign.swing{animation:swing 2.4s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@media(max-width:860px){
  .stage-in{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-content:start;gap:0;padding-top:120px}
  .art{max-width:min(300px,38vh);order:-1;margin:0 auto}
  .scenes{min-height:300px}
  .scene{top:10px;transform:none}.scene.on{transform:none}.scene.before{transform:translateY(8px)}.scene.after{transform:translateY(-8px)}
  .scene h1,.scene h2{font-size:clamp(2.2rem,9vw,3rem);margin:10px 0 10px}
  .scene p{font-size:1rem}
  .big-num b{font-size:2.8rem}
  .clock{top:92px}.clock b{font-size:1.2rem}.clock svg{width:26px;height:26px}
  .dots{right:-6px}
  .hint{bottom:14px}.skip{right:14px;bottom:12px;padding:7px 12px;font-size:.66rem}
}
@media(max-height:700px) and (max-width:860px){.stage-in{padding-top:112px}.art{max-width:min(210px,27vh)}.scene p{font-size:.92rem}.hint,.scene .hours-pill{display:none}.scene .ctas{margin-top:16px;gap:8px}.scene .ctas .btn{padding:11px 16px;font-size:.85rem}.big-num{margin-top:12px}}
/* reduced motion: show every scene one after another, no pinning */
@media(prefers-reduced-motion:reduce){
  .scroll-story{height:auto}.stage{position:relative;height:auto;padding:60px 0}
  .scenes{min-height:0}.scene{position:relative;top:auto;transform:none!important;opacity:1;visibility:visible;margin-bottom:60px}
  .art .g{opacity:1}.art .g:not(#g4){display:none}.hint,.dots{display:none}.clock{position:relative;top:0;margin-bottom:30px}
  .stars i,.heat path,#sign.swing{animation:none}
}
.stage.day .scene h1 em,.stage.day .scene h2 em,.stage.day .big-num b{color:var(--rasp)}
.stage.day .scene .kicker{color:var(--crust)}
.scene .hours-pill{margin-top:22px}
#lit{animation:lit 2.6s ease-in-out infinite}
@keyframes lit{50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){#lit{animation:none}}