/* ==========================================================================
   Bypuls – hero-animation ("Byen er allerede i gang. Mangler I?")
   Alle klasser har præfikset bph-, tokens ligger på .bph. Breakpoint 960px
   skal matche MOBILE_BP i hero-animation.js.
   bypuls.pro: telefonens indhold er appens rigtige skærm (phone.css: statuslinje, titel, Puls-kort, ListRow og
   Eksempel-tilbuddet), så README'ens kopier af appens kort (.bph-date, .bph-offer, .bph-welcome m.fl.) er fjernet.
   Byfarven kommer fra .t-<slug> (towns.css), og uden JS står slutbilledet.
   ========================================================================== */

.bph-pin{position:relative;--bph-offset:72px}   /* bypuls.pro: sitets faste header (bund 70 px på desktop) */
.bph-pin > .bph{position:sticky;top:var(--bph-top,0px)}
.bph-pin.is-static{height:auto !important}
.bph-pin.is-static > .bph{position:relative;top:auto}

.bph{
  --bph-paper:#FFFFFF;
  --bph-ink:#17141C;
  --bph-muted:#675F72;
  --bph-line:#E6DFEB;
  --bph-lyng:#7A2C91;
  --bph-lyng-soft:#F2E7F6;
  --bph-lilac:#EEE8F6;            /* datoblok i appen */
  --bph-town:var(--town,#0B2463); /* byfarve – fra .t-<slug> (towns.css) */
  --bph-skeleton:#F1F0F5;
  /* appens egne kort-farver (aflæst fra den rigtige app) */
  --bph-card:#EEEDF3;
  --bph-dateblock:#E4E0F7;
  --bph-indigo:#4A3BC6;
  --bph-offer:#A8450F;
  --bph-offer-bg:#FDEEE2;
  --bph-offer-line:#ECB083;
  --bph-app:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  --bph-display:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --bph-text:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;

  position:relative;
  background:var(--bph-paper);
  color:var(--bph-ink);
  font-family:var(--bph-text);
  line-height:1.45;
  padding-block:24px 32px;
  overflow:hidden;               /* ledninger må ikke give vandret scroll */
}
.bph *,.bph *::before,.bph *::after{box-sizing:border-box}
.bph :focus-visible{outline:2px solid var(--bph-lyng);outline-offset:3px}

.bph-move{position:relative;will-change:transform}

/* ---------- stage: aktører | telefon | aktører ---------- */
.bph-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:clamp(48px,9vw,140px);align-items:center;
  max-width:1040px;margin:0 auto}
.bph-col{display:flex;flex-direction:column;gap:clamp(90px,18vh,170px);min-width:0;position:relative;z-index:2}
.bph-col--left{align-items:flex-end}
.bph-col--right{align-items:flex-start}
.bph-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.bph-wire{fill:none;stroke:var(--bph-lyng);stroke-width:2;stroke-linecap:round}
.bph-wire--you{stroke-dasharray:2 7;stroke-width:2.5}
.bph-dot{fill:var(--bph-lyng)}
.bph-dot-ring{fill:none;stroke:var(--bph-lyng);stroke-width:2}

/* aktør-kort */
.bph-src{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center;width:min(220px,100%);
  background:var(--bph-paper);border-radius:14px;padding:10px 14px 10px 10px;
  box-shadow:0 0 0 1px var(--bph-line),0 6px 20px -12px rgba(23,20,28,.25);opacity:.45;
  transition:opacity .3s ease,box-shadow .3s ease}
.bph-src.is-on{opacity:1;box-shadow:0 0 0 2px var(--bph-lyng),0 10px 26px -12px rgba(122,44,145,.45)}
.bph-ava{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--bph-display);
  background:var(--bph-lyng-soft);color:var(--bph-lyng);transition:background .3s,color .3s}
