/* =========================================================
   AMARAH — Scroll Animations
   Lenis smooth scroll + GSAP ScrollTrigger layer.
   Isolated here — revert by removing this file and its
   <link> / <script> tags. Does not touch tokens, base,
   components, or pages CSS.
   ========================================================= */

/* ---------- Custom cursor ---------- */
/* Injected by JS. Hidden on touch/coarse-pointer devices.   */
#cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;   /* centre on the pointer */
  border-radius: 50%;
  background: var(--amr-burnt-bark);
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  /* start off-canvas so it doesn't flash in the corner */
  transform: translate3d(-200px, -200px, 0);
  transition:
    width  0.35s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s,
    opacity 0.2s;
  border: 1px solid transparent;
}
#cursor.cursor--active {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  background: transparent;
  border-color: rgba(48, 35, 26, 0.35);
}
#cursor.cursor--hidden {
  opacity: 0;
}

/* Touch devices and reduced-motion: hide cursor entirely */
@media (hover: none), (pointer: coarse) {
  #cursor { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  #cursor { display: none !important; }
}

/* ---------- Parallax images ---------- */
/* Slightly oversize the image inside its overflow:hidden container
   so the GSAP yPercent shift never reveals background at top/bottom. */
.page-hero__bg [data-parallax],
.clubhouse-hero__media [data-parallax],
.project-hero__media [data-parallax] {
  position: relative;
  height: 116% !important;
  top: -8%;
  width: 100%;
  object-fit: cover;
  will-change: transform;
}

[data-parallax] {
  will-change: transform;
}

/* ---------- Slide sections (homepage About / Philosophy / Projects) ---------- */
/*
  Initial state: sections sit 110px below their natural position,
  invisible. The browser sets this the moment CSS is parsed — no
  JS timing issues. IntersectionObserver adds .is-slide-visible
  which triggers the transition.
*/
[data-slide] {
  opacity: 0;
  transform: translateY(110px);
  transition:
    opacity    0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform  0.85s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

[data-slide].is-slide-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Children inside slide sections delay slightly so they reveal
   after the section has landed, not while it's still rising. */
[data-slide].is-slide-visible [data-reveal] {
  transition-delay: 0.35s;
}

/* ---------- Text line reveals ---------- */
/* JS wraps each SplitType .line in a .line-wrap with overflow:hidden
   so the text clips during the upward slide-in. */
.line-wrap {
  overflow: hidden;
  display: block;
  /* Tiny padding prevents descenders clipping */
  padding-bottom: 0.05em;
  margin-bottom: -0.05em;
}

/* Guard: if data-text-reveal and data-reveal somehow co-exist,
   let GSAP own the opacity/transform, not the CSS system. */
[data-text-reveal][data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---------- Stack sections (homepage Hero / About / Philosophy) ---------- */
/*
  The wrapper height is auto — its three 100vh children give it exactly 300vh.
  Hero sticks from scroll 0, About from 100vh, Philosophy from 200vh.
  All three unstick at scroll 200vh (wrapper_bottom − section_height = 300vh − 100vh).
  After 200vh the sections return to natural flow; Projects scrolls into view at 300vh.
*/
.stack-wrapper {
  position: relative;
}

.stack-section {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.stack-section--hero       { z-index: 1; }
.stack-section--about      { z-index: 2; }
.stack-section--stats      { z-index: 3; }
.stack-section--projects   { z-index: 4; }
.stack-section--contact    { z-index: 5; }

/* ---------- Gallery carousel ---------- */
.gallery-carousel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.gallery-carousel__header {
  flex: 0 0 auto;
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(16px, 2vw, 28px);
}

.gallery-carousel__viewport {
  flex: 1 1 0;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.gallery-carousel__track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-carousel__slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.gallery-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-carousel__caption {
  position: absolute;
  bottom: 28px;
  left: var(--container-pad);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  pointer-events: none;
}

.gallery-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
  z-index: 2;
}

.gallery-carousel__btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
}

.gallery-carousel__btn--prev { left: var(--container-pad); }
.gallery-carousel__btn--next { right: var(--container-pad); }

.gallery-carousel__counter {
  position: absolute;
  bottom: 28px;
  right: var(--container-pad);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wider);
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.gallery-carousel__dots {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 14px 0 16px;
}

.gallery-carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-line);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.gallery-carousel__dot.is-active {
  background: var(--amr-burnt-bark);
  transform: scale(1.5);
}

/* Mobile: disable stacking, let sections flow naturally */
@media (max-width: 767px) {
  .stack-wrapper { height: auto; }
  .stack-section {
    position: static;
    height: auto;
    overflow: visible;
  }
}

/* ---------- Reduced-motion: disable all GSAP motion ---------- */
/* The JS guard exits early on prefers-reduced-motion, so these are
   only a safety net for the CSS side-effects. */
@media (prefers-reduced-motion: reduce) {
  .stack-wrapper { height: auto; }
  .stack-section {
    position: static;
    height: auto;
    overflow: visible;
  }

  [data-slide] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-parallax] {
    transform: none !important;
    top: 0 !important;
    height: 100% !important;
    will-change: auto;
  }
  .line-wrap {
    overflow: visible;
  }
}