/* panim.css — the small looping animations at the top of every perspective card
   (partials/persp-anim.njk). Line art on the card's light surface, coloured by the card's
   own --c / --cq / --cs, so one drawing works for besøgende, udstiller and arrangør.

   Timeline (site.js, "Perspective-card animations"): each <svg class="panim"> plays a
   loop of data-dur ms while it is on screen. An element with data-at=".3" turns on (.on)
   30 % into the loop; data-out=".6" sends it out (.x); everything clears near the end and
   the loop starts over. Without JS, or with reduced motion, the drawing simply shows its
   final state: data-at elements on, data-out elements gone, numbers and texts complete. */

/* ── Card layout: animation on top, bleeding to the card edges ─────────── */
.persp-card { overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ug-ease), box-shadow .35s; }
.persp-card:hover { transform: translateY(-3px); box-shadow: var(--ug-shadow-pop); }
.persp-card.is-focus:hover { box-shadow: 0 0 0 3px var(--cq), var(--ug-shadow-pop); }
.persp-anim { position: relative; margin: -1.25rem -1.35rem 1.1rem; aspect-ratio: 16 / 9; overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--c) 22%, transparent) 1px, transparent 1.4px) 0 0 / 16px 16px,
    radial-gradient(90% 80% at 50% 110%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%),
    var(--cq);
  border-bottom: 1px solid color-mix(in srgb, var(--c) 22%, var(--ug-border-quiet)); }
.persp-anim[hidden] { display: none; }
.persp-anim > svg { display: block; width: 100%; height: 100%; transition: transform .6s var(--ug-ease); }
.persp-card:hover .persp-anim > svg { transform: scale(1.035); }

