:root{
  --navy:#120a26;
  --violet:#2a1152;
  --purple:#7b35c4;
  --pumpkin:#ff7a18;
  --ember:#ffb43d;
  --gold:#ffd977;
  --lav:#cbb4ff;
  --black:#070412;
  --cream:#fff1d6;
  --disp:'Eagle Lake',serif;
  --body:'Baloo 2',system-ui,sans-serif;
  --hand:'Caveat',cursive;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  min-width:1180px;
  background:var(--black);
  color:var(--cream);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  overflow-x:clip;
}

/* ---------- starfield ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(130% 90% at 50% 0%,#241048 0%,#140a2c 45%,#070412 100%)}
.stars{position:absolute;inset:-20%;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%,#fff 50%,transparent),
    radial-gradient(1.4px 1.4px at 34% 42%,var(--gold) 50%,transparent),
    radial-gradient(1.8px 1.8px at 58% 12%,#fff 50%,transparent),
    radial-gradient(1.3px 1.3px at 76% 56%,var(--lav) 50%,transparent),
    radial-gradient(1.5px 1.5px at 88% 24%,#fff 50%,transparent),
    radial-gradient(1.4px 1.4px at 22% 72%,var(--gold) 50%,transparent),
    radial-gradient(1.2px 1.2px at 48% 84%,#fff 50%,transparent),
    radial-gradient(1.6px 1.6px at 66% 68%,var(--lav) 50%,transparent),
    radial-gradient(1.3px 1.3px at 92% 80%,#fff 50%,transparent);
  background-size:100% 100%;
  animation:twinkle 5.5s ease-in-out infinite;
}
.stars.s2{transform:scale(1.4) rotate(14deg);animation-duration:8s;animation-delay:-2s;opacity:.65}
@keyframes twinkle{0%,100%{opacity:.45}50%{opacity:1}}

/* ---------- shared pieces ---------- */
.ca-card{
  display:inline-flex;flex-direction:column;gap:4px;
  background:rgba(27,10,56,.82);
  border:1px solid rgba(255,122,24,.55);
  border-radius:14px;
  padding:14px 26px;
  box-shadow:0 0 0 1px rgba(255,217,119,.14) inset,0 14px 40px rgba(0,0,0,.6);
  backdrop-filter:blur(6px);
  margin-bottom:22px;
}
.ca-label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ember);font-weight:700}
.ca-card code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:19px;color:var(--gold);letter-spacing:.5px;word-break:break-all;
}

.btn-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.btn>*{position:relative;z-index:3}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-weight:800;font-size:16px;
  letter-spacing:.05em;text-transform:uppercase;
  padding:16px 34px;border-radius:999px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;position:relative;isolation:isolate;
  overflow:hidden;transform:translateZ(0);
  transition:transform .22s cubic-bezier(.2,.9,.3,1.4),box-shadow .26s ease,filter .2s ease;
}
/* sweeping shine */
.btn::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%;z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);
  transform:skewX(-18deg);opacity:0;transition:opacity .2s;pointer-events:none}
.btn:hover::before{opacity:1;animation:shine .75s ease-out}
@keyframes shine{from{left:-60%}to{left:120%}}
/* pulsing aura ring */
.btn::after{content:"";position:absolute;inset:-2px;border-radius:999px;z-index:-1;
  border:2px solid currentColor;opacity:0;transition:opacity .25s}
.btn:hover::after{opacity:.5;animation:ring 1.1s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.18);opacity:0}}
.btn:hover{transform:translateY(-4px) scale(1.035)}
.btn:active{transform:translateY(-1px) scale(.98);transition-duration:.08s}

