/* ============================================================
   GODBALLE BYG — anatomy.css (v11 — scroll-scrubbed video + 8 panels)

   Stage holds the house-animation video. JS scrubs currentTime
   based on smoothed scroll progress. 8 side panels alternate L/R,
   each fading in/out during its 1/8 slice of section progress.
   ============================================================ */

.anatomy {
  position: relative;
  /* 8 panels × ~125vh + outro ~100vh + 100vh sticky pin = 1200vh.
     Gradient ends in the EXACT sky-blue (#D8E4F0) that .theme-flow
     starts in, and matching noise sits on both — so the boundary
     between sections is invisible. */
  height: 1200vh;
  background:
    var(--noise) repeat,
    linear-gradient(180deg,
      var(--paper) 0%,
      var(--paper) 22%,
      #F0F2F4 50%,
      #E2EAF2 80%,
      #D8E4F0 100%
    );
  background-size: 220px 220px, auto;
  border-top: 0;
}
.anatomy-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* header — absolute top */
.anatomy-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  padding: clamp(96px, 12vh, 130px) var(--gutter) 0;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  pointer-events: none;
}
.anatomy-title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 92px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-align: center;
  width: 100%;
}
.anatomy-title .clay-em { color: var(--clay); }
.anatomy-sub {
  margin: var(--s-3) 0 0;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.45;
  color: var(--ink-2);
  text-align: center;
  max-width: 64ch;
  align-self: center;
  pointer-events: auto;
}

/* ----- Stage (bigger now) ----- */
.anatomy-stage {
  position: relative;
  width: min(1100px, 82vw);
  height: min(82vh, 860px);
  aspect-ratio: 16 / 9;
  overflow: visible;
  margin-top: clamp(80px, 10vh, 140px);
  /* Enables 3D rotation on the canvas child without warping its bounds */
  perspective: 1800px;
  perspective-origin: center center;
}

/* Canvas backed by an image sequence — frames are already chroma-keyed
   with real alpha. During the outro segment (--outro 0..1) we blur and
   fade the canvas down so the CTA can take centre stage. The canvas
   also gets a gentle ambient Y-axis rotation (--idle-rot, deg) once the
   outro is fully on screen — driven by JS time, not by scroll. */
.anatomy-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  pointer-events: none;
  filter: blur(calc(var(--outro, 0) * 22px));
  opacity: calc(1 - var(--outro, 0) * 0.55);
  /* Compose ambient drift + breath + tiny rotation on top of the
     outro scale-down. All four channels driven independently from
     JS so the motion never looks like a single repeating axis. */
  transform:
    translate3d(
      calc(var(--idle-x, 0) * 1px),
      calc(var(--idle-y, 0) * 1px),
      0
    )
    scale(calc(
      (1 - var(--outro, 0) * 0.04)
      * (1 + var(--idle-scale, 0) * 0.01)
    ))
    rotateY(calc(var(--idle-rot, 0) * 1deg));
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: none;
}

