/* ============================================================================
   EPJAI LOGO-PAKKEN — DEN ENESTE gyldige definition af EpJai-wordmarket.
   FAST REGEL (Martin, 30-07-2026): logoet skal se ENS ud alle steder. Brug ALTID
   klassen .epjai-logo (+ .d om "Ep") fra denne fil — definér ALDRIG egne dot/box-
   styles til logoet. Størrelsen styres KUN med font-size på .epjai-logo; alle
   proportioner (radius, luft, afstand) følger med i em. Findes også som pakke i
   Backoffice → Logo-pakke (visning + download + regler).
   Farve: EpJai-blå #1a73e8 · tekst følger sidens farve (currentColor).
   ============================================================================ */
.epjai-logo{display:inline-flex;align-items:baseline;gap:.075em;font-weight:800;line-height:1.33;white-space:nowrap;letter-spacing:-.01em}
.epjai-logo .d{background:#1a73e8;color:#fff;border-radius:.3em;padding:0 .27em;display:inline-block;font-weight:700;transform:translateY(.05em)}
/* Negativ variant til mørk baggrund styres af konteksten via currentColor — boksen er altid blå. */

/* ============================================================================
   EPJAI-MÆRKET — den blå brik, der vender rundt og viser skiftevis "Ep" og "Jai".
   Valgt af Martin 11-10-2026 (forslag A, "Vendingen").

   FAST REGEL: BRUGES DEN SOM VENTETEGN, SKAL DEN VÆRE 50 % GENNEMSIGTIG.
   Sæt klassen .henter. I fuld styrke er den et MÆRKE — den siger "det her er
   EpJai", og den skal man lægge mærke til. Som ventetegn siger den kun "vent
   lidt", og så må den ikke tage opmærksomheden fra dét, man venter på.

   Mærket er IKKE wordmarket. Wordmarket (.epjai-logo) er navnet skrevet ud;
   mærket er en brik, der også kan stå alene som et kvadratisk ikon — faneblad,
   app-ikon, knap, ventetegn.

   REN 2D MED VILJE. Første udgave brugte rotateY + backface-visibility, altså
   rigtig 3D — og det afhænger af, at browseren sætter 3D-lag sammen som
   forventet. Det virkede hos os og ikke hos Martin. Her foldes brikken i stedet
   sammen om sin midterakse (scaleX), og den anden side foldes ud: to flader,
   der skiftes til at være der. Intet at sætte forkert sammen.

   DE TO FOLDNINGER OVERLAPPER. Lukkede forsiden helt i samme øjeblik, som
   bagsiden begyndte at åbne, var begge flader nul på præcis det tidspunkt, og
   brikken forsvandt — ét billede ved 60 Hz, men målt. Bagsiden folder nu ud,
   FØR forsiden er helt lukket; brikken kommer aldrig under 21 % flade.

   Størrelsen sættes KUN med font-size på .epjai-maerke. Markup:
     <span class="epjai-maerke"><span class="side">Ep</span><span class="side bag">Jai</span></span>
   ============================================================================ */
.epjai-maerke{display:inline-block;position:relative;width:2.1em;height:1.62em;vertical-align:middle;
  font-weight:700;letter-spacing:-.01em;line-height:1}
.epjai-maerke .side{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border-radius:.3em;background:#1a73e8;color:#fff;font-size:.86em;transform-origin:50% 50%;
  animation:epjai-vend-for 3.6s cubic-bezier(.5,0,.5,1) infinite}
.epjai-maerke .bag{transform:scaleX(0);animation-name:epjai-vend-bag}
/* FAST REGEL: som ventetegn er mærket halvt gennemsigtigt — se forklaringen ovenfor. */
.epjai-maerke.henter{opacity:.5}
@keyframes epjai-vend-for{
  0%,40%{transform:scaleX(1);filter:brightness(1)}
  48%,90%{transform:scaleX(0);filter:brightness(.82)}
  98%,100%{transform:scaleX(1);filter:brightness(1)}
}
@keyframes epjai-vend-bag{
  0%,44%{transform:scaleX(0);filter:brightness(.82)}
  52%,86%{transform:scaleX(1);filter:brightness(1)}
  94%,100%{transform:scaleX(0);filter:brightness(.82)}
}
/* Har man slået bevægelse fra i sit system, står mærket stille med "Ep" — aldrig tomt. */
@media(prefers-reduced-motion:reduce){
  .epjai-maerke .side{animation:none}
  .epjai-maerke .bag{transform:scaleX(0)}
}