.btn-x{background:linear-gradient(165deg,#a558ea 0%,#7b35c4 45%,#4d1793 100%);color:#fff;
  border-color:var(--gold);
  box-shadow:0 10px 26px rgba(123,53,196,.5),inset 0 1px 0 rgba(255,255,255,.35),
             inset 0 -3px 10px rgba(0,0,0,.35)}
.btn-x:hover{box-shadow:0 18px 42px rgba(138,70,214,.75),0 0 30px rgba(203,180,255,.45),
             inset 0 1px 0 rgba(255,255,255,.45),inset 0 -3px 10px rgba(0,0,0,.3)}

.btn-copy{background:linear-gradient(165deg,#ffb253 0%,#ff9029 22%,#f2740f 56%,#c54f05 100%);
  color:#2a1003;border-color:#ffd977;
  box-shadow:0 10px 26px rgba(255,122,24,.5),inset 0 1px 0 rgba(255,245,210,.65),
             inset 0 -3px 10px rgba(120,40,0,.4);
  animation:emberPulse 2.8s ease-in-out infinite}
@keyframes emberPulse{0%,100%{box-shadow:0 10px 26px rgba(255,122,24,.5),0 0 0 rgba(255,180,61,0),
    inset 0 1px 0 rgba(255,245,210,.65),inset 0 -3px 10px rgba(120,40,0,.4)}
  50%{box-shadow:0 10px 30px rgba(255,122,24,.62),0 0 26px rgba(255,180,61,.45),
    inset 0 1px 0 rgba(255,245,210,.7),inset 0 -3px 10px rgba(120,40,0,.35)}}
.btn-copy:hover{animation:none;
  box-shadow:0 18px 44px rgba(255,122,24,.8),0 0 40px rgba(255,180,61,.6),
             inset 0 1px 0 rgba(255,245,210,.8),inset 0 -3px 10px rgba(120,40,0,.3)}
.btn-copy:hover .jack{animation:jackSpin .6s ease}
@keyframes jackSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(-14deg) scale(1.25)}
  100%{transform:rotate(0) scale(1)}}

.btn-buy{background:linear-gradient(165deg,rgba(255,217,119,.14),rgba(255,217,119,.04));
  color:var(--gold);border-color:rgba(255,217,119,.75);
  box-shadow:inset 0 1px 0 rgba(255,245,210,.25)}
.btn-buy:hover{background:linear-gradient(165deg,rgba(255,217,119,.3),rgba(255,217,119,.12));
  color:#fff6df;border-color:var(--gold);
  box-shadow:0 16px 38px rgba(255,217,119,.35),0 0 30px rgba(255,217,119,.4),
             inset 0 1px 0 rgba(255,245,210,.4)}

/* a copied button briefly flashes green-gold */
.btn.copied{animation:copiedFlash .7s ease}
@keyframes copiedFlash{0%{filter:brightness(1)}30%{filter:brightness(1.5) saturate(1.4)}
  100%{filter:brightness(1)}}

