/* ECHIVO /horeca — hero.css · #hx-hero · OWNER: V1.
   A living golden-hour map of Oradea (CSS-3D plane, adapted from the homepage #map into hx- copies):
   real monument photo pins + clearly illustrative venue pins whose offers pop in, the app phone in front.
   Perf: one CSS-3D plane; camera pans are CSS transitions/keyframes (compositor), parallax only on fine pointers;
   low power keeps 6 buildings, drops secondary halos; nothing loops while the hero is asleep (core.css). */

/* ---------- Section & copy ---------- */
.hx-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-top: 120px; padding-bottom: 80px; isolation: isolate; background: var(--night); }
.hx-hero__grid { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 72px); align-items: center; pointer-events: none; }
.hx-hero__copy, .hx-hero__phone { pointer-events: auto; }
.hx-hero__copy { max-width: 640px; }
.hx-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(5,7,13,.55); border: 1px solid rgba(245,200,130,.26); margin: 0 0 26px; }
.hx-hero__title { margin: 0; font-size: clamp(3rem, 6.4vw, 6.9rem); line-height: .92; text-shadow: 0 2px 30px rgba(5,7,13,.5); }
.hx-hero__title > span { display: block; }
/* glow as a filter on the line wrapper, not text-shadow: SplitText's line masks (overflow: clip) cut a 60px text-shadow into hard boxes */
.hx-hero__l2 { color: var(--gold); filter: drop-shadow(0 0 28px rgba(245,200,130,.32)); }
.hx-hero__sub { margin: 26px 0 0; max-width: 34ch; font-size: clamp(1.05rem, 1.35vw, 1.3rem); }
.hx-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hx-hero__note { margin: 14px 0 0; font-size: var(--t-small); color: var(--text-3); max-width: 46ch; }

