/* ============================================================
   Epres utca 18 — MODERN FX layer
   Dinamikus háttér · 3D parallax · forgatható házmodell ·
   pinned vízszintes szekció · animált számlálók
   (a styles.css fölé töltve, additív + néhány token-felülírás)
   ============================================================ */

:root {
  /* deeper, more dramatic base + a touch cooler shadow */
  --bg:        oklch(0.135 0.009 58);
  --bg-2:      oklch(0.175 0.011 58);
  --bg-3:      oklch(0.225 0.013 58);

  --gold-soft: oklch(0.80 0.10 78 / 0.34);
  --glass:     oklch(0.22 0.012 60 / 0.55);
}

/* ---- the page now floats over a fixed reactive background ---- */
body { background: transparent; }

#fx-base {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(130% 90% at 50% -10%, oklch(0.22 0.03 70 / 0.55), transparent 55%),
    radial-gradient(100% 80% at 80% 110%, oklch(0.18 0.05 35 / 0.40), transparent 60%),
    linear-gradient(180deg, oklch(0.12 0.008 60), oklch(0.10 0.008 50));
}
canvas#fx-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: block; }

/* let the field breathe through the "open" sections (these had no own bg) */
.gallery, .audience, .location, .value { background: transparent; }
.story    { background: oklch(0.165 0.010 58 / 0.66); }
.features { background: oklch(0.165 0.010 58 / 0.62); }
.rezsi    { background: oklch(0.135 0.009 58 / 0.40); }

/* semi-transparent cells so particles glimmer behind the grids */
.stats .cell { background: oklch(0.185 0.011 58 / 0.66); }
.feat        { background: oklch(0.15 0.009 58 / 0.62); }
.feat:hover  { background: oklch(0.22 0.013 58 / 0.72); }
.spec        { background: oklch(0.185 0.011 58 / 0.60); }
.aud         { background: oklch(0.175 0.011 58 / 0.55); }
.rcell       { background: oklch(0.185 0.011 58 / 0.62); }
.rcell.total { background: oklch(0.26 0.02 75 / 0.5); }
.vp          { backdrop-filter: blur(2px); }

/* ============================================================
   SCROLL PROGRESS (thin gold meter, top)
   ============================================================ */
#fx-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  box-shadow: 0 0 12px 1px oklch(0.8 0.12 75 / 0.6);
  z-index: 95; transition: width .12s linear;
}

/* ============================================================
   HERO — multi-layer 3D parallax + floating type
   ============================================================ */
.hero { perspective: 1200px; perspective-origin: 50% 40%; }
.hero .bg { transition: none; }
/* a soft depth haze layer that drifts opposite the photo */
.hero .haze {
  position: absolute; inset: -8%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 22% 30%, oklch(0.8 0.12 75 / 0.16), transparent 60%),
    radial-gradient(45% 55% at 82% 72%, oklch(0.6 0.14 40 / 0.14), transparent 60%);
  will-change: transform;
}
.hero-inner { transform-style: preserve-3d; will-change: transform; }
.hero .loc, .hero h1, .hero .lede, .hero .hero-foot, .hero-inner .owner-badge {
  will-change: transform;
}

/* ============================================================
   3D HOUSE MODEL
   ============================================================ */
.house-sec { background: transparent; border-top: 1px solid var(--line-soft); }
.house-sec .wrap { padding-bottom: clamp(60px, 9vh, 120px); }
.house-head { text-align: center; max-width: 720px; margin: 0 auto clamp(20px,4vw,40px); }
.house-head .eyebrow { display:block; margin-bottom: 16px; }
.house-head h2 { font-size: clamp(2.2rem,5vw,4rem); letter-spacing:-0.01em; }
.house-head p { margin-top: 18px; color: var(--ink-soft); font-size: clamp(1rem,1.3vw,1.12rem); }

.house-stage {
  position: relative;
  height: clamp(380px, 52vw, 560px);
  display: grid; place-items: center;
  perspective: 1500px; perspective-origin: 50% 42%;
  touch-action: pan-y;
  cursor: grab;
}
.house-stage.dragging { cursor: grabbing; }

