/* Atlas Moon Publishing — site stylesheet (v2 · A Moonlit Library for Big Feelings) */
:root{
  --indigo:#1C2147; --indigo-deep:#151A33; --midnight:#252B56; --gold:#F5B942;
  --honey:#FCD787; --cream:#FAF5EA; --violet:#7C6FA8; --ink:#3a3654; --ink-soft:#5b5577;
  --teal:#5FAFA7; --coral:#E98B73; --lavender:#B9A7E8; --night:#151A33; --deepindigo:#20264A;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Nunito Sans',sans-serif;background:var(--indigo);color:var(--cream);font-size:1.08rem;line-height:1.65}
h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:600;line-height:1.22}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.script{font-family:'Caveat',cursive;color:var(--honey);font-size:1.5rem}
.label{letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;font-weight:700;color:#9D92C7;margin-bottom:14px}
.light .label{color:#6e6395}

/* accessibility */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:var(--indigo);padding:10px 18px;border-radius:0 0 12px 0;font-weight:700;text-decoration:none}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* buttons */
.btn{display:inline-block;padding:14px 32px;border-radius:999px;font-weight:700;text-decoration:none;font-size:1rem;transition:all .3s ease;cursor:pointer;border:none;font-family:'Nunito Sans',sans-serif}
.btn-gold{background:var(--gold);color:var(--indigo)}
.btn-gold:hover{box-shadow:0 0 24px rgba(245,185,66,.45);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--cream);border:1.5px solid rgba(250,245,234,.5)}
.btn-ghost:hover{color:var(--gold);border-color:var(--gold)}
.light .btn-ghost{color:var(--ink);border-color:var(--ink)}
.light .btn-ghost:hover{color:var(--violet);border-color:var(--violet)}
.btn-soon{background:rgba(124,111,168,.25);color:var(--cream);border:1.5px dashed rgba(250,245,234,.4);cursor:default}