/* ── Paint ─────────────────────────────────────────────────────────────── */
.panim { overflow: visible; font-family: var(--ug-font); --ink: color-mix(in srgb, var(--ug-text) 17%, transparent); }
.panim :is(.l, .l1, .lc, .lq, .ld, .ink, .ink2, .inkc, .inkw, .lt) { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.panim .l { stroke: var(--cs); stroke-width: 2; }
.panim .l1 { stroke: var(--cs); stroke-width: 1.4; }
.panim .lc { stroke: var(--c); stroke-width: 2.6; }
.panim .lq { stroke: color-mix(in srgb, var(--cs) 32%, transparent); stroke-width: 1.4; }
.panim .ld { stroke: color-mix(in srgb, var(--cs) 45%, transparent); stroke-width: 1.4; stroke-dasharray: 3 4; }
.panim .lt { stroke: var(--c); stroke-width: 2; stroke-dasharray: 2 5; }
.panim .ink { stroke: var(--ink); stroke-width: 3.5; }
.panim .ink2 { stroke: var(--ink); stroke-width: 2.4; }
.panim .inkw { stroke: rgba(255,255,255,.75); stroke-width: 2.4; }
.panim .inkc { stroke: color-mix(in srgb, var(--c) 55%, transparent); stroke-width: 3.5; }
.panim .pl { fill: var(--ug-surface); stroke: color-mix(in srgb, var(--cs) 40%, transparent); stroke-width: 1.3; }
.panim .pl2 { fill: var(--ug-surface); stroke: var(--cs); stroke-width: 2; }
.panim .sh { fill: color-mix(in srgb, var(--cs) 13%, transparent); }
.panim .c { fill: var(--c); } .panim .cs { fill: var(--cs); } .panim .cq { fill: var(--cq); } .panim .su { fill: var(--ug-surface); }
.panim .ct { fill: color-mix(in srgb, var(--c) 20%, var(--ug-surface)); }
.panim .ct2 { fill: color-mix(in srgb, var(--c) 42%, var(--ug-surface)); }
.panim .hr { fill: var(--ug-accent-60); color: var(--ug-accent-60); }
.panim .ye { fill: var(--ug-warning); }
.panim .ok { fill: var(--ug-gron-60); color: var(--ug-gron-60); }
.panim .no { fill: #e5484d; color: #e5484d; }
.panim .lno { fill: none; stroke: #e5484d; stroke-width: 2.4; stroke-linecap: round; }
.panim .kb { fill: var(--p-besoegende); color: var(--p-besoegende); }
.panim .ku { fill: var(--p-udstiller); color: var(--p-udstiller); }
.panim .ka { fill: var(--p-arrangoer); color: var(--p-arrangoer); }
.panim .gc { color: var(--c); } .panim .gs { color: var(--cs); } .panim .gw { color: #fff; } .panim .gq { color: color-mix(in srgb, var(--cs) 45%, transparent); }
.panim text { font-family: var(--ug-font); }
.panim .t { fill: var(--ug-text); font-size: 10px; font-weight: 600; }
.panim .ts { fill: var(--ug-text-quiet); font-size: 8.5px; font-weight: 500; }
.panim .tc { fill: var(--cs); font-size: 10px; font-weight: 700; }
.panim .tw { fill: #fff; font-size: 9px; font-weight: 700; }
.panim .tm { fill: var(--ug-text-faint); font-family: var(--ug-mono); font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; }
.panim .tn { fill: var(--cs); font-size: 24px; font-weight: 300; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.panim .tn--s { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.panim .tb { font-weight: 700; }
.panim [data-num] { font-variant-numeric: tabular-nums; }

/* ── Timeline states (only once site.js has taken over: .is-live) ──────── */
.panim [data-at], .panim [data-out] { transform-box: fill-box; transform-origin: center;
  transition: opacity calc(var(--tt, .6s) * .75) ease, transform var(--tt, .6s) var(--te, cubic-bezier(.2, .8, .2, 1)), stroke-dashoffset var(--tt, 1.2s) cubic-bezier(.6, .05, .3, 1); }
.panim .e-pop { --te: cubic-bezier(.34, 1.6, .6, 1); }
.panim.is-live [data-at]:not(.on) { opacity: 0; }
.panim.is-live .e-pop:not(.on) { transform: scale(.2); }
.panim.is-live .e-rise:not(.on) { transform: translate(0, 12px); }
.panim.is-live .e-drop:not(.on) { transform: translate(0, -14px); }
.panim.is-live .e-left:not(.on) { transform: translate(-18px, 0); }
.panim.is-live .e-right:not(.on) { transform: translate(18px, 0); }
.panim.is-live .e-fly:not(.on) { transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(var(--fs, .6)); }
.panim .e-growx { transform-origin: 0 50%; } .panim.is-live .e-growx:not(.on) { transform: scaleX(0); opacity: 1; }
.panim .e-grow { transform-origin: 50% 100%; } .panim.is-live .e-grow:not(.on) { transform: scaleY(0); opacity: 1; }
.panim .e-rot { transform-origin: 50% 100%; } .panim.is-live .e-rot:not(.on) { transform: rotate(var(--r0, -120deg)); opacity: 1; }
.panim.is-live .e-draw { stroke-dasharray: 1 1; }
.panim .e-draw { transition: opacity .2s ease, stroke-dashoffset var(--tt, 1.2s) cubic-bezier(.6, .05, .3, 1); }
.panim.is-live .e-draw:not(.on) { stroke-dashoffset: 1; }
/* e-move: always visible, travels by (--mx, --my) when it turns on */
.panim.is-live .e-move:not(.on) { opacity: 1; }
.panim.is-live .e-move.on { transform: translate(var(--mx, 0px), var(--my, 0px)); }
/* exits */
.panim.is-live .x { opacity: 0; }
.panim.is-live .x.x-up { transform: translate(0, -14px); }
.panim.is-live .x.x-fly { transform: translate(var(--gx, 0px), var(--gy, 0px)) scale(var(--gs, .4)); }
.panim.is-live .x.x-shrink { transform: scale(.2); }
.panim.is-live .x.x-dim { opacity: .2; }
.panim.is-live .x.x-flat { transform: scaleX(0); }
/* a loop restart snaps back without transitions; the opening state then fades in */
.panim.is-reset *, .panim.is-reset { transition: none !important; }
.panim.is-reset [data-out]:not([data-at]) { opacity: 0; }
/* static/no-JS: what has gone is gone, decoration that only makes sense in motion is hidden */
.panim:not(.is-live) [data-out]:not(.x-dim) { display: none; }
.panim:not(.is-live) .x-dim { opacity: .2; }
.panim:not(.is-live) .e-move { transform: translate(var(--mx, 0px), var(--my, 0px)); }
.panim:not(.is-live) .tr { display: none; }
.panim.is-live .st { display: none; } /* static-only stand-ins for the travellers */

/* ── Loops (run while the card is on screen; faster on hover via playbackRate) ── */
.panim.is-live :is(.lp-pulse, .lp-bob, .lp-flow, .lp-blink, .lp-spin, .lp-ring, .lp-shake, .lp-sway, .lp-glow) { transform-box: fill-box; transform-origin: center; animation-play-state: paused !important; }
.panim.is-play :is(.lp-pulse, .lp-bob, .lp-flow, .lp-blink, .lp-spin, .lp-ring, .lp-shake, .lp-sway, .lp-glow) { animation-play-state: running !important; }
.panim.is-live .lp-pulse { animation: pa-pulse var(--ld, 1.8s) ease-in-out var(--dl, 0s) infinite; }
.panim.is-live .lp-bob { animation: pa-bob var(--ld, 3s) ease-in-out var(--dl, 0s) infinite; }
.panim.is-live .lp-flow { animation: pa-flow var(--ld, 1s) linear var(--dl, 0s) infinite; }
.panim.is-live .lp-blink { animation: pa-blink var(--ld, 1.2s) ease-in-out var(--dl, 0s) infinite; }
.panim.is-live .lp-spin { animation: pa-spin var(--ld, 4s) linear var(--dl, 0s) infinite; }
.panim .lp-spin.hand { transform-origin: 50% 100%; }
.panim.is-live .lp-ring { animation: pa-ring var(--ld, 2.2s) cubic-bezier(.2, .6, .3, 1) var(--dl, 0s) infinite; }
.panim.is-live .lp-shake { animation: pa-shake var(--ld, 1.6s) ease-in-out var(--dl, 0s) infinite; }
.panim.is-live .lp-sway { animation: pa-sway var(--ld, 2.6s) ease-in-out var(--dl, 0s) infinite alternate; }
.panim.is-live .lp-glow { animation: pa-glow var(--ld, 2s) ease-in-out var(--dl, 0s) infinite; }
@keyframes pa-pulse { 0%, 100% { transform: none; } 50% { transform: scale(1.14); } }
@keyframes pa-bob { 0%, 100% { transform: none; } 50% { transform: translate(0, -3px); } }
@keyframes pa-flow { to { stroke-dashoffset: -14; } }
@keyframes pa-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes pa-spin { to { transform: rotate(360deg); } }
@keyframes pa-ring { 0% { opacity: .8; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes pa-shake { 0%, 55%, 100% { transform: none; } 62% { transform: rotate(-12deg); } 70% { transform: rotate(10deg); } 78% { transform: rotate(-6deg); } 86% { transform: rotate(3deg); } }
@keyframes pa-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes pa-glow { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .persp-card, .persp-card:hover, .persp-card:hover .persp-anim > svg { transform: none; transition: none; }
  .panim *, .panim { animation: none !important; transition: none !important; }
}