/* penmark.hu: what the front page and /approach share, loaded on both after site.css. The
   golden-hour light, the Hungary map (an inline SVG written by share/cover_map.py, classes hu-*)
   and the page transition between the two pages. Everything that moves stops for
   prefers-reduced-motion. */

:root {
  --glow: #F2C27B;                        /* golden-hour light: the map's border, accents */
  --glow-hot: #FFE1B0;
  --cover-ink: #F6F3EE;                   /* warm white for text on dark ground */
  --cover-dim: rgba(246, 243, 238, 0.74);
  --cover-faint: rgba(246, 243, 238, 0.5);
  --night: #070D18;                       /* the deepest ground, as under the cover photograph */
}

/* ── the map ───────────────────────────────────────────────────────────── */

.hu-map { overflow: visible; }
.hu-halo { fill: rgba(242, 194, 123, 0.16); }
.hu-fill { fill: rgba(5, 12, 24, 0.58); }
.hu-county { fill: none; stroke: rgba(242, 194, 123, 0.14); stroke-width: 0.9; stroke-linejoin: round; }
.hu-route { fill: none; stroke: rgba(255, 225, 176, 0.34); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.hu-river { fill: none; stroke: rgba(159, 192, 238, 0.6); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hu-lake { fill: rgba(159, 192, 238, 0.38); }
.hu-cities { fill: rgba(255, 225, 176, 0.8); }
.hu-glow { fill: none; stroke: var(--glow); stroke-width: 9; opacity: 0.85; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hu-border { fill: none; stroke: var(--glow-hot); stroke-width: 2.3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hu-arc { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hu-arc-flow { fill: none; stroke: rgba(226, 238, 255, 0.85); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 0.01 0.05; }
.hu-comet { fill: #EEF5FF; opacity: 0; }
.hu-bp { fill: var(--glow-hot); }
.hu-bp-halo { fill: rgba(255, 214, 160, 0.4); transform-box: fill-box; transform-origin: center; }
.hu-bp-label {
  font: 600 25px "Helvetica Neue", Helvetica, Arial, sans-serif;
  fill: #fff;
  paint-order: stroke;
  stroke: rgba(4, 9, 18, 0.6);
  stroke-width: 5px;
}

@media (prefers-reduced-motion: no-preference) {
  .hu-border { animation: hu-draw 3.4s cubic-bezier(.3, .6, .2, 1) both; }
  /* The glow traces the border in step with the line, then breathes. The breathing starts and
     ends at the glow's resting brightness, so nothing jumps when it begins or loops. */
  .hu-glow { animation: hu-draw 3.4s cubic-bezier(.3, .6, .2, 1) both, hu-breathe 14s ease-in-out 3.4s infinite; }
  .hu-arc-flow { animation: hu-flow 10s linear infinite; }
  .hu-bp-halo { animation: hu-pulse 3.8s ease-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .hu-comet { display: none; }
}
@keyframes hu-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hu-breathe { 0%, 100% { opacity: 0.85; } 35% { opacity: 1; } 70% { opacity: 0.6; } }
@keyframes hu-flow { to { stroke-dashoffset: -1; } }
@keyframes hu-pulse { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(2.8); opacity: 0; } }

/* ── the page transition ─────────────────────────────────────────────────
   Browsers with cross-document view transitions slide between the two pages as if they were
   one long page: the cover moves up and out while the top of /approach comes up from below,
   and back again the other way (the direction is set by the page arrived on, in home.css and
   night.css). Only the wordmark is shared: both headers put it in exactly the same place, so it
   stays still above the moving pages. Nothing else is shared, because shared elements are drawn
   above the page during the move and would break the slide. Browsers without view transitions
   simply load the page; home.js slides the cover away first for those. Pages without this
   file, such as /legal, never take part. */

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
::view-transition-group(pm-wordmark) { animation-duration: .85s; }
@keyframes pm-slide-out-up { to { transform: translateY(-100%); } }
@keyframes pm-slide-in-up { from { transform: translateY(100%); } }
@keyframes pm-slide-out-down { to { transform: translateY(100%); } }
@keyframes pm-slide-in-down { from { transform: translateY(-100%); } }