.jack{width:20px;height:20px;flex:0 0 20px;color:#ff8420}
.btn-copy .jack{color:#7a2f00}
.ghosticon{width:22px;height:22px;flex:0 0 22px}
.toast{display:flex;align-items:center;gap:10px}
.foot-jack{display:inline-block}
.foot-jack .jack{width:40px;height:40px;color:#ff8420}

h2{font-family:var(--disp);font-weight:400;line-height:1.14;color:var(--cream);
  text-shadow:0 0 36px rgba(255,180,61,.3)}
h2 em{font-style:normal;color:var(--ember);
  background:linear-gradient(180deg,#ffe49b,#ff8a1f);-webkit-background-clip:text;background-clip:text;color:transparent}

.band{text-align:center;font-size:62px;margin:0 auto 54px;max-width:1100px}

/* ---------- 1. hero ---------- */
.hero{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding:0 0 70px;overflow:hidden}
.hero-art{position:absolute;inset:0;z-index:0}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:72% 42%;
  animation:heroIn 1.8s cubic-bezier(.2,.7,.2,1) both}
@keyframes heroIn{from{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}
.hero-veil{position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(7,4,18,.82) 0%,rgba(18,10,38,.6) 32%,rgba(18,10,38,.16) 54%,rgba(18,10,38,0) 70%),
    linear-gradient(180deg,rgba(7,4,18,.35) 0%,transparent 26%,rgba(7,4,18,.82) 100%);
}

.hero-copy{position:relative;z-index:3;width:660px;margin-left:92px;
  animation:rise 1.1s .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}

.title{
  font-family:var(--disp);font-weight:400;font-size:104px;line-height:.98;
  background:linear-gradient(175deg,#fff6df 8%,#ffd977 38%,#ff8a1f 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 40px rgba(255,160,40,.45));
  margin-bottom:6px;
}
.ticker{display:inline-block;font-weight:800;font-size:22px;letter-spacing:.2em;
  color:var(--gold);border:1px solid rgba(255,217,119,.5);border-radius:999px;
  padding:5px 20px;margin-bottom:20px;background:rgba(42,17,82,.6)}
.kicker{font-family:var(--disp);font-size:25px;color:var(--lav);margin-bottom:12px;line-height:1.3}
.sub{font-size:18px;color:#e5d7f5;max-width:540px;margin-bottom:26px}

.scroll-cue{position:absolute;bottom:26px;left:0;right:0;text-align:center;z-index:3;
  font-family:var(--hand);font-size:24px;color:var(--ember);letter-spacing:.06em;
  animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.8}50%{transform:translateY(9px);opacity:1}}

/* bats */
.bats{position:absolute;inset:0;z-index:2;pointer-events:none}
.bat{position:absolute;width:26px;height:12px;
  background:
    radial-gradient(circle at 50% 100%,#0a0614 38%,transparent 39%),
    conic-gradient(from 200deg at 0% 50%,#0a0614 0 30deg,transparent 31deg),
    conic-gradient(from 310deg at 100% 50%,#0a0614 0 30deg,transparent 31deg);
  clip-path:polygon(0 0,22% 46%,50% 18%,78% 46%,100% 0,86% 86%,50% 60%,14% 86%);
  background:#09040f;
  opacity:.85;
  animation:flap .5s ease-in-out infinite alternate,fly 16s linear infinite;
}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.45)}}
@keyframes fly{
  0%{left:-6%;top:28%}25%{top:16%}50%{top:34%}75%{top:20%}100%{left:106%;top:30%}
}
.b1{animation-delay:0s,-1s;transform:scale(1.3)}
.b2{animation-delay:-.2s,-5s;opacity:.6}
.b3{animation-delay:-.1s,-9s;transform:scale(.8)}
.b4{animation-delay:-.3s,-12s;opacity:.5}
.b5{animation-delay:-.15s,-14.5s;transform:scale(1.1)}

/* ---------- 2. meet ---------- */
.meet{position:relative;z-index:1;display:flex;align-items:center;gap:54px;
  padding:120px 72px;max-width:1660px;margin:0 auto}
.meet-art{position:relative;z-index:2;flex:0 0 760px}
.meet-art img{width:100%;display:block;border-radius:22px;
  border:1px solid rgba(255,217,119,.3);
  box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 70px rgba(123,53,196,.3)}
.bubble{position:absolute;right:-34px;bottom:52px;
  font-family:var(--hand);font-size:23px;color:#2a1152;
  background:#efe6ff;padding:11px 20px;border-radius:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.5);
  animation:float 4s ease-in-out infinite}
.bubble::after{content:"";position:absolute;left:28px;bottom:-11px;
  border:12px solid transparent;border-top-color:#efe6ff;border-bottom:0}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

.meet-text{position:relative;z-index:2;flex:1;min-width:0}
.meet-text h2{font-size:58px;margin-bottom:20px;white-space:nowrap}
.meet-text p{font-size:19px;color:#e2d4f3;max-width:600px;margin-bottom:28px}
.notes{list-style:none;display:grid;gap:13px}
.notes li{position:relative;padding-left:34px;font-family:var(--hand);font-size:23px;color:var(--lav)}
.notes li b{color:var(--ember);font-family:var(--body);font-size:16px;font-weight:800;
  text-transform:uppercase;letter-spacing:.07em;margin-right:7px}
.notes li::before{content:"✦";position:absolute;left:4px;top:-1px;color:var(--gold);font-size:19px}

/* ---------- 3. scenes ---------- */
.scenes{position:relative;z-index:1;padding:90px 0 40px}
.scene{position:relative;height:92vh;min-height:680px;margin-bottom:26px;overflow:hidden;
  background:#140a2c center/cover no-repeat;
  opacity:0;transform:scale(1.035);transition:opacity .9s ease,transform 1.3s ease}
.scene.in{opacity:1;transform:scale(1)}
.scene::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,4,18,.55) 0%,transparent 26%,transparent 56%,rgba(7,4,18,.88) 100%)}
.scene figcaption{position:absolute;z-index:2;left:68px;bottom:62px;max-width:640px;
  font-family:var(--disp);font-size:34px;line-height:1.3;color:var(--cream);
  text-shadow:0 4px 30px rgba(0,0,0,.95)}
.scene figcaption.tr{left:auto;right:68px;bottom:auto;top:72px;text-align:right}
.scene figcaption.br{left:auto;right:68px;text-align:right}
.num{display:inline-block;font-family:var(--body);font-weight:800;font-size:13px;
  letter-spacing:.3em;color:#2a1003;background:var(--ember);
  padding:3px 12px;border-radius:999px;margin-bottom:14px;
  box-shadow:0 4px 18px rgba(0,0,0,.6)}

/* ---------- 4. pumpkin ---------- */
.pumpkin-sec{position:relative;z-index:1;text-align:center;padding:140px 92px 150px}
.pumpkin-sec h2,.pumpkin-sec .whisper,.pumpkin-sec .talk,.pumpkin-sec .burst{position:relative;z-index:2}
.pumpkin-sec h2{font-size:60px;margin-bottom:14px}
.whisper{font-family:var(--hand);font-size:27px;color:var(--lav);margin-bottom:46px}
.pumpkin{position:relative;z-index:1;display:block;margin:0 auto;width:340px;height:340px;
  background:transparent;border:0;outline:0;cursor:pointer;padding:0;appearance:none;
  animation:float 5s ease-in-out infinite}
.pumpkin img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain}
.pumpkin img[hidden]{display:none}
.pumpkin-svg{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;
  filter:drop-shadow(0 0 46px rgba(255,140,30,.6))}
.pumpkin.has-img .pumpkin-svg{display:none}
.glow-part{animation:flicker 2.6s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:1}42%{opacity:.68}58%{opacity:.95}72%{opacity:.6}}
.pumpkin-halo{position:absolute;inset:-14%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,138,31,.45) 0%,rgba(255,138,31,0) 68%);
  animation:flicker 2.6s ease-in-out infinite}
