/* ==========================================================================
   Hero — scroll-scrubbed Tbilisi timelapse, eight 3D service cards travelling through it, moon → logo.
   SCENE (stage, physical %): video, moon → mark.            Never mirrored.
   CONTENT (logical properties): headline, cards, timeline.  Mirrors with dir.
   Card system: assets/css/svc-cards.css.
   ========================================================================== */

/* 100vh visible + 900vh of scroll shared out by hero.js (PACE) + a 100vh tail: the final frame stays pinned while the
   next section rises over it (realestate.css pulls that section up by a screen) and darkens (.hero__cover) */
.hero { position: relative; height: 1100vh; background: var(--night); }
.hero__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; isolation: isolate; }

/* ---------- stage (cover-scaled 16:9) ---------- */
.hero__stage {
  position: absolute; z-index: 1;
  width: var(--sw, max(100vw, 177.7778vh));
  height: var(--sh, max(100vh, 56.25vw));
  left: var(--sx, 50%); top: var(--sy, 50%);
  transform: var(--st, translate(-50%, -50%));
}
.hero__poster, .hero__night, .hero__poster img, .hero__night img, .hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero__poster img, .hero__night img { object-fit: cover; }
.hero__night { display: none; }
/* light mode (phones on slow or saver connections): no video, the day still fades into the night still */
.hero.is-lite .hero__night { display: block; opacity: var(--night-o, 0); }
.hero__video { opacity: 0; transition: opacity .7s var(--ease-out); }
.hero.is-ready .hero__video { opacity: 1; }

/* ---------- moon → mark ---------- */
/* Erases the video moon: the core hides the disc (under our moon-toned disc), the halo then removes its glow.
   Size = 7 moon radii. Colours are sampled live from the video frame by hero.js (--c, --h1, --h2); fallbacks from the 15 s frame. */