.house3d {
  /* footprint + heights (px) */
  --W: 330px;   /* left-right span  */
  --D: 234px;   /* front-back span  */
  --H: 92px;    /* wall height      */
  --ov: 30px;   /* roof eave overhang */
  --tw: 150px;  /* terrace notch width (along X, front-right) */
  --td: 120px;  /* terrace notch depth (along Z) */
  --Wr: calc(var(--W) + 2*var(--ov));  /* roof base width  */
  --Dr: calc(var(--D) + 2*var(--ov));  /* roof base depth  */
  --Ls: 166px;  /* roof slope length — must equal (Dr/2)/cos(pitch) so faces meet at the ridge */
  --tilt: 62deg;/* face angle from vertical = 90° − pitch(28°) */
  --cw: 24px;   /* terrace column thickness */
  --rw: 152px;  /* entrance recess width (back facade) */
  --rd: 26px;   /* entrance recess depth */
  position: relative; width: var(--W); height: var(--H);
  transform-style: preserve-3d;
  transform: translateY(20px) rotateX(-24deg) rotateY(var(--ry, -36deg));
}
.house3d * { transform-style: preserve-3d; }

/* ground shadow */
.house-ground {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--Wr) * 1.55); height: calc(var(--Dr) * 1.55);
  transform: translate(-50%,-50%) rotateX(90deg) translateZ(calc(-1 * var(--H)/2 - 3px));
  background: radial-gradient(closest-side, oklch(0.30 0.02 60 / 0.5), transparent 72%);
  border-radius: 50%; filter: blur(4px);
}

/* ===================== L-SHAPED CREAM WALLS ===================== */
/* cream render above, dark-brown plinth (lábazat) in the bottom ~20% */
.seg {
  position: absolute; left: 50%; top: 50%; height: var(--H);
  background: linear-gradient(to bottom,
     oklch(0.905 0.016 84) 0%, oklch(0.86 0.018 82) 79%,
     oklch(0.34 0.018 52) 79%, oklch(0.28 0.018 50) 100%);
  box-shadow: inset 0 6px 22px oklch(1 0 0 / 0.18), inset 0 -10px 26px oklch(0.30 0.02 55 / 0.22);
}
/* 1 · back (entrance) wall — L-shaped: main plane + recessed bay + side reveal */
.s-back-main { width: calc(var(--W) - var(--rw));
  transform: translate(-50%,-50%) translate3d(calc(var(--rw)/2),0, calc(-1*var(--D)/2)) rotateY(180deg);
  filter: brightness(0.74); }
.s-back-recess { width: var(--rw);
  transform: translate(-50%,-50%) translate3d(calc(-1*var(--W)/2 + var(--rw)/2),0, calc(-1*var(--D)/2 + var(--rd))) rotateY(180deg);
  filter: brightness(0.66); }
.s-back-reveal { width: var(--rd);
  transform: translate(-50%,-50%) translate3d(calc(-1*var(--W)/2 + var(--rw)),0, calc(-1*var(--D)/2 + var(--rd)/2)) rotateY(-90deg);
  filter: brightness(0.56); }
/* 2 · front wall, left of the terrace notch */
.s-front  { width: calc(var(--W) - var(--tw));
  transform: translate(-50%,-50%) translate3d(calc(-1*var(--tw)/2),0, calc(var(--D)/2)); }
/* 3 · right wall, behind the notch */
.s-right  { width: calc(var(--D) - var(--td));
  transform: translate(-50%,-50%) translate3d(calc(var(--W)/2),0, calc(-1*var(--td)/2)) rotateY(90deg);
  filter: brightness(0.9); }
/* 4 · inner wall facing the terrace (parallel to front) */
.s-innerF { width: var(--tw);
  transform: translate(-50%,-50%) translate3d(calc(var(--W)/2 - var(--tw)/2),0, calc(var(--D)/2 - var(--td))) rotateY(180deg);
  filter: brightness(0.84); }
/* 5 · inner wall facing the terrace (parallel to right side) */
.s-innerR { width: var(--td);
  transform: translate(-50%,-50%) translate3d(calc(var(--W)/2 - var(--tw)),0, calc(var(--D)/2 - var(--td)/2)) rotateY(-90deg);
  filter: brightness(0.96); }
/* 6 · left wall (full depth) */
.s-left   { width: var(--D);
  transform: translate(-50%,-50%) translate3d(calc(-1*var(--W)/2),0,0) rotateY(90deg);
  filter: brightness(0.8); }

