/* =========================================================
   CALBRA SOURCING — motion
   Reveal variants, stagger, and scroll-linked effects.
   Everything here degrades to "visible, no movement" when
   the person has asked for reduced motion.
   ========================================================= */

:root {
  /* a long, decelerating curve — movement arrives fast and
     settles slowly, which reads as expensive rather than bouncy */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-soft: cubic-bezier(.22, .61, .36, 1);
  --dur: .85s;
}

/* =========================================================
   REVEAL
   Elements carry data-reveal="<variant>"; JS adds .is-in and
   sets --d (the stagger delay) when they enter the viewport.
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transition:
    opacity var(--dur) var(--ease-out-soft) var(--d, 0ms),
    transform var(--dur) var(--ease-out-expo) var(--d, 0ms),
    filter var(--dur) var(--ease-out-soft) var(--d, 0ms);
  will-change: opacity, transform;
}

[data-reveal="up"]    { transform: translate3d(0, 32px, 0); }
[data-reveal="down"]  { transform: translate3d(0, -26px, 0); }
[data-reveal="left"]  { transform: translate3d(-38px, 0, 0); }
[data-reveal="right"] { transform: translate3d(38px, 0, 0); }
[data-reveal="scale"] { transform: scale(.93); }
[data-reveal="rise"]  { transform: translate3d(0, 44px, 0) scale(.97); }

/* soft focus-in, used sparingly on headlines */
[data-reveal="blur"] { transform: translate3d(0, 20px, 0); filter: blur(8px); }

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* For photography only — the frame wipes open rather than fading.
   clip-path MUST stay scoped to this one variant: applying a
   rounded inset to every revealed block shaves the first glyph off
   the top and bottom lines of ordinary text. */
[data-reveal="clip"] {
  transform: scale(1.04);
  clip-path: inset(12% 0 12% 0 round var(--r-xl));
  transition:
    opacity var(--dur) var(--ease-out-soft) var(--d, 0ms),
    transform var(--dur) var(--ease-out-expo) var(--d, 0ms),
    clip-path var(--dur) var(--ease-out-expo) var(--d, 0ms);
}
[data-reveal="clip"].is-in { clip-path: inset(0 0 0 0 round var(--r-xl)); }

/* once it has played, stop promoting the layer */
[data-reveal].is-done { will-change: auto; }

/* =========================================================
   SCROLL PROGRESS
   ========================================================= */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 100;
  background: transparent; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--clay), var(--gold));
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}

/* =========================================================
   HEADER CONDENSE
   ========================================================= */
.site-header .wrap { transition: height .35s var(--ease-out-soft); }
.site-header { transition: box-shadow .35s var(--ease-out-soft), background .35s var(--ease-out-soft); }
.site-header.is-scrolled { box-shadow: 0 10px 30px -24px rgba(37,5,5,.5); }
.site-header.is-scrolled .wrap { height: 64px; }
@media (max-width: 480px) {
  .site-header.is-scrolled .wrap { height: 58px; }
}

/* =========================================================
   HERO PARALLAX
   JS writes --par (photo) and --par-b (blobs) on scroll.
   ========================================================= */
.hero__photo img {
  transform: translate3d(0, var(--par, 0px), 0) scale(1.06);
  will-change: transform;
}
.blob { transform: translate3d(0, var(--par-b, 0px), 0); }

/* =========================================================
   PROCESS SPINE DRAW
   The centre line grows as the section scrolls through.
   ========================================================= */
.spine::before {
  transform: translateX(-50%) scaleY(var(--spine, 0));
  transform-origin: 50% 0;
  transition: transform .12s linear;
}
@media (max-width: 820px) {
  .spine::before { transform: scaleY(var(--spine, 0)); transform-origin: 50% 0; }
}

/* =========================================================
   ACCORDION ICON — slight overshoot on open
   ========================================================= */
.faq-sign { transition: transform .42s var(--ease-out-expo), background .3s ease, color .3s ease; }

/* =========================================================
   SMALL SCREENS
   Sideways entrances feel wrong in a narrow column, so
   everything falls back to a short vertical lift.
   ========================================================= */
@media (max-width: 820px) {
  [data-reveal="left"],
  [data-reveal="right"] { transform: translate3d(0, 26px, 0); }
  :root { --dur: .7s; }
}

/* =========================================================
   REDUCED MOTION — show everything, move nothing
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .hero__photo img { transform: scale(1.06); }
  .blob { transform: none; }
  .spine::before { transform: translateX(-50%) scaleY(1); }
  .scroll-progress { display: none; }
}