/* Figo — komponentstiler */
@property --figo-base   { syntax: '<color>'; inherits: true; initial-value: #e6e2ff; }
@property --figo-hi     { syntax: '<color>'; inherits: true; initial-value: #fbfaff; }
@property --figo-edge   { syntax: '<color>'; inherits: true; initial-value: #b9bdf0; }
@property --figo-a      { syntax: '<color>'; inherits: true; initial-value: #ffc3d6; }
@property --figo-b      { syntax: '<color>'; inherits: true; initial-value: #a7b4ff; }
@property --figo-c      { syntax: '<color>'; inherits: true; initial-value: #d8ccff; }
@property --figo-d      { syntax: '<color>'; inherits: true; initial-value: #ffe5b4; }
@property --figo-shadow { syntax: '<color>'; inherits: true; initial-value: #5e66b0; }
@property --figo-eye    { syntax: '<color>'; inherits: true; initial-value: #151a3d; }
@property --figo-spark  { syntax: '<color>'; inherits: true; initial-value: #7d8bff; }
@property --figo-spark-hi { syntax: '<color>'; inherits: true; initial-value: #bec5ff; }
@property --figo-iri    { syntax: '<number>'; inherits: true; initial-value: 0.85; }
@property --figo-gloss  { syntax: '<number>'; inherits: true; initial-value: 0.85; }

figo-character { display: block; }

.figo {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    --figo-base .8s ease, --figo-hi .8s ease, --figo-edge .8s ease,
    --figo-a .8s ease, --figo-b .8s ease, --figo-c .8s ease, --figo-d .8s ease,
    --figo-shadow .8s ease, --figo-eye .4s ease, --figo-spark .6s ease, --figo-spark-hi .6s ease,
    --figo-iri .4s ease, --figo-gloss .4s ease;
}
.figo-wrap {
  position: absolute;
  inset: 0;
  transform-origin: 50% 83%;
  will-change: transform;
  pointer-events: none;
}
.figo-svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.figo-body-g { pointer-events: visiblePainted; cursor: grab; touch-action: none; }
.figo.is-grabbing .figo-body-g { cursor: grabbing; }
.figo.is-static .figo-body-g { pointer-events: none; }
.figo-fx, .figo-fx * { pointer-events: none; }

.figo-shadow {
  position: absolute;
  left: 50%;
  top: 79%;
  width: 50%;
  height: 9%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--figo-shadow) 40%, transparent), transparent);
  pointer-events: none;
}
.figo-glow {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(circle at 42% 55%, color-mix(in srgb, var(--figo-a) 38%, transparent), transparent 42%),
    radial-gradient(circle at 60% 48%, color-mix(in srgb, var(--figo-b) 34%, transparent), transparent 48%);
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.figo.has-glow .figo-glow { opacity: 1; }

/* ---------- ansikt */
.eye-rim { fill: #fff; opacity: .9; }
.eye-iris { fill: var(--figo-eye); }
.eye-glint, .eye-glint2 { fill: #fff; }
.eye-glint2 { opacity: .75; }
.figo.no-glints .eye-glint, .figo.no-glints .eye-glint2 { display: none; }
.eye-line, .brow {
  fill: none;
  stroke: var(--figo-eye);
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brow { stroke-width: 3; opacity: 0; transition: opacity .3s ease; }
.figo[data-emotion="tenker"] .brow-think,
.figo[data-emotion="trist"] .brow-sad { opacity: .85; }
.figo-mouth {
  fill: var(--figo-eye);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.3);
  transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.figo[data-emotion="overrasket"] .mouth-o { opacity: 1; transform: scale(1); }

/* ---------- effekter */
.figo .fx { opacity: 0; transition: opacity .35s ease; }
.figo .fx-sparkle { opacity: 1; }
.figo.no-sparkle .fx-sparkle,
.figo.is-typing .fx-sparkle,
.figo.is-done .fx-sparkle,
.figo[data-emotion="tenker"] .fx-sparkle,
.figo[data-emotion="overrasket"] .fx-sparkle,
.figo[data-emotion="ler"] .fx-sparkle,
.figo[data-emotion="trist"] .fx-sparkle,
.figo[data-emotion="sover"] .fx-sparkle { opacity: 0; }
.figo[data-emotion="glad"]:not(.no-sparkle) .fx-sparkle2,
.figo[data-emotion="tenker"] .fx-thought,
.figo[data-emotion="overrasket"] .fx-surprise,
.figo[data-emotion="ler"] .fx-laugh,
.figo[data-emotion="trist"] .fx-tear,
.figo[data-emotion="sover"] .fx-zzz,
.figo.is-typing .fx-typing,
.figo.is-done .fx-check { opacity: 1; }
.figo.is-typing .fx-thought { opacity: 0; }

.spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: figo-twinkle 3.6s ease-in-out infinite;
}
.fx-sparkle2 .spark { animation-delay: -1.4s; }
.figo.spark-spin .fx-sparkle .spark { animation: figo-spin 1s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes figo-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  42% { transform: scale(.78) rotate(10deg); }
  52% { transform: scale(1.16) rotate(20deg); }
  70% { transform: scale(1) rotate(0deg); }
}
@keyframes figo-spin {
  from { transform: rotate(0deg) scale(1.4); }
  to { transform: rotate(360deg) scale(1); }
}

.fx-thought circle {
  fill: #f3f4ff;
  stroke: color-mix(in srgb, var(--figo-b) 55%, white);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: figo-bubble 2.4s ease-in-out infinite;
}
.fx-thought circle:nth-child(2) { animation-delay: .3s; }
.fx-thought circle:nth-child(3) { animation-delay: .6s; }
@keyframes figo-bubble {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.1); }
}

.fx-surprise path, .fx-laugh path {
  fill: none;
  stroke: var(--figo-spark);
  stroke-width: 3;
  stroke-linecap: round;
  animation: figo-flick 1.2s ease-in-out infinite;
}
.fx-surprise path:nth-child(2), .fx-laugh path:nth-child(2) { animation-delay: .2s; }
.fx-surprise path:nth-child(3) { animation-delay: .4s; }
@keyframes figo-flick { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* The z's are drawn as paths, not text, so they never turn up as letters in the page's text. */
.fx-zzz path {
  fill: none;
  stroke: var(--figo-spark);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  animation: figo-z 3s ease-in-out infinite;
  opacity: 0;
}
.fx-zzz path:nth-child(2) { stroke-width: 3; animation-delay: .7s; }
.fx-zzz path:nth-child(3) { stroke-width: 3.4; animation-delay: 1.4s; }
@keyframes figo-z {
  0% { opacity: 0; transform: translate(0, 6px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(10px, -14px); }
}

.tear {
  fill: #8fc4ff;
  transform-box: fill-box;
  transform-origin: top center;
  animation: figo-tear 2.4s ease-in infinite;
}
@keyframes figo-tear {
  0% { transform: translateY(0) scale(.4); opacity: 0; }
  20% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(22px) scale(.9); opacity: 0; }
}

.fx-typing rect { fill: #fff; stroke: color-mix(in srgb, var(--figo-b) 60%, white); stroke-width: 1.5; }
.fx-typing circle {
  fill: var(--figo-spark);
  transform-box: fill-box;
  transform-origin: center;
  animation: figo-dot 1.1s ease-in-out infinite;
}
.fx-typing circle:nth-of-type(2) { animation-delay: .15s; }
.fx-typing circle:nth-of-type(3) { animation-delay: .3s; }
@keyframes figo-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-3px); opacity: 1; }
}

.fx-check circle { fill: #4b63ff; }
.fx-check path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fx-check .badge {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform .5s cubic-bezier(.3, 1.7, .5, 1);
}
.figo.is-done .fx-check .badge { transform: scale(1); }

.heart {
  fill: #ff7aa8;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: figo-heart 1.7s ease-out forwards;
}
@keyframes figo-heart {
  0% { opacity: 0; transform: translateY(0) scale(.3); }
  20% { opacity: 1; transform: translateY(-4px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-38px) scale(.8); }
}

@media (prefers-reduced-motion: reduce) {
  .spark, .fx-thought circle, .fx-surprise path, .fx-laugh path, .fx-typing circle { animation: none; }
}