/* Lova-logo: vijf staten, puur CSS. Geen Lottie, geen JS-afhankelijkheid.
   Gebruik: <%- include('partials/lova-logo', { staat: 'werk' }) %>
   of zet de klasse via JS: el.className = 'lova-logo is-goed';

   De mark bestaat uit twee dikke ronde linten (stroke-width 14 in de eigen
   vulkleur = radius 7) op een vierkant 96-grid. De donkere knik komt uit
   mix-blend-mode: multiply, dus er is geen derde pad dat meeberekend moet
   worden.

   Kleuren komen uit style.css; de fallbacks houden het bestand losstaand
   bruikbaar (e-mail-preview, losse demo-pagina). */

.lova-logo {
  --lova-teal: var(--kleur-primair, #0F766E);
  --lova-mint: #34D399;
  --lova-succes: var(--kleur-success, #10B981);
  --lova-concept: var(--kleur-warning, #D97706);
  --lova-fout: var(--kleur-error, #EF4444);
  display: inline-block;
  width: 40px;
  height: 40px;
  overflow: visible;
  flex-shrink: 0;
}

/* --- Facetten -------------------------------------------------------- */
.lova-facet { stroke-width: 14; stroke-linejoin: round; stroke-linecap: round; }
.lova-facet--stem { fill: var(--lova-teal); stroke: var(--lova-teal); }
.lova-facet--arm {
  fill: var(--lova-mint);
  stroke: var(--lova-mint);
  mix-blend-mode: multiply;   /* levert de donkere knik linksonder */
}
.lova-mark { transform-box: view-box; transform-origin: 48px 48px; }

/* --- 1. RUST: stil, met een heel trage ademhaling -------------------- */
.lova-logo .lova-mark { animation: lova-adem 4s ease-in-out infinite; }
@keyframes lova-adem {
  0%, 100% { opacity: 1; }
  50%      { opacity: .9; }
}

/* --- 2. AAN HET WERK: twee bogen draaien tegen elkaar in ------------- */
.lova-ring { opacity: 0; transition: opacity .2s ease; }
.lova-boog {
  fill: none;
  stroke: var(--lova-mint);
  stroke-width: 4;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 48px 48px;
}
.lova-boog--buiten { stroke-dasharray: 52 80; }                 /* omtrek 263.9 */
.lova-boog--binnen { stroke-dasharray: 42 64.8; opacity: .45; } /* omtrek 213.6 */

.lova-logo.is-werk .lova-ring { opacity: 1; }
.lova-logo.is-werk .lova-boog--buiten { animation: lova-draai 1.2s linear infinite; }
.lova-logo.is-werk .lova-boog--binnen { animation: lova-draai 1.8s linear infinite reverse; }
.lova-logo.is-werk .lova-facet--arm { animation: lova-arm-puls 1.2s ease-in-out infinite; }
.lova-logo.is-werk .lova-mark { animation: none; }
@keyframes lova-draai    { to { transform: rotate(360deg); } }
@keyframes lova-arm-puls { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* --- 3. CONCEPT KLAAR: het punt staat stil en gloeit ----------------- */
/* Het amberpunt beweegt niet en schaalt niet - alleen de gloed eromheen
   ademt. De blur van drop-shadow staat in gebruikerseenheden van de viewBox,
   dus de gloed schaalt automatisch mee met de maat van het logo. */
.lova-badge {
  opacity: 0;
  transform: scale(.4);
  transform-box: view-box;
  transform-origin: 72px 24px;
}
.lova-logo.is-concept .lova-badge--concept,
.lova-logo.is-goed    .lova-badge--goed,
.lova-logo.is-fout    .lova-badge--fout {
  opacity: 1;
  animation: lova-badge-in .3s cubic-bezier(.2, 1.5, .4, 1) forwards;
}
@keyframes lova-badge-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

/* Ruststand: het punt gloeit al zacht, ook zonder animatie. */
.lova-badge--concept .lova-stip {
  filter: drop-shadow(0 0 3px rgba(217, 119, 6, .9)) drop-shadow(0 0 8px rgba(217, 119, 6, .4));
}
/* De gloed start na de pop-in, zodat de eerste ademhaling niet wegvalt. */
.lova-logo.is-concept .lova-stip { animation: lova-gloed 2.4s ease-in-out .3s infinite; }
@keyframes lova-gloed {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(217, 119, 6, .85)) drop-shadow(0 0 6px rgba(217, 119, 6, .3)); }
  50%      { filter: drop-shadow(0 0 5px rgba(217, 119, 6, 1))   drop-shadow(0 0 15px rgba(217, 119, 6, .55)); }
}

/* --- 4. GOEDGEKEURD: vinkje tekent zichzelf ------------------------- */
.lova-vink { stroke-dasharray: 18; stroke-dashoffset: 18; }
.lova-logo.is-goed .lova-vink { animation: lova-teken .3s ease-out .12s forwards; }
.lova-logo.is-goed .lova-facet--arm {
  fill: var(--lova-succes);
  stroke: var(--lova-succes);
  transition: fill .3s ease, stroke .3s ease;
}
@keyframes lova-teken { to { stroke-dashoffset: 0; } }

/* --- 5. FOUT / AFGEWEZEN: korte shake, dan stil --------------------- */
.lova-logo.is-fout .lova-mark { animation: lova-shake .15s ease-in-out 2; }
@keyframes lova-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

/* --- Intro: de linten vouwen open (voor login/eerste render) --------- */
.lova-logo.is-intro .lova-facet--stem { animation: lova-in-stem .45s cubic-bezier(.2, .8, .2, 1) both; }
.lova-logo.is-intro .lova-facet--arm  { animation: lova-in-arm  .45s cubic-bezier(.2, .8, .2, 1) .1s both; }
@keyframes lova-in-stem { from { transform: translateY(-20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lova-in-arm  { from { transform: translate(20px, 14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* --- Varianten ------------------------------------------------------- */
/* Op donker kan multiply niet (de knik wordt zwart). Daar leest de vouw juist
   als een lichte plek, dus screen - en de stam gaat een tint op. */
.lova-logo--donker .lova-facet--stem { fill: #5EEAD4; stroke: #5EEAD4; }
.lova-logo--donker .lova-facet--arm  { fill: #34D399; stroke: #34D399; mix-blend-mode: screen; }

.lova-logo--wit .lova-facet--stem { fill: #fff; stroke: #fff; }
.lova-logo--wit .lova-facet--arm  { fill: #fff; stroke: #fff; opacity: .72; mix-blend-mode: normal; }

.lova-logo--mono .lova-facet--stem { fill: currentColor; stroke: currentColor; }
.lova-logo--mono .lova-facet--arm  { fill: currentColor; stroke: currentColor; opacity: .55; mix-blend-mode: normal; }

/* --- Toegankelijkheid: alles stil, eindstaat blijft leesbaar --------- */
@media (prefers-reduced-motion: reduce) {
  .lova-logo, .lova-logo * { animation: none !important; }
  .lova-logo.is-werk .lova-ring { opacity: 1; }
  .lova-logo.is-concept .lova-badge--concept,
  .lova-logo.is-goed .lova-badge--goed,
  .lova-logo.is-fout .lova-badge--fout { opacity: 1; transform: none; }
  .lova-logo.is-goed .lova-vink { stroke-dashoffset: 0; }
}