/* ----- Side text panels ----- */
.anatomy-panels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.anatomy-panel {
  position: absolute;
  /* Centred vertically on the stage, hugging the viewport edges so
     the text sits as far from the animation as possible. */
  top: 50%;
  width: min(360px, 26vw);
  transform: translateY(-50%);
  opacity: 0;
  font-family: var(--f-body);
  color: var(--ink);
  will-change: opacity, transform;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Strong paper halo + soft ambient shadow behind the text. The halo
   brightens the area so text reads, the shadow under it pushes the
   text "above" the animation without forming a hard card. */
.anatomy-panel::before {
  content: "";
  position: absolute;
  inset: -64px -90px -72px -90px;
  background: radial-gradient(
    ellipse at center,
    rgba(250, 250, 247, 0.98) 0%,
    rgba(250, 250, 247, 0.90) 30%,
    rgba(250, 250, 247, 0.62) 55%,
    rgba(250, 250, 247, 0)    82%
  );
  filter: blur(26px);
  /* Soft ambient drop-shadow under the halo so it lifts off the page */
  box-shadow:
    0 12px 28px -10px rgba(33, 26, 20, 0.18),
    0 28px 60px -22px rgba(33, 26, 20, 0.14);
  border-radius: 60% 50% 55% 60% / 55% 60% 55% 50%;
  z-index: -1;
  pointer-events: none;
}

/* Second, smaller, more concentrated halo right behind the text for an
   extra layer of contrast — read this as the inner glow. */
.anatomy-panel::after {
  content: "";
  position: absolute;
  inset: -22px -36px -28px -36px;
  background: radial-gradient(
    ellipse at center,
    rgba(250, 250, 247, 1)    0%,
    rgba(250, 250, 247, 0.85) 45%,
    rgba(250, 250, 247, 0)    85%
  );
  filter: blur(12px);
  z-index: -1;
  pointer-events: none;
}

/* Panels pushed hard to the viewport edges — text as far from the
   animation as the layout allows. */
.anatomy-panel--left  { left: clamp(8px, 1.5vw, 32px); text-align: left; }
.anatomy-panel--right { right: clamp(8px, 1.5vw, 32px); text-align: right; }

.anatomy-panel-num {
  font-family: var(--f-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-bottom: 18px;
  text-shadow: 0 1px 2px rgba(250, 250, 247, 0.6);
}
.anatomy-panel-title {
  margin: 0 0 14px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ink);
  /* Slight self-shadow gives the text body more presence on the paper */
  text-shadow: 0 1px 3px rgba(250, 250, 247, 0.55);
}
.anatomy-panel-body {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  text-shadow: 0 1px 2px rgba(250, 250, 247, 0.55);
}

/* ----- Outro CTA -----
   Hidden until the outro segment begins (--outro > 0). Fades in centered,
   pulls into focus as the canvas blurs out. Anchored to the sticky stage. */
.anatomy-outro {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
  z-index: 4;
  /* Drive fade + entrance from --outro (set by JS on .anatomy-sticky) */
  opacity: var(--outro, 0);
  transform: translateY(calc((1 - var(--outro, 0)) * 24px));
  padding: 0 var(--gutter);
}
.anatomy-outro > * {
  pointer-events: auto;
}
.anatomy-outro-kicker {
  margin: 0 0 var(--s-5);
  font-family: var(--f-mono);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
.anatomy-outro-cta {
  display: inline-block;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: -0.01em;
  color: var(--paper);
  background: var(--clay);
  padding: 22px 40px;
  border: 1px solid var(--clay);
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 8px 24px -10px rgba(196, 78, 44, 0.45);
  transition:
    background 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}
.anatomy-outro-cta:hover {
  background: var(--clay-deep);
  border-color: var(--clay-deep);
  color: var(--paper);
  box-shadow: 0 12px 32px -10px rgba(155, 59, 31, 0.55);
  transform: translateY(-1px);
}

/* Wraps the primary Kontakt nu CTA */
.anatomy-outro-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}

.anatomy-outro-title {
  margin: 0 0 var(--s-6);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--ink);
  max-width: 18ch;
  text-align: center;
}
/* Force a vertical stack centred in the sticky stage */
.anatomy-outro {
  grid-auto-rows: max-content;
  grid-template-columns: 1fr;
  gap: 0;
  align-content: center;
  justify-content: center;
}
.anatomy-outro-title,
.anatomy-outro-kicker,
.anatomy-outro-cta { justify-self: center; }

/* Per-panel enter/leave curves bound to --p-1 … --p-8.
   Same fade formula across all 8: fade in early in the segment,
   hold visible most of the segment, fade out at the end. */
.anatomy-panel[data-layer="1"] { --p: var(--p-1, 0); }
.anatomy-panel[data-layer="2"] { --p: var(--p-2, 0); }
.anatomy-panel[data-layer="3"] { --p: var(--p-3, 0); }
.anatomy-panel[data-layer="4"] { --p: var(--p-4, 0); }
.anatomy-panel[data-layer="5"] { --p: var(--p-5, 0); }
.anatomy-panel[data-layer="6"] { --p: var(--p-6, 0); }
.anatomy-panel[data-layer="7"] { --p: var(--p-7, 0); }
.anatomy-panel[data-layer="8"] { --p: var(--p-8, 0); }

.anatomy-panel {
  /* Slower, more pronounced fade-in + longer hold + slower fade-out.
     Combined with the 1200vh section, each panel takes ~150vh of
     scroll, so the transitions are clearly readable rather than rushed.
       Enter:  0.00 → 0.22  (slow glide in)
       Hold:   0.22 → 0.82  (60% of segment fully readable)
       Leave:  0.82 → 1.00  (slow fade out) */
  --enter: clamp(0, calc(var(--p, 0) * 4.54), 1);
  --leave: clamp(0, calc((var(--p, 0) - 0.82) * 5.55), 1);
  opacity: calc(var(--enter) * (1 - var(--leave)));
  /* Bigger entrance/exit translation so the motion reads more clearly */
  transform: translateY(calc(-50% + (1 - var(--enter)) * 22px - var(--leave) * 18px));
}

/* Mobile: show panels stacked BELOW the canvas instead of left/right of it.
   Only the active panel is visible (opacity controlled by existing JS --p-N vars). */
@media (max-width: 880px) {
  .anatomy-stage {
    width: min(92vw, 640px);
  }
  .anatomy-panels {
    /* Override the absolute-positioning left/right layout */
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    padding: 0 var(--gutter);
    pointer-events: none;
  }
  .anatomy-panel,
  .anatomy-panel--left,
  .anatomy-panel--right {
    /* Stack all 8 panels at the same bottom position — opacity picks the active one */
    position: absolute;
    bottom: 4vh;
    top: auto;
    left: 50%;
    right: auto;
    text-align: center;
    max-width: 88vw;
    width: 88vw;
    transform: translateX(-50%) translateY(calc((1 - var(--enter, 1)) * 22px - var(--leave, 0) * 18px));
  }
  .anatomy-panel::before,
  .anatomy-panel::after { display: none; }
  .anatomy-panel-body {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* reduced motion: pin video at start, hide panels except current via
   pure scroll (no smooth easing); user still gets the content */
@media (prefers-reduced-motion: reduce) {
  .anatomy-video { /* JS still scrubs but without smoothing */ }
}