.bph-src.is-on .bph-ava{background:var(--bph-lyng);color:#fff}
.bph-src > div > b{display:block;font:600 14.5px/1.2 var(--bph-display)}
.bph-src > div > span{display:block;font-size:12px;color:var(--bph-muted);margin-top:2px}
.bph-src--you{background:transparent;box-shadow:none;outline:2px dashed var(--bph-lyng);outline-offset:-2px}
.bph-src--you .bph-ava{background:transparent;border:2px dashed var(--bph-lyng)}
.bph-src--you.is-on{box-shadow:0 0 0 6px var(--bph-lyng-soft)}
.bph-src--you.is-on .bph-ava{background:transparent;color:var(--bph-lyng)}

/* ---------- telefon (spejler den rigtige app) ---------- */
.bph-phone{width:270px;aspect-ratio:270/560;border-radius:44px;background:#141218;padding:9px;position:relative;z-index:2;
  box-shadow:0 30px 60px -24px rgba(23,20,28,.35)}
.bph-screen{position:relative;height:100%;border-radius:36px;overflow:hidden;background:#FAF9FC;display:flex;flex-direction:column}
/* Appen i rigtig iPhone-bredde (393 px), skaleret samlet ned i rammen som et skærmbillede (Ulrik 25.10.2026: 1:1 med appen,
   alt synligt; B3-gulvet gælder ikke for de to dekorative, aria-hidden telefoner). JS sætter --bph-scale og højden. */
.bph-app{position:absolute;left:0;top:0;width:393px;height:845px;overflow:hidden;transform-origin:0 0;transform:scale(var(--bph-scale,.6412))}
.bph-app .ph-status .ph-island{display:none}
.bph-app .ph-body{padding-bottom:1rem}

/* Pladserne: appens kort lander i dem; indtil da en tom plads i kortets form og højde */
.bph-slots{display:grid;gap:.75rem}
.bph-slot{position:relative;border-radius:1.25rem;background:var(--bph-skeleton)}
.bph-slot--offer{border-radius:1.4rem}
.bph-ev{opacity:0;transform:scale(.9);transform-origin:left center}
/* "jeres" plads: stiplet kant (JS sætter is-dashed og lader farven pulsere) */
.bph .ph-offer.is-dashed{border-color:transparent;outline:2px dashed var(--bph-offer-line);outline-offset:-2px}

/* ---------- pointen (står under telefonen, hvor billedteksten stod) ---------- */
.bph-payoff{max-width:560px;margin:28px auto 0;text-align:center;opacity:0;transform:translateY(14px);pointer-events:none;
  padding-inline:max(16px,env(safe-area-inset-left,0px))}
.bph-payoff h3{margin:0;font:700 clamp(24px,2.6vw,32px)/1.08 var(--bph-display);letter-spacing:-.02em;text-wrap:balance}
.bph-payoff p{margin:10px auto 0;color:var(--bph-muted);font-size:16.5px;max-width:44ch}
  font:600 16px/1.2 var(--bph-text);background:var(--bph-lyng);color:#fff;text-decoration:none}
.bph-source{margin-top:14px;font-size:12px;color:var(--bph-muted);font-variant-numeric:tabular-nums}

/* ---------- uden bevægelse ---------- */
.bph.is-static .bph-src{opacity:1}
.bph.is-static .bph-ev{opacity:1;transform:none}
/* uden JS: samme slutbillede */
html:not(.js) .bph .bph-src{opacity:1}
html:not(.js) .bph .bph-ev{opacity:1;transform:none}
html:not(.js) .bph .bph-payoff{opacity:1;transform:none;pointer-events:auto}
.bph.is-static .bph-payoff{opacity:1;transform:none;pointer-events:auto}

/* ---------- mobil: aktører i 2×2 over telefonen, ledninger går ned ---------- */
@media (max-width:960px){
  .bph-pin{--bph-offset:76px}   /* bypuls.pro: den faste header (bund 74 px) dækker ellers toppen */
  .bph{padding-block:16px 28px}
  .bph-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:56px;column-gap:10px;
    padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
  .bph-col{display:contents}
  .bph-src{width:100%;grid-template-columns:30px minmax(0,1fr);gap:8px;padding:8px 10px 8px 8px}
  .bph-ava{width:30px;height:30px;font-size:11px}
  .bph-src > div > b{font-size:13px}
  .bph-src > div > span{font-size:11px}
  .bph-src[data-i="0"]{grid-row:1;grid-column:1}
  .bph-src[data-i="1"]{grid-row:1;grid-column:2}
  .bph-src[data-i="2"]{grid-row:2;grid-column:1}
  .bph-src[data-i="3"]{grid-row:2;grid-column:2}
  .bph-stage{row-gap:10px}
  .bph-phonewrap{grid-row:3;grid-column:1 / span 2;justify-self:center;margin-top:46px}
  .bph-phone{width:min(260px,74vw)}
}