/**
 * @file motion.css
 * @layer 1: Foundation (Motion, Stacking, & Accessibility Utilities)
 *
 * Defines global architectural primitives for:
 * 1. Stacking Contexts (z-index boundaries)
 * 2. Dynamic Motion & Transition Tokens
 * 3. Scoped Accessibility (prefers-reduced-motion)
 *
 * GOVERNANCE CONTRACT:
 * - Never use !important outside of the Accessibility Overrides block.
 * - Keep stacking context indexes tightly clustered to prevent float collisions.
 */

/* ==========================================================================
   1. Global Stacking Context Contracts
   ========================================================================== */
:root {
  /* Stacking Scales */
  --z-below: -1;
  --z-flat: 0;
  --z-above: 1;
  --z-frame: 5;
  --z-overlay: 10;
  --z-nav-fixed: 100;
  --z-modal: 1000;
}

/* ==========================================================================
   2. Shared Transition & Interaction Primitives
   ========================================================================== */
:root {
  /* Timing & Easings */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-bouncy: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Shared Micro-interactions */
.hover-scale {
  transition: transform var(--transition-smooth);
}
.hover-scale:hover {
  transform: scale(1.02);
}

/* ==========================================================================
   3. Explicit Position Context Enforcers
   ========================================================================== */
.relative-context {
  position: relative !important; /* Governed exception: Utility utility enforcer */
}

/* ==========================================================================
   5. SCROLL ENTRANCE ANIMATIONS
   * Conservative: opacity + translateY only, 500ms max.
   * Triggered by IntersectionObserver adding .is-visible class.
   * Hero section excluded — it has its own entrance animation.
   ========================================================================== */

/* Fade-up keyframes */
@keyframes qz-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Initial hidden state for all data-section elements (except hero) */
.page-home [data-section]:not([data-section="hero"]) {
  opacity: 0;
  transform: translateY(24px);
}

/* Visible state — triggered by IntersectionObserver */
.page-home [data-section].is-visible:not([data-section="hero"]) {
  animation: qz-fade-up 0.5s ease-out forwards;
}

/* Staggered children inside visible sections */
.page-home [data-section].is-visible:nth-child(2n) {
  animation-delay: 0.08s;
}


/* ==========================================================================
   6. ACCESSIBILITY: Scoped Reduced-Motion Overrides
   * STRICT DOMAIN RULE: We only kill motion within marketing (.page-home)
   * so we don't break spinners/loaders in the transactional booking engine!
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .page-home *,
  .page-home *::before,
  .page-home *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Make sections visible immediately when motion is reduced */
  .page-home [data-section] {
    opacity: 1 !important;
    transform: none !important;
  }
}