/**
 * Our Story (/about) — Awwwards-style scroll choreography
 * Scoped to body.page-about
 */

body.page-about {
  --about-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --about-hero-p: 0;
}

/* —— Hero band: scrubbed exit —— */
body.page-about .about-top {
  position: relative;
  overflow: hidden;
  --about-hero-p: 0;
}

body.page-about.has-awwward-scroll .about-top-copy {
  transform:
    translate3d(0, calc(var(--about-hero-p) * 10vh), 0)
    scale(calc(1 - var(--about-hero-p) * 0.05));
  opacity: calc(1 - var(--about-hero-p) * 1.15);
  filter: blur(calc(var(--about-hero-p) * 8px));
  will-change: transform, opacity, filter;
  transform-origin: center top;
}

body.page-about.has-awwward-scroll .about-top .about-image-wrapper {
  transform:
    translate3d(0, calc(var(--about-hero-p) * -6vh), 0)
    scale(calc(1.02 + var(--about-hero-p) * 0.06));
  opacity: calc(1 - var(--about-hero-p) * 0.55);
  will-change: transform, opacity;
}

body.page-about .about-top.is-leaving .about-scroll-cue {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  animation: none;
}

/* Entrance for hero copy (load) */
@media (prefers-reduced-motion: no-preference) {
  body.page-about.has-awwward-scroll .about-title,
  body.page-about.has-awwward-scroll .about-subtitle,
  body.page-about.has-awwward-scroll .about-intro-text {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    animation: about-hero-enter 1s var(--about-ease) forwards;
  }

  body.page-about.has-awwward-scroll .about-title {
    animation-delay: 0.08s;
  }

  body.page-about.has-awwward-scroll .about-subtitle {
    animation-delay: 0.22s;
  }

  body.page-about.has-awwward-scroll .about-intro-text {
    animation-delay: 0.36s;
  }

  /* Clip only — leave opacity/transform free for scroll scrub */
  body.page-about.has-awwward-scroll .about-top .about-image-wrapper {
    clip-path: inset(12% 8% 12% 8%);
    animation: about-hero-image-enter 1.25s var(--about-ease) 0.45s forwards;
  }
}

