/**
 * Atlas Vertical – Motion design
 *
 * All transitions use only `transform` and `opacity` — compositor-only
 * properties that never trigger layout or paint.
 *
 * The blanket prefers-reduced-motion rule in base.css already sets
 * transition-duration to 0.01ms on everything. This file adds explicit
 * overrides for states that initialise as invisible (hero entrance,
 * scroll-reveal) so those elements are never left hidden for
 * reduced-motion users.
 */

/* ---------------------------------------------------------------
   TASK 1 — Card hover lift
   Lifts the entire card container so media + text move together.
   Box-shadow increase simulates elevation.

   NOTE: story panels use .story-panel__link (the inner visual unit),
   not .story-panel (the 90vh snap section), so the section itself
   never shifts during scroll-snap behaviour.
   --------------------------------------------------------------- */

.card {
  transition: transform 200ms ease;
}

.card:hover {
  transform: translateY(-4px);
}

/* Elevate the image container on card hover */
.card__media {
  transition: box-shadow 200ms ease;
}

.card:hover .card__media {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .card:hover .card__media {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card:hover .card__media {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
  }
}

/* Story panel inner card lift */
.story-panel__link {
  transition: transform 200ms ease;
}

.story-panel__link:hover {
  transform: translateY(-4px);
}

.story-panel__link:hover .story-panel__frame {
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .story-panel__link:hover .story-panel__frame {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 4px 20px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .story-panel__link:hover .story-panel__frame {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 4px 20px rgba(0, 0, 0, 0.35);
  }
}

/* ---------------------------------------------------------------
   TASK 2 — Scroll reveal
   Initial hidden state applied by scroll-reveal.js (not here directly)
   so elements remain visible when JS is disabled or delayed.
   scroll-reveal.js adds .will-reveal via JS, then .is-revealed via
   IntersectionObserver.
   --------------------------------------------------------------- */

.will-reveal {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
  transition: opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.will-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
  will-change: auto; /* Release compositor layer once settled */
}

/* ---------------------------------------------------------------
   TASK 3 — Post hero entrance
   Plays once on page load. Uses scale-from-96% to give the
   portrait phone frame a gentle "settle into place" feel.
   --------------------------------------------------------------- */

@keyframes heroEntrance {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.post-hero {
  animation: heroEntrance 400ms ease forwards;
}

/* ---------------------------------------------------------------
   TASK 4 — Reduced-motion accessibility overrides
   The blanket rule in base.css sets transition-duration: 0.01ms,
   but elements that initialise as invisible need explicit resets
   to prevent any flash-of-hidden-content.
   scroll-reveal.js also skips its entire setup when this media
   query matches, so .will-reveal is never added to DOM elements.
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* Hero: skip the opacity-0 starting frame entirely */
  .post-hero {
    animation: none;
  }

  /* Scroll-reveal: make visible immediately if JS added the class
     before the media query was checked (edge case safety net) */
  .will-reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  /* Card hover: no lift, no shadow change */
  .card {
    transition: none;
  }

  .story-panel__link {
    transition: none;
  }

  /* Play icon: no scale on hover */
  .card__media .play-icon,
  .story-panel__media .play-icon {
    transition: none;
  }
}

/* ---------------------------------------------------------------
   TASK 5 — Performance
   Limit compositing cost on mobile where GPU memory is constrained.
   Disable hover transforms on touch devices (hover is unreliable
   there anyway, and the translateY can cause scroll jank).
   --------------------------------------------------------------- */

@media (hover: none) {
  .card {
    transition: none;
  }

  .card:hover {
    transform: none;
  }

  .story-panel__link {
    transition: none;
  }

  .story-panel__link:hover {
    transform: none;
  }
}