/**
 * portal-magic.css — Spillerportal "magi"-animationer (spec 2026-05-27).
 * Kun transform/opacity (+ background-position/filter/mix-blend-mode) i loops.
 * Brand-farver via design-tokens; glød som rgba (ikke i hex-zero-gate). @layer components.
 */
@layer components {
  /* ---- Partikel-motor (burst + gnist-tap, JS-spawnet) ---- */
  .hd-magic-particles { contain: layout style; }
  .hd-magic-burst-star { font-size: var(--hd-magic-burst-star-size, 14px); line-height: var(--hd-leading-icon); color: #ffd24a;
    text-shadow: 0 0 6px rgba(255, 240, 192, .8); }
  .hd-magic-ember { width: 7px; height: 7px; border-radius: 50%; }

  /* ---- §4.1 Guldkant (orbiterende glimt) ---- */
  /* Ingen egen border-radius — host-elementet (kort/genstand) sætter sin egen,
   * og .gilt-edge arver den via border-radius:inherit. Demo-værdien 12px droppet. */
  .gilt-frame { position: relative; }
  .gilt-edge { position: absolute; inset: 0; border-radius: inherit; padding: var(--giltw, 3px);
    pointer-events: none; z-index: 3;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; }
  .ge-base { background: linear-gradient(135deg, var(--hd-gold-deep, #6f5210), var(--hd-gold-mid, #caa12f) 35%,
    #e6cf86 50%, var(--hd-gold-mid, #caa12f) 65%, var(--hd-gold-deep, #6f5210)); }
  .ge-orbit { overflow: hidden; }
  .ge-orbit .spot { position: absolute; width: 260%; height: 260%; left: -80%; top: -80%;
    background: conic-gradient(from 0deg, rgba(255, 250, 225, 0) 0deg, rgba(255, 250, 225, 0) 66deg,
      rgba(255, 250, 225, .8) 90deg, rgba(255, 250, 225, 0) 116deg, rgba(255, 250, 225, 0) 360deg);
    animation: hd-magic-orbit var(--hd-magic-orbit-dur, 17s) linear infinite; }
  @keyframes hd-magic-orbit { to { transform: rotate(360deg); } }

  /* ---- §4.2 Foil F2-3 (blødt bredt lys-strejf) ---- */
  .fl { position: absolute; inset: -25%; pointer-events: none; z-index: 1; }
  .f2-3 { background: linear-gradient(115deg, transparent 33%, rgba(222, 240, 255, .4) 50%, transparent 67%);
    background-size: 300% 100%; filter: blur(3px); mix-blend-mode: screen;
    animation: hd-magic-streak var(--hd-magic-foil-dur, 17s) ease-in-out infinite alternate; }
  @keyframes hd-magic-streak { from { background-position: 8% 0; } to { background-position: 92% 0; } }

  /* ---- §4.3 Illumineret initial (kun selve bogstavet) ---- */
  .illum .cap { float: left; font-family: var(--hd-font-fantasy); font-weight: var(--hd-weight-bold); font-size: var(--hd-magic-cap-size, 52px); line-height: var(--hd-magic-cap-leading, .78);
    margin: 2px 9px 0 0;
    background: linear-gradient(135deg, var(--hd-gold-deep, #6f5210), #e9c75a 50%, var(--hd-gold-deep, #6f5210));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: hd-magic-cap-glow var(--hd-magic-illum-dur, 8s) ease-in-out infinite; }
  @keyframes hd-magic-cap-glow {
    0%, 100% { filter: drop-shadow(0 0 1px rgba(255, 205, 70, .12)); }
    50% { filter: drop-shadow(0 0 9px rgba(255, 198, 66, .6)); } }

  /* ---- §4.4 Rune-cirkel (dobbelt, modroterende) ---- */
  .runec { position: relative; width: 120px; height: 120px; }
  .runec div { position: absolute; border-radius: 50%; }
  .runec .r1 { inset: 0;
    border: 1.5px dashed color-mix(in srgb, var(--hd-magic-rune-blue, #7cc1ff) 32%, transparent);
    animation: hd-magic-rune-spin var(--hd-magic-rune-dur-1, 40s) linear infinite; }
  .runec .r2 { inset: 16px;
    border: 1px solid color-mix(in srgb, var(--hd-magic-rune-blue, #7cc1ff) 22%, transparent);
    animation: hd-magic-rune-spin var(--hd-magic-rune-dur-2, 52s) linear infinite reverse; }
  @keyframes hd-magic-rune-spin { to { transform: rotate(360deg); } }

  /* ---- §4.8 Guldblad-skimmer (lejlighedsvis strejf) ---- */
  .gold-leaf { font-family: var(--hd-font-fantasy); font-weight: var(--hd-weight-bold);
    background: linear-gradient(100deg, #9a7414 0%, #9a7414 35%, #fff3c4 48%, #ffe07a 52%, #9a7414 66%, #9a7414 100%);
    background-size: 280% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: hd-magic-gold-sheen var(--hd-magic-skimmer-dur, 9s) ease-in-out infinite; }
  @keyframes hd-magic-gold-sheen { 0%, 78% { background-position: 160% 0; } 100% { background-position: -60% 0; } }

  /* ---- §4.6 HP-flash delte keyframes (surface-CSS i top-bar/karakterark) ---- */
  @keyframes hd-magic-hp-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3px); }
    50% { transform: translateX(3px); } 78% { transform: translateX(-1px); } }
  @keyframes hd-magic-flash-out { 0% { opacity: .55; } 100% { opacity: 0; } }
  /* 0%/100% = stenens hvile-farve (parchment-text — IKKE --hd-ka-hp-color, som er
   * en ældre spec-reference): undgår at tallet snapper til mørkerød efter flashet. */
  @keyframes hd-magic-val-dmg {
    0%, 100% { color: var(--hd-parchment-text, var(--hd-text-primary)); text-shadow: none; }
    30% { color: #d62a1a; text-shadow: 0 0 8px rgba(214, 42, 26, .6); } }
  @keyframes hd-magic-val-heal {
    0%, 100% { color: var(--hd-parchment-text, var(--hd-text-primary)); text-shadow: none; }
    40% { color: #2f8a44; text-shadow: 0 0 8px rgba(47, 138, 68, .5); } }

  /* ---- §4.9 Blæk-skrift flourish (fast SVG-path, engangs) ---- */
  .quill path { fill: none; stroke: var(--hd-ink, #2b2017); stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round; }
  .quill.run path { animation: hd-magic-quill-draw 2.4s ease forwards; }
  @keyframes hd-magic-quill-draw { to { stroke-dashoffset: 0; } }

  /* ---- §7 Tilgængelighed: fjern al ambient-bevægelse, vis rolig slut-tilstand ---- */
  @media (prefers-reduced-motion: reduce) {
    .ge-orbit .spot,
    .f2-3,
    .illum .cap,
    .runec .r1, .runec .r2,
    .gold-leaf { animation: none !important; }
    .quill path { stroke-dashoffset: 0 !important; animation: none !important; }
  }

  /* ---- §6.2 Perf-fallback: vedvarende frame-drop → drop alle ambiente loops ---- */
  .hd-magic--fallback .ge-orbit .spot,
  .hd-magic--fallback .f2-3,
  .hd-magic--fallback .illum .cap,
  .hd-magic--fallback .runec .r1, .hd-magic--fallback .runec .r2,
  .hd-magic--fallback .gold-leaf { animation: none !important; }

  /* Viewport-gating: pause kort-ambient uden for synsfeltet (IntersectionObserver). */
  .is-offscreen .ge-orbit .spot,
  .is-offscreen .f2-3 { animation-play-state: paused; }
}