/* ═══════════════════════════════════════════════════════════════
   HOUSE OF AYURA — Motion System (Phase 22)
   ───────────────────────────────────────────────────────────────
   A single, restrained motion language across the whole house.
   Three layers:
     1. Global motion system    — smooth, calm, refined
     2. Editorial motion        — staggered reveals, soft entries
     3. Selective parallax      — used sparingly on key images
   ─────────────────────────────────────────────────────────────── */

:root {
  /* Motion tokens — one timing system for the whole house */
  --motion-ease-soft:    cubic-bezier(0.22, 1, 0.36, 1);    /* primary editorial ease — long settle */
  --motion-ease-quiet:   cubic-bezier(0.4,  0,    0.2, 1);  /* hover / nav state changes */
  --motion-ease-drift:   cubic-bezier(0.16, 1,    0.3, 1);  /* parallax drift, modal entry */
  --motion-ease-press:   cubic-bezier(0.4,  0,    0,   1);  /* button press feedback */

  --motion-fast:    320ms;
  --motion-base:    600ms;
  --motion-slow:    900ms;
  --motion-cinema:  1200ms;

  /* Stagger gap between sibling reveals */
  --motion-stagger-gap: 90ms;
}

/* ───────────────────────────────────────────────────────────────
   GLOBAL — page-wide rhythm
   ─────────────────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
}

/* Image rendering polish — keep transforms crisp at sub-pixels */
img, .parallax-wrap > * {
  will-change: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

/* ───────────────────────────────────────────────────────────────
   REVEAL ENGINE — opt-in via [data-reveal]
   Elements start hidden and slide/fade in on enter.
   ─────────────────────────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--motion-cinema) var(--motion-ease-soft),
    transform var(--motion-cinema) var(--motion-ease-soft);
  will-change: opacity, transform;
}

[data-reveal="fade"]   { transform: none; }
[data-reveal="up"]     { transform: translate3d(0, 32px, 0); }
[data-reveal="up-sm"]  { transform: translate3d(0, 16px, 0); }
[data-reveal="up-lg"]  { transform: translate3d(0, 56px, 0); }
[data-reveal="left"]   { transform: translate3d(-28px, 0, 0); }
[data-reveal="right"]  { transform: translate3d(28px, 0, 0); }
[data-reveal="scale"]  { transform: scale(0.965); transform-origin: center; }
[data-reveal="image"]  {
  /* Clean image entry — a quiet rise, kept sharp and full brightness. */
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 1400ms var(--motion-ease-soft),
    transform 1600ms var(--motion-ease-soft);
}

[data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
}

/* Bridge to the existing .reveal class on some pages — keeps prior markup live */
.reveal {
  transition:
    opacity var(--motion-cinema) var(--motion-ease-soft),
    transform var(--motion-cinema) var(--motion-ease-soft);
}
.reveal.is-visible,
.reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* ───────────────────────────────────────────────────────────────
   STAGGER — child reveal cascade
   Use [data-stagger] on a parent to cascade its direct children.
   The motion.js script writes inline transition-delay values so
   any number of children is supported.
   ─────────────────────────────────────────────────────────────── */

[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--motion-cinema) var(--motion-ease-soft),
    transform var(--motion-cinema) var(--motion-ease-soft);
  will-change: opacity, transform;
}
[data-stagger].is-in > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ───────────────────────────────────────────────────────────────
   PARALLAX — restrained, image-only
   Wrap a tall image in .parallax-wrap and the JS layer will
   translate it as the section scrolls. Keep it gentle.
   ─────────────────────────────────────────────────────────────── */

.parallax-wrap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.parallax-wrap > img,
.parallax-wrap > picture > img,
[data-parallax] {
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 80ms linear; /* tiny smoothing only */
}

/* Heroes that already use background images don't need wrapping —
   they can take [data-parallax-self] on the image element itself. */

/* ───────────────────────────────────────────────────────────────
   NAV — refined scroll behaviour
   The base styles per-page handle solid/transparent; this layer
   just smooths the transition timing and adds a quiet entrance.
   ─────────────────────────────────────────────────────────────── */

