/* =========================================================
   $100k Foundation – shared motion
   Only active when JS adds .fx to <html> and the visitor
   hasn't asked for reduced motion.
   ========================================================= */

/* the old block-level reveal is replaced by the effects below */
.fx .reveal{opacity:1!important;transform:none!important}

/* ---------- words: slide up + fade ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.w>.wi{display:inline-block}
.fx .fx-words .wi{opacity:0;translate:0 105%}
.fx .fx-words.go .wi{opacity:1;translate:0 0;transition:translate .8s cubic-bezier(.2,.75,.2,1),opacity .6s ease;transition-delay:calc(var(--i) * 55ms)}
/* gold underline draws in after the words land */
.fx .fx-words .swoosh::after{scale:0 1;transform-origin:left}
.fx .fx-words.go .swoosh::after{scale:1 1;transition:scale .7s cubic-bezier(.65,0,.35,1) .55s}

/* ---------- text blocks: slide up + fade ---------- */
.fx .fx-up{opacity:0;translate:0 26px}
.fx .fx-up.go{opacity:1;translate:0 0;transition:translate .8s cubic-bezier(.2,.75,.2,1),opacity .7s ease;transition-delay:calc(var(--d,0) * 1ms)}

/* ---------- images: slide up + fade ---------- */
.fx .fx-img{opacity:0;translate:0 48px}
.fx .fx-img.go{opacity:1;translate:0 0;transition:translate 1s cubic-bezier(.2,.75,.2,1),opacity .8s ease;transition-delay:calc(var(--d,0) * 1ms)}

/* ---------- numbers ---------- */
.cnt{font-variant-numeric:tabular-nums}