/* ===================== TERRACE COLUMN (solid square box) ===================== */
.col {
  position: absolute; left: 50%; top: 50%; width: var(--cw); height: var(--H);
  background: linear-gradient(to bottom, oklch(0.88 0.016 84) 0%, oklch(0.83 0.018 82) 82%, oklch(0.32 0.018 52) 82%, oklch(0.27 0.018 50) 100%);
  border: 1px solid oklch(0.6 0.015 70 / 0.4);
}
.col-f  { transform: translate(-50%,-50%) translate3d(calc(var(--W)/2 - var(--cw)/2),0, calc(var(--D)/2)); }
.col-bk { transform: translate(-50%,-50%) translate3d(calc(var(--W)/2 - var(--cw)/2),0, calc(var(--D)/2 - var(--cw))) rotateY(180deg); filter: brightness(0.78); }
.col-r  { transform: translate(-50%,-50%) translate3d(calc(var(--W)/2),0, calc(var(--D)/2 - var(--cw)/2)) rotateY(90deg); filter: brightness(0.9); }
.col-l  { transform: translate(-50%,-50%) translate3d(calc(var(--W)/2 - var(--cw)),0, calc(var(--D)/2 - var(--cw)/2)) rotateY(-90deg); filter: brightness(0.84); }

/* ===================== RAISED TERRACE TILE PLATFORM ===================== */
.terrace {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--tw) + 64px); height: calc(var(--td) + 64px);
  transform: translate(-50%,-50%)
             translate3d(calc(var(--W)/2 - var(--tw)/2 + 18px), calc(var(--H)/2 - 2px), calc(var(--D)/2 - var(--td)/2 + 18px))
             rotateX(90deg);
  background:
    repeating-linear-gradient(0deg, transparent 0 29px, oklch(0.50 0.006 90 / 0.6) 29px 31px),
    repeating-linear-gradient(90deg, transparent 0 29px, oklch(0.50 0.006 90 / 0.6) 29px 31px),
    linear-gradient(135deg, oklch(0.82 0.006 88), oklch(0.73 0.008 86));
  border: 1px solid oklch(0.55 0.008 86);
  box-shadow: 0 0 0 3px oklch(0.62 0.01 86);
}

/* ===================== WOOD SOFFIT (deep eave underside) ===================== */
.soffit {
  position: absolute; left: 50%; top: 50%;
  width: var(--Wr); height: var(--Dr);
  transform: translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--H)/2));
  background:
    repeating-linear-gradient(90deg, oklch(0.52 0.05 58 / 0.5) 0 7px, oklch(0.44 0.05 54 / 0.5) 7px 14px),
    linear-gradient(120deg, oklch(0.56 0.06 58), oklch(0.46 0.055 54));
  box-shadow: inset 0 0 46px oklch(0.25 0.03 45 / 0.5);
  border: 1px solid oklch(0.36 0.04 50 / 0.6);
}
/* white fascia ring sits just under the roof edge (drawn as the soffit's bright rim) */
.soffit::after {
  content: ""; position: absolute; inset: 0;
  border: 6px solid oklch(0.92 0.006 90 / 0.9);
  box-sizing: border-box;
}

/* ===================== HIPPED BROWN TILE ROOF ===================== */
.roof { position: absolute; inset: 0; }
.rface {
  position: absolute; left: 50%; top: 50%;
  transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(90deg, transparent 0 13px, oklch(0.30 0.03 48 / 0.4) 13px 15px),
    repeating-linear-gradient(0deg, oklch(0.30 0.03 46 / 0.32) 0 9px, transparent 9px 18px),
    linear-gradient(180deg, oklch(0.50 0.055 52), oklch(0.40 0.05 48));
  border: 1px solid oklch(0.30 0.035 46 / 0.8);
  box-shadow: inset 0 0 50px oklch(0.18 0.02 40 / 0.45);
}
.slope-front {
  width: var(--Wr); height: var(--Ls);
  transform: translate(-50%,-100%) translateY(calc(-1*var(--H)/2)) translateZ(calc(var(--Dr)/2)) rotateX(var(--tilt));
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
}
.slope-back {
  width: var(--Wr); height: var(--Ls);
  transform: translate(-50%,-100%) translateY(calc(-1*var(--H)/2)) translateZ(calc(-1*var(--Dr)/2)) rotateX(calc(-1*var(--tilt)));
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  filter: brightness(0.76);
}
.hip-right {
  width: var(--Dr); height: var(--Ls);
  transform: translate(-50%,-100%) translateY(calc(-1*var(--H)/2)) translateX(calc(var(--Wr)/2)) rotateY(90deg) rotateX(var(--tilt));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: brightness(0.92);
}
.hip-left {
  width: var(--Dr); height: var(--Ls);
  transform: translate(-50%,-100%) translateY(calc(-1*var(--H)/2)) translateX(calc(-1*var(--Wr)/2)) rotateY(-90deg) rotateX(var(--tilt));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: brightness(0.68);
}
.ridge-cap {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--Wr) - var(--Dr)); height: 10px; border-radius: 6px;
  background: linear-gradient(oklch(0.46 0.05 50), oklch(0.36 0.045 46));
  box-shadow: 0 1px 3px oklch(0.15 0.02 40 / 0.6);
  transform: translate(-50%,-50%) translateY(calc(-1*var(--H)/2 - 80px));
}

