/* ============================================================
   PUGS.ORG — MOTION STYLESHEET (OVERHAUL EDITION)
   Initial states, hardware-acceleration hints, and
   accessible prefers-reduced-motion fallback.
   ============================================================ */

/* ---- CHAPTER 1 — HERO: Pre-animation States -------------------------- */

.hero-cue {
  will-change: transform, opacity;
}

.hero-beat {
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
}

.hero-transition-curtain {
  will-change: clip-path;
}

/* ---- CHAPTER 2 — ANATOMY: Pre-animation States ----------------------- */

.anatomy-camera {
  will-change: transform;
}

.anat-path {
  stroke-dasharray: 450;
  stroke-dashoffset: 450;
  will-change: stroke-dashoffset;
}

.anat-ring {
  opacity: 0;
  will-change: transform, opacity;
}

.anat-callout {
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
}

.anatomy-finale {
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

/* ---- CHAPTER 3 — THE PUG WALK: Pre-animation States ------------------- */

.walk-layer {
  will-change: transform;
}

.walk-hero-pug {
  will-change: transform;
}

.walk-pug-shadow {
  will-change: transform, opacity;
}

.walk-sun-container {
  opacity: 0;
  transform: translateY(30px) scale(0.65);
  will-change: transform, opacity;
}

.walk-heat-overlay {
  opacity: 0;
  will-change: opacity;
}

.walk-beat {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}

/* ---- CHAPTER 4 — PERSONALITY: Pre-animation States ------------------- */

.personality-pug-img {
  will-change: transform;
}

.personality-hed--1,
.personality-hed--2 {
  opacity: 0;
  transform: translateY(28px);
  will-change: transform, opacity;
}

.trait {
  opacity: 0;
  will-change: transform, opacity;
}

.personality-outro-banner {
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
}


/* =======================================================================
   PREFERS-REDUCED-MOTION
   Respects user operating system accessibility settings.
   Reveals all content cleanly in a normal readable flow without pinning.
   ======================================================================= */

@media (prefers-reduced-motion: reduce) {

  /* Disable cursor */
  .cursor,
  .scroll-tracker,
  .debug-hud {
    display: none !important;
  }

  body {
    cursor: auto !important;
  }

  /* Reset all hidden elements to full visibility */
  .hero-beat--final,
  .anat-path,
  .anat-ring,
  .anat-callout,
  .anatomy-finale,
  .walk-sun-container,
  .walk-heat-overlay,
  .walk-beat,
  .personality-hed--1,
  .personality-hed--2,
  .trait,
  .personality-outro-banner {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    stroke-dashoffset: 0 !important;
    position: relative !important;
    inset: auto !important;
  }

  /* Convert pinned hero into linear stacked layout */
  .hero-pin-target,
  .anatomy-pin-target,
  .walk-pin-target,
  .personality-pin-target {
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    padding: 4rem var(--px) !important;
    display: block !important;
  }

  /* Canvas sequence accessible fallback: show static final gangster-pug pose */
  .hero-sequence-canvas,
  .hero-poster-img,
  .hero-cue,
  .hero-beat--oh,
  .hero-beat--still {
    display: none !important;
  }

  .hero-static-reduced-motion {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-height: 75vh !important;
    object-fit: cover !important;
    border-radius: 6px !important;
  }

  .hero-editorial {
    position: relative !important;
    padding: 2rem 0 !important;
  }

  .hero-beat--final {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    display: block !important;
    padding: 0 !important;
  }

  .hero-transition-curtain {
    display: none !important;
  }

  /* Anatomy accessible flow */
  .anatomy-stage {
    height: auto !important;
  }

  .anatomy-camera {
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  .anatomy-svg-canvas {
    display: none !important;
  }

  .anatomy-callouts-container {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 1rem !important;
    margin-top: 2rem !important;
  }

  .anat-callout {
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
  }

  /* Walk accessible flow */
  .walk-world {
    position: relative !important;
    height: 350px !important;
  }

  .walk-narrative {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    padding: 2rem 0 !important;
  }

  .walk-beat {
    position: relative !important;
    display: block !important;
    padding: 0 !important;
  }

  /* Personality accessible flow */
  .personality-headlines {
    position: relative !important;
    display: block !important;
    padding: 0 !important;
  }

  .personality-hed {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    margin-bottom: 1.5rem !important;
  }

  .personality-traits {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    margin: 2rem 0 !important;
  }

  .trait {
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }

  .personality-outro-banner {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 2rem !important;
  }

}