/* legend: what is real (monuments) vs illustrative (venues) — honesty rule, always visible */
.hx-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 30px 0 0; font-size: .78rem; font-weight: 650; letter-spacing: .04em; color: var(--text-2); }
.hx-legend span { display: inline-flex; align-items: center; gap: 8px; }
.hx-legend i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.hx-legend__mon i { background: conic-gradient(from 210deg, #fff1d2, var(--gold), #a87a3c, var(--gold), #fff1d2); box-shadow: 0 0 10px rgba(245,200,130,.6); }
.hx-legend__ven i { border: 1.5px dashed var(--sky); background: rgba(79,179,255,.14); }

/* ---------- Phone (the app, in front of the map) ---------- */
.hx-hero__visual { position: relative; display: flex; justify-content: flex-end; perspective: 1400px; }
.hx-hero__phone { --phone-w: clamp(220px, 18vw, 290px); transform-style: preserve-3d; margin-right: clamp(0px, 2vw, 40px); box-shadow: 0 50px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(245,200,130,.08); }

/* the in-phone "your venue" mock (HTML, localized) */
.hx-mock { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #070a13; font-size: calc(var(--phone-w) * .042); line-height: 1.3; }
.hx-mock__top { position: relative; height: 40%; flex: none; }
.hx-mock__top img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.hx-mock__top::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,10,19,.35) 0%, rgba(7,10,19,0) 30%, rgba(7,10,19,.2) 60%, #070a13 100%); }
.hx-mock__partner { position: absolute; z-index: 1; left: 7%; bottom: 6%; display: inline-flex; align-items: center; gap: .5em; padding: .5em .9em; border-radius: 999px; background: linear-gradient(90deg, #ffe2aa, var(--gold)); color: #1a1206; font-size: .78em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 6px 24px rgba(245,200,130,.45); }
.hx-mock__partner svg { color: #1a1206; }
.hx-mock__body { padding: 4% 7% 0; display: flex; flex-direction: column; gap: .3em; }
.hx-mock__kind { margin: 0; color: var(--terracotta); font-size: .74em; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; }
.hx-mock__name { margin: 0; font-size: 1.9em; line-height: 1; }
.hx-mock__tag { margin: 0; color: var(--text-2); font-size: .86em; }
.hx-mock__meta { margin: .2em 0 0; display: flex; gap: 1em; font-size: .78em; color: var(--text-2); }
.hx-mock__open { color: var(--mint); }
.hx-mock__h { margin: .9em 0 .2em; font-size: .7em; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.hx-mock__offer { --oc: var(--sky); position: relative; display: flex; flex-direction: column; gap: .25em; padding: .75em .9em; border-radius: .9em; background: linear-gradient(135deg, color-mix(in srgb, var(--oc) 20%, transparent), rgba(255,255,255,.03)); border: 1px solid color-mix(in srgb, var(--oc) 35%, transparent); margin-bottom: .45em; transition: transform .5s var(--ease-spring), border-color .4s, box-shadow .4s; }
.hx-mock__offer--rose { --oc: var(--rose); } .hx-mock__offer--mint { --oc: var(--mint); }
.hx-mock__g { align-self: flex-start; padding: .15em .65em; border-radius: 999px; font-size: .64em; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--oc); background: color-mix(in srgb, var(--oc) 16%, transparent); }
.hx-mock__t { font-weight: 650; font-size: .9em; }
/* "your venue" pin pinged on the map → the phone's offers light up one by one */
.hx-hero__phone.is-ping .hx-mock__offer { animation: hx-offer-ping 1.4s var(--ease-out); }
.hx-hero__phone.is-ping .hx-mock__offer:nth-of-type(2) { animation-delay: .12s; }
.hx-hero__phone.is-ping .hx-mock__offer:nth-of-type(3) { animation-delay: .24s; }
@keyframes hx-offer-ping { 0%, 100% { transform: none; box-shadow: none; } 30% { transform: translateX(-4px) scale(1.025); box-shadow: 0 0 0 1px color-mix(in srgb, var(--oc) 60%, transparent), 0 8px 26px color-mix(in srgb, var(--oc) 30%, transparent); } }

/* ---------- The map scene ---------- */
.hx-map { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; perspective: 1150px; perspective-origin: 62% 4%; }
.hx-map__sky { position: absolute; z-index: 1; inset: 0 0 68% 0; /* above the plane: its far edge melts into the dusk haze */
  background:
    radial-gradient(60% 120% at 30% 0%, rgba(232,150,82,.26), rgba(232,150,82,0) 70%),
    linear-gradient(180deg, #080c18 0%, rgba(26,20,36,.96) 40%, rgba(40,27,32,.7) 70%, rgba(5,7,13,0) 100%); }
.hx-map__sun { position: absolute; z-index: 1; left: 14%; top: -18%; width: 60vw; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,214,150,.28), rgba(245,170,100,.10) 45%, rgba(245,170,100,0) 72%); }
.hx-map__veil { position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--night) 0%, rgba(5,7,13,.88) 26%, rgba(5,7,13,.35) 46%, rgba(5,7,13,0) 62%),
    linear-gradient(0deg, var(--night) 0%, rgba(5,7,13,0) 26%),
    linear-gradient(180deg, rgba(5,7,13,.65) 0%, rgba(5,7,13,0) 18%); }

/* camera rig: tour (CSS-only pan, compositor) → cam (JS: dolly + parallax) → plane (tilt) */
.hx-map__tour { position: absolute; left: 60%; top: 60%; width: 0; height: 0; transform-style: preserve-3d; transition: transform 2.6s cubic-bezier(.45, 0, .2, 1); }
.hx-map__cam { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; transform: translate3d(0, 0, -420px); }
.hx-map__plane { position: absolute; left: -610px; top: -540px; width: 1220px; height: 1080px; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-18deg); }
.hx-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
}  /* edge fade is drawn inside the SVG (hxMapEdge): a CSS mask on a BSP-split 3D plane shows seams */

/* extruded buildings (golden hour: west faces catch the low sun) */
.hx-bld { position: absolute; width: var(--w); height: var(--l); margin: calc(var(--l) / -2) 0 0 calc(var(--w) / -2); transform-style: preserve-3d; transform: rotateZ(var(--a)); }
.hx-bld i { position: absolute; display: block; }
.hx-bld__t { inset: 0; transform: translateZ(var(--h)); background: linear-gradient(135deg, #3c4670, #262f4e); box-shadow: inset 0 0 0 1.5px rgba(245,200,130,.28); }
.hx-bld__s { left: 0; top: calc(var(--l) - var(--h)); width: var(--w); height: var(--h); transform-origin: 50% 100%; transform: rotateX(-90deg);
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(255,196,120,.34) 7px 11px, transparent 11px 16px), linear-gradient(180deg, #2e3758, #151b30); }
.hx-bld__w { left: calc(var(--h) * -1); top: 0; width: var(--h); height: var(--l); transform-origin: 100% 50%; transform: rotateY(90deg); background: linear-gradient(90deg, #e0a868, #8a623c 70%, #3b3242); }
.hx-bld__e { left: var(--w); top: 0; width: var(--h); height: var(--l); transform-origin: 0 50%; transform: rotateY(-90deg); background: linear-gradient(270deg, #1a2238, #0f1526); }

/* billboard: stands face the camera (JS keeps it in sync with the parallax; this is the resting pose) */
/* preserve-3d is required: a flat 0×0 stand in a 3D context drops its overflowing (pin) paint in Chrome */
.hx-stand { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; transform-origin: 0 0; transform: translateZ(2px) rotateZ(18deg) rotateX(-56deg); }
/* translateZ(2px): stands float just above the plane, so they never intersect it (no plane splitting) */

/* ---- monument photo pins (REAL monuments) ---- */
.hx-mpin { --d: 104px; position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.hx-mpin--hero { --d: 140px; }
.hx-mpin__halo, .hx-mpin__shadow { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; }
.hx-mpin__shadow { width: calc(var(--d) * 1.2); height: calc(var(--d) * 1.2); margin: calc(var(--d) * -.6) 0 0 calc(var(--d) * -.6);
  background: radial-gradient(circle, rgba(245,200,130,.55) 0%, rgba(245,200,130,.12) 35%, rgba(245,200,130,0) 68%); }
.hx-mpin__halo { width: calc(var(--d) * 1.5); height: calc(var(--d) * 1.5); margin: calc(var(--d) * -.75) 0 0 calc(var(--d) * -.75); border: 2px solid rgba(245,200,130,.6); opacity: 0; animation: hx-halo 3.4s var(--ease-out) infinite; }
.hx-mpin:nth-of-type(2n) .hx-mpin__halo { animation-duration: 4.1s; animation-delay: -1.3s; }
.hx-mpin__pop { position: absolute; bottom: 0; left: calc(var(--d) / -2); width: var(--d); display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%; }
.hx-mpin__pop::after { content: ""; width: 3px; height: calc(var(--d) * .26); background: linear-gradient(var(--gold), rgba(245,200,130,0)); }
.hx-mpin__bubble { position: relative; width: var(--d); height: var(--d); border-radius: 50%; padding: calc(var(--d) * .045);
  background: conic-gradient(from 210deg, #fff1d2, var(--gold) 20%, #a87a3c 45%, var(--gold) 70%, #fff1d2);
  box-shadow: 0 0 0 3px rgba(5,7,13,.85), 0 0 50px rgba(245,200,130,.42), 0 26px 36px -10px rgba(0,0,0,.7); }
.hx-mpin__bubble img { width: 100%; height: 100%; max-width: none; border-radius: 50%; object-fit: cover; border: calc(var(--d) * .03) solid #0b1020; }
.hx-mpin__badge { position: absolute; right: 2%; bottom: 2%; width: 30%; height: 30%; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #ffe2ae, var(--gold) 60%, var(--amber)); border: 3px solid #0b1020; color: #2a1c08; }
.hx-mpin__badge svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hx-mpin__tail { width: calc(var(--d) * .16); height: calc(var(--d) * .13); margin-top: -2px; background: var(--gold); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.hx-mpin__tag { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 10px 18px 10px 14px; border-radius: 999px; font-size: 20px; font-weight: 700; color: #fff; background: rgba(14,19,36,.9); border: 1px solid rgba(245,200,130,.35); box-shadow: 0 14px 34px rgba(0,0,0,.5); }
.hx-eq { display: inline-flex; align-items: center; gap: 3px; height: 20px; }
.hx-eq i { display: block; width: 4px; height: 100%; border-radius: 4px; background: var(--gold); animation: hx-eq 1s ease-in-out infinite; }
.hx-eq i:nth-child(2) { animation-delay: -.3s; } .hx-eq i:nth-child(3) { animation-delay: -.6s; } .hx-eq i:nth-child(4) { animation-delay: -.15s; }

/* ---- venue pins (ILLUSTRATIVE: dashed ring = sample, never a real partner) ---- */
.hx-vpin { --vc: var(--sky); position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.hx-vpin--rose { --vc: var(--rose); } .hx-vpin--mint { --vc: var(--mint); } .hx-vpin--violet { --vc: var(--violet); } .hx-vpin--amber { --vc: var(--amber); } .hx-vpin--gold { --vc: var(--gold); }
.hx-vpin__ring { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--vc) 70%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--vc) 26%, transparent), transparent 70%); opacity: .45; transform: scale(.55); transition: transform .9s var(--ease-out), opacity .9s; }
.hx-vpin.is-on .hx-vpin__ring { opacity: 1; transform: scale(1); }
.hx-vpin__pop { position: absolute; bottom: 0; left: 0; display: flex; gap: 8px; flex-direction: column; align-items: center; transform: translateX(-50%); transform-origin: 50% 100%; }
.hx-vpin__dot { position: relative; display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50% 50% 50% 8px; rotate: -45deg; background: #0d1426; border: 2px dashed var(--vc); box-shadow: 0 12px 24px -8px rgba(0,0,0,.8), 0 0 22px color-mix(in srgb, var(--vc) 40%, transparent); color: var(--vc); transition: transform .5s var(--ease-spring), background .4s; }
.hx-vpin__dot svg { width: 26px; height: 26px; rotate: 45deg; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hx-vpin--you .hx-vpin__dot { width: 64px; height: 64px; border-style: solid; background: linear-gradient(160deg, #ffe2ae, var(--gold) 60%, var(--amber)); color: #1a1206; box-shadow: 0 0 0 6px rgba(245,200,130,.18), 0 0 40px rgba(245,200,130,.6), 0 14px 26px -8px rgba(0,0,0,.8); }
.hx-vpin--you .hx-vpin__dot svg { width: 30px; height: 30px; }
.hx-vpin.is-on .hx-vpin__dot { transform: translateY(-8px) scale(1.08); }
/* the offer card that pops in */
/* in flow above the dot (not absolutely overflowing: overflow paint is unreliable on 3D-sorted layers) */
.hx-vpin__card { position: relative; display: flex; flex-direction: column; gap: 3px; white-space: nowrap; padding: 12px 18px 13px; border-radius: 18px;
  background: rgba(10,15,30,.94); border: 1px solid color-mix(in srgb, var(--vc) 55%, transparent); box-shadow: 0 18px 40px -10px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
  opacity: 0; transform: translateY(14px) scale(.6); transform-origin: 50% 100%; transition: transform .7s var(--ease-spring), opacity .35s; }
.hx-vpin__card small { font-size: 15px; font-weight: 650; letter-spacing: .04em; color: var(--text-2); }
.hx-vpin__card b { font-size: 21px; font-weight: 800; color: var(--vc); }
.hx-vpin.is-on .hx-vpin__card { opacity: 1; transform: none; }

/* entrance: pins rise as the map lands (CSS transitions, staggered by --i set in hero.js) */
.hx-map .hx-mpin__pop, .hx-map .hx-vpin__pop { transition: opacity .6s, scale .9s var(--ease-spring); transition-delay: calc(var(--i, 0) * 90ms + 400ms); }
.hx-map:not(.is-in) .hx-mpin__pop, .hx-map:not(.is-in) .hx-vpin__pop { opacity: 0; scale: .2; }
.no-js .hx-map .hx-mpin__pop, .no-js .hx-map .hx-vpin__pop { opacity: 1; scale: 1; }

/* hover language on fine pointers: venue dots are touchable (the scene itself never blocks the page) */
@media (hover: hover) and (pointer: fine) {
  .hx-vpin__dot { pointer-events: auto; cursor: pointer; }
  .hx-vpin__dot:hover { transform: translateY(-10px) scale(1.14); }
}

@keyframes hx-halo { 0% { transform: scale(.35); opacity: 0; } 15% { opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
@keyframes hx-eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* ---------- Tablet / phone: copy on top, the map as a stage below, phone tucked in its corner ---------- */
@media (max-width: 900px) {
  .hx-hero { flex-direction: column; align-items: stretch; padding-top: 104px; padding-bottom: 0; min-height: 0; }
  .hx-hero__grid { order: 1; position: static; } .hx-map { order: 2; }
  .hx-hero__grid { display: block; }
  .hx-hero__title { font-size: clamp(2.7rem, 12.5vw, 5rem); }
  .hx-hero__sub { margin-top: 20px; }
  .hx-hero__ctas { margin-top: 26px; }
  .hx-legend { margin-top: 22px; }
  .hx-map { position: relative; inset: auto; height: 64svh; min-height: 420px; max-height: 620px; margin: 0 calc(var(--gutter) * -1); perspective: 900px; perspective-origin: 50% 0%; }
  .hx-map__sky { inset: 0 0 74% 0; }
  .hx-map__sun { left: -20%; top: -30%; width: 120vw; }
  .hx-map__veil { background:
      linear-gradient(180deg, var(--night) 0%, rgba(5,7,13,0) 22%),
      linear-gradient(0deg, var(--night) 0%, rgba(5,7,13,0) 20%),
      radial-gradient(120% 80% at 50% 55%, rgba(5,7,13,0) 50%, rgba(5,7,13,.7) 100%); }
  .hx-map__tour { left: 50%; top: 60%; }
  .hx-map__cam { transform: translate3d(0, 0, -720px); }
  .hx-hero__visual { position: absolute; z-index: 3; right: var(--gutter); bottom: 12px; pointer-events: none; }
  .hx-hero__phone { --phone-w: min(124px, 32vw); margin: 0; border-radius: calc(var(--phone-w) * .165); }
  .hx-hero__phone .hx-mock { font-size: calc(var(--phone-w) * .042); }
  .hx-mpin { --d: 140px; } .hx-mpin--hero { --d: 176px; }
  .hx-vpin__dot { width: 76px; height: 76px; } .hx-vpin__dot svg { width: 36px; height: 36px; } .hx-vpin--you .hx-vpin__dot { width: 90px; height: 90px; }
  .hx-vpin__ring { left: -90px; top: -90px; width: 180px; height: 180px; }
  .hx-vpin__card { padding: 16px 24px 18px; border-radius: 24px; }
  .hx-mpin__tag { font-size: 30px; padding: 14px 24px 14px 18px; }
  .hx-vpin__card small { font-size: 22px; } .hx-vpin__card b { font-size: 29px; white-space: normal; max-width: 11em; line-height: 1.15; } /* long HU/EN offers wrap */
}
@media (min-width: 600px) and (max-width: 900px) { .hx-hero__phone { --phone-w: 200px; } }

/* ---------- Low power (html.lp) ---------- */
/* no extruded buildings (4 composited faces each); pins live in one flat layer (hero.js flatten) */
.lp .hx-bld { display: none; }
.hx-map__flat { position: absolute; inset: 0; transform: translate3d(0, 0, 0); transition: transform 2.6s cubic-bezier(.45, 0, .2, 1); }
/* ↑ the overlay is ONE composited layer on purpose (it pans): every pin paints into it instead of ~17 overlap layers */
.hx-map__flatin { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.reduced-motion .hx-map__flat { transition: none; }
.hx-map--flat .hx-stand, .hx-map--flat .hx-mpin, .hx-map--flat .hx-vpin { transform: none; transform-style: flat; }
.hx-map--flat .hx-mpin__halo, .hx-map--flat .hx-mpin__shadow { display: none; }
.hx-map--flat .hx-vpin__ring { left: -40px; top: -16px; width: 80px; height: 32px; border-width: 0; opacity: .7; transform: none; }
.hx-map--flat .hx-mpin__pop::after { height: calc(var(--d) * .18); }
/* no infinite loops on low power (an animated layer forces everything overlapping it to composite) */
.lp .hx-eq i { animation: none; transform: scaleY(.7); }
.lp .hx-map__tour, .lp .hx-map__flat { transition-duration: 1.6s; } /* shorter pan = shorter recomposite */
.lp .hx-mpin--hero .hx-mpin__halo { animation-duration: 4.8s; }
/* once the entrance is over, drop the pop transitions/scale so the pins can't stay composited */
.hx-map.is-settled .hx-mpin__pop, .hx-map.is-settled .hx-vpin__pop { transition: none; scale: none; }
.lp .hx-mpin:not(.hx-mpin--hero) .hx-mpin__halo { display: none; }
.lp .hx-mpin__bubble { box-shadow: 0 0 0 3px rgba(5,7,13,.85), 0 0 30px rgba(245,200,130,.35); }
.lp .hx-vpin__dot { box-shadow: 0 10px 18px -8px rgba(0,0,0,.8); }

/* ---------- Reduced motion: final composition, still ---------- */
.reduced-motion .hx-map__tour { transition: none; }
.reduced-motion .hx-mpin__halo, .reduced-motion .hx-eq i { animation: none; }
.reduced-motion .hx-mpin__halo { opacity: .45; transform: scale(.7); }
.reduced-motion .hx-eq i { transform: scaleY(.7); }
.reduced-motion .hx-map .hx-mpin__pop, .reduced-motion .hx-map .hx-vpin__pop, .reduced-motion .hx-vpin__card, .reduced-motion .hx-vpin__ring { transition: none; }
/* V5 perf: when the hero is far off-screen (global.js .is-asleep, 25% margin), stop painting the 3D map scene.
   visibility (not display) keeps the layout, so hero.js measurements and ScrollTrigger positions are unchanged.
   Full tier: ~120 composited hero layers stayed alive while the owner played with the live map (#groups). */
.hx-ready #hx-hero.is-asleep .hx-map { visibility: hidden; }

/* ---------- V6-fix (V5): pre-rendered map rasters (tools/make_hx_shots.py; hero.js placeShot / groundUp) ---------- */
/* Low power: the 3D plane never paints (11.9 MP texture at 3x on iOS). A flat pre-rendered image of the tilted map takes
   its place, positioned by a 2D matrix() and panned with the pins. The SVG comes back only if the image fails. */
.lp .hx-map__svg { display: none; }
.lp .hx-map--noshot .hx-map__svg { display: block; }
.hx-map--shot .hx-map__tour { display: none; }           /* no 3D context left at all once the image is in */
.hx-map__shot { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; opacity: 0;
  transition: transform 1.6s cubic-bezier(.45, 0, .2, 1), opacity .6s; }
.hx-map--shot .hx-map__shot { opacity: 1; }
.reduced-motion .hx-map__shot { transition: none; }
/* Full tier: one flat ground layer inside the plane (SVG + shadows + rings + baked buildings + halos). */
.hx-map__ground { position: absolute; inset: 0; }
.hx-decal { position: absolute; width: 0; height: 0; }
.hx-vpin__ring.is-on { opacity: 1; transform: scale(1); }
.hx-map__bake { position: absolute; max-width: none; pointer-events: none; }
.hx-map--baked .hx-bld:not([data-hero]) { display: none; }   /* baked into hx-bld.webp; the 2 data-hero ones stay 3D */
/* layer economy (full tier): the phone has no Z-offset children, so preserve-3d only split it into 3 extra 3D leaves */
.hx-hero__phone { transform-style: flat; }
/* the eq bars animate forever; lifting them (z-index) makes them paint last in their pin, so the monument tag text and
   bubble painted after them no longer need their own "overlap" layers */
.hx-eq { position: relative; z-index: 1; }
.hx-mpin__tag { z-index: 1; }   /* ...and the whole tag (a stacking context) paints after the bubble: no overlap layer for it */

/* ============================================================ V8 (D1) · desktop cinematic hero (html.hx-cine only)
   The hero is pinned for ~1.8 viewports (hero.js ctx.desk). Its outro title card and the night fade exist only here. */
.hx-hero__outro, .hx-hero__fade { display: none; }
.hx-cine .hx-hero { height: 100vh; height: 100svh; min-height: 0; } /* D4: svh fallback (qa_mobile) */
.hx-cine .hx-hero__fade { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 50% 55%, rgba(5,7,13,.55) 0%, var(--night) 70%); }
.hx-cine .hx-hero__outro { display: grid; place-items: center; position: absolute; inset: 0; z-index: 3; pointer-events: none; padding: 0 var(--gutter); text-align: center; }
.hx-hero__o { margin: 0; font-size: clamp(2.8rem, 6.4vw, 8rem); line-height: .96; font-weight: 800; letter-spacing: -.01em; max-width: 16ch; text-wrap: balance; }
.hx-hero__o span { display: block; }
.hx-hero__o2 { color: var(--gold); text-shadow: 0 0 60px rgba(245,200,130,.25); }