/* Motion layer for every page. Scroll and tap are the only clocks: nothing loops or drifts on its own.
   Hidden start states only apply once motion.js has added .motion to <html>, so the page is complete without scripts,
   and everything is off for visitors who ask for reduced motion. */

/* 1. Scroll reveal: sections rise into place once, staggered within a row */
.motion [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.motion [data-reveal].in{opacity:1;transform:none}
.motion [data-reveal="pop"]{transform:translateY(16px) scale(.97)}
.motion [data-reveal="pop"].in{transform:none}

/* 2. Hero entrance: the opening lines settle in once on load */
.motion [data-hero]{animation:hero-in .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}
@keyframes hero-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* 3. Hand-drawn swash under the key headline word, drawn once */
.swash{position:relative;display:inline-block;white-space:nowrap}
.swash svg{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.32em;overflow:visible;pointer-events:none}
.swash path{fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;opacity:.55}
.motion .swash path{stroke-dasharray:1;stroke-dashoffset:1;animation:swash 1s cubic-bezier(.6,.1,.2,1) .55s forwards}
@keyframes swash{to{stroke-dashoffset:0}}

/* 4. Donate: pulse ring and light sweep, on hover or keyboard focus only */
.btn.primary.shine{position:relative;overflow:hidden;isolation:isolate}
.btn.primary.shine::after{content:"";position:absolute;inset:-2px;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);z-index:-1;pointer-events:none}
.btn.primary.shine:hover::after,.btn.primary.shine:focus-visible::after{transform:translateX(120%);transition:transform .7s ease}
.btn.primary.shine:hover,.btn.primary.shine:focus-visible{box-shadow:0 0 0 0 rgba(178,20,117,.45);animation:pulse-ring .9s ease-out 1}
@keyframes pulse-ring{to{box-shadow:0 0 0 12px rgba(178,20,117,0)}}

/* 5. Slide-in nudge after a meaningful scroll point; dismissed nudges stay dismissed */
.nudge{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:max(20px,env(safe-area-inset-bottom,0px));z-index:60;width:min(340px,calc(100vw - 40px));background:#fff;color:#2B0F30;border:1.5px solid #2B0F30;box-shadow:0 24px 48px -24px rgba(43,15,48,.55);padding:18px 18px 16px;display:grid;gap:8px;font-family:"Figtree",system-ui,sans-serif;transform:translateY(calc(100% + 40px));opacity:0;visibility:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s,visibility 0s .45s}
.nudge.show{transform:none;opacity:1;visibility:visible;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.nudge b{font-family:"Young Serif",Georgia,serif;font-weight:400;font-size:21px;line-height:1.15;padding-right:28px}
.nudge p{margin:0;font-size:15px;line-height:1.45;color:#5A4360}
.nudge a{justify-self:start;margin-top:4px}
.nudge .x{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;background:none;font-size:22px;line-height:1;color:#5A4360;cursor:pointer}
.nudge .x:hover{color:#2B0F30}
.nudge.junior{border:3px solid #1E1530;border-radius:22px;box-shadow:6px 6px 0 #1E1530;font-family:"Nunito",system-ui,sans-serif}
.nudge.junior b{font-family:"Lilita One","Arial Rounded MT Bold",sans-serif;color:#3B2273}

/* Junior: buttons and arch frames get a small lift on hover */
.arch{transition:transform .25s ease}
a:hover>.arch,.pad:hover .arch{transform:translateY(-4px)}

@media (prefers-reduced-motion:reduce){
  .motion [data-reveal],.motion [data-hero]{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .motion .swash path{animation:none;stroke-dashoffset:0}
  .btn.primary.shine:hover,.btn.primary.shine:focus-visible{animation:none}
  .btn.primary.shine::after{display:none}
  .nudge{transition:none}
}