.pumpkin:hover{filter:brightness(1.12)}
.pumpkin.pop{animation:pop .5s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.13)}100%{transform:scale(1)}}

.talk{position:relative;z-index:2;margin-top:58px;clear:both;display:grid;gap:9px;font-family:var(--hand);font-size:25px;color:#ead9ff}
.talk b{font-family:var(--body);font-size:14px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember);margin-right:9px}
.burst{height:34px;margin-top:22px;font-family:var(--disp);font-size:26px;color:var(--gold);
  opacity:0;transition:opacity .3s}
.burst.show{opacity:1}

/* spark particles */
.spark{position:fixed;width:9px;height:9px;pointer-events:none;z-index:60;
  background:radial-gradient(circle,#fff6d0 0%,#ffb43d 45%,rgba(255,122,24,0) 70%);
  border-radius:50%;animation:sparkUp 1.3s ease-out forwards}
@keyframes sparkUp{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

/* ---------- 5. moods ---------- */
.moods{position:relative;z-index:1;padding:110px 92px 140px}
.mood-row{display:flex;gap:22px;max-width:1560px;margin:0 auto}
.mood{flex:1 1 0;min-width:0;position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;
  background:#1d0e3d center/cover no-repeat;
  border:1px solid rgba(255,217,119,.22);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.mood:hover{transform:translateY(-10px) rotate(-1.1deg);border-color:rgba(255,217,119,.75);
  box-shadow:0 26px 60px rgba(0,0,0,.65),0 0 54px rgba(255,138,31,.35)}
.mood::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(7,4,18,.92) 100%)}
.mood figcaption{position:absolute;z-index:2;left:24px;right:24px;bottom:24px}
.mood figcaption b{display:block;font-family:var(--disp);font-weight:400;font-size:30px;
  color:var(--gold);margin-bottom:5px}
.mood figcaption span{font-family:var(--hand);font-size:21px;color:#e6d8ff}

/* ---------- 6. finale ---------- */
.finale{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;
  justify-content:center;text-align:center;overflow:hidden;padding:120px 92px}
.fin-art{position:absolute;inset:0;z-index:0}
.fin-art img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;
  filter:brightness(.72) blur(1.5px) saturate(1.2)}
.fin-art::after{content:"";position:absolute;inset:0;
  background:radial-gradient(62% 62% at 50% 48%,rgba(7,4,18,.76) 0%,rgba(7,4,18,.42) 62%,rgba(7,4,18,.72) 100%)}
.fin-copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center}
.tags{font-weight:800;font-size:13px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--pumpkin);margin-bottom:20px}
.finale h2{font-size:78px;margin-bottom:18px}
.fin-sub{font-family:var(--hand);font-size:27px;color:var(--lav);margin-bottom:34px}

