/* home-nyt.css — forsidens "Meget mere end borgerens situation" (2026-10-07).
   Animerede kort for sårpleje (TIME og bandager), naturfagseksamen (planche), farmakologi,
   naturfag i 3D, procedurer og Den levende borger. Kun SVG og CSS – ingen ekstra WebGL.
   Animationerne kører kun, når kortet er på skærmen (.nyt-spiller sættes af home-nyt.js),
   og står stille ved reduceret bevægelse. */

.nyt { position: relative; padding: clamp(56px, 7vw, 92px) 24px; background: radial-gradient(900px 420px at 90% 0%, rgba(124, 58, 237, .14), transparent 60%), radial-gradient(800px 400px at 0% 100%, rgba(13, 110, 110, .12), transparent 60%), #f6f8fc; scroll-margin-top: 76px; }
.nyt-inner { max-width: 1180px; margin: 0 auto; }
.nyt-kicker { display: inline-block; padding: 5px 13px; border-radius: 999px; background: rgba(124, 58, 237, .1); color: #5b21b6; font-size: .74rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.nyt h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.08; letter-spacing: -.035em; color: #142747; margin: 12px 0 10px; max-width: 820px; text-wrap: balance; }
.nyt h2 em { font-style: normal; background: linear-gradient(90deg, #0d9488, #2e75b6 50%, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nyt-lead { color: #4a5b74; font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.6; max-width: 760px; margin: 0 0 30px; }

.nyt-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.nyt-kort { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 24px; background: #fff; border: 1px solid rgba(31, 56, 100, .12); box-shadow: 0 18px 40px -30px rgba(20, 39, 71, .55); text-decoration: none; color: #142747; overflow: hidden; transition: transform .25s cubic-bezier(.22, .8, .24, 1), box-shadow .25s; }
.nyt-kort:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -30px rgba(20, 39, 71, .7); }
.nyt-kort:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; }
.nyt-stor { grid-column: span 3; }
.nyt-mellem { grid-column: span 2; }
.nyt-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nyt-maerke { font-size: .68rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: #fff; background: var(--f, #2e75b6); }
.nyt-ny { font-size: .66rem; font-weight: 900; padding: 3px 8px; border-radius: 999px; color: #7c2d12; background: #fde68a; }
.nyt-kort h3 { font-size: 1.28rem; font-weight: 850; letter-spacing: -.02em; margin: 0; }
.nyt-kort p { margin: 0; color: #4a5b74; font-size: .94rem; line-height: 1.55; }
.nyt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.nyt-chips span { font-size: .74rem; font-weight: 750; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--f, #2e75b6) 10%, #fff); color: color-mix(in srgb, var(--f, #2e75b6) 75%, #000); border: 1px solid color-mix(in srgb, var(--f, #2e75b6) 22%, #fff); }
.nyt-gaa { font-weight: 850; font-size: .9rem; color: var(--f, #2e75b6); }
.nyt-scene { position: relative; border-radius: 18px; overflow: hidden; background: #0f2342; aspect-ratio: 420 / 250; }
.nyt-mellem .nyt-scene { aspect-ratio: 300 / 170; }
.nyt-scene svg { display: block; width: 100%; height: 100%; }
.nyt-tekst { position: absolute; left: 12px; top: 10px; right: 12px; font: 800 .8rem/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; color: #fff; }
.nyt-tekst span { position: absolute; left: 0; top: 0; padding: 5px 10px; border-radius: 10px; background: rgba(9, 26, 48, .78); border: 1px solid rgba(255, 255, 255, .18); opacity: 0; }
.nyt-tekst span:first-child { opacity: 1; }
.tekst-eks { left: auto; width: 46%; }
.tekst-eks span { left: auto; right: 0; }

/* ── Sårpleje: TIME ── */
.saar-saar, .saar-sl, .saar-inf, .saar-draabe, .saar-kant, .saar-bandage, .saar-bogstav, .eks-blok, .eks-saks, .eks-ark, .farma-kurve, .farma-pille, .atom-bane, .proc-flueben, .proc-bar, .puls-linje { transform-box: fill-box; transform-origin: center; }
.nyt-spiller .saar-saar { animation: saarHeler 14s ease-in-out infinite; }
.nyt-spiller .saar-sl { animation: saarSlough 14s ease-in-out infinite; }
.nyt-spiller .saar-inf { animation: saarInf 14s ease-in-out infinite; }
.nyt-spiller .saar-draabe { animation: saarFugt 14s ease-in-out infinite; }
.nyt-spiller .saar-kant { animation: saarKant 14s ease-in-out infinite; }
.nyt-spiller .saar-bandage { animation: saarBandage 14s ease-in-out infinite; }
.nyt-spiller .saar-bogstav.t { animation: bogT 14s infinite; }
.nyt-spiller .saar-bogstav.i { animation: bogI 14s infinite; }
.nyt-spiller .saar-bogstav.m { animation: bogM 14s infinite; }
.nyt-spiller .saar-bogstav.e { animation: bogE 14s infinite; }
.nyt-spiller .tekst-saar span:nth-child(1) { animation: tekst1af5 14s infinite; }
.nyt-spiller .tekst-saar span:nth-child(2) { animation: tekst2af5 14s infinite; }
.nyt-spiller .tekst-saar span:nth-child(3) { animation: tekst3af5 14s infinite; }
.nyt-spiller .tekst-saar span:nth-child(4) { animation: tekst4af5 14s infinite; }
.nyt-spiller .tekst-saar span:nth-child(5) { animation: tekst5af5 14s infinite; }
@keyframes saarSlough { 0%, 6% { opacity: 1; transform: scale(1); } 22%, 96% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; transform: scale(1); } }
@keyframes saarInf { 0%, 26% { opacity: 1; } 44%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes saarFugt { 0%, 48% { opacity: .9; transform: scale(1.25); } 56%, 70% { opacity: .55; transform: scale(.7); } 80%, 96% { opacity: 0; } 100% { opacity: .9; transform: scale(1.25); } }
@keyframes saarHeler { 0%, 72% { transform: scale(1); } 90%, 96% { transform: scale(.52); } 100% { transform: scale(1); } }
@keyframes saarKant { 0%, 72% { opacity: 0; } 82%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes saarBandage { 0%, 84% { transform: translateY(-230px); opacity: 0; } 89%, 96% { transform: translateY(0); opacity: .97; } 100% { transform: translateY(-230px); opacity: 0; } }
@keyframes bogT { 0%, 22% { fill: #fbbf24; } 24%, 100% { fill: rgba(255,255,255,.18); } }
@keyframes bogI { 0%, 23% { fill: rgba(255,255,255,.18); } 25%, 47% { fill: #fbbf24; } 49%, 100% { fill: rgba(255,255,255,.18); } }
@keyframes bogM { 0%, 48% { fill: rgba(255,255,255,.18); } 50%, 72% { fill: #fbbf24; } 74%, 100% { fill: rgba(255,255,255,.18); } }
@keyframes bogE { 0%, 73% { fill: rgba(255,255,255,.18); } 75%, 96% { fill: #fbbf24; } 98%, 100% { fill: rgba(255,255,255,.18); } }
@keyframes tekst1af5 { 0%, 22% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes tekst2af5 { 0%, 23% { opacity: 0; } 25%, 47% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes tekst3af5 { 0%, 48% { opacity: 0; } 50%, 72% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes tekst4af5 { 0%, 73% { opacity: 0; } 75%, 86% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes tekst5af5 { 0%, 87% { opacity: 0; } 89%, 98% { opacity: 1; } 100% { opacity: 0; } }

/* ── Naturfagseksamen: planchen bygges ── */
.nyt-spiller .eks-blok { animation: eksBlok 11s cubic-bezier(.22, .8, .24, 1) infinite; animation-delay: calc(var(--i) * .45s); }
.nyt-spiller .eks-saks { animation: eksSaks 11s linear infinite; }
.nyt-spiller .eks-ark { animation: eksArk 11s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
.nyt-spiller .eks-poster { animation: eksPoster 11s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.nyt-spiller .tekst-eks span:nth-child(1) { animation: tekst1af3 11s infinite; }
.nyt-spiller .tekst-eks span:nth-child(2) { animation: tekst2af3 11s infinite; }
.nyt-spiller .tekst-eks span:nth-child(3) { animation: tekst3af3 11s infinite; }
@keyframes eksBlok { 0% { opacity: 0; transform: translateY(-26px) scale(.9); } 6%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(-26px) scale(.9); } }
@keyframes eksSaks { 0%, 48% { opacity: 0; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(0, 0); } 62% { transform: translate(150px, 0); } 74% { transform: translate(150px, 200px); } 80% { opacity: 1; transform: translate(150px, 200px); } 82%, 100% { opacity: 0; } }
@keyframes eksArk { 0%, 54% { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.3); } 60%, 92% { fill: rgba(45,212,191,.16); stroke: #2dd4bf; } 100% { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.3); } }
@keyframes eksPoster { 0%, 52% { transform: scale(.92); } 64%, 70% { transform: scale(.97); } 78%, 92% { transform: scale(1.02); } 100% { transform: scale(.92); } }
@keyframes tekst1af3 { 0%, 31% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes tekst2af3 { 0%, 32% { opacity: 0; } 34%, 64% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes tekst3af3 { 0%, 65% { opacity: 0; } 67%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }

/* ── Farmakologi: koncentrationskurve ── */
.nyt-spiller .farma-kurve { stroke-dasharray: 900; animation: farmaKurve 8s ease-in-out infinite; }
.nyt-spiller .farma-pille { animation: farmaPille 8s ease-in infinite; animation-delay: calc(var(--i) * 1.1s); }
@keyframes farmaKurve { 0% { stroke-dashoffset: 900; } 75%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 900; } }
@keyframes farmaPille { 0% { opacity: 0; transform: translateY(-30px); } 4% { opacity: 1; } 10% { opacity: 1; transform: translateY(12px); } 13%, 100% { opacity: 0; transform: translateY(12px); } }

/* ── Naturfag i 3D: atom ── */
.nyt-spiller .atom-bane { animation: atomDrej var(--t, 6s) linear infinite; }
.nyt-spiller .atom-kerne { animation: atomPuls 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes atomDrej { to { transform: rotate(360deg); } }
@keyframes atomPuls { 50% { transform: scale(1.08); } }

/* ── Procedurer: trin for trin ── */
.nyt-spiller .proc-flueben { animation: procTrin 9s ease-out infinite; animation-delay: calc(var(--i) * 1.4s); opacity: 0; }
.nyt-spiller .proc-bar { animation: procBar 9s ease-out infinite; transform-origin: 0 50%; }
@keyframes procTrin { 0% { opacity: 0; transform: scale(.4); } 4%, 80% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: 0; } }
@keyframes procBar { 0% { transform: scaleX(.02); } 70%, 85% { transform: scaleX(1); } 100% { transform: scaleX(.02); } }

/* ── Den levende borger: puls ── */
.nyt-spiller .puls-linje { stroke-dasharray: 520; animation: pulsLinje 3.2s linear infinite; }
@keyframes pulsLinje { from { stroke-dashoffset: 520; } to { stroke-dashoffset: -520; } }

/* ── Scroll: kortene folder sig ud (2026-10-08) ──
   --p (0→1) sættes af home-nyt-scroll.js ud fra scroll-positionen. Klassen nyt-fold sættes kun, når
   scriptet kører og "reducér bevægelse" er slået fra – ellers står alt som før.
   Bruger translate/rotate/scale (ikke transform), så kortenes hover-løft stadig virker. */
html.nyt-fold .nyt { overflow-x: clip; }
html.nyt-fold .nyt-grid { perspective: 1500px; }
html.nyt-fold .nyt-kort {
  --q: calc(1 - var(--p, 1));
  transform-origin: 50% 100%;
  opacity: calc(.08 + var(--p, 1) * .92);
  translate: calc(var(--side, 0) * var(--q) * 40px) calc(var(--q) * 110px);
  rotate: 1 calc(var(--side, 0) * .3) 0 calc(var(--q) * 58deg);
  scale: calc(1 - var(--q) * .12);
  will-change: translate, rotate, opacity;
}
html.nyt-fold .nyt-kort:nth-child(odd) { --side: -1; }
html.nyt-fold .nyt-kort:nth-child(even) { --side: 1; }
html.nyt-fold .nyt-scene svg { scale: calc(1 + (1 - var(--p, 1)) * .3); transform-origin: 50% 60%; }
/* Lysglimt, der løber hen over kortet, mens det folder sig ud */
html.nyt-fold .nyt-kort::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  background-position: calc(100% - var(--p, 1) * 100%) 0;
  opacity: calc((1 - var(--p, 1)) * 2.2);
}
html.nyt-fold .nyt-kicker,
html.nyt-fold .nyt-inner > h2,
html.nyt-fold .nyt-lead {
  opacity: calc(var(--p, 1) * 1.15 - .15);
  translate: 0 calc((1 - var(--p, 1)) * 46px);
  filter: blur(calc((1 - var(--p, 1)) * 6px));
}
@media (max-width: 620px) {
  html.nyt-fold .nyt-kort { rotate: 1 0 0 calc(var(--q) * 42deg); translate: 0 calc(var(--q) * 70px); }
}
@media (prefers-color-scheme: dark) {
  html.nyt-fold .nyt-kort::after { background-image: linear-gradient(105deg, transparent 38%, rgba(160, 220, 255, .32) 50%, transparent 62%); }
}

@media (max-width: 980px) {
  .nyt-stor { grid-column: span 6; }
  .nyt-mellem { grid-column: span 3; }
}
@media (max-width: 620px) {
  .nyt { padding: 48px 16px; }
  .nyt-mellem { grid-column: span 6; }
}
@media (prefers-reduced-motion: reduce) {
  .nyt-kort, .nyt-kort * { animation: none !important; transition: none !important; }
  .saar-sl, .saar-inf { opacity: 0; }
  .saar-kant { opacity: 1; }
  .proc-flueben { opacity: 1 !important; }
}
@media (prefers-color-scheme: dark) {
  .nyt { background: radial-gradient(900px 420px at 90% 0%, rgba(124, 58, 237, .2), transparent 60%), #0b1a30; }
  .nyt h2 { color: #f1f6ff; }
  .nyt-lead, .nyt-kort p { color: #b9c8dc; }
  .nyt-kort { background: #12233b; border-color: #24406a; color: #e8f0fa; }
  .nyt-kicker { background: rgba(167, 139, 250, .16); color: #ddd6fe; }
  .nyt-chips span { background: color-mix(in srgb, var(--f, #2e75b6) 22%, #12233b); color: #e8f0fa; border-color: color-mix(in srgb, var(--f, #2e75b6) 40%, #12233b); }
  .nyt-gaa { color: color-mix(in srgb, var(--f, #2e75b6) 60%, #fff); }
}