.nav {
  transition:
    background-color var(--motion-base) var(--motion-ease-quiet),
    backdrop-filter  var(--motion-base) var(--motion-ease-quiet),
    padding          var(--motion-base) var(--motion-ease-quiet),
    box-shadow       var(--motion-base) var(--motion-ease-quiet),
    transform        var(--motion-base) var(--motion-ease-quiet),
    opacity          var(--motion-base) var(--motion-ease-quiet);
}

/* Nav lifts when user scrolls down, returns at top — pure polish */
.nav.is-lifted { transform: translateY(0); }
.nav.is-hidden { transform: translateY(-110%); }

/* ───────────────────────────────────────────────────────────────
   LINK / BUTTON — quieter hover micro-motion (system-wide)
   ─────────────────────────────────────────────────────────────── */

a, button {
  transition-timing-function: var(--motion-ease-quiet);
}

[data-magnetic] {
  transition: transform var(--motion-base) var(--motion-ease-drift);
}

/* ───────────────────────────────────────────────────────────────
   MODAL — softer entry / exit (used on the-stones)
   ─────────────────────────────────────────────────────────────── */

.modal,
[data-modal] {
  transition:
    opacity var(--motion-base) var(--motion-ease-drift),
    visibility var(--motion-base) var(--motion-ease-drift);
}
.modal__panel,
.modal__content,
[data-modal-panel] {
  transition:
    transform var(--motion-slow) var(--motion-ease-drift),
    opacity var(--motion-slow) var(--motion-ease-drift);
}
.modal:not(.is-open) .modal__panel,
.modal:not(.is-open) .modal__content,
[data-modal]:not(.is-open) [data-modal-panel] {
  transform: translate3d(0, 16px, 0) scale(0.985);
  opacity: 0;
}

/* ───────────────────────────────────────────────────────────────
   IMAGE HOVER — quiet scale + warmth shift (replaces zoom)
   Applied to common image-card patterns.
   ─────────────────────────────────────────────────────────────── */

.stone-card__image-wrap img,
.article-card__image img,
.portfolio__tile img,
.commission-card img,
.featured__image img,
.frame img,
.framed-image img {
  transition:
    transform 1100ms var(--motion-ease-drift),
    filter 800ms var(--motion-ease-quiet);
}
.stone-card:hover .stone-card__image-wrap img,
.article-card:hover .article-card__image img,
.portfolio__tile:hover img,
.commission-card:hover img,
.featured:hover .featured__image img,
a:hover > .frame img,
a:hover > .framed-image img {
  transform: scale(1.03);
}

/* ───────────────────────────────────────────────────────────────
   PAGE INTRO — soft body settle after loader
   Body fades from a tiny down-offset to its resting position.
   ─────────────────────────────────────────────────────────────── */

/* Phase 27 — opacity-only entry. A transform on <body> makes it the
   containing block for every position:fixed overlay (the enquiry drawer,
   backdrop, tab, skip link), which broke their sizing and anchoring
   (height:100% resolved to full document height). Fading on opacity alone
   keeps the soft entry without sabotaging fixed positioning. */
body.is-entering {
  opacity: 0;
}
body.is-entered {
  opacity: 1;
  transition: opacity 900ms var(--motion-ease-soft);
}

/* ───────────────────────────────────────────────────────────────
   REDUCED MOTION — accessibility first
   Strip transforms, parallax, and timed reveals. Content remains
   visible immediately. Hover micro-motion stays gentle but quick.
   ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  [data-reveal],
  [data-stagger] > *,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  [data-parallax],
  .parallax-wrap > img,
  .parallax-wrap > picture > img {
    transform: none !important;
  }
  body.is-entering, body.is-entered {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .nav { transition: background-color 200ms linear, padding 200ms linear; }
}

/* ───────────────────────────────────────────────────────────────
   MOBILE — simplify
   Disable parallax on narrow viewports (perceived jitter > gain).
   Shorten reveal timings slightly so scrolling feels responsive.
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  [data-parallax],
  .parallax-wrap > img,
  .parallax-wrap > picture > img {
    transform: none !important;
  }
  [data-reveal] {
    transition-duration: 800ms;
  }
  [data-stagger] > * {
    transition-duration: 800ms;
  }
}