/* motion.css — Project Aurora */

/* ══════════════════════════════════════════════
   REVEAL SYSTEM
   Elements start hidden; JS adds .is-revealed
   when they enter the viewport.
═══════════════════════════════════════════════ */

/* Base hidden state */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children within a reveal parent */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
[data-reveal-stagger].is-revealed > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
[data-reveal-stagger].is-revealed > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 100ms; }
[data-reveal-stagger].is-revealed > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 200ms; }
[data-reveal-stagger].is-revealed > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 300ms; }
[data-reveal-stagger].is-revealed > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 400ms; }

/* ══════════════════════════════════════════════
   APERTURE / TEXT REVEAL
   Characters slide up from a clipped container
═══════════════════════════════════════════════ */
[data-aperture] {
  overflow: hidden;
  display: block;
}

[data-aperture] .char-wrap {
  display: inline-block;
}

[data-aperture] .char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition:
    transform var(--dur-cinematic) var(--ease-out),
    opacity var(--dur-slow) var(--ease-out);
}

[data-aperture].is-open .char {
  transform: translateY(0);
  opacity: 1;
}

/* Stagger each char */
[data-aperture].is-open .char:nth-child(1)  { transition-delay: 0ms; }
[data-aperture].is-open .char:nth-child(2)  { transition-delay: 60ms; }
[data-aperture].is-open .char:nth-child(3)  { transition-delay: 120ms; }
[data-aperture].is-open .char:nth-child(4)  { transition-delay: 180ms; }
[data-aperture].is-open .char:nth-child(5)  { transition-delay: 240ms; }
[data-aperture].is-open .char:nth-child(6)  { transition-delay: 300ms; }
[data-aperture].is-open .char:nth-child(7)  { transition-delay: 360ms; }

/* ══════════════════════════════════════════════
   SPLIT TITLE REVEAL
   Lines slide up with stagger
═══════════════════════════════════════════════ */
[data-split-reveal] {
  opacity: 0;
  transform: translateY(20px) skewY(1deg);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

[data-split-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0) skewY(0deg);
}

/* ══════════════════════════════════════════════
   PARALLAX
═══════════════════════════════════════════════ */
[data-parallax] {
  will-change: transform;
}

/* ══════════════════════════════════════════════
   TAPE / TICKER
═══════════════════════════════════════════════ */
.identity__tape {
  overflow: hidden;
  padding-block: var(--s-8);
  margin-top: var(--s-24);
  border-top: 1px solid var(--c-graphite);
  border-bottom: 1px solid var(--c-graphite);
}

.tape-text {
  display: flex;
  white-space: nowrap;
  animation: tapeTicker 20s linear infinite;
  font-family: var(--f-display);
  font-size: clamp(var(--t-xl), 3vw, var(--t-3xl));
  font-style: italic;
  color: var(--c-graphite);
  letter-spacing: 0.05em;
  gap: var(--s-4);
}

@keyframes tapeTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════
   LIGHT LEAK
═══════════════════════════════════════════════ */
.hero__light-leak {
  position: absolute;
  top: 0; right: -20%;
  width: 60%;
  height: 60%;
  background: radial-gradient(ellipse at 60% 30%, rgba(200,146,74,0.12) 0%, transparent 70%);
  animation: lightLeak 8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes lightLeak {
  from { opacity: 0.4; transform: scale(1) translate(0, 0); }
  to   { opacity: 0.8; transform: scale(1.1) translate(-5%, 3%); }
}

/* ══════════════════════════════════════════════
   SCROLL INDICATOR
═══════════════════════════════════════════════ */
.hero__scroll-cue {
  position: absolute;
  bottom: var(--s-10);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  color: var(--c-silver);
}

.hero__scroll-cue .mono { font-size: var(--t-2xs); letter-spacing: 0.3em; }

.hero__scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--c-amber) 0%, transparent 100%);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: scaleY(1); transform-origin: top; }
}

/* ══════════════════════════════════════════════
   HOVER DEPTH (cards tilt)
═══════════════════════════════════════════════ */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform var(--dur-base) var(--ease-out);
}