footer{position:relative;z-index:1;text-align:center;padding:62px 20px 70px;
  border-top:1px solid rgba(255,217,119,.16);background:rgba(7,4,18,.86)}
.foot-jack{display:block;margin-bottom:14px;line-height:0;
  animation:float 3.6s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(255,138,31,.6))}
footer p{font-family:var(--hand);font-size:24px;color:var(--lav)}
.foot-tick{font-family:var(--body)!important;font-size:13px!important;font-weight:800;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ember)!important;margin-top:12px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:44px;transform:translate(-50%,24px);
  background:linear-gradient(180deg,#efe6ff,#d8c5ff);color:#2a1152;
  font-family:var(--hand);font-size:24px;padding:13px 28px;border-radius:999px;
  box-shadow:0 16px 44px rgba(0,0,0,.6);z-index:80;
  opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv,.scene{opacity:1;transform:none}
}

/* mood cards get distinct tints so stand-in crops read as four different moods */
.mood:nth-child(1){--tint:rgba(255,122,24,.0)}
.mood:nth-child(2){--tint:rgba(123,53,196,.34)}
.mood:nth-child(3){--tint:rgba(80,180,220,.26)}
.mood:nth-child(4){--tint:rgba(255,160,40,.3)}
.mood::before{content:"";position:absolute;inset:0;z-index:1;background:var(--tint);
  mix-blend-mode:color;pointer-events:none}
.mood figcaption{z-index:3}

/* visitor ledger */
.foot-visits{font-family:var(--body)!important;font-size:12px!important;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(203,180,255,.55)!important;
  margin-top:10px;visibility:hidden}
.foot-visits:has(span:not([hidden])){visibility:visible}
.foot-visits span{color:var(--ember);font-size:14px;letter-spacing:.14em;margin-left:4px}

/* ============ ATMOSPHERE ============ */

/* drifting purple mist across the whole page */
.mist{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden;opacity:.55}
.mist span{position:absolute;left:-100%;width:200%;height:40vh;
  background:url("img/mist.png") repeat-x center/auto 100%;
  opacity:.3;animation:drift linear infinite}
