/* ===========================================================================
   Geni — GeniusPay mascot animation system.
   Keyed off .geni[data-state="…"] so a single attribute swap drives the
   whole character. Accent colour controlled by --geni-accent (set on .geni
   or an ancestor).
   =========================================================================== */

.geni .ac-fill   { fill: var(--geni-accent, #0ea5e9); }
.geni .ac-stroke { stroke: var(--geni-accent, #0ea5e9); }

/* tint the soft radial aura via CSS (re-colour the gradient stops) */
.geni [id$="-auraGrad"] stop { stop-color: var(--geni-accent, #0ea5e9); }

/* SVG transform origins live in viewBox space */
.geni #geni-armL { transform-box: view-box; transform-origin: 128px 214px; }
.geni #geni-armR { transform-box: view-box; transform-origin: 234px 214px; }
.geni #geni-coin { transform-box: view-box; transform-origin: 286px 74px; }
.geni #lidL, .geni #lidR { transform-box: view-box; transform: scaleY(0); }
.geni #lidL { transform-origin: 150px 106px; }
.geni #lidR { transform-origin: 210px 106px; }
.geni #geni-head  { transform-box: view-box; transform-origin: 180px 138px; }
.geni #geni-check { transform-box: view-box; transform-origin: 286px 74px; }

/* ---- always-on idle life ------------------------------------------------ */
.geni        { animation: geni-float var(--geni-float, 4.6s) ease-in-out infinite; will-change: transform; }
.geni #geni-coin   { animation: coin-bob 3.4s ease-in-out infinite; }
.geni #aura-glow   { animation: aura-pulse 3.8s ease-in-out infinite; transform-box: view-box; transform-origin: 180px 196px; }
.geni #aura-rings  { animation: aura-spin 26s linear infinite; transform-box: view-box; transform-origin: 180px 210px; }
.geni .p           { animation: particle 4s ease-in-out infinite; }
.geni .p:nth-child(2){ animation-delay: -1.2s } .geni .p:nth-child(3){ animation-delay:-2.1s }
.geni .p:nth-child(4){ animation-delay:-0.6s } .geni .p:nth-child(5){ animation-delay:-3s }
.geni .p:nth-child(6){ animation-delay:-1.8s } .geni .p:nth-child(7){ animation-delay:-2.6s }
.geni #geni-spark  { animation: spark-tw 3s ease-in-out infinite; transform-box: view-box; transform-origin: 180px 32px; }

/* ---- mouth + eye variants (default hidden, shown per state) ------------- */
.geni .m { opacity: 0; }
.geni .happy-eye { opacity: 0; }

/* IDLE (default) */
.geni[data-state="idle"] .m-smile { opacity: 1; }
.geni[data-state="idle"] #lidL,
.geni[data-state="idle"] #lidR { animation: blink 5s ease-in-out infinite; }

/* WELCOME */
.geni[data-state="welcome"] .m-grin { opacity: 1; }
.geni[data-state="welcome"] #geni-armL { animation: wave 1.6s ease-in-out infinite; }
.geni[data-state="welcome"] #geni-armR { transform: rotate(-8deg); }
.geni[data-state="welcome"] #lidL,
.geni[data-state="welcome"] #lidR { animation: blink 4s ease-in-out infinite; }
.geni[data-state="welcome"] { --geni-float: 3.4s; }

/* SUCCESS */
.geni[data-state="success"] { --geni-accent: #10b981; animation: geni-hop 0.7s ease-out 1, geni-float 4.6s ease-in-out infinite; }
.geni[data-state="success"] .m-grin { opacity: 1; }
.geni[data-state="success"] #eyeL-ball,
.geni[data-state="success"] #eyeR-ball,
.geni[data-state="success"] .glint { opacity: 0; }
.geni[data-state="success"] .happy-eye { opacity: 1; }
.geni[data-state="success"] #geni-coin    { opacity: 0; }
.geni[data-state="success"] #geni-check    { opacity: 1; animation: pop 0.5s cubic-bezier(.2,1.4,.4,1) both; }
.geni[data-state="success"] #geni-armL { transform: rotate(-26deg); }
.geni[data-state="success"] #geni-armR { transform: rotate(18deg); }

/* LOADING */
.geni[data-state="loading"] .m-neutral { opacity: 1; }
.geni[data-state="loading"] #geni-loader { opacity: 1; animation: spin 1s linear infinite; transform-box: view-box; transform-origin: 180px 138px; }
.geni[data-state="loading"] #geni-coin   { animation: coin-flip 1.1s linear infinite; }
.geni[data-state="loading"] #lidL,
.geni[data-state="loading"] #lidR { transform: scaleY(0.34); }
.geni[data-state="loading"] { --geni-float: 5.5s; }

/* THINKING */
.geni[data-state="thinking"] .m-think { opacity: 1; }
.geni[data-state="thinking"] #brows { opacity: 1; }
.geni[data-state="thinking"] #browR { transform: translateY(-5px) rotate(-9deg); transform-box: view-box; transform-origin: 210px 102px; }
.geni[data-state="thinking"] #eyeL, .geni[data-state="thinking"] #eyeR { transform: translateY(-4px); }
.geni[data-state="thinking"] #geni-coin { opacity: 0; }
.geni[data-state="thinking"] #geni-think { opacity: 1; }
.geni[data-state="thinking"] .td { animation: think-rise 1.8s ease-in-out infinite; }
.geni[data-state="thinking"] .td2 { animation-delay: .25s } .geni[data-state="thinking"] .td3 { animation-delay: .5s }
.geni[data-state="thinking"] #geni-armL { transform: rotate(34deg); }
.geni[data-state="thinking"] { --geni-float: 6s; }

/* =================== keyframes =========================================== */
@keyframes geni-float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-12px) } }
@keyframes geni-hop   { 0%{ transform: translateY(0) } 35%{ transform: translateY(-26px) } 70%{ transform: translateY(0) } 85%{ transform: translateY(-7px) } 100%{ transform: translateY(0) } }
@keyframes coin-bob   { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-7px) } }
@keyframes coin-flip  { 0%{ transform: scaleX(1) } 50%{ transform: scaleX(-1) } 100%{ transform: scaleX(1) } }
@keyframes aura-pulse { 0%,100%{ transform: scale(1); opacity: .85 } 50%{ transform: scale(1.12); opacity: 1 } }
@keyframes aura-spin  { to { transform: rotate(360deg) } }
@keyframes spin       { to { transform: rotate(360deg) } }
@keyframes blink      { 0%,92%,100%{ transform: scaleY(0) } 96%{ transform: scaleY(1) } }
@keyframes wave       { 0%,100%{ transform: rotate(-18deg) } 50%{ transform: rotate(-34deg) } }
@keyframes pop        { 0%{ transform: scale(0) } 100%{ transform: scale(1) } }
@keyframes spark-tw   { 0%,100%{ transform: scale(1) rotate(0); opacity: .9 } 50%{ transform: scale(1.25) rotate(45deg); opacity: 1 } }
@keyframes particle   { 0%,100%{ transform: translateY(0); opacity: .35 } 50%{ transform: translateY(-10px); opacity: 1 } }
@keyframes think-rise { 0%{ transform: translateY(6px) scale(.6); opacity: 0 } 30%{ opacity: 1 } 100%{ transform: translateY(-8px) scale(1); opacity: 0 } }

/* ---- glow effect (optional, add .geni-glow to container) ---------------- */
.geni-glow .geni {
  filter: drop-shadow(0 0 var(--geni-glow-size, 18px) color-mix(in oklab, var(--geni-accent, #0ea5e9) 70%, transparent));
}

@media (prefers-reduced-motion: reduce) {
  .geni, .geni * { animation: none !important; }
  .geni #lidL, .geni #lidR { transform: scaleY(0); }
}