@keyframes about-hero-enter {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes about-hero-image-enter {
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* —— Story rows: clip + blur reveals —— */
@media (prefers-reduced-motion: no-preference) {
  body.js-scroll-fx.page-about .about-story-row[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 48px, 0);
    filter: blur(6px);
    transition:
      opacity 1.1s var(--about-ease),
      transform 1.15s var(--about-ease),
      filter 0.95s var(--about-ease);
  }

  body.js-scroll-fx.page-about .about-story-row[data-reveal].is-inview {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }

  body.js-scroll-fx.page-about .about-story-row .story-section[data-reveal="left"],
  body.js-scroll-fx.page-about .about-story-row .about-image-wrapper[data-reveal="left"] {
    opacity: 0;
    transform: translate3d(-40px, 24px, 0);
    clip-path: inset(0 18% 0 0);
    transition:
      opacity 1.05s var(--about-ease),
      transform 1.15s var(--about-ease),
      clip-path 1.2s var(--about-ease);
    transition-delay: 0.06s;
  }

  body.js-scroll-fx.page-about .about-story-row .story-section[data-reveal="right"],
  body.js-scroll-fx.page-about .about-story-row .about-image-wrapper[data-reveal="right"] {
    opacity: 0;
    transform: translate3d(40px, 24px, 0);
    clip-path: inset(0 0 0 18%);
    transition:
      opacity 1.05s var(--about-ease),
      transform 1.15s var(--about-ease),
      clip-path 1.2s var(--about-ease);
    transition-delay: 0.16s;
  }

  body.js-scroll-fx.page-about .about-story-row.is-inview .story-section[data-reveal].is-inview,
  body.js-scroll-fx.page-about .about-story-row.is-inview .about-image-wrapper[data-reveal].is-inview,
  body.js-scroll-fx.page-about .about-story-row .story-section[data-reveal].is-inview,
  body.js-scroll-fx.page-about .about-story-row .about-image-wrapper[data-reveal].is-inview {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }

  /* Standalone sections */
  body.js-scroll-fx.page-about .about-story > .story-container > .story-section[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 52px, 0) scale(0.985);
    filter: blur(5px);
    transition:
      opacity 1.1s var(--about-ease),
      transform 1.2s var(--about-ease),
      filter 0.95s var(--about-ease);
  }

  body.js-scroll-fx.page-about .about-story > .story-container > .story-section[data-reveal].is-inview {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }

  body.js-scroll-fx.page-about .philosophy-list[data-stagger] > li {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
      opacity 0.8s var(--about-ease),
      transform 0.85s var(--about-ease);
    transition-delay: calc(0.12s + var(--i, 0) * 0.08s);
  }

  body.js-scroll-fx.page-about .about-philosophy.is-inview .philosophy-list[data-stagger] > li,
  body.js-scroll-fx.page-about .philosophy-list[data-stagger].is-inview > li {
    opacity: 1;
    transform: none;
  }

  body.js-scroll-fx.page-about .about-story-gallery[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    clip-path: inset(8% 6% 8% 6%);
    transition:
      opacity 1.15s var(--about-ease),
      transform 1.2s var(--about-ease),
      clip-path 1.25s var(--about-ease);
  }

  body.js-scroll-fx.page-about .about-story-gallery[data-reveal].is-inview {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }

  body.js-scroll-fx.page-about .about-story-gallery[data-stagger] > .about-story-gallery-item {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.98);
    transition:
      opacity 0.9s var(--about-ease),
      transform 1s var(--about-ease);
    transition-delay: calc(0.1s + var(--i, 0) * 0.12s);
  }

  body.js-scroll-fx.page-about .about-story-gallery[data-stagger].is-inview > .about-story-gallery-item {
    opacity: 1;
    transform: none;
  }

  body.js-scroll-fx.page-about .story-section--quote[data-reveal] .story-quote {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.98);
    transition:
      opacity 1s var(--about-ease),
      transform 1.1s var(--about-ease);
    transition-delay: 0.12s;
  }

  body.js-scroll-fx.page-about .story-section--quote[data-reveal].is-inview .story-quote {
    opacity: 1;
    transform: none;
  }

  body.js-scroll-fx.page-about .story-section--lets-begin .btn-story {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition:
      opacity 0.85s var(--about-ease),
      transform 0.9s var(--about-ease),
      color var(--transition),
      background var(--transition),
      border-color var(--transition);
    transition-delay: 0.28s;
  }

  body.js-scroll-fx.page-about .story-section--lets-begin.is-inview .btn-story {
    opacity: 1;
    transform: none;
  }
}

/* Soft parallax nudge on in-view story images via CSS var */
body.page-about.has-awwward-scroll .about-story-row.is-inview .parallax-frame {
  --row-p: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.page-about.has-awwward-scroll .about-top-copy,
  body.page-about.has-awwward-scroll .about-top .about-image-wrapper,
  body.page-about.has-awwward-scroll .about-title,
  body.page-about.has-awwward-scroll .about-subtitle,
  body.page-about.has-awwward-scroll .about-intro-text {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
  }

  body.js-scroll-fx.page-about .about-story-row[data-reveal],
  body.js-scroll-fx.page-about .about-story-row .story-section[data-reveal],
  body.js-scroll-fx.page-about .about-story-row .about-image-wrapper[data-reveal],
  body.js-scroll-fx.page-about .about-story > .story-container > .story-section[data-reveal],
  body.js-scroll-fx.page-about .philosophy-list[data-stagger] > li,
  body.js-scroll-fx.page-about .about-story-gallery[data-reveal],
  body.js-scroll-fx.page-about .about-story-gallery[data-stagger] > .about-story-gallery-item,
  body.js-scroll-fx.page-about .story-section--quote[data-reveal] .story-quote,
  body.js-scroll-fx.page-about .story-section--lets-begin .btn-story {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 768px) {
  body.page-about .about-scroll-cue {
    bottom: 1rem;
  }

  body.page-about.has-awwward-scroll .about-top-copy {
    transform-origin: center top;
  }
}