/* roof vents: a round cap + a thin chimney pipe near the ridge */
.vent {
  position: absolute; top: 30%; left: 44%;
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, oklch(0.4 0.02 55), oklch(0.18 0.01 50));
  transform: translateZ(8px);
}
.vent.v2 { left: 56%; top: 26%; width: 6px; height: 20px; border-radius: 3px; }
.vent.v3 { display: none; }

/* ===================== BROWN DOWNPIPES at outer corners ===================== */
.pipe {
  position: absolute; left: 50%; top: 50%;
  width: 6px; height: calc(var(--H) + 6px); border-radius: 3px;
  background: linear-gradient(90deg, oklch(0.40 0.03 50), oklch(0.28 0.025 46) 60%, oklch(0.22 0.02 44));
}
.pipe-fl { transform: translate(-50%,-50%) translate3d(calc(-1*var(--W)/2 + 3px),0, calc(var(--D)/2 - 3px)) rotateY(45deg); }
.pipe-br { transform: translate(-50%,-50%) translate3d(calc(var(--W)/2 - 3px),0, calc(-1*var(--D)/2 + 3px)) rotateY(45deg); }

/* ===================== WINDOWS (white frame + roller shutter) ===================== */
.win {
  position: absolute;
  background:
    repeating-linear-gradient(to bottom, oklch(0.90 0.004 90) 0 3px, oklch(0.80 0.006 88) 3px 4px);
  border: 2.5px solid oklch(0.95 0.004 90);
  box-shadow: 0 1px 0 oklch(0.55 0.02 70 / 0.4), inset 0 0 6px oklch(0.4 0.01 60 / 0.25);
  transform: translateZ(1.5px);
}
/* a sliver of dark glass peeks below the half-open shutter */
.win::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background: linear-gradient(160deg, oklch(0.5 0.03 235 / 0.85), oklch(0.28 0.02 235 / 0.9));
  border-top: 1px solid oklch(0.7 0.02 90);
}
.s-front  .win   { width: 34px; height: 30px; top: 28%; left: 24%; }
.s-right  .win   { width: 30px; height: 30px; top: 30%; left: 30%; }
/* left wall: single window, centred (matches reality) */
.s-left   .win   { width: 40px; height: 32px; top: 30%; left: 50%; margin-left: -20px; }
.s-innerR .win   { width: 30px; height: 32px; top: 28%; left: 34%; }
/* ===== entrance (back) facade ===== */
.s-back-main   .win { width: 40px; height: 32px; top: 28%; left: 30%; }
/* door + its right-hand window sit in the recessed bay */
.s-back-recess .door { left: 18%; width: 28px; }
.s-back-recess .win  { width: 44px; height: 32px; top: 28%; left: 52%; }
/* entrance door (terrace + back facade) */
.door {
  position: absolute; top: 24%; left: 60%; width: 26px; height: 50%;
  background:
    linear-gradient(160deg, oklch(0.40 0.02 60), oklch(0.26 0.015 55));
  border: 2.5px solid oklch(0.94 0.006 90); transform: translateZ(1.5px);
  box-shadow: inset 0 0 8px oklch(0.15 0.01 50 / 0.5);
}
/* door handle */
.door::after {
  content: ""; position: absolute; top: 48%; left: 16%; width: 3px; height: 8px;
  border-radius: 2px; background: oklch(0.8 0.04 85);
}

