html.gfx-intro{overflow:hidden}
html.gfx-intro #intro{display:grid}

/* ================= INTRO SPLASH + VFX ================= */
body.intro-lock{overflow:hidden;animation:inUnlock 0s 7s forwards}
@keyframes inUnlock{to{overflow:auto}}
#intro{position:fixed;inset:0;z-index:9999;display:none;place-content:center;justify-items:center;text-align:center;overflow:hidden;
  background:radial-gradient(circle at 50% 42%,#1d4e89 0%,#0f2c4f 52%,#06142a 100%);
  transition:opacity .9s ease,transform 1s cubic-bezier(.7,0,.3,1),filter .9s,visibility 1s;animation:inAuto .6s ease 7s forwards}
#intro.out{opacity:0;transform:scale(1.25);filter:blur(10px);visibility:hidden;pointer-events:none}
@keyframes inAuto{to{opacity:0;visibility:hidden;pointer-events:none}}
#inCanvas{position:absolute;inset:0;width:100%;height:100%}
.in-rays{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;
  background:repeating-conic-gradient(from 0deg,rgba(232,163,61,.24) 0 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 55%);mask:radial-gradient(circle,#000 0,transparent 55%);
  animation:inSpin 26s linear infinite,inFade 1.4s .1s both}
@keyframes inFade{from{opacity:0}to{opacity:1}}
@keyframes inSpin{to{rotate:360deg}}
@keyframes inSpinRev{to{rotate:-360deg}}
.in-stage{position:relative;width:min(290px,60vw);aspect-ratio:1;display:grid;place-items:center;perspective:900px;z-index:1}
.in-ring{position:absolute;border-radius:50%;pointer-events:none}
.in-ring.r1{inset:-13%;border:3px solid transparent;border-top-color:#e8a33d;border-bottom-color:rgba(255,255,255,.55);animation:inSpin 1.8s linear infinite,ringIn .9s .25s both;filter:drop-shadow(0 0 8px rgba(232,163,61,.8))}
.in-ring.r2{inset:-29%;border:2px dashed rgba(255,255,255,.3);animation:inSpinRev 10s linear infinite,ringIn 1.1s .4s both}
.in-ring.r3{inset:-47%;border:1px solid rgba(255,255,255,.15);animation:inSpin 5s linear infinite,ringIn 1.3s .55s both}
.in-ring.r3::after{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#ffd68a;box-shadow:0 0 16px 5px #e8a33d}
@keyframes ringIn{from{scale:.2;opacity:0}to{scale:1;opacity:1}}
.in-wave{position:absolute;inset:16%;border-radius:50%;border:3px solid rgba(255,214,138,.85);opacity:0;animation:inWave 2s ease-out 1s infinite;pointer-events:none}
.in-wave.w2{animation-delay:1.55s}.in-wave.w3{animation-delay:2.1s}
@keyframes inWave{0%{scale:.5;opacity:.9}100%{scale:3.6;opacity:0}}
.in-badge{position:relative;width:64%;aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;transform-style:preserve-3d;
  box-shadow:0 0 0 6px rgba(232,163,61,.6),0 0 60px 12px rgba(232,163,61,.55),0 30px 70px -20px rgba(0,0,0,.75);
  animation:badgePop 1.5s cubic-bezier(.17,.9,.25,1.12) .15s both,badgeGlow 2.2s 1.8s ease-in-out infinite}
@keyframes badgePop{
  0%{transform:scale(0) rotateY(-720deg) rotate(-220deg);opacity:0;filter:blur(14px)}
  50%{opacity:1;filter:blur(0)}
  80%{transform:scale(1.15) rotateY(-24deg) rotate(10deg)}
  100%{transform:scale(1) rotateY(0) rotate(0)}}
@keyframes badgeGlow{0%,100%{box-shadow:0 0 0 6px rgba(232,163,61,.6),0 0 50px 8px rgba(232,163,61,.45),0 30px 70px -20px rgba(0,0,0,.75)}50%{box-shadow:0 0 0 9px rgba(255,214,138,.8),0 0 90px 24px rgba(232,163,61,.75),0 30px 70px -20px rgba(0,0,0,.75)}}
.in-badge::before{content:"";position:absolute;top:-20%;left:-80%;width:50%;height:140%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent);transform:skewX(-20deg);z-index:2;animation:inShine 1.1s 1.6s ease-in-out both}
@keyframes inShine{to{left:140%}}
.in-badge img{width:80%;height:auto;max-height:76%;object-fit:contain;animation:coinTurn 1.2s 1.9s cubic-bezier(.5,0,.2,1) both}
@keyframes coinTurn{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.in-fb{width:58%;height:58%;color:#c9831a;animation:coinTurn 1.2s 1.9s cubic-bezier(.5,0,.2,1) both}
.in-title{position:relative;z-index:2;margin:64px 0 0;font-family:var(--serif,"Fraunces",Georgia,serif);font-weight:700;font-size:clamp(30px,6vw,52px);color:#fff;letter-spacing:.02em;text-shadow:0 0 28px rgba(232,163,61,.65);perspective:600px}
.in-title span{display:inline-block;opacity:0;animation:letterIn .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes letterIn{from{opacity:0;transform:translateY(40px) rotateX(-90deg);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.in-sub{position:relative;z-index:2;margin:10px 0 0;color:#ffd68a;letter-spacing:.38em;text-transform:uppercase;font-size:13px;font-weight:600;opacity:0;animation:subIn 1s 2.6s both}
@keyframes subIn{from{opacity:0;letter-spacing:.8em}to{opacity:1;letter-spacing:.38em}}
.in-bar{position:absolute;left:50%;bottom:8vh;width:min(220px,50vw);height:3px;transform:translateX(-50%);background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden;z-index:2}
.in-bar i{display:block;height:100%;transform-origin:left;background:linear-gradient(90deg,#e8a33d,#ffd68a);box-shadow:0 0 12px #e8a33d;animation:inBar 4s linear both}
@keyframes inBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.in-skip{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));right:20px;z-index:3;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:8px 16px;font:600 13px var(--sans,"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);cursor:pointer;backdrop-filter:blur(6px);opacity:0;animation:inFade .6s 1s both}
.in-skip:hover{background:var(--accent,#e8a33d);color:#1b1305;border-color:var(--accent,#e8a33d)}

/* header logo drop after the intro */
.site-ready header.site .logo img{animation:logoDrop 1s .25s cubic-bezier(.2,1.3,.3,1) both}
@keyframes logoDrop{from{opacity:0;transform:translateY(-34px) rotate(-360deg) scale(.3)}to{opacity:1;transform:none}}
.logo:hover img{animation:logoFlip .9s cubic-bezier(.5,0,.2,1)}
@keyframes logoFlip{to{transform:rotateY(360deg)}}

/* scroll progress + cursor glow */
#sp{position:fixed;top:0;left:0;height:4px;width:0;z-index:300;background:linear-gradient(90deg,#e8a33d,#ffd68a,#1d4e89);box-shadow:0 0 12px rgba(232,163,61,.85);pointer-events:none}
#glow{position:fixed;left:0;top:0;width:380px;height:380px;margin:-190px 0 0 -190px;border-radius:50%;background:radial-gradient(circle,rgba(232,163,61,.16),transparent 65%);pointer-events:none;z-index:50;opacity:0;transition:opacity .4s;will-change:transform}

/* hero entrance + ambience */
.js:not(.site-ready) .hero-copy>*{opacity:0}
.site-ready .hero-copy>*{animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) both}
.site-ready .hero-copy>*:nth-child(1){animation-delay:.15s}.site-ready .hero-copy>*:nth-child(2){animation-delay:.3s}.site-ready .hero-copy>*:nth-child(3){animation-delay:.45s}.site-ready .hero-copy>*:nth-child(4){animation-delay:.6s}.site-ready .hero-copy>*:nth-child(5){animation-delay:.75s}
@keyframes fadeUp{from{opacity:0;transform:translateY(34px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.js:not(.site-ready) .hero-art{opacity:0}
.site-ready .hero-art{animation:artIn 1.2s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes artIn{from{opacity:0;transform:translateX(70px) rotate(4deg) scale(.88)}to{opacity:1;transform:none}}
.hero::before{content:"";position:absolute;right:4%;top:50%;width:640px;height:640px;margin-top:-320px;border-radius:50%;border:2px dashed rgba(255,255,255,.14);animation:inSpin 60s linear infinite;pointer-events:none}
.hero-frame img{animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{from{scale:1}to{scale:1.1}}
.float{animation:bob 4.6s ease-in-out infinite}.f2{animation-delay:-2.3s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}
.orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle at 30% 30%,rgba(255,214,138,.5),rgba(232,163,61,.04) 70%);animation:orbFloat var(--d,10s) ease-in-out infinite alternate}
@keyframes orbFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(var(--x,30px),var(--y,-40px)) scale(1.18)}}
.spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffe3a6;box-shadow:0 0 10px 3px rgba(255,214,138,.8);pointer-events:none;z-index:0;animation:twinkle var(--d,3s) ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:0;scale:.4}50%{opacity:1;scale:1.4}}
.give{position:relative;overflow:hidden}.give-grid{position:relative;z-index:1}

/* shimmering headings */
h1 em,h2 em{background:linear-gradient(90deg,var(--accent-deep,#c9831a),#ffd68a,var(--accent-deep,#c9831a));background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:textShine 4.5s linear infinite}
.hero h1 em,.page-banner h1 em,.give h2 em{background-image:linear-gradient(90deg,#ffc977,#fff,#ffc977)}
@keyframes textShine{to{background-position:220% center}}

/* buttons */
.btn,.amt{position:relative;overflow:hidden}
.btn-gold::before{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:sheen 3.8s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%,55%{left:-70%}100%{left:140%}}
.hd-cta .btn-gold{animation:pulseGold 2.6s ease-out infinite}
@keyframes pulseGold{0%{box-shadow:0 0 0 0 rgba(232,163,61,.65)}70%{box-shadow:0 0 0 16px rgba(232,163,61,0)}100%{box-shadow:0 0 0 0 rgba(232,163,61,0)}}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:rip .7s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}
.play span{animation:ping 2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(232,163,61,.6)}100%{box-shadow:0 0 0 38px rgba(232,163,61,0)}}

/* impact bar, icons, images */
.impact{position:relative;overflow:hidden}
.impact::after{content:"";position:absolute;top:0;left:-40%;width:30%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);animation:sheen 5s ease-in-out infinite;pointer-events:none}
.v-ico{transition:transform .45s cubic-bezier(.3,1.6,.5,1),background .3s,color .3s}
.value:hover .v-ico,.tile:hover .v-ico{transform:rotate(-10deg) scale(1.15);background:var(--brand,#1d4e89);color:#fff}
.cause .ph img,.proj .ph img,.post-card .ph img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.cause:hover .ph img,.proj:hover .ph img,.post-card:hover .ph img{transform:scale(1.1)}
.about-badge{animation:bob 6s ease-in-out infinite}

/* stronger scroll reveal + stagger */
.js .reveal{opacity:0;transform:translateY(40px) scale(.96);filter:blur(5px);transition:opacity .8s ease,transform .85s cubic-bezier(.2,.7,.2,1),filter .8s}
.js .reveal.in{opacity:1;transform:none;filter:none}
.js .reveal.done{transition:transform .25s,box-shadow .25s,border-color .25s,background .25s}

/* page transitions */
.route:not([hidden]){animation:routeIn .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes routeIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (max-width:700px){.hero::before{width:380px;height:380px;margin-top:-190px;right:-120px}#glow{display:none}.in-title{margin-top:52px}}
@media (prefers-reduced-motion:reduce){html:not(.gfx-force) #intro{display:none!important}html:not(.gfx-force) .orb,html:not(.gfx-force) .spark,html:not(.gfx-force) #glow{display:none}html:not(.gfx-force) *,html:not(.gfx-force) *::before,html:not(.gfx-force) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}}

/* ---- Intro built around the full logo ---- */
.in-stage{width:min(400px,76vw)}
.in-badge{width:72%;aspect-ratio:auto;border-radius:28px;display:block;padding:0;
  animation:badgePop 1.5s cubic-bezier(.17,.9,.25,1.12) .15s both,badgeFlip 1.3s cubic-bezier(.5,0,.2,1) 1.9s forwards,badgeGlow 2.2s 1.8s ease-in-out infinite}
@keyframes badgeFlip{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.in-badge img{display:block;width:100%;height:auto;max-height:none;animation:none}
.in-title{font-size:clamp(17px,3.3vw,27px);letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-top:58px}
.in-sub{letter-spacing:.3em}
@media (max-width:700px){.in-title{margin-top:46px;letter-spacing:.1em}}