/* bloghero.css — the wide hero animation at the top of every blog post and its miniature on
   the blog index (partials/blog-hero.njk). Paint, timeline states and loops come from
   panim.css and are played by the same timeline in site.js; this file frames and sizes the
   840×360 drawings, scales type and motion to the larger canvas, and adds the brand accents
   (green, coral, yellow, slate) on top of the card colours --c / --cq / --cs. */

/* ── Frame: the light canvas, ≈21:9 ───────────────────────────────────── */
.bh-wrap { width: min(100% - 3rem, 66rem); margin: 0 auto var(--ug-space-2xl); }
.bh, .blog__mini {
  --bh-dot: color-mix(in srgb, var(--ug-brand-50) 20%, transparent);
  aspect-ratio: 840 / 360; overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, var(--bh-dot) 1px, transparent 1.5px) 0 0 / 20px 20px,
    radial-gradient(70% 90% at 50% 125%, color-mix(in srgb, var(--ug-brand-50) 12%, transparent), transparent 70%),
    var(--ug-surface);
}
.bh { margin: 0; border: 1px solid var(--ug-border-quiet); border-radius: var(--ug-radius-l); box-shadow: var(--ug-shadow); }
.bh > svg, .blog__mini > svg { display: block; width: 100%; height: 100%; }

/* blog index: the miniature bleeds to the card's edges */
.blog__mini { display: block; margin: -1.2rem -1.3rem .55rem; border-bottom: 1px solid var(--ug-border-quiet); border-radius: var(--ug-radius-l) var(--ug-radius-l) 0 0; }
.blog__mini > svg { transition: transform .6s var(--ug-ease); }
.blog__kort:hover .blog__mini > svg { transform: scale(1.03); }

/* ── Colours ───────────────────────────────────────────────────────────── */
.bloghero { --c: var(--ug-brand-50); --cq: var(--ug-brand-95); --cs: var(--ug-brand); }
html[data-theme="dark"] .bloghero { --c: var(--ug-brand-50); --cq: var(--ug-brand-quiet); --cs: var(--ug-brand-80); }
/* dark: --cs turns light, so white type on a --cs chip turns dark */
html[data-theme="dark"] .bloghero .cs + .tw { fill: var(--ug-brand-10); }
.bloghero .co { fill: var(--ug-accent-60); }
.bloghero .cot { fill: color-mix(in srgb, var(--ug-accent-60) 16%, var(--ug-surface)); }
.bloghero .sl { fill: var(--ug-slate-50); }
.bloghero .slt { fill: color-mix(in srgb, var(--ug-slate-50) 22%, var(--ug-surface)); }
.bloghero .gr { fill: var(--ug-gron-60); }
.bloghero .grt { fill: color-mix(in srgb, var(--ug-gron-60) 22%, var(--ug-surface)); }
.bloghero .gry { fill: color-mix(in srgb, var(--ug-neutral-60) 22%, var(--ug-surface)); }
.bloghero .cone { opacity: .3; } .bloghero .scan { opacity: .35; }
.bloghero .heat { fill: var(--ug-accent-60); opacity: .22; }
.bloghero .fog { fill: var(--ug-surface); fill-opacity: .9; stroke: color-mix(in srgb, var(--cs) 40%, transparent); stroke-width: 1.6; stroke-dasharray: 5 6; }
.bloghero .gco { color: var(--ug-accent-60); } .bloghero .gsl { color: var(--ug-slate-50); } .bloghero .ggr { color: var(--ug-gron-60); }
.bloghero :is(.lco, .lsl) { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bloghero .lco { stroke: var(--ug-accent-60); stroke-width: 3; stroke-dasharray: 7 6; }
.bloghero .lsl { stroke: var(--ug-slate-50); stroke-width: 5; }
.bloghero .lno { stroke-width: 3; }
html[data-theme="dark"] .bloghero :is(.gry, .slt, .grt, .cot) { fill-opacity: .9; }

/* ── Lines and type, scaled to the 840-wide canvas ─────────────────────── */
.bloghero .l { stroke-width: 2.6; }
.bloghero .l1 { stroke-width: 1.8; }
.bloghero .lc { stroke-width: 3.2; }
.bloghero .lq, .bloghero .ld { stroke-width: 1.8; }
.bloghero .lt { stroke-width: 3; stroke-dasharray: 3 7; }
.bloghero .ink2 { stroke-width: 5; }
.bloghero .pl { stroke-width: 1.6; } .bloghero .pl2 { stroke-width: 2.4; }
.bloghero .t { font-size: 17px; }
.bloghero .tt { fill: var(--ug-text); font-size: 15px; font-weight: 600; }
.bloghero .ts { font-size: 14px; }
.bloghero .tc { font-size: 17px; }
.bloghero .tw { font-size: 14.5px; }
.bloghero .tm { font-size: 12px; letter-spacing: .1em; }
.bloghero .th { fill: var(--ug-text); font-size: 25px; font-weight: 700; letter-spacing: -.02em; }
.bloghero .tn { font-size: 54px; }
.bloghero .tn--s { fill: var(--cs); font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
.bloghero .tq { fill: var(--ug-text-faint); }
.bloghero .tgr { fill: var(--ug-gron-40); } .bloghero .tco { fill: var(--ug-accent-50); } .bloghero .tsl { fill: var(--ug-slate-40); }
html[data-theme="dark"] .bloghero .tgr { fill: var(--ug-gron-80); }
html[data-theme="dark"] .bloghero .tco { fill: var(--ug-accent-70); }
html[data-theme="dark"] .bloghero .tsl { fill: var(--ug-slate-80); }

/* ── Motion: the entrances travel further on the bigger canvas ─────────── */
.bloghero.is-live .e-rise:not(.on) { transform: translate(0, 26px); }
.bloghero.is-live .e-drop:not(.on) { transform: translate(0, -28px); }
.bloghero.is-live .e-left:not(.on) { transform: translate(-30px, 0); }
.bloghero.is-live .e-right:not(.on) { transform: translate(30px, 0); }
.bloghero.is-live .x.x-up { transform: translate(0, -24px); }

/* the round ball bounces (loop, runs only while the drawing plays) */
.bloghero.is-live .lp-bounce { transform-box: fill-box; transform-origin: 50% 100%; animation: bh-bounce 1.1s cubic-bezier(.4, 0, .6, 1) infinite; animation-play-state: paused; }
.bloghero.is-play .lp-bounce { animation-play-state: running; }
@keyframes bh-bounce { 0%, 100% { transform: translate(0, 0) scale(1.06, .92); } 12% { transform: translate(0, -6px) scale(1); } 50% { transform: translate(0, -78px); } 88% { transform: translate(0, -6px) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .blog__kort:hover .blog__mini > svg { transform: none; }
  .bloghero .lp-bounce { animation: none !important; }
}