/* ==========================================================================
   VISION HERO ANIMATION — layout & styling
   --------------------------------------------------------------------------
   All sizing knobs are CSS custom properties on .vision-scene (see below).
   The WebGL canvas, head images and text are layered; only the lid moves.
   ========================================================================== */

.vision-hero {
  /* ▸ SCROLL DISTANCE: how much scrolling the whole animation takes.
       Larger = slower / more room for the butterflies to travel.        */
  --va-scroll-distance: 220vh;

  /* ▸ SECTION BACKGROUND: ONE flat colour for the whole section.
       Set this to match your page (no gradient = no visible seams).     */
  --va-bg: #f0eef7;

  position: relative;
  width: 100%;
  height: calc(100vh + var(--va-scroll-distance));
  background: var(--va-bg);
}

/* sticky stage that stays pinned for the whole scroll-through */
.vision-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.vision-scene {
  /* ====================== MAIN TUNING VARIABLES ======================= */
  --va-layout-lock-width: 2400px;   /* scene stops growing past this width */
  --va-head-size-factor: 0.26;      /* head width = 26% of (capped) viewport width */
  --va-head-scale: 0.70;            /* ▸ OVERALL HEAD SIZE multiplier (70% = 30% smaller) */
  --va-head-min-width: 240px;
  --va-head-bottom: 0px;            /* keep the head locked to the bottom */
  --va-lid-closed-offset-x: 2px;   /* ▸ LID START X: positive = right; negative = left */
  --va-lid-closed-offset-y: -6px;  /* ▸ LID START Y: negative = lower; positive = higher */
  --va-opening-width-factor: 0.87; /* ▸ interior ellipse width vs head width */
  --va-opening-height-factor: 0.105;/* ▸ interior ellipse height vs head width */
  --va-opening-bottom-factor: 0.50;/* ▸ interior ellipse vertical alignment */
  --va-text-size-factor: 0.44;      /* vision-text width vs (capped) viewport */
  --va-text-top: 40%;               /* vertical position of the headline */
  /* =================================================================== */

  --va-cap: min(100vw, var(--va-layout-lock-width));
  --va-head-w: clamp(
    calc(var(--va-head-min-width) * var(--va-head-scale)),
    calc(100vw * var(--va-head-size-factor) * var(--va-head-scale)),
    calc(var(--va-layout-lock-width) * var(--va-head-size-factor) * var(--va-head-scale))
  );

  position: absolute;
  inset: 0;
}

/* ----------------------------- headline text --------------------------- */
.vision-text {
  position: absolute;
  top: var(--va-text-top);
  left: 50%;
  z-index: 1;                       /* behind the butterflies for depth */
  width: calc(var(--va-cap) * var(--va-text-size-factor));
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}
.vision-text img { display: block; width: 100%; height: auto; }

/* ----------------------------- WebGL canvas ---------------------------- */
.vision-stage { position: absolute; inset: 0; z-index: 2; }
.va-canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  display: block; pointer-events: none;
}

/* ----------------------------- the head -------------------------------- */
.head-stack {
  position: absolute;
  left: 50%;
  margin-left: calc(var(--va-head-w) * -0.5);
  bottom: var(--va-head-bottom);
  z-index: auto;                    /* children layer independently around the canvas */
  width: var(--va-head-w);
  height: calc(var(--va-head-w) * 1.10);
  transform: none;
  pointer-events: none;
  perspective: none;              /* gives the lid a real 3D backward tilt */
}
.va-head {
  position: absolute;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  user-select: none;
  pointer-events: none;
}
/* lower face — never moves */
.va-head-base { bottom: 0; z-index: 4; }

/* dark hollow "empty interior" revealed through the head's open top.
   Sits BEHIND the base (z3); the opaque head masks everything except the
   transparent opening, so it reads as an empty cavity. Also the spawn anchor. */
.va-head-opening {
  position: absolute;
  left: calc(50% + 2px);
  bottom: calc(var(--va-head-w) * var(--va-opening-bottom-factor));
  z-index: 1;                       /* below butterflies, while the face/lid stay above */
  width: calc(var(--va-head-w) * var(--va-opening-width-factor));
  height: calc(var(--va-head-w) * var(--va-opening-height-factor));
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at 50% 28%,
      #777681 0%,
      #55535e 25%,
      #34323c 52%,
      #201f27 76%,
      #121117 100%
    );
  box-shadow:
    inset 0 4px 7px rgba(255,255,255,.10),
    inset 0 -7px 12px rgba(0,0,0,.58),
    0 1px 2px rgba(0,0,0,.16);
  pointer-events: none;
}
/* top lid — only this lifts up (driven by JS) */
.va-head-lid {
  bottom: calc((var(--va-head-w) * 0.52) + var(--va-lid-closed-offset-y));
  margin-left: var(--va-lid-closed-offset-x);
  z-index: 5;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

/* ------------------------------ responsive ----------------------------- */
@media (max-width: 1024px) {
  .vision-scene { --va-head-size-factor: 0.40; }
  .vision-text  { --va-text-size-factor: 0.62; }
}
@media (max-width: 767px) {
  .vision-hero {
    --va-scroll-distance: 200svh;

    /* Use the actually visible mobile viewport */
    height: calc(100svh + var(--va-scroll-distance));
  }

  .vision-sticky {
    height: 100svh;
  }

  .vision-scene {
    --va-head-size-factor: 0.74;
    --va-head-min-width: 240px;

    /* Moves head, lid and ellipse together */
    --va-head-bottom: 0;
  }

  .vision-text {
    --va-text-size-factor: 0.82;
    --va-text-top: 50%;
  }

}

/* ------------------------- reduced-motion ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .vision-hero {
    height: 100vh;
    --va-scroll-distance: 0vh;
  }

  .va-canvas {
    display: none;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .vision-hero {
    height: 100svh;
    --va-scroll-distance: 0svh;
  }

  .vision-sticky {
    height: 100svh;
  }
}