/* Runde 50 (Anders 04.11): «Hva du får» (hva-du-far.html). Bygger på analyser.css (bordet, pap, papir, topbjælke, bund).
   Kun det, siden har ud over en analyseside: arket uden fane, overskriften, fed i listen og animationen i «Satt opp for deg». */
.hva { padding-top: 0; }
.hva-hode { padding-bottom: clamp(20px, 2.6vw, 32px); border-bottom: 1px solid rgba(17, 17, 17, .25); }
.hva-hode .tit { margin-top: 0; }
.hva .tekst h2 { margin-top: 1.7em; }
.hva .tekst strong { font-weight: 600; }

/* C: e-post → utkast → godkjent. Standard er slutbilledet (uden JS og ved prefers-reduced-motion). hva.js sætter .klar (første
   billede, stille) og .spill, når figuren er i billedet. Én gang, ca. 5 s, rolige kurver. */
.hva-anim { margin: 1.5em 0 1.7em; }
.hva-anim svg { display: block; width: 100%; max-width: 520px; height: auto; overflow: visible; }
.konv-kropp { fill: #fbf8f1; stroke: rgba(17, 17, 17, .75); stroke-width: 1.4; }
.konv-strek { fill: none; stroke: rgba(17, 17, 17, .4); stroke-width: 1.2; }
.a-klaff { fill: #f1ece2; stroke: rgba(17, 17, 17, .75); stroke-width: 1.4; stroke-linejoin: round; }
.ark-flate { fill: #fffdf8; stroke: rgba(17, 17, 17, .14); stroke-width: .8; }
.a-linje { fill: rgba(17, 17, 17, .26); }
.a-linje.emne { fill: rgba(17, 17, 17, .55); }
.stempel { fill: #111; }
.a-hake { fill: none; stroke: #F7F3EC; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.a-ring { fill: none; stroke: #111; stroke-width: 1.5; opacity: 0; }
.a-klaff, .a-linje, .a-stempel, .a-ring, .a-ark { transform-box: fill-box; }
.a-klaff { transform-origin: 50% 0; transform: scaleY(-1); }
.a-konv { opacity: .38; }
.a-ark { transform-origin: 0 0; }
.a-linje { transform-origin: 0 50%; }
.a-stempel, .a-ring { transform-origin: 50% 50%; }

.hva-anim.klar .a-konv { animation: hva-konv 3.2s cubic-bezier(.22, .61, .36, 1) 0s both; }
.hva-anim.klar .a-klaff { animation: hva-klaff .6s cubic-bezier(.45, 0, .25, 1) 1s both; }
.hva-anim.klar .a-ark { animation: hva-ark 1.3s cubic-bezier(.45, .05, .3, 1) 1.4s both; }
.hva-anim.klar .a-linje { animation: hva-linje .42s cubic-bezier(.3, 0, .2, 1) calc(2.5s + var(--i) * .16s) both; }
.hva-anim.klar .a-stempel { animation: hva-stempel .4s cubic-bezier(.2, .8, .2, 1) 4.05s both; }
.hva-anim.klar .a-hake { animation: hva-hake .45s cubic-bezier(.4, 0, .2, 1) 4.3s both; }
.hva-anim.klar .a-ring { animation: hva-ring .9s cubic-bezier(.2, .7, .3, 1) 4.4s forwards; } /* kun fremad: ringen ses ikke før stemplet */
.hva-anim.klar * { animation-play-state: paused !important; }
.hva-anim.klar.spill * { animation-play-state: running !important; }

/* Konvolutten toner først ned, når arket er ude af den (ca. 2,7 s). */
@keyframes hva-konv { 0% { transform: translateX(-56px); opacity: 0; } 28% { transform: none; opacity: 1; } 85% { opacity: 1; } 100% { transform: none; opacity: .38; } }
@keyframes hva-klaff { from { transform: scaleY(1); } to { transform: scaleY(-1); } }
/* Arket ligger bag konvolutten, løftes op af den og glider til højre. */
@keyframes hva-ark { 0% { transform: translate(-216px, 47px) scale(.42); opacity: 0; } 8% { opacity: 1; } 42% { transform: translate(-216px, -12px) scale(.5); } 100% { transform: none; opacity: 1; } }
@keyframes hva-linje { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hva-stempel { from { transform: scale(1.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes hva-hake { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hva-ring { from { transform: scale(1); opacity: .45; } to { transform: scale(1.7); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hva-anim * { animation: none !important; }
}
@media (max-width: 959px) {
  .hva-anim { margin: 1.2em 0 1.4em; }
}