/* ========== SpaceX-style scroll unveil animations (ir.spacex.com inspired) ========== */

html {
  scroll-behavior: smooth;
}

/* --- Base text reveal: fade up --- */
.reveal,
.hero-reveal {
  opacity: 0;
  transform: translateY(56px);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.revealed,
.hero-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.hero-reveal {
  transform: translateY(40px);
  transition-duration: 1.15s;
}

/* --- Clip unveil (SpaceX headline style) --- */
.reveal-clip {
  opacity: 1;
  clip-path: inset(100% 0 0 0);
  transform: translateY(32px);
  transition:
    clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: clip-path, transform;
}

.reveal-clip.revealed {
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
}

/* --- Media: images & video frames scale in --- */
.reveal-media {
  opacity: 0;
  transform: scale(1.06) translateY(24px);
  transition:
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  overflow: hidden;
}

.reveal-media.revealed {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.reveal-media img,
.reveal-media video,
.reveal-media iframe,
img.reveal-media,
video.reveal-media,
iframe.reveal-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img.reveal-media,
video.reveal-media,
iframe.reveal-media {
  opacity: 0;
  transform: scale(1.06) translateY(24px);
  transition:
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

img.reveal-media.revealed,
video.reveal-media.revealed,
iframe.reveal-media.revealed {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* --- Directional slides --- */
.reveal-left {
  opacity: 0;
  transform: translateX(-64px);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(64px);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.revealed,
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* --- Pure fade --- */
.reveal-fade {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-fade.revealed {
  opacity: 1;
}

/* --- Stagger groups: children auto-delay in JS --- */
.reveal-group > * {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-group.revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* --- Parallax layers --- */
[data-parallax] {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* --- Header scroll state --- */
#header {
  background: transparent;
}

#header.scrolled {
  background: rgba(5, 8, 15, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* --- Progress bar --- */
#progress {
  transform-origin: left;
  pointer-events: none;
}

/* --- Card hover lift --- */
.chapter-card {
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s ease,
    border-color 0.4s ease;
}

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

/* --- Light-theme pages: same unveil, dark text already visible context --- */
.bg-white .reveal,
.bg-white .hero-reveal,
.bg-white .reveal-clip,
.bg-white .reveal-left,
.bg-white .reveal-right,
.bg-white .reveal-media,
.bg-white .reveal-fade {
  /* same mechanics — no override needed */
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .hero-reveal,
  .reveal-clip,
  .reveal-media,
  .reveal-left,
  .reveal-right,
  .reveal-fade,
  .reveal-group > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}