/* ============================================================
   effects.css — cross-page interaction & motion layer
   Shared "aliveness" layered on top of each page's own film +
   layout. Loaded after the page's inline <style>, so its rules
   only add behaviour (hover states, reveals, ambient motion) —
   they never redefine the base palette or grid.
   ============================================================ */

/* ---------- page-transition veil ---------- */
#pageTransition{
  position:fixed; inset:0; background:var(--crema,#f5f1e8); z-index:4000;
  opacity:0; pointer-events:none; transition:opacity .32s ease;
}
#pageTransition.active{ opacity:1; pointer-events:all; }

/* ---------- ripple (buttons) ---------- */
.ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,.55);
  transform:scale(0); opacity:.9; pointer-events:none;
  animation:rippleOut .65s ease-out forwards;
}
@keyframes rippleOut{ to{ transform:scale(1); opacity:0; } }

/* ---------- spotlight hover (cards) ---------- */
.card, .stat, .partner-card, .forge-step, .step{
  position:relative; overflow:hidden;
}
.card::before, .stat::before, .partner-card::before, .forge-step::before, .step::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(184,92,63,.16), transparent 70%);
  transition:opacity .4s ease;
}
.card:hover::before, .stat:hover::before, .partner-card:hover::before, .forge-step:hover::before, .step:hover::before{ opacity:1; }
.card > *, .stat > *, .partner-card > *, .forge-step > *, .step > *{ position:relative; z-index:1; }

/* ---------- tilt targets ---------- */
.about-image img, .step-medal, .mini-medal{
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}

/* ---------- breathing glow (idle life outside the film) ---------- */
@keyframes breatheSpark{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(255,207,156,0)); } 50%{ filter:drop-shadow(0 0 9px rgba(255,207,156,.6)); } }
.brand-mark .spark{ animation:breatheSpark 4.5s ease-in-out infinite; }
@keyframes breatheMedal{ 0%,100%{ box-shadow:0 8px 18px rgba(184,92,63,.3); } 50%{ box-shadow:0 8px 26px rgba(184,92,63,.5), 0 0 0 6px rgba(255,207,156,.14); } }
.mini-medal, .step-medal{ animation:breatheMedal 5s ease-in-out infinite; }

/* ---------- nav underline ---------- */
nav.main-nav a{ position:relative; }
nav.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px;
  background:currentColor; transition:right .3s cubic-bezier(.16,1,.3,1); opacity:.85;
}
nav.main-nav a:hover::after{ right:0; }

/* ---------- headline curtain reveal (layers on top of the existing fade+slide) ---------- */
.section .wrap h1, .section .wrap h2, .intro-fade h1{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1s cubic-bezier(.16,1,.3,1);
}
.section.in .wrap h1, .section.in .wrap h2, .intro-fade.in h1{ clip-path:inset(0 0 0% 0); }

/* ---------- ambient corner blobs (decorative, never over text) ---------- */
.ambient-blob{
  position:absolute; width:340px; height:340px; border-radius:50%;
  filter:blur(70px); opacity:.32; pointer-events:none; z-index:0;
  animation:blobFloat 13s ease-in-out infinite;
}
.ambient-blob.tl{ top:-90px; left:-100px; }
.ambient-blob.br{ bottom:-100px; right:-90px; }
@keyframes blobFloat{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-14px,18px); } }

@media (prefers-reduced-motion: reduce){
  .brand-mark .spark, .mini-medal, .step-medal, .ambient-blob{ animation:none !important; }
  .section .wrap h1, .section .wrap h2, .intro-fade h1{ clip-path:none !important; transition:none; }
  #pageTransition{ display:none; }
}
@media (hover:none){
  .card::before, .stat::before, .partner-card::before, .forge-step::before, .step::before{ display:none; }
}