/* =========================================================
   Mildheart – motion & delight layer (loaded after style.css on every page).
   Only transform + opacity are animated. Everything is switched off for
   people who ask their device for reduced motion. If JavaScript fails,
   all content stays visible (hidden states only apply once JS has run).
   ========================================================= */

/* ---------- Static helpers (safe with or without motion) ---------- */
.hero{overflow:hidden;isolation:isolate}
.hero-parallax{position:absolute;left:0;right:0;top:-12%;bottom:-12%;background-size:cover;background-position:center;z-index:-1;will-change:transform}
.blobs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;width:46vmax;height:46vmax;border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;opacity:.38}
.blob.b1{background:radial-gradient(circle at 35% 35%,var(--pink),rgba(254,128,192,0) 68%);left:-14vmax;top:-18vmax}
.blob.b2{background:radial-gradient(circle at 50% 50%,var(--sky),rgba(94,193,224,0) 68%);right:-16vmax;bottom:-22vmax}
.blob.b3{background:radial-gradient(circle at 50% 50%,var(--pink-dark),rgba(224,40,125,0) 66%);right:18%;top:-26vmax;opacity:.22;width:34vmax;height:34vmax}
.wave{position:absolute;left:0;width:100%;height:46px;pointer-events:none;overflow:hidden;z-index:1}
.wave.bottom{bottom:-1px}
.wave.top{top:-45px}
.wave svg{display:block;width:200%;height:100%}
.wave .w2{opacity:.5}
.site-footer{position:relative}
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--pink),var(--sky));transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}
.count-up{display:inline-block;font-variant-numeric:tabular-nums;text-align:center}

/* Marquee of existing event photos (homepage) */
.marquee{overflow:hidden;margin:6px 0 10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content}
.marquee img{height:150px;width:225px;object-fit:cover;border-radius:12px;flex:0 0 auto}
.marquee a{display:block;border-radius:12px}

