/* ==========================================================================
   WOLAA — Women Leadership Agenda Association
   Stylesheet: custom design tokens, components, and animations.
   Tailwind CSS (via CDN in index.html) provides utility classes;
   everything below is bespoke CSS layered on top of it.
   ========================================================================== */

:root{
  --purple:#5E2B97; --purple-dark:#3E1B66; --emerald:#2E8B57; --gold:#D4AF37; --ink:#241A38;
}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif; color:var(--ink); background:#fff; overflow-x:hidden;}
h1,h2,h3,h4,.font-display{font-family:'Poppins',sans-serif;}
section{scroll-margin-top:88px;}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-delay-1{transition-delay:.08s;}
.reveal-delay-2{transition-delay:.16s;}
.reveal-delay-3{transition-delay:.24s;}
.reveal-delay-4{transition-delay:.32s;}
.reveal-delay-5{transition-delay:.40s;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* Gradient brand elements */
.grad-purple{background:linear-gradient(135deg,#5E2B97 0%,#3E1B66 100%);}
.grad-hero{background:linear-gradient(160deg,#3E1B66 0%,#5E2B97 46%,#2E8B57 130%);}
.grad-emerald{background:linear-gradient(135deg,#2E8B57 0%,#1F6B41 100%);}
.grad-gold-text{background:linear-gradient(90deg,#E8CE7A,#D4AF37);-webkit-background-clip:text;background-clip:text;color:transparent;}
.gold-bar{background:linear-gradient(90deg,#E8CE7A,#D4AF37,#B8932B);}
.btn-gradient{background:linear-gradient(90deg,#D4AF37,#B8932B); transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;}
.btn-gradient:hover{transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(212,175,55,.55); filter:brightness(1.04);}
.btn-outline{transition:all .25s ease;}
.btn-outline:hover{background:rgba(255,255,255,.14); transform:translateY(-2px);}

/* Glassmorphism */
.glass{background:rgba(255,255,255,.10); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.22);}
.glass-light{background:rgba(255,255,255,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.6);}

/* Cards */
.card{transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;}
.card:hover{transform:translateY(-6px); box-shadow:0 26px 50px -18px rgba(94,43,151,.28);}

/* Signature growth-arc motif */
.arc-ring{position:absolute; border-radius:50%; border:2px solid var(--gold); opacity:.55;}
.arc-quarter{position:absolute; border-radius:50%; border:3px solid transparent; border-top-color:var(--gold); border-right-color:var(--gold);}

/* Nav */
#site-nav{transition:background-color .35s ease, box-shadow .35s ease;}
#site-nav.scrolled{box-shadow:0 8px 30px -12px rgba(36,26,56,.18);}
#nav-inner{transition:height .35s cubic-bezier(.2,.8,.2,1);}
#site-nav.scrolled #nav-inner{height:4.5rem;}
#site-nav.scrolled #nav-logo-badge{width:2.35rem; height:2.35rem;}
.nav-link{position:relative; padding-bottom:2px;}
.nav-link::after{content:'';position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--gold); transition:width .3s ease;}
.nav-link:hover::after{width:100%;}
.nav-link.active{color:var(--purple);}
.nav-link.active::after{width:100%;}

/* Ripple */
.btn-ripple{position:relative; overflow:hidden;}
.ripple-el{position:absolute; border-radius:50%; background:rgba(255,255,255,.55); transform:scale(0); animation:ripple-anim .6s ease-out forwards; pointer-events:none;}
@keyframes ripple-anim{ to{ transform:scale(2.6); opacity:0; } }

/* Floating labels */
.field{position:relative;}
.field input, .field textarea{width:100%; border-radius:.75rem; border:1px solid rgba(94,43,151,.15); padding:1.25rem 1rem .55rem 1rem; font-size:.875rem; outline:none; background:#fff; transition:border-color .25s ease, box-shadow .25s ease;}
.field textarea{padding-top:1.35rem;}
.field label{position:absolute; left:1rem; top:.95rem; font-size:.875rem; color:rgba(36,26,56,.45); transition:all .2s ease; pointer-events:none; background:#fff; padding:0 .2rem;}
.field input:focus, .field textarea:focus{border-color:var(--purple); box-shadow:0 0 0 4px rgba(94,43,151,.10);}
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label{
  top:-.5rem; left:.7rem; font-size:.68rem; font-weight:600; color:var(--purple); letter-spacing:.02em;
}
.field input:invalid:not(:placeholder-shown), .field textarea:invalid:not(:placeholder-shown){border-color:#D9534F;}

/* Success check pop */
.success-pop{animation:pop-in .5s cubic-bezier(.2,1.3,.4,1);}
@keyframes pop-in{ 0%{opacity:0; transform:translateY(6px) scale(.96);} 100%{opacity:1; transform:translateY(0) scale(1);} }

/* Image zoom */
.img-zoom{overflow:hidden;}
.img-zoom img{transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.img-zoom:hover img{transform:scale(1.06);}

/* Fade directions */
.fade-left{opacity:0; transform:translateX(-32px); transition:opacity .7s ease, transform .7s ease;}
.fade-left.is-visible{opacity:1; transform:translateX(0);}
.fade-right{opacity:0; transform:translateX(32px); transition:opacity .7s ease, transform .7s ease;}
.fade-right.is-visible{opacity:1; transform:translateX(0);}
.fade-scale{opacity:0; transform:scale(.92); transition:opacity .6s ease, transform .6s ease;}
.fade-scale.is-visible{opacity:1; transform:scale(1);}
@media (prefers-reduced-motion: reduce){
  .fade-left,.fade-right,.fade-scale{opacity:1; transform:none; transition:none;}
}

/* Decorative blobs */
.blob{position:absolute; border-radius:50%; filter:blur(50px); opacity:.35; pointer-events:none;}

/* Scroll indicator */
.scroll-indicator{width:26px; height:42px; border:2px solid rgba(255,255,255,.5); border-radius:999px; position:relative;}
.scroll-indicator::before{content:''; position:absolute; top:7px; left:50%; width:4px; height:8px; margin-left:-2px; background:var(--gold); border-radius:4px; animation:scroll-dot 1.8s ease-in-out infinite;}
@keyframes scroll-dot{0%{transform:translateY(0); opacity:1;} 70%{opacity:.4;} 100%{transform:translateY(14px); opacity:0;}}

/* Section wave divider */
.wave-divider{display:block; width:100%; height:56px;}
@media (min-width:640px){
  .wave-divider{height:80px;}
}

/* Counters */
.stat-num{font-variant-numeric:tabular-nums;}

/* Marquee for partners (simple) */
.partner-track{animation:scrollx 28s linear infinite;}
@keyframes scrollx{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* Floating */
.float-slow{animation:floaty 6s ease-in-out infinite;}
.float-slower{animation:floaty 8s ease-in-out infinite; animation-delay:.6s;}
@keyframes floaty{0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);}}

/* focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--gold); outline-offset:2px; border-radius:6px;
}

::selection{background:var(--gold); color:var(--purple-dark);}

/* Scrollbar accent (progressive enhancement) */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:#F1EEF7;}
::-webkit-scrollbar-thumb{background:var(--purple-light,#8A5CC7); border-radius:8px;}

.section-eyebrow{letter-spacing:.14em;}

/* Mobile menu */
#mobile-menu{transition:max-height .4s ease, opacity .3s ease;}

/* ==========================================================================
   Team / Board — bento grid of full-bleed photo cards with a frosted
   progressive-blur panel (increasing blur + white tint toward the bottom)
   so name/title/bio sit on legible glass rather than a solid card body.
   ========================================================================== */
.board-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
}
@media (min-width:1024px){
  .board-grid{
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:repeat(2, minmax(300px, auto));
    grid-template-areas:
      "founder founder gloria"
      "patts david winnie";
  }
  .board-founder{grid-area:founder;}
  .board-gloria{grid-area:gloria;}
  .board-patts{grid-area:patts;}
  .board-david{grid-area:david;}
  .board-winnie{grid-area:winnie;}
}

.team-card{
  position:relative; overflow:hidden; min-height:22rem;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.board-founder{min-height:26rem;}
.team-card:hover{transform:translateY(-6px); box-shadow:0 30px 55px -18px rgba(94,43,151,.35);}
.team-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.team-card:hover img{transform:scale(1.06);}

.progressive-blur-panel{position:absolute; inset:auto 0 0 0; height:70%; pointer-events:none;}
.progressive-blur-panel span{position:absolute; inset:0;}
.progressive-blur-panel span:nth-child(1){
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  background:rgba(18,10,32,.32);
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 45%);
  mask-image:linear-gradient(to top, #000 0%, transparent 45%);
}
.progressive-blur-panel span:nth-child(2){
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  background:rgba(18,10,32,.6);
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 68%);
  mask-image:linear-gradient(to top, #000 0%, transparent 68%);
}
.progressive-blur-panel span:nth-child(3){
  backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  background:rgba(15,8,28,.86);
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 88%);
  mask-image:linear-gradient(to top, #000 0%, transparent 88%);
}
.founder-badge{background:linear-gradient(90deg,#E8CE7A,#D4AF37,#B8932B);}