.mist span:nth-child(1){top:8%;animation-duration:46s}
.mist span:nth-child(2){top:38%;animation-duration:64s;animation-delay:-18s;opacity:.2}
.mist span:nth-child(3){top:64%;animation-duration:54s;animation-delay:-34s;opacity:.16}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* falling autumn leaves */
.leaves{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.leaf{position:absolute;top:-6%;width:16px;height:16px;opacity:.85;
  animation:fall linear infinite}
.leaf svg{width:100%;height:100%;display:block}
@keyframes fall{
  0%{transform:translateY(-10vh) translateX(0) rotate(0deg)}
  100%{transform:translateY(112vh) translateX(var(--sway,60px)) rotate(var(--spin,420deg))}
}

/* ghosts that drift up through sections */
.ghosts{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.gh{position:absolute;width:52px;height:60px;opacity:0;
  animation:ghostUp linear infinite}
.gh svg{width:100%;height:100%;filter:drop-shadow(0 0 16px rgba(203,180,255,.55))}
@keyframes ghostUp{
  0%{transform:translateY(40px) translateX(0) scale(.9);opacity:0}
  14%{opacity:.75}
  70%{opacity:.6}
  100%{transform:translateY(-260px) translateX(var(--gx,40px)) scale(1.05);opacity:0}
}

/* moon breathing glow behind the hero */
.moonglow{position:absolute;left:8%;top:10%;width:420px;height:420px;z-index:1;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(255,217,119,.16) 0%,rgba(255,180,61,.06) 44%,transparent 70%);
  animation:moonBreathe 7s ease-in-out infinite}
@keyframes moonBreathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.09)}}

/* title gets a slow golden shimmer sweep */
.title{background-size:200% 100%;animation:rise 1.1s .5s cubic-bezier(.2,.7,.2,1) both,
  shimmer 6s ease-in-out 1.6s infinite}
@keyframes shimmer{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* ticker chip pulses */
.ticker{animation:tickGlow 3.4s ease-in-out infinite}
@keyframes tickGlow{0%,100%{box-shadow:0 0 0 rgba(255,217,119,0);border-color:rgba(255,217,119,.5)}
  50%{box-shadow:0 0 26px rgba(255,217,119,.4);border-color:rgba(255,217,119,.95)}}

/* CA card: orange border creeps around on hover */
.ca-card{transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.ca-card:hover{border-color:rgba(255,122,24,.95);transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(255,217,119,.22) inset,0 18px 48px rgba(0,0,0,.7),
             0 0 34px rgba(255,122,24,.3)}
.ca-card code{transition:text-shadow .3s ease}
.ca-card:hover code{text-shadow:0 0 18px rgba(255,217,119,.75)}

/* scene captions slide in */
.scene figcaption{transform:translateY(26px);opacity:0;
  transition:transform .9s cubic-bezier(.2,.7,.2,1) .25s,opacity .9s ease .25s}
.scene.in figcaption{transform:none;opacity:1}

/* scene art lifts slightly on hover */
.scene{transition:opacity .9s ease,transform 1.3s ease,filter .5s ease}
.scene:hover{filter:brightness(1.07) saturate(1.08)}

/* section headings get a smoke-in */
.band{animation:none}
.band.in{animation:smokeIn 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes smokeIn{from{opacity:0;filter:blur(14px);transform:translateY(22px) scale(.97)}
  to{opacity:1;filter:blur(0);transform:none}}

/* mood cards: stars twinkle in on hover */
.mood .sparkles{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  transition:opacity .3s}
.mood:hover .sparkles{opacity:1}
.mood .sparkles i{position:absolute;width:8px;height:8px;background:var(--gold);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  animation:twinkleStar 1.4s ease-in-out infinite}
@keyframes twinkleStar{0%,100%{transform:scale(.4) rotate(0);opacity:.3}
  50%{transform:scale(1.15) rotate(45deg);opacity:1}}

/* footer pumpkin reacts */
.foot-jack{cursor:default;transition:transform .3s ease}
.foot-jack:hover{transform:scale(1.18) rotate(-7deg)}

@media (prefers-reduced-motion:reduce){
  .mist,.leaves,.ghosts{display:none}
  .btn::before,.btn::after{display:none}
}