/* ClickBloomSE — Light Animations (V29)
   Subtle, performance-friendly. Respects prefers-reduced-motion. */

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); will-change:opacity,transform}
.reveal.in{opacity:1; transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}.reveal-d4{transition-delay:.32s}
.reveal-scale{transform:scale(.96) translateY(12px)}
.reveal-scale.in{transform:none}

/* ---------- Hover micro-interactions ---------- */
.tool-card{transition:transform .3s ease, box-shadow .3s ease}
.tool-card:hover{transform:translateY(-4px); box-shadow:0 12px 28px rgba(31,61,43,.16)}
.btn{transition:transform .25s ease, background .25s ease, box-shadow .25s ease}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(201,162,39,.35)}
nav a{transition:color .25s ease}
.field input{transition:border-color .25s ease, box-shadow .25s ease}
.field input:focus{box-shadow:0 0 0 3px rgba(201,162,39,.25)}
.faq summary{transition:color .25s ease}
.faq summary:hover{color:var(--gold)}

/* ---------- Result pop ---------- */
@keyframes pop-in{0%{transform:scale(.96); opacity:0}100%{transform:scale(1); opacity:1}}
.result.pop{animation:pop-in .45s cubic-bezier(.22,.61,.36,1)}

/* ---------- Gold rule draw ---------- */
.gold-rule{transform:scaleX(0); transform-origin:center; transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.gold-rule.in{transform:scaleX(1)}

/* ---------- Hero entrance ---------- */
@keyframes hero-up{0%{opacity:0; transform:translateY(28px)}100%{opacity:1; transform:none}}
.hero h1{animation:hero-up .8s cubic-bezier(.22,.61,.36,1) both}
.hero p.sub{animation:hero-up .8s .12s cubic-bezier(.22,.61,.36,1) both}
.hero .eyebrow{animation:hero-up .8s .05s cubic-bezier(.22,.61,.36,1) both}

/* ---------- Counter ---------- */
[data-count]{font-variant-numeric:tabular-nums}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-scale{opacity:1; transform:none; transition:none}
  .gold-rule{transform:none; transition:none}
  .hero h1,.hero p.sub,.hero .eyebrow{animation:none}
  .tool-card:hover,.btn:hover{transform:none}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}