/* floating fact labels (2D overlay over the stage) */
.house-labels { position: absolute; inset: 0; pointer-events: none; }
.h-label {
  position: absolute; display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
  opacity: 0; transform: translateY(8px); transition: opacity .7s ease, transform .7s ease;
}
.house-stage.in .h-label { opacity: 1; transform: none; }
.house-stage.in .h-label.l2 { transition-delay: .12s; }
.house-stage.in .h-label.l3 { transition-delay: .24s; }
.house-stage.in .h-label.l4 { transition-delay: .36s; }
.h-label b { color: var(--gold); font-weight: 700; }
.h-label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px 2px oklch(0.8 0.12 75 / 0.6); flex: 0 0 auto; }
.h-label.l1 { top: 14%;  left: 4%; }
.h-label.l2 { top: 30%;  right: 4%; flex-direction: row-reverse; }
.h-label.l3 { bottom: 26%; left: 5%; }
.h-label.l4 { bottom: 12%; right: 5%; flex-direction: row-reverse; }
.house-hint {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute); opacity: .7;
}
@media (max-width: 620px) {
  .h-label { font-size: 0.58rem; }
  .h-label.l1 { left: 2%; } .h-label.l2 { right: 2%; }
  .h-label.l3 { left: 2%; } .h-label.l4 { right: 2%; }
}

/* ============================================================
   PINNED HORIZONTAL CINEMATIC BAND
   ============================================================ */
.film {
  position: relative;
  height: 320vh;                 /* scroll distance that drives the pan */
  background: transparent;
}
.film-pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: center;
}
.film-track {
  display: flex; gap: clamp(18px, 2.4vw, 34px);
  padding: 0 12vw; height: 72vh; align-items: stretch;
  will-change: transform;
}
.film-card {
  position: relative; flex: 0 0 auto;
  width: clamp(280px, 62vw, 760px); height: 100%;
  border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -40px oklch(0.03 0.01 50 / 0.95);
}
.film-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }
.film-card .fc-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, oklch(0.05 0.01 50 / 0.82)); }
.film-card .fc-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px,3vw,44px); }
.film-card .fc-n { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.film-card .fc-t { font-family: var(--serif); font-size: clamp(1.6rem,3.4vw,2.8rem); line-height: 1.04; margin-top: 8px; text-wrap: balance; }
.film-card .fc-d { color: var(--ink-soft); font-size: 0.96rem; margin-top: 8px; max-width: 46ch; }
/* intro panel that sits first in the track */
.film-intro {
  flex: 0 0 auto; width: clamp(260px, 40vw, 460px); height: 100%;
  display: flex; flex-direction: column; justify-content: center; padding-right: 2vw;
}
.film-intro .eyebrow { margin-bottom: 16px; }
.film-intro h2 { font-size: clamp(2.2rem,4.8vw,4rem); letter-spacing: -0.01em; }
.film-intro p { margin-top: 18px; color: var(--ink-soft); max-width: 40ch; }
.film-cue { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); }
.film-cue span.arr { color: var(--gold); }

/* fallback when sticky/JS unsupported or reduced motion: horizontal swipe scroll */
.film.fallback { height: auto; }
.film.fallback .film-pin { position: relative; height: auto; display: block; }
.film.fallback .film-track { overflow-x: auto; transform: none !important; padding: 40px 6vw; scroll-snap-type: x mandatory; }
.film.fallback .film-card { scroll-snap-align: center; }

/* ============================================================
   TILE GLARE (3D tilt sheen)
   ============================================================ */
.tile .glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(40% 60% at var(--gx,50%) var(--gy,30%), oklch(0.95 0.06 80 / 0.35), transparent 60%);
  transition: opacity .3s ease;
  transform: translateZ(60px);
  mix-blend-mode: screen;
}
.tile:hover .glare { opacity: 1; }

/* ============================================================
   RICHER REVEAL (blur + slight scale)
   ============================================================ */
.reveal { filter: blur(6px); }
.reveal.in { filter: blur(0); }
.reveal { transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease; }

@media (prefers-reduced-motion: reduce) {
  #fx-bg, #fx-progress { display: none; }
  .reveal { filter: none !important; }
  .house3d { transform: translateY(20px) rotateX(-24deg) rotateY(-36deg) !important; }
  .film { height: auto; }
  .film-pin { position: relative; height: auto; display: block; }
  .film-track { overflow-x: auto; transform: none !important; }
}