/* ============================================================
   VibeUIX — playful/bold motion theme
   Loaded AFTER each page's own <style>, so these :root vars
   (same names, same specificity) win the cascade and re-skin
   pages that share the standard token names, while animation
   classes work everywhere.
   ============================================================ */

:root{
  --bg:oklch(97% 0.021 85);
  --surface:oklch(99% 0.006 85);
  --ink:oklch(23% 0.03 260);
  --muted:oklch(52% 0.035 260);
  --line:oklch(90% 0.02 80);
  --brand:oklch(64% 0.21 25);      /* vivid coral/red-orange */
  --brand2:oklch(60% 0.23 322);    /* vivid magenta-violet */
  --ok:oklch(68% 0.16 155);
  --good:oklch(68% 0.16 155);
  --pdf:oklch(62% 0.22 15);
  --land:oklch(78% 0.16 80);
  --consent:oklch(68% 0.13 220);
  --accent-yellow:oklch(85% 0.17 95);
  --accent-teal:oklch(72% 0.12 195);
  --shadow:0 10px 28px -8px oklch(60% 0.21 25 / .22), 0 2px 8px oklch(20% 0.02 260 / .08);
}

/* ---------- scroll reveal ---------- */
.vibe-reveal{opacity:0;transform:translateY(18px) scale(.98);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);will-change:transform,opacity}
.vibe-reveal.vibe-in{opacity:1;transform:translateY(0) scale(1)}

/* ---------- result celebration ---------- */
@keyframes vibePopIn{
  0%{transform:scale(.9) translateY(10px);opacity:.5}
  55%{transform:scale(1.03) translateY(-3px);opacity:1}
  100%{transform:scale(1) translateY(0)}
}
.vibe-pop-in{animation:vibePopIn .6s cubic-bezier(.34,1.56,.64,1)}

@keyframes vibePop{
  0%{transform:scale(1)}
  40%{transform:scale(.93)}
  100%{transform:scale(1)}
}
.vibe-pop{animation:vibePop .32s cubic-bezier(.34,1.56,.64,1)}

/* ---------- floaty icons ---------- */
@keyframes vibeFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-2deg)}}
.m-icon,.app-icon,.glyph,.r-emoji{animation:vibeFloat 3.2s ease-in-out infinite}

@keyframes vibeWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
.mini:hover .m-icon,.related a:hover .r-emoji,.app:hover .app-icon{animation:vibeWiggle .5s ease}

/* ---------- bolder hovers / presses ---------- */
.mini{transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,border-color .25s ease}
.mini:hover{transform:translateY(-7px) rotate(-.6deg) scale(1.015);border-color:transparent;box-shadow:var(--shadow)}
.related a{transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease}
.related a:hover{transform:translateY(-5px) rotate(.6deg);box-shadow:var(--shadow)}
.app{transition:transform .25s ease,box-shadow .25s ease}
.btn-primary,.btn.btn-primary{transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .18s ease,box-shadow .18s ease}
.btn-primary:hover,.btn.btn-primary:hover{transform:translateY(-2px) scale(1.02)}
.btn-primary:active,.btn.btn-primary:active{transform:scale(.96)}
button.key{transition:transform .12s cubic-bezier(.34,1.56,.64,1)}
button.key:active{transform:scale(.92)}
.copybtn,.btn-ghost{transition:transform .18s ease}
.copybtn:hover,.btn-ghost:hover{transform:translateY(-1px)}

/* ---------- gradient text everywhere brand/brand2 pair is used ---------- */
.logo span{background-image:linear-gradient(90deg,var(--brand),var(--brand2));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:vibeGradientShift 6s ease-in-out infinite}
@keyframes vibeGradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---------- eyebrow badge pulse ---------- */
.eyebrow{animation:vibeBadgeIn .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes vibeBadgeIn{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}

/* ---------- faq plus/minus spin ---------- */
.faq summary::after,.faq summary::before{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.faq details[open] summary::after,.faq details[open] summary::before{transform:rotate(180deg)}

/* ---------- confetti canvas ---------- */
#vibe-confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:9999}

/* ---------- hero float icons (index.html) ---------- */
.hero{position:relative;overflow:visible}
.hero-blobs{position:absolute;inset:-10% -10% auto -10%;height:130%;z-index:0;pointer-events:none;filter:blur(50px);opacity:.55}
.hero-blobs span{position:absolute;border-radius:50%;mix-blend-mode:multiply;opacity:.7;animation:vibeBlobDrift 14s ease-in-out infinite}
.hero-blobs span:nth-child(1){width:340px;height:340px;left:2%;top:0;background:var(--brand);animation-delay:0s}
.hero-blobs span:nth-child(2){width:300px;height:300px;right:4%;top:10%;background:var(--brand2);animation-delay:-4s}
.hero-blobs span:nth-child(3){width:220px;height:220px;left:38%;bottom:-10%;background:var(--accent-yellow);animation-delay:-8s}
@keyframes vibeBlobDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(20px,-24px) scale(1.08)}66%{transform:translate(-18px,16px) scale(.95)}}
.hero .container{position:relative;z-index:1}
.hero-float{position:relative;height:380px}
.f-icon{position:absolute;left:var(--x);top:var(--y);font-size:38px;filter:drop-shadow(0 10px 18px oklch(20% 0.02 260 / .18));animation:vibeFloat 4.2s ease-in-out infinite;animation-delay:var(--d);will-change:transform}
@media(max-width:760px){.hero-float{display:none}}