/* header */
header{padding:18px 0;position:sticky;top:0;background:rgba(28,33,71,.93);backdrop-filter:blur(8px);z-index:50;border-bottom:1px solid rgba(250,245,234,.08)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{font-family:'Fraunces',serif;font-size:1.3rem;color:var(--cream);text-decoration:none;display:flex;align-items:center;gap:10px}
.logo .moon{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--honey),var(--gold));box-shadow:0 0 18px rgba(245,185,66,.5);flex:none}
nav{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
nav a{color:rgba(250,245,234,.85);text-decoration:none;font-size:.95rem;font-weight:600}
nav a:hover,nav a.active{color:var(--gold)}
@media(max-width:1360px){nav{gap:13px}nav a{font-size:.88rem}.logo{font-size:1.18rem}nav .btn{padding:10px 16px !important}}
@media(max-width:760px){header{position:static}}
@media(max-width:560px){
  header{padding:12px 0}
  header .wrap{flex-direction:column;gap:10px}
  .logo{font-size:1.15rem}
  nav{justify-content:center;gap:14px;row-gap:8px}
  nav .btn{padding:8px 18px !important;font-size:.9rem}
}

/* sections */
section{padding:88px 0}
h1{font-size:clamp(2.2rem,5vw,3.4rem)}
h2{font-size:clamp(1.7rem,3.5vw,2.4rem);margin-bottom:18px}
.light{background:var(--cream);color:var(--ink)}
.light h1,.light h2,.light h3,.light h4{color:var(--indigo)}
.mid{background:var(--midnight)}
.muted{color:rgba(250,245,234,.78)}
.light .muted{color:var(--ink-soft)}

/* hero */
.hero{position:relative;padding:80px 0 90px;overflow:hidden;background:linear-gradient(180deg,var(--indigo-deep) 0%,var(--indigo) 60%,#222858 100%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}}
.hero h1 em{font-style:italic;color:var(--honey)}
.hero p.lead{margin:20px 0 34px;color:rgba(250,245,234,.85);font-size:1.16rem;max-width:520px}
.hero-art{border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5);border:1px solid rgba(245,185,66,.2)}
.ctas{display:flex;gap:16px;flex-wrap:wrap}
.star{position:absolute;background:#fff;border-radius:50%;opacity:.6;animation:twinkle 4.5s infinite ease-in-out}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:.8}}

/* page hero (interior pages) */
.page-hero{padding:70px 0 60px;background:linear-gradient(180deg,var(--indigo-deep),var(--indigo));position:relative;overflow:hidden}
.page-hero .wrap{position:relative;z-index:1}

/* book grids */
.book-grid{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:center}
.book-grid-sm{grid-template-columns:240px 1fr;gap:44px}
@media(max-width:820px){.book-grid,.book-grid-sm{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}.book-grid-sm .cover-img{max-width:240px;margin:0 auto}}

/* meet-lumo grid */
.lumo-grid{display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:center}
@media(max-width:760px){.lumo-grid{grid-template-columns:1fr;gap:24px;text-align:center}.lumo-grid svg{width:150px;height:auto;margin:0 auto}}
.cover-img{border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.35);border:1px solid rgba(245,185,66,.25)}
.meta{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 22px}
.chip{border-radius:999px;padding:5px 14px;font-size:.82rem;font-weight:700;background:rgba(245,185,66,.1);border:1px solid rgba(245,185,66,.4);color:var(--honey)}
.light .chip{background:rgba(124,111,168,.12);border-color:rgba(124,111,168,.45);color:#5b5380}

/* shelf (series covers row) */
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:44px}
@media(max-width:900px){.shelf{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.shelf{grid-template-columns:1fr;max-width:300px;margin-left:auto;margin-right:auto}}
.shelf a{text-decoration:none;color:inherit;display:block;transition:transform .3s ease}
.shelf a:hover{transform:translateY(-6px)}
.shelf .feeling{margin-top:14px;text-align:center}
.shelf .feeling .f-label{display:inline-block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--honey)}
.light .shelf .feeling .f-label{color:#8d7fb8}
.shelf .feeling h3{font-size:1.06rem;margin-top:4px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
@media(max-width:760px){.cards{grid-template-columns:1fr}}
.card{background:rgba(37,43,86,.6);border:1px solid rgba(250,245,234,.1);border-radius:20px;padding:32px}
.light .card{background:#fff;border-color:rgba(124,111,168,.18);box-shadow:0 10px 30px rgba(30,27,75,.07)}
.card .ico{font-size:1.7rem;margin-bottom:12px}
.card h3{font-size:1.12rem;color:var(--honey);margin-bottom:10px}
.light .card h3{color:var(--indigo)}
.card p{font-size:.96rem}

/* method strip */
.method{margin-top:48px;text-align:center;padding:28px;border-radius:20px;background:rgba(245,185,66,.07);border:1px solid rgba(245,185,66,.3)}
.method .steps{font-family:'Fraunces',serif;font-size:clamp(1.15rem,2.6vw,1.55rem);color:var(--honey)}
.light .method{background:rgba(245,185,66,.12);border-color:rgba(245,185,66,.5)}
.light .method .steps{color:#a06b10}

/* calm kit band */
.kit{background:linear-gradient(135deg,#3a2f12 0%,#4a3a14 50%,#3a2f12 100%);position:relative;overflow:hidden}
.kit::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,rgba(245,185,66,.22),transparent 60%)}
.kit .wrap{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
@media(max-width:820px){.kit .wrap{grid-template-columns:1fr}}
.kit h2{color:var(--honey)}
.kit ul{list-style:none;margin:20px 0 28px}
.kit li{padding:7px 0 7px 32px;position:relative;color:rgba(250,245,234,.9)}
.kit li::before{content:"★";position:absolute;left:0;color:var(--gold);font-size:.85rem;top:9px}
.form{display:flex;gap:12px;flex-wrap:wrap}
.form input,.cform input,.cform select,.cform textarea{padding:14px 20px;border-radius:999px;border:1.5px solid rgba(250,245,234,.3);background:rgba(28,33,71,.5);color:var(--cream);font-size:1rem;font-family:inherit}
.form input{flex:1;min-width:220px}
.form input::placeholder{color:rgba(250,245,234,.5)}
.fineprint{font-size:.83rem;color:rgba(250,245,234,.55);margin-top:14px}
.kit-card{background:rgba(250,245,234,.07);border:1px solid rgba(245,185,66,.35);border-radius:20px;padding:36px;text-align:center}
.kit-card .moonbig{width:70px;height:70px;border-radius:50%;margin:0 auto 18px;background:radial-gradient(circle at 35% 35%,var(--honey),var(--gold));box-shadow:0 0 40px rgba(245,185,66,.55)}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:36px}
@media(max-width:700px){.gallery{grid-template-columns:1fr}}
.gallery figure{border-radius:16px;overflow:hidden;box-shadow:0 16px 40px rgba(30,27,75,.18)}
.gallery figcaption{font-size:.88rem;padding:10px 14px;background:#fff;color:var(--ink-soft)}

/* two-col lists */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:30px}
@media(max-width:760px){.twocol{grid-template-columns:1fr}}
.checklist{list-style:none}
.checklist li{padding:8px 0 8px 34px;position:relative}
.checklist li::before{content:"✦";position:absolute;left:4px;color:var(--gold);top:9px;font-size:.9rem}

/* FAQ */
details{border-bottom:1px solid rgba(124,111,168,.25);padding:6px 0}
details summary{cursor:pointer;font-weight:700;padding:14px 0;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;align-items:center}
details summary::after{content:"+";font-family:'Fraunces',serif;font-size:1.4rem;color:var(--violet);transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 16px;color:var(--ink-soft)}

/* trust */
.trust-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:36px}
@media(max-width:760px){.trust-cols{grid-template-columns:1fr}}
.trust-cols h3{font-size:1.12rem;margin-bottom:10px}
.trust-cols p{font-size:.97rem;color:var(--ink-soft)}
section:not(.light) .trust-cols p{color:rgba(250,245,234,.78)}

/* contact form */
.cform{display:grid;gap:16px;max-width:560px}
.cform input,.cform select{width:100%}
.cform textarea{width:100%;border-radius:20px;min-height:140px;resize:vertical}
.light .cform input,.light .cform select,.light .cform textarea{background:#fff;border-color:rgba(124,111,168,.4);color:var(--ink)}

/* prose pages */
.prose{max-width:760px}
.prose p{margin-bottom:18px}
.prose h2{margin-top:36px}

/* footer */
footer{background:var(--indigo-deep);padding:60px 0 40px;border-top:1px solid rgba(250,245,234,.08)}
footer .fnav{display:flex;gap:22px;flex-wrap:wrap}
footer a{color:rgba(250,245,234,.7);text-decoration:none;font-size:.9rem}
footer a:hover{color:var(--gold)}
.copyright{width:100%;text-align:center;margin-top:40px;font-size:.85rem;color:rgba(250,245,234,.45)}

/* misc */
.center{text-align:center}
.note{font-size:.9rem;color:var(--ink-soft);font-style:italic}
.breadcrumb{font-size:.85rem;margin-bottom:18px}
.breadcrumb a{color:#B9A7E8;text-decoration:none}
.breadcrumb a:hover{color:var(--gold)}
.contact-grid{grid-template-columns:1fr 1fr;gap:60px}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr !important;gap:36px}}

/* ============================================================
   v2 — A MOONLIT LIBRARY FOR BIG FEELINGS
   New design layer: gentle motion, series world cards, characters,
   educator band, scroll reveal. All motion is disabled under
   prefers-reduced-motion (see the very end of this file).
   ============================================================ */

/* --- gentle keyframes --- */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes sparkle{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:.9;transform:scale(1.15)}}

.float-soft{animation:floaty 7s ease-in-out infinite}
.breathe{animation:breathe 6s ease-in-out infinite}

/* --- hero moon --- */
.heromoon{position:absolute;top:54px;right:7%;width:92px;height:92px;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#FFF3D6,var(--honey) 45%,var(--gold));
  box-shadow:0 0 50px rgba(245,185,66,.55),0 0 110px rgba(245,185,66,.22);z-index:0;opacity:.95}
.heromoon::after{content:"";position:absolute;inset:-38%;border-radius:50%;
  background:radial-gradient(circle,rgba(245,185,66,.16),transparent 70%)}
@media(max-width:860px){.heromoon{width:64px;height:64px;top:30px;right:8%}}
.hero .wrap{position:relative;z-index:1}
.hero-eyebrow{font-family:'Caveat',cursive;color:var(--honey);font-size:1.45rem;margin-bottom:10px}
.trustline{margin-top:26px;font-size:.88rem;color:rgba(250,245,234,.62);letter-spacing:.02em}
.trustline span{white-space:nowrap}

/* --- bigger, softer stars (JS sprinkles .star spans) --- */
.star.gold{background:var(--honey);box-shadow:0 0 6px rgba(252,215,135,.8)}

/* --- series world cards: each series is a doorway --- */
.worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:46px}
@media(max-width:900px){.worlds{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}}
.world-card{position:relative;display:flex;flex-direction:column;border-radius:24px;padding:34px 30px 30px;
  text-decoration:none;color:var(--cream);overflow:hidden;border:1px solid rgba(250,245,234,.12);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease,border-color .45s ease;min-height:380px}
.world-card:hover,.world-card:focus-visible{transform:translateY(-8px)}
.world-card .w-kicker{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;opacity:.85;margin-bottom:12px}
.world-card h3{font-size:1.5rem;margin-bottom:10px}
.world-card .w-promise{font-size:1.02rem;line-height:1.55;opacity:.92}
.world-card .w-themes{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.world-card .w-themes span{font-size:.76rem;font-weight:700;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22)}
.world-card .w-cta{margin-top:auto;font-weight:800;font-size:.95rem;display:inline-flex;align-items:center;gap:8px}
.world-card .w-cta::after{content:"→";transition:transform .35s ease}
.world-card:hover .w-cta::after{transform:translateX(5px)}
.world-card .w-orb{position:absolute;top:22px;right:24px;width:46px;height:46px;border-radius:50%;transition:transform .5s ease}
.world-card:hover .w-orb{transform:translateY(-4px) scale(1.08)}
.world-lumo{background:linear-gradient(160deg,#232a5c 0%,#1a1f44 60%,#16203f 100%)}
.world-lumo:hover{box-shadow:0 24px 60px rgba(245,185,66,.18);border-color:rgba(245,185,66,.45)}
.world-lumo .w-orb{background:radial-gradient(circle at 35% 35%,var(--honey),var(--gold));box-shadow:0 0 26px rgba(245,185,66,.6)}
.world-lumo .w-kicker,.world-lumo .w-cta{color:var(--honey)}
.world-finn{background:linear-gradient(160deg,#FFF3DC 0%,#FFE9C4 100%);color:#2B2D5C;border-color:rgba(43,45,92,.1)}
.world-finn .w-promise{color:#5b5577}
.world-finn:hover{box-shadow:0 24px 60px rgba(245,166,35,.28);border-color:rgba(245,166,35,.6)}
.world-finn .w-orb{background:radial-gradient(circle at 35% 35%,#FCD787,#F5A623);box-shadow:0 0 26px rgba(245,166,35,.55)}
.world-finn .w-kicker,.world-finn .w-cta{color:#E0682F}
.world-finn .w-themes span{background:rgba(43,45,92,.07);border-color:rgba(43,45,92,.18)}
.world-wren{background:linear-gradient(160deg,#1d3a44 0%,#162b38 60%,#152233 100%)}
.world-wren:hover{box-shadow:0 24px 60px rgba(95,175,167,.2);border-color:rgba(95,175,167,.5)}
.world-wren .w-orb{background:radial-gradient(circle at 35% 35%,#9fd8d1,var(--teal));box-shadow:0 0 26px rgba(95,175,167,.55)}
.world-wren .w-kicker,.world-wren .w-cta{color:#8FD0C8}

/* --- "what our books help with" theme pills --- */
.helpgrid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.helpgrid .pill{font-size:.92rem;font-weight:700;padding:10px 22px;border-radius:999px;border:1.5px solid rgba(185,167,232,.4);color:#CFC4EE;background:rgba(124,111,168,.12)}
.helpgrid .pill.gold{border-color:rgba(245,185,66,.45);color:var(--honey);background:rgba(245,185,66,.08)}
.helpgrid .pill.teal{border-color:rgba(95,175,167,.45);color:#8FD0C8;background:rgba(95,175,167,.08)}
.helpgrid .pill.coral{border-color:rgba(233,139,115,.5);color:#F3AC97;background:rgba(233,139,115,.08)}

/* --- character cards --- */
.char-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:42px}
@media(max-width:980px){.char-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.char-grid{grid-template-columns:1fr;max-width:320px;margin-left:auto;margin-right:auto}}
.char-card{background:rgba(37,43,86,.55);border:1px solid rgba(250,245,234,.1);border-radius:22px;padding:26px 22px;text-align:center;transition:transform .4s ease,border-color .4s ease}
.char-card:hover{transform:translateY(-6px);border-color:rgba(245,185,66,.4)}
.char-card .char-art{width:130px;height:130px;border-radius:50%;margin:0 auto 16px;object-fit:cover;border:2px solid rgba(245,185,66,.35);background:#FFF8EC}
.char-card .char-art.svgwrap{display:flex;align-items:center;justify-content:center;background:rgba(21,26,51,.6)}
.char-card:hover .char-art{animation:breathe 4.5s ease-in-out infinite}
.char-card .char-name{font-family:'Fraunces',serif;font-size:1.25rem;color:var(--honey)}
.char-card .char-world{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#9D92C7;margin:4px 0 10px}
.char-card p{font-size:.92rem;color:rgba(250,245,234,.8)}

/* --- educator band --- */
.edu{background:linear-gradient(135deg,#1d3a44 0%,#20264A 70%);position:relative;overflow:hidden}
.edu::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 85% 20%,rgba(95,175,167,.18),transparent 55%)}
.edu .wrap{position:relative}
.edu h2{color:#BFE6E1}
.edu .who{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px}
.edu .who span{font-size:.85rem;font-weight:700;padding:7px 16px;border-radius:999px;background:rgba(95,175,167,.14);border:1px solid rgba(95,175,167,.4);color:#9FD8D1}
.btn-teal{background:var(--teal);color:#10242C}
.btn-teal:hover{box-shadow:0 0 24px rgba(95,175,167,.5);transform:translateY(-1px)}

/* --- cover hover glow (applies sitewide to linked covers) --- */
a .cover-img{transition:box-shadow .45s ease,transform .45s ease}
a:hover .cover-img{box-shadow:0 18px 50px rgba(245,185,66,.32);transform:translateY(-4px)}

/* --- gentle glow buttons get a soft sheen --- */
.btn-gold{background:linear-gradient(135deg,var(--gold) 0%,#F8C75E 50%,var(--gold) 100%)}

/* --- scroll reveal (driven by js/magic.js) --- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal,.reveal.noanim{opacity:1;transform:none}

/* --- wren & scout page world --- */
.wren-hero{position:relative;padding:84px 0 90px;overflow:hidden;background:linear-gradient(180deg,#152233 0%,#1d3a44 80%,#1d3a44 100%)}
.wren-hero h1{color:#EAF6F4}
.wren-hero h1 em{font-style:italic;color:#8FD0C8}
.wren-hero .label{color:#8FD0C8}
.compass{width:120px;height:120px;border-radius:50%;margin:0 auto;background:radial-gradient(circle at 38% 34%,#2a4e58,#1b3540);border:2px solid rgba(143,208,200,.55);display:flex;align-items:center;justify-content:center;box-shadow:0 0 40px rgba(95,175,167,.3)}
.compass svg{animation:floaty 8s ease-in-out infinite}

/* --- featured band refinement --- */
.featured-band{background:linear-gradient(180deg,var(--cream) 0%,#FFF6E4 100%)}

/* ============================================================
   v3 — MOTION PASS (slow, soft, warm, quiet)
   Lumo's breathing glow · worries-to-stars · Zip's stillness.
   Animates transform/opacity only; all of it stands down under
   prefers-reduced-motion (see block below).
   ============================================================ */

/* --- Lumo's breathing glow: ~4s calming-breath cycle behind the hero
       moon, the same rhythm the books teach (injected by magic.js) --- */
.breath-glow{position:absolute;top:-170px;right:calc(7% - 234px);width:560px;height:560px;border-radius:50%;
  pointer-events:none;z-index:0;opacity:.65;will-change:transform,opacity;
  background:radial-gradient(circle,rgba(245,185,66,.30) 0%,rgba(245,185,66,.10) 45%,transparent 70%);
  animation:breathglow 4.2s ease-in-out infinite}
@keyframes breathglow{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.06)}}
@media(max-width:860px){.breath-glow{width:340px;height:340px;top:-108px;right:calc(8% - 138px)}}

/* --- worries-to-stars: tiny lights drift up the hero, dim as they
       rise, twinkle once near the top, and let go (magic.js) --- */
.worry{position:absolute;width:4px;height:4px;border-radius:50%;background:#FFF3D6;
  box-shadow:0 0 6px rgba(252,215,135,.55);opacity:0;pointer-events:none;z-index:0;
  animation:worryrise linear infinite;will-change:transform,opacity}
@keyframes worryrise{
  0%{opacity:0;transform:translateY(0) scale(.8)}
  10%{opacity:.32}
  62%{opacity:.16;transform:translateY(-52vh) scale(.7)}
  72%{opacity:.4;transform:translateY(-58vh) scale(1.2)}
  80%{opacity:.2;transform:translateY(-62vh) scale(.85)}
  100%{opacity:0;transform:translateY(-70vh) scale(.5)}
}
/* magic.js pauses ambient hero motion when the tab is hidden or the
   hero has scrolled away */
.calm-paused .worry,.calm-paused .star{animation-play-state:paused}

/* --- Zip's stillness: he hovers perfectly still when Finn finds calm.
       ±2px on a slow 5.5s cycle — stillness IS the effect --- */
@keyframes zipstill{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.zip-art{animation:zipstill 5.5s ease-in-out infinite;will-change:transform;
  transition:box-shadow .7s ease,border-color .7s ease}
.char-card.zip-card:hover .char-art{animation:zipstill 5.5s ease-in-out infinite;
  border-color:rgba(252,215,135,.75);box-shadow:0 0 22px rgba(252,215,135,.4)}
.fz-card:hover .zip-art{box-shadow:0 0 24px rgba(245,166,35,.35)}

/* --- reduced motion: stillness is also gentle --- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .star{opacity:.5}
  .worry{display:none}           /* no drifting particles */
  .breath-glow{opacity:.65}      /* glow stays, static at mid-breath */
}

/* --- send-a-worry-to-the-stars: the hero tap ritual (magic.js) --- */
.wish{position:absolute;width:6px;height:6px;border-radius:50%;background:#FFEFC9;
  box-shadow:0 0 10px rgba(252,215,135,.8);pointer-events:none;z-index:2;
  animation:wishrise 6.5s ease-out forwards;will-change:transform,opacity}
@keyframes wishrise{
  0%{opacity:.9;transform:translate(-50%,-50%) scale(1)}
  55%{opacity:.3;transform:translate(-50%,calc(-50% - 30vh)) scale(.7)}
  70%{opacity:.95;transform:translate(-50%,calc(-50% - 36vh)) scale(1.7)}
  80%{opacity:.4;transform:translate(-50%,calc(-50% - 38vh)) scale(.9)}
  100%{opacity:0;transform:translate(-50%,calc(-50% - 43vh)) scale(.5)}
}
.hero-hint{font-family:'Caveat',cursive;color:rgba(252,215,135,.6);font-size:1.2rem;margin-top:18px}
@media (prefers-reduced-motion: reduce){
  .wish{display:none}
  .hero-hint{display:none}
}