/* MASCASA: full-bleed grounds for the two plan heroes (chosen by the user on 2026-10-31).
   Immobilie verkaufen, data-hero-bg="zeichentisch": graph paper, the plan's wall axes run out to the edges, a drifting desk lamp.
   Über MASCASA, data-hero-bg="koeln": a line map of the city centre with Rudolfplatz pinned and the Rhine flowing.
   Both heroes fill the first screen under the header.
   Map data © OpenStreetMap contributors (ODbL), credited in the imprint. The attribute sits on the hero section; hero-bg.js builds the background layer. The other variants are in
   archive/2026-10-31-hero-hintergrund-varianten/. */

@property --hb-r { syntax: "<length>"; inherits: true; initial-value: 0px; }

/* ---------- Shared: the hero becomes a ground the plan rests on ---------- */
:is(.hero, .page-hero)[data-hero-bg] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(28px, 3vw, 44px) clamp(48px, 5vw, 72px);
  /* Both plan heroes fill the first screen under the sticky header; the plan sits in the middle of its ground */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--header-h) - 1px);
  min-height: calc(100svh - var(--header-h) - 1px);
}
:is(.hero, .page-hero)[data-hero-bg] > .wrap { position: relative; z-index: 1; }
/* Verkaufen: a little narrower on wide screens so the ground shows at the sides (the H1 still fits one line) */
.hero[data-hero-bg] > .wrap { max-width: calc(1300px + 2 * var(--gutter)); }
.hb { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hb > * { position: absolute; inset: 0; }
.hb svg { overflow: visible; }

/* ---------- Köln: a line map of the city, the plan on tracing paper above it ---------- */
:is(.hero, .page-hero)[data-hero-bg="koeln"] { background: var(--stone); padding-bottom: clamp(56px, 5.6vw, 84px); }
/* On laptop heights the portrait gives way a little, so the whole plan and the pin fit the screen
   (the hero is about 1.25 × portrait width + 330 px tall) */
@media (min-width: 900px) {
  .page-hero[data-hero-bg="koeln"] .about-photo .arch { max-width: min(460px, max(300px, calc((100svh - var(--header-h) - 332px) * .8))); }
}
@media (min-width: 900px) and (max-height: 820px) {
  .page-hero[data-hero-bg="koeln"] { padding-block: 28px 56px; }
  .page-hero[data-hero-bg="koeln"] .about-main { padding-block: 32px; gap: 20px; }
  .page-hero[data-hero-bg="koeln"] .about-facts li { padding-block: 16px 18px; }
}
.hb-map svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hb-map__flow { will-change: transform; }
.hb-map path { fill: none; stroke: var(--navy); vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.hb-map .m-r3 { stroke-opacity: .17; stroke-width: .75; }
.hb-map .m-r2 { stroke-opacity: .3; stroke-width: 1; }
.hb-map .m-r1 { stroke-opacity: .46; stroke-width: 1.5; }
.hb-map .m-rail { stroke-opacity: .2; stroke-width: .75; }
.hb-map .m-park { fill: rgba(4, 43, 96, .025); stroke-opacity: .16; stroke-width: 1; stroke-dasharray: 1 5; }
.hb-map .m-water { fill: rgba(4, 43, 96, .11); stroke-opacity: .55; stroke-width: 1.25; }
/* The Rhine flows north: gold hairline dashes drifting downstream at different speeds */
.hb-map .m-flow { stroke: var(--gold-700); stroke-width: 1.25; stroke-linecap: butt; animation: hb-flow 90s linear infinite; }
.hb-map .m-flow--a { stroke-dasharray: 90 130; stroke-opacity: .85; }
.hb-map .m-flow--b { stroke-dasharray: 50 200; stroke-opacity: .6; animation-duration: 120s; }
.hb-map .m-flow--c { stroke-dasharray: 50 220; stroke-opacity: .6; animation-duration: 105s; }
@keyframes hb-flow { to { stroke-dashoffset: -2200; } }
/* On load the city spreads out from Rudolfplatz */
.hb--koeln.is-revealing .hb-map {
  -webkit-mask-image: radial-gradient(circle at var(--ax) var(--ay), #000 var(--hb-r), transparent calc(var(--hb-r) + 360px));
  mask-image: radial-gradient(circle at var(--ax) var(--ay), #000 var(--hb-r), transparent calc(var(--hb-r) + 360px));
  animation: hb-reveal 2.6s cubic-bezier(.2, .7, .2, 1) both;
}
/* Pin on Rudolfplatz and the river name, both in the band under the plan */
.hb-pin, .hb-river { position: absolute; inset: auto; left: 0; top: 0; }
.hb-pin { display: flex; align-items: center; gap: 12px; }
.hb-pin__dot { position: relative; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 2.5px var(--stone); }
.hb-pin__dot::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--gold-700); border-radius: 50%; opacity: 0; animation: hb-pulse 3.6s cubic-bezier(.2, .7, .2, 1) 2.4s infinite; }
@keyframes hb-pulse { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(4.2); opacity: 0; } }
.hb-pin__label {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink-700);
  white-space: nowrap;
  background: var(--stone);
  padding: 4px 6px;
  margin-top: -4.5px;
}
.hb-pin__label b { font-weight: 500; color: var(--navy); }
.hb-river { font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1; color: var(--navy); white-space: nowrap; background: #e3e1dd; padding: 1px 6px; transform: translate(-50%, -50%); }
.hb--koeln .hb-pin, .hb--koeln .hb-river { animation: hb-fade .7s var(--ease) 1.1s both; }

/* ---------- Zeichentisch: graph paper, the plan's axes run out to the edges ---------- */
:is(.hero, .page-hero)[data-hero-bg="zeichentisch"] { background: var(--stone-200); padding-block: 46px; }
.hb--zeichentisch .hb-grid, .hb-lamp__grid {
  --l1: rgba(4, 43, 96, .1);
  --l2: rgba(4, 43, 96, .045);
  background-image:
    linear-gradient(var(--l1) 1px, transparent 1px),
    linear-gradient(90deg, var(--l1) 1px, transparent 1px),
    linear-gradient(var(--l2) 1px, transparent 1px),
    linear-gradient(90deg, var(--l2) 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  background-position: var(--gx, 0) var(--gy, 0);
}
/* The desk lamp: a pool of warm light that wanders slowly or follows the mouse; under it the grid reads stronger */
.hb-lamp { inset: auto; left: 0; top: 0; width: 760px; height: 760px; margin: -380px 0 0 -380px; background: radial-gradient(closest-side, rgba(255, 253, 246, .95), rgba(255, 251, 238, .6) 42%, rgba(250, 240, 214, .18) 75%, rgba(250, 240, 214, 0)); will-change: transform; }
.hb-lamp__grid {
  --l1: rgba(4, 43, 96, .2);
  --l2: rgba(4, 43, 96, .085);
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent);
  mask-image: radial-gradient(closest-side, #000 15%, transparent);
}
/* Verkaufen on laptop heights: the rooms give up a little air (and on short screens a little type size)
   so the whole plan fits the first screen; the values override the tweak hooks only at these heights */
@media (min-width: 1100px) {
  /* The bathroom row keeps room for the Potenzial label and its note when the plan gets shorter */
  .hero[data-hero-bg] .room--potenzial { min-height: 128px; }
}
@media (min-width: 1100px) and (max-height: 880px) {
  .hero[data-hero-bg] { --wohnen-pad-y: 32px; }
  .hero[data-hero-bg] .room--wohnen { padding-bottom: 52px; }
}
@media (min-width: 1100px) and (max-height: 820px) {
  .hero[data-hero-bg] { --wohnen-pad-y: 24px; --wohnen-gap: 16px; --h1-size: 54px; --lead-size: 17px; --portrait-w: 84px; --flur-h: 190px; padding-block: 34px; }
  .hero[data-hero-bg] .room--wohnen { padding-bottom: 44px; }
}
.hb-lines line { stroke: var(--ink-400); stroke-width: 1; stroke-dasharray: 18 5 2 5; }
.hb-lines circle { fill: var(--stone-200); stroke: var(--navy); stroke-width: 1; }
.hb-lines text { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .04em; fill: var(--navy); text-anchor: middle; dominant-baseline: central; }

/* ---------- Tracing paper: the empty rooms let the ground through, rooms with text stay nearly opaque ---------- */
[data-hero-bg] { --tp-text: rgba(251, 249, 245, .94); --tp-room: rgba(251, 249, 245, .66); }
[data-hero-bg="zeichentisch"] { --tp-room: rgba(251, 249, 245, .62); }
[data-hero-bg] :is(.plan, .about-plan) { background: transparent; }
[data-hero-bg] :is(.room, .about-photo) { background: var(--tp-room); }
[data-hero-bg] :is(.room--wohnen, .room--flur, .about-main, .about-facts) { background: var(--tp-text); }
[data-hero-bg] .room--potenzial { background: rgba(251, 249, 245, .9); }
/* The balcony overlaps the outer wall; a paper strip keeps covering the wall under its dashed edges */
[data-hero-bg] .room--balkon {
  background:
    linear-gradient(var(--paper), var(--paper)) left top / 100% var(--wall) no-repeat,
    linear-gradient(var(--paper), var(--paper)) right top / var(--wall) 100% no-repeat,
    var(--tp-room);
}
[data-hero-bg="koeln"] .dims span { text-shadow: 0 0 3px var(--stone), 0 0 3px var(--stone), 0 0 6px var(--stone); }
[data-hero-bg="zeichentisch"] .dims span { text-shadow: 0 0 3px var(--stone-200), 0 0 3px var(--stone-200); }

/* ---------- Motion helpers ---------- */
@keyframes hb-reveal { from { --hb-r: 0px; } to { --hb-r: 2800px; } }
@keyframes hb-fade { from { opacity: 0; } }
.hb-paused, .hb-paused *, .hb-paused::after, .hb-paused *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .hb *, .hb *::after { animation: none !important; }
  .hb-map { -webkit-mask-image: none !important; mask-image: none !important; }
}