/* Cycle ring (period tracker) */
.cycle-ring{display:flex;justify-content:center;margin:6px 0 4px}
.cycle-ring svg{width:210px;height:210px;overflow:visible}
.cycle-ring .ring-track{fill:none;stroke:#eee;stroke-width:16}
.cycle-ring .ring-period{fill:none;stroke:var(--pink);stroke-width:16;stroke-linecap:round}
.cycle-ring .ring-fertile{fill:none;stroke:#8ED6EE;stroke-width:16;stroke-linecap:round}
.cycle-ring .ring-marker circle{fill:#fff;stroke:#222;stroke-width:3}
.cycle-ring text{font-family:var(--font-body);text-anchor:middle;fill:#222}
.cycle-ring .ring-big{font-size:30px;font-weight:700;fill:var(--pink)}
.cycle-ring .ring-small{font-size:11px;fill:var(--muted)}

/* Podcast equaliser */
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px;width:18px;margin-right:6px;vertical-align:-1px}
.eq i{display:block;width:3px;height:100%;background:var(--pink);border-radius:2px;transform-origin:50% 100%;transform:scaleY(.35)}

/* Confetti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:0}

/* Mobile menu: animate instead of display toggle */
@media (max-width:820px){
  .site-nav{display:flex;visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
  .site-nav.open{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:opacity .25s ease,transform .25s ease}
  .marquee img{height:120px;width:180px}
}

/* ---------- Everything that moves ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
  main{animation:mh-page-in .45s ease-out both}
  @keyframes mh-page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  /* Hero entrance */
  .hero .page-title,.hero-donate .hero-content>*,.hero-home p,.hero-home .btn-row{animation:mh-rise .8s cubic-bezier(.2,.7,.2,1) both}
  .hero-home p{animation-delay:.55s}
  .hero-home .btn-row{animation-delay:.75s}
  .hero-donate .hero-content>*:nth-child(2){animation-delay:.12s}
  .hero-donate .hero-content>*:nth-child(3){animation-delay:.24s}
  .hero-donate .hero-content>*:nth-child(4){animation-delay:.36s}
  .js .hero-home h1:not(.split){opacity:0;animation:mh-failsafe 0s 1.5s forwards}
  .hero-home h1 .w{display:inline-block;animation:mh-word .9s cubic-bezier(.2,.8,.2,1.1) both;animation-delay:calc(.1s + var(--i) * .16s)}
  @keyframes mh-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  @keyframes mh-word{from{opacity:0;transform:translateY(.7em) rotate(4deg) scale(.96)}to{opacity:1;transform:none}}
  @keyframes mh-failsafe{to{opacity:1}}
  .blob{animation:mh-float 18s ease-in-out infinite alternate}
  .blob.b2{animation-duration:22s;animation-direction:alternate-reverse}
  .blob.b3{animation-duration:26s}
  @keyframes mh-float{0%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(6vmax,4vmax) rotate(40deg) scale(1.12)}100%{transform:translate(-3vmax,7vmax) rotate(90deg) scale(.94)}}
  .wave svg{animation:mh-wave 14s linear infinite}
  .wave .w2-wrap svg{animation-duration:22s;animation-direction:reverse}
  @keyframes mh-wave{to{transform:translateX(-50%)}}

  /* Scroll reveals (classes added by motion.js only) */
  .rv:not(.in){opacity:0}
  .rv.in{animation:mh-rv-up .75s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards}
  .rv[data-rv="left"].in{animation-name:mh-rv-left}
  .rv[data-rv="right"].in{animation-name:mh-rv-right}
  .rv[data-rv="scale"].in{animation-name:mh-rv-scale}
  /* v13: columns stack below 1024px, so a sideways slide would push full-width blocks past the screen edge; slide up instead */
  @media (max-width:1023px){.rv[data-rv="left"].in,.rv[data-rv="right"].in{animation-name:mh-rv-up}}
  @keyframes mh-rv-up{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
  @keyframes mh-rv-left{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
  @keyframes mh-rv-right{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
  @keyframes mh-rv-scale{from{opacity:0;transform:translateY(20px) scale(.92)}to{opacity:1;transform:none}}
  .section-title .line{transform-origin:0 50%}
  .section-title.rv.in .line{animation:mh-line .9s .25s cubic-bezier(.2,.7,.2,1) backwards}
  @keyframes mh-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  /* Header shrink + logo */
  .site-header{transition:transform .3s ease,box-shadow .3s ease}
  .site-header .header-inner,.brand img{transition:transform .3s ease}
  .site-header.shrink{transform:translateY(-10px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
  .site-header.shrink .header-inner{transform:translateY(5px)}
  .site-header.shrink .brand img{transform:scale(.86)}
  .brand img{transform-origin:0 50%}

  /* Hover & tap micro-interactions */
  .btn{position:relative;overflow:hidden;transition:filter .2s,transform .2s}
  .btn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 100%);transform:translateX(-160%) skewX(-20deg);pointer-events:none}
  .btn:hover::after,.btn:focus-visible::after{transition:transform .7s ease;transform:translateX(260%) skewX(-20deg)}
  .btn:active{transform:scale(.97)}
  .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);opacity:1;pointer-events:none;animation:mh-ripple .6s ease-out forwards}
  @keyframes mh-ripple{to{transform:scale(1);opacity:0}}
  .programme-card,.comic-tile,.info-card,.grey-card,.core-item,.team-card,.phase,.pt-stat{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
  .programme-card:hover,.comic-tile:hover,.info-card:hover,.phase:hover{transform:translateY(-6px);box-shadow:0 12px 26px rgba(0,0,0,.1)}
  .core-item:hover{transform:translateY(-6px)}
  .core-item img{transition:transform .4s cubic-bezier(.2,.7,.2,1.4)}
  .core-item:hover img{transform:rotate(-8deg) scale(1.12)}
  .tilt{transform-style:preserve-3d;transition:transform .25s ease-out,box-shadow .3s}
  .programme-card,.comic-tile,.engagement-img,.comic-cover{overflow:hidden;border-radius:var(--radius)}
  .programme-card{border-radius:0}
  .programme-card img,.comic-tile img,.engagement-img img,.comic-cover img,.gallery img,.tool-card img,.marquee img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .programme-card:hover img,.comic-tile:hover img,.engagement-img:hover img,.comic-cover:hover img,.tool-card:hover img,.marquee a:hover img{transform:scale(1.06)}
  .gallery img:hover{transform:scale(1.04)}
  .team-card img{transition:transform .4s}
  .team-card:hover img{transform:translateY(-6px) rotate(-1.5deg)}
  .tool-card .tool-icon{transition:transform .4s cubic-bezier(.2,.7,.2,1.6)}
  .tool-card:hover .tool-icon{transform:scale(1.15) rotate(-6deg)}
  .podcast-links a,.listen-links a,.social-icons a,.team-social a{transition:transform .2s}
  .podcast-links a:hover,.listen-links a:hover,.social-icons a:hover,.team-social a:hover{transform:translateY(-3px) scale(1.06)}
  .chip{transition:transform .15s}
  .chip:active{transform:scale(.94)}

  /* Animated underlines */
  .menu a,.sub-label,.footer-links a,.accent-link,.text-socials a{position:relative;text-decoration:none}
  .menu a::after,.sub-label::after,.footer-links a::after,.accent-link::after,.text-socials a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .3s ease}
  .menu a:hover::after,.menu a:focus-visible::after,.menu a[aria-current="page"]::after,.sub-label:hover::after,.footer-links a:hover::after,.accent-link:hover::after,.accent-link:focus-visible::after,.text-socials a:hover::after{transform:scaleX(1);transform-origin:0 50%}
  .sub li a::after{bottom:4px;left:16px;right:16px}
  .sub{animation:mh-drop .2s ease-out}
  @keyframes mh-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  /* Marquee */
  .marquee-track{animation:mh-marquee 38s linear infinite}
  .marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
  @keyframes mh-marquee{to{transform:translateX(calc(-50% - 7px))}}

  /* Goal ring (Projects) */
  .progress-ring.ring-in{animation:mh-ring 1.4s cubic-bezier(.2,.7,.2,1) backwards}
  @keyframes mh-ring{from{opacity:0;transform:rotate(-200deg) scale(.6)}to{opacity:1;transform:none}}

  /* Cycle ring */
  .cycle-ring .ring-marker{transition:transform 1.4s cubic-bezier(.3,.8,.2,1)}
  .cycle-ring .ring-arcs{animation:mh-fade .8s .2s backwards}
  .cycle-ring svg{animation:mh-rv-scale .7s cubic-bezier(.2,.7,.2,1) backwards}
  @keyframes mh-fade{from{opacity:0}to{opacity:1}}

  /* Podcast */
  .ep{animation:mh-rv-up .45s ease-out backwards}
  .ep.playing .eq i{animation:mh-eq .9s ease-in-out infinite alternate}
  .ep.playing .eq i:nth-child(2){animation-duration:.7s;animation-delay:-.3s}
  .ep.playing .eq i:nth-child(3){animation-duration:1.1s;animation-delay:-.5s}
  .ep.playing .eq i:nth-child(4){animation-duration:.8s;animation-delay:-.2s}
  @keyframes mh-eq{0%{transform:scaleY(.2)}100%{transform:scaleY(1)}}
  .ep-play{transition:transform .2s}
  .ep-play:hover{transform:scale(1.1)}
  .player-bar:not([hidden]){animation:mh-slide-up .4s cubic-bezier(.2,.7,.2,1)}
  @keyframes mh-slide-up{from{transform:translateY(100%)}to{transform:none}}

  /* Quiz */
  .quiz-statement{animation:mh-pop .5s cubic-bezier(.2,.8,.2,1.2) backwards}
  .quiz-choices{animation:mh-rise .5s .12s backwards}
  .quiz-choice{transition:transform .15s}
  .quiz-choice:not(:disabled):hover{transform:translateY(-3px) scale(1.02)}
  .quiz-choice.chosen.good{animation:mh-bounce .6s}
  .quiz-choice.chosen.bad{animation:mh-shake .5s}
  .quiz-feedback{animation:mh-pop .45s cubic-bezier(.2,.8,.2,1.15) backwards;transform-origin:50% 0}
  .quiz-feedback.right h3{animation:mh-bounce .7s .15s}
  .quiz-bar span{transform-origin:0 50%}
  .quiz-score{animation:mh-pop .7s cubic-bezier(.2,.8,.2,1.4) backwards}
  @keyframes mh-pop{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:none}}
  @keyframes mh-bounce{0%,100%{transform:none}30%{transform:scale(1.08)}55%{transform:scale(.97)}75%{transform:scale(1.03)}}
  @keyframes mh-shake{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
  .confetti i{animation:mh-confetti var(--t,2.6s) cubic-bezier(.25,.6,.4,1) var(--dl,0s) forwards}
  @keyframes mh-confetti{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),105vh) rotate(var(--r))}}

  /* Comic page turn */
  .reader-pages{perspective:1600px}
  .reader-page.flip-next img{animation:mh-flip-next .55s cubic-bezier(.3,.7,.2,1);transform-origin:0 50%}
  .reader-page.flip-prev img{animation:mh-flip-prev .55s cubic-bezier(.3,.7,.2,1);transform-origin:100% 50%}
  @keyframes mh-flip-next{from{opacity:.3;transform:perspective(1600px) rotateY(-75deg)}to{opacity:1;transform:none}}
  @keyframes mh-flip-prev{from{opacity:.3;transform:perspective(1600px) rotateY(75deg)}to{opacity:1;transform:none}}
  .reader:not([hidden]){animation:mh-pop .45s cubic-bezier(.2,.8,.2,1.1)}

  /* Ask / tracker */
  .thanks:not([hidden]){animation:mh-pop .5s cubic-bezier(.2,.8,.2,1.3)}
  .cal .day.period,.cal .day.ovulation{animation:mh-pop .4s backwards}
}

/* Reduced motion: make sure nothing is left hidden or moving */
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;animation:none!important}
  .js .hero-home h1{opacity:1}
  .blob,.wave svg,.marquee-track{animation:none!important}
  .marquee{overflow-x:auto}
  .hero-parallax{transform:none!important}
  .scroll-progress{display:none}
}
.ep-list.no-anim .ep{animation:none!important}
/* Reserve space for content that loads from JSON, so nothing jumps */
.quiz-card{min-height:360px}
@media (min-width:821px){.comic-list{min-height:540px}}