.hero__cover { position: absolute; z-index: 20; inset: 0; background: #040A1C; opacity: 0; pointer-events: none; will-change: opacity; }
.hero__moonpatch { position: absolute; z-index: 3; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.hero__moonpatch i { position: absolute; border-radius: 50%; }
.mp-halo {
  inset: 0; opacity: var(--halo, 0); border-radius: 0;
  background: linear-gradient(180deg, rgb(var(--h1, 9 52 138)) 0%, rgb(var(--h2, 10 58 144)) 50%, rgb(var(--h2, 10 58 144)) 100%);
  /* a soft disc, cut at the mountain ridge (--hz = ridge distance from the patch top) */
  -webkit-mask: radial-gradient(circle closest-side, #000 70%, transparent 100%), linear-gradient(180deg, #000 calc(var(--hz, 100%) - 8px), transparent var(--hz, 100%));
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle closest-side, #000 70%, transparent 100%), linear-gradient(180deg, #000 calc(var(--hz, 100%) - 8px), transparent var(--hz, 100%));
  mask-composite: intersect;
}
.mp-core {
  inset: 29.7%; opacity: var(--core, 0);   /* radius 1.3 moon radii of the 3.2 R patch */
  background: radial-gradient(circle closest-side, rgb(var(--c, 13 80 158)) 0 80%, rgb(var(--c, 13 80 158) / 0) 100%);
}
.hero__mark { position: absolute; z-index: 4; left: 0; top: 0; width: 0; height: 0; overflow: visible; pointer-events: none; opacity: 0; }

/* ---------- content layer ---------- */
.hero__content { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

.hero__intro {
  position: absolute; left: var(--zl, 40%); top: var(--zt, 16%); width: var(--zw, 56%);
  text-align: start; color: var(--ink);
  will-change: opacity, transform;
}
/* afternoon haze behind the text: keeps the sub-line legible where it crosses the rooftops */
.hero__intro::before {
  content: ""; position: absolute; z-index: -1; inset: -48px -64px -72px; pointer-events: none;
  background: radial-gradient(ellipse 72% 62% at var(--haze-x, 68%) 46%, rgb(255 246 232 / .82), rgb(255 246 232 / .5) 46%, rgb(255 246 232 / 0) 76%);
  filter: blur(6px);
}
[dir="ltr"] .hero__intro::before { --haze-x: 32%; }
.hero__title {
  font-family: var(--font-display); font-weight: 820; letter-spacing: -.005em;
  font-size: clamp(30px, 3.1vw, 58px); line-height: 1.28; max-width: 17em;
  text-shadow: 0 1px 22px rgb(255 244 228 / .65);
  text-wrap: balance;
}
html[lang="en"] .hero__title { font-weight: 560; font-size: clamp(38px, 4.1vw, 76px); line-height: 1.02; letter-spacing: -.022em; font-variation-settings: "opsz" 144, "SOFT" 30; }
.hero__sub {
  margin-top: .85em; max-width: 40ch; font-size: clamp(15px, 1.12vw, 19px); font-weight: 550; line-height: 1.75;
  color: rgb(11 26 51 / .84); text-shadow: 0 1px 14px rgb(255 244 228 / .7);
}

/* ---------- service cards: hidden until the scroll engine has placed them (no flash of eight stacked cards) ---------- */
html.js:not(.mr-static) .hero:not(.is-live) .svc-stage { visibility: hidden; }
/* scrolled past: the rAF loop sleeps, and so do the CSS loops (comet, sun rays, card details) */
.hero.is-away *, .hero.is-away *::before, .hero.is-away *::after { animation-play-state: paused !important; }

/* ---------- finale lockup (direction-agnostic, centred) ---------- */
.hero__finale {
  position: absolute; left: 50%; top: var(--lock-top, 52%);
  display: grid; justify-items: center; text-align: center; gap: 10px;
  color: var(--white); opacity: var(--lock-o, 0);
  transform: translate(-50%, var(--lock-y, 18px));
}
.hero__finale.is-on { pointer-events: auto; }
/* soft night scrim under the lockup so the tagline stays readable over the lit city */
.hero__finale::before {
  content: ""; position: absolute; z-index: -1; inset: -4% -34% -22%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(3 10 28 / .62), rgb(3 10 28 / .3) 60%, rgb(3 10 28 / 0));
}
.hero__finale-mark { display: none; }
.hero__wordmark {
  font-family: var(--font-serif); font-weight: 520; font-size: clamp(46px, 5.4vw, 96px); line-height: 1;
  letter-spacing: -.025em; font-variation-settings: "opsz" 144, "SOFT" 50;
}
.hero__tagline { font-size: clamp(17px, 1.35vw, 22px); font-weight: 500; opacity: .88; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; margin-top: 16px; }
.hero__secondary {
  display: inline-flex; align-items: center; gap: .4em; text-decoration: none; font-weight: 600; font-size: 15px;
  padding-bottom: 3px; border-bottom: 1px solid rgb(255 255 255 / .4);
}
.hero__secondary:hover { color: var(--green-hi); border-color: currentColor; }

/* ---------- loading hairline ---------- */
.hero__load { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: rgb(255 255 255 / .12); transition: opacity .6s; }
.hero__load span { display: block; height: 100%; width: var(--load, 0%); background: var(--green); transition: width .3s; }
.hero:is(.is-ready, .is-lite) .hero__load { opacity: 0; }

/* ---------- debug (?debug=1) ---------- */
.hero__grid {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to right, rgb(255 230 0 / .65) 1px, transparent 1px) 0 0 / 10% 100%,
    linear-gradient(to bottom, rgb(255 230 0 / .65) 1px, transparent 1px) 0 0 / 100% 10%,
    linear-gradient(to right, rgb(255 255 255 / .22) 1px, transparent 1px) 0 0 / 5% 100%,
    linear-gradient(to bottom, rgb(255 255 255 / .22) 1px, transparent 1px) 0 0 / 100% 5%;
}
.hero__grid b { position: absolute; font: 700 12px/1 ui-monospace, monospace; color: #ffe600; text-shadow: 0 0 3px #000; }
.hero__debug {
  position: fixed; left: 12px; bottom: 12px; z-index: 100; padding: 8px 12px; border-radius: 6px;
  background: rgb(0 0 0 / .78); color: #ffe600; font: 12px/1.6 ui-monospace, monospace; direction: ltr; white-space: pre; pointer-events: none;
}

/* ==========================================================================
   Static mode — prefers-reduced-motion, or no JS. html.mr-static is set by the inline script in <head>
   before first paint. The cards stay 3D (resting three-quarter view, each with its own camera) but do not travel.
   ========================================================================== */
:is(html.mr-static, html:not(.js)) .hero { height: auto; }
:is(html.mr-static, html:not(.js)) .hero__pin { position: relative; height: auto; overflow: visible; }
:is(html.mr-static, html:not(.js)) .hero__stage {
  position: relative; left: auto; top: auto; width: 100%; height: 58svh; min-height: 300px; transform: none;
}
:is(html.mr-static, html:not(.js)) .hero__poster img { object-position: 62% 50%; }
:is(html.mr-static, html:not(.js)) :is(.hero__video, .hero__moonpatch, .hero__mark, .hero__load, .hero__grid, .hero__debug, .svc-nav, .svc-sky, .svc-meter) { display: none; }
:is(html.mr-static, html:not(.js)) .hero__content { position: relative; inset: auto; pointer-events: auto; padding: 30px var(--gutter) 64px; background: var(--night); color: var(--white); }
:is(html.mr-static, html:not(.js)) .hero__intro { position: static; width: auto; color: var(--white); }
:is(html.mr-static, html:not(.js)) :is(.hero__intro, .hero__finale)::before { display: none; }
:is(html.mr-static, html:not(.js)) :is(.hero__title, .hero__sub) { text-shadow: none; }
:is(html.mr-static, html:not(.js)) .hero__sub { color: rgb(255 255 255 / .8); }
:is(html.mr-static, html:not(.js)) .svc-stage {
  position: static; perspective: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); justify-items: center; align-items: center;
  gap: 44px 24px; margin-top: 44px; padding-block: 60px 16px;   /* room for the real-estate model, which rises above its card */
}
:is(html.mr-static, html:not(.js)) .svc { position: relative; left: auto; top: auto; transform: none; perspective: 1200px; }
:is(html.mr-static, html:not(.js)) .hero__finale { position: static; transform: none; opacity: 1; margin-top: 44px; pointer-events: auto; }
:is(html.mr-static, html:not(.js)) .hero__finale-mark { display: block; width: 76px; height: 76px; margin-bottom: 6px; }

@media (min-width: 768px) {
  /* larger screens: the final night frame, static mark, the cards as a field below the headline */
  :is(html.mr-static, html:not(.js)) .site-header { --n: 1; }
  :is(html.mr-static, html:not(.js)) .hero__pin { min-height: 100vh; }
  :is(html.mr-static, html:not(.js)) .hero__stage { position: absolute; inset: 0; width: 100%; height: 100%; }
  :is(html.mr-static, html:not(.js)) .hero__poster { display: none; }
  :is(html.mr-static, html:not(.js)) .hero__night { display: block; }
  :is(html.mr-static, html:not(.js)) .hero__content {
    min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "intro finale" "services services";
    align-content: space-between; gap: 40px 48px;
    padding: calc(var(--header-h) + 7vh) var(--gutter) 6vh;
    background: linear-gradient(180deg, rgb(4 12 32 / .55), rgb(4 12 32 / .25) 40%, rgb(4 12 32 / .86));
  }
  :is(html.mr-static, html:not(.js)) .hero__intro { grid-area: intro; max-width: 44rem; }
  :is(html.mr-static, html:not(.js)) .hero__finale { grid-area: finale; margin-top: 0; align-self: start; }
  :is(html.mr-static, html:not(.js)) .svc-stage { grid-area: services; margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  :is(.svc-cue__mouse, .svc-nav__comet, .svc-orb__sun)::after, .svc-orb__sun::before { animation: none; }
}