/* ---------- intro: 3D gold logo in a dark room (pre-rendered video) ---------- */
#intro{position:fixed;inset:0;z-index:1000;overflow:hidden;background:#000;isolation:isolate;display:flex;align-items:center;justify-content:center;transition:opacity .9s ease,visibility .9s}
#intro.out{opacity:0;visibility:hidden}
#intro video{width:100%;height:100%;object-fit:contain;background:transparent;
  /* only the light and the gold add to the page: black in the video disappears */
  mix-blend-mode:screen;filter:contrast(1.06) brightness(.99);
  /* soft edges so the video's frame can never show */
  -webkit-mask-image:radial-gradient(ellipse 78% 74% at 50% 50%,#000 70%,transparent 100%);
          mask-image:radial-gradient(ellipse 78% 74% at 50% 50%,#000 70%,transparent 100%)}
@media (max-aspect-ratio:1/1){#intro video{width:116%;max-width:none;flex:none}}
@keyframes fadeIn{to{opacity:1}}
html.intro-on,html.intro-on body{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  #intro{display:none}
}


/* =========================================================
   Menu: on phones it slides down and the options fade in
   ========================================================= */
#menu .menu-cta{display:none}
@media (max-width:900px){
  body nav ul#menu{display:flex;flex-direction:column;gap:0;position:absolute;top:72px;left:0;right:0;z-index:30;
    background:#000;border-bottom:1px solid var(--line,#222);padding:12px 16px 28px;
    visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .45s cubic-bezier(.65,0,.35,1),visibility 0s linear .45s}
  body nav ul#menu.open{visibility:visible;clip-path:inset(0 0 -40px 0);transition:clip-path .55s cubic-bezier(.65,0,.35,1),visibility 0s}
  body nav ul#menu li{opacity:0;translate:0 -12px;transition:opacity .2s ease,translate .2s ease}
  body nav ul#menu.open li{opacity:1;translate:0 0;transition:opacity .5s ease,translate .5s cubic-bezier(.2,.75,.2,1)}
  body nav ul#menu.open li:nth-child(1){transition-delay:.18s}
  body nav ul#menu.open li:nth-child(2){transition-delay:.25s}
  body nav ul#menu.open li:nth-child(3){transition-delay:.32s}
  body nav ul#menu.open li:nth-child(4){transition-delay:.39s}
  body nav ul#menu.open li:nth-child(5){transition-delay:.46s}
  body nav ul#menu a{display:block;padding:14px 0;font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-size:2rem;line-height:1;border-bottom:1px solid #1a1a1a;opacity:1}
  body nav ul#menu .menu-cta{display:block;margin-top:22px}
  body nav ul#menu .menu-cta a{font-family:Outfit,system-ui,sans-serif;text-transform:none;font-size:1rem;border:0;padding:14px 28px;display:inline-block}
  body nav .menu-btn span{transition:background .2s}
  body nav .menu-btn span::before,body nav .menu-btn span::after{transition:top .25s ease,transform .25s ease .1s}
  body nav .menu-btn[aria-expanded="true"] span{background:transparent}
  body nav .menu-btn[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
  body nav .menu-btn[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
  body nav:has(#menu.open){background:#000}
}
@media (prefers-reduced-motion:reduce){
  body nav ul#menu,body nav ul#menu li{transition:none!important}
}

/* page transition: screen goes dark before the next page loads */
#leave{position:fixed;inset:0;z-index:1001;background:#000;opacity:0;pointer-events:none;transition:opacity .3s ease}
#leave.on{opacity:1;pointer-events:auto}

/* =========================================================
   Buttons, site-wide: same polished finish as the forms
   .btn        = polished gold
   .btn.ghost  = polished black with a gold rim
   ========================================================= */
.btn{position:relative;overflow:hidden;border-radius:999px;font-weight:600;letter-spacing:.03em;
  color:#2a2000!important;border:1px solid #eecb47!important;
  background:radial-gradient(120% 70% at 30% 0%,rgba(255,248,210,.26),rgba(255,248,210,0) 60%),linear-gradient(180deg,#f0d462 0%,#e8c240 18%,#e2b522 38%,#c39710 60%,#d4a618 78%,#e0b52a 88%,#a07a06 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,250,225,.45),inset 0 -1px 0 rgba(110,82,0,.55),0 6px 18px rgba(0,0,0,.45);
  text-shadow:0 1px 0 rgba(255,236,150,.45);
  transition:transform .15s ease,box-shadow .2s ease,filter .2s ease}
.btn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .7s cubic-bezier(.45,0,.25,1)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,240,.75),inset 0 -1px 0 rgba(110,82,0,.55),0 10px 26px rgba(0,0,0,.55)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0)}
.btn.ghost{color:#e2b522!important;border:1px solid #e2b522!important;text-shadow:none;
  background:linear-gradient(180deg,#2b2b2b 0%,#111 55%,#000 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.8),0 6px 18px rgba(0,0,0,.5)}
.btn.ghost::after{background:linear-gradient(105deg,transparent 35%,rgba(250,239,121,.18) 50%,transparent 65%)}
.btn.ghost:hover{border-color:#eecb47!important;color:#eecb47!important}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
@media (prefers-reduced-motion:reduce){.btn::after{display:none}.btn:hover{transform:none}}

/* gold buttons: a glint passes across every few seconds, even without hover */
.btn:not(.ghost)::after{background:linear-gradient(105deg,transparent 40%,rgba(255,252,230,.38) 50%,transparent 60%);
  animation:btnGlint 9s cubic-bezier(.45,0,.25,1) infinite}
.btn:not(.ghost):nth-of-type(2n)::after{animation-delay:1.5s}
@keyframes btnGlint{0%,62%{transform:translateX(-130%)}86%,100%{transform:translateX(130%)}}
.btn:not(.ghost):hover::after{animation:none;transform:translateX(130%)}
@media (prefers-reduced-motion:reduce){.btn:not(.ghost)::after{animation:none}}

/* =========================================================
   Smaller pills on phones
   ========================================================= */
@media (max-width:700px){
  .btn{padding:9px 14px!important;font-size:.84rem!important;letter-spacing:.01em}
  .ctas,.sec-ctas,.spc-ctas,.cta,.support .ctas{gap:8px!important}
  .spc-ctas{flex-direction:row!important;flex-wrap:wrap}
  .spc-ctas .btn{width:auto!important}
  #reportGate .btn,form[name="contact"] .btn,#clubForm .btn,.newsletter button{padding:12px 18px!important;font-size:.92rem!important}
  body nav ul#menu .menu-cta a{padding:10px 20px!important;font-size:.9rem!important}
}

/* =========================================================
   Slide trackers: the next bar fills as the photo moves
   ========================================================= */
/* carousels (speakers, mission, teachers): 0.7s, same easing as the slide */
.spc-dots button{position:relative;overflow:hidden;background:#fff4!important;
  transition:width .7s cubic-bezier(.65,0,.35,1)}
.spc-dots button i{position:absolute;inset:0;background:var(--gold);border-radius:inherit;
  transform:scaleX(0);transform-origin:right;transition:transform .7s cubic-bezier(.65,0,.35,1)}
.spc-dots button.on{background:#fff4!important}
.spc-dots button.on i{transform:scaleX(1);transform-origin:left}
/* homepage hero: fills over the 1s cross-fade */
.dots button i{transition:transform 1s cubic-bezier(.65,0,.35,1);transform-origin:right}
.dots button.on i{animation:none!important;transform:scaleX(1)!important;transform-origin:left}
.dots button.done i{transform:scaleX(0)!important}
.dots button{transition:width 1s cubic-bezier(.65,0,.35,1)}
.dots button.on{width:52px}
@media (prefers-reduced-motion:reduce){.spc-dots button,.spc-dots button i,.dots button,.dots button i{transition:none}}