/* ==========================================================================
   SEKOAN — animations.css
   Parallax · Scroll-reveal · Canvas · Orbs · Counters · Keyframes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SCROLL-REVEAL
   Only activates when JS has loaded (body.js-loaded).
   Elements use data-reveal attribute; JS adds .is-visible.
   -------------------------------------------------------------------------- */
.js-loaded [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
}
.js-loaded [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger variants (applied via data-reveal-delay by JS) */
.js-loaded [data-reveal-fade] {
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
}
.js-loaded [data-reveal-fade].is-visible { opacity: 1; }

.js-loaded [data-reveal-left] {
  opacity: 0;
  transform: translateX(-30px);
  transition:
    opacity var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
}
.js-loaded [data-reveal-left].is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   2. PARALLAX VIDEO SECTIONS
   -------------------------------------------------------------------------- */
.parallax-section {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.parallax-video {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
  pointer-events: none;
}

/* Disable parallax movement on mobile — just fill the frame */
@media (max-width: 1023px) {
  .parallax-video {
    top: 0;
    height: 100%;
  }
}

/* Multi-layer overlay: keeps text readable over any video */
.parallax-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(5,5,6,0.75) 0%, rgba(5,5,6,0.3) 60%, rgba(5,5,6,0.1) 100%),
    linear-gradient(to bottom, rgba(5,5,6,0.5) 0%, rgba(5,5,6,0.15) 50%, rgba(5,5,6,0.7) 100%);
  pointer-events: none;
}

/* Stronger overlay for hero sections to ensure headline legibility */
.parallax-overlay--strong {
  background:
    linear-gradient(to right, rgba(5,5,6,0.88) 0%, rgba(5,5,6,0.5) 55%, rgba(5,5,6,0.2) 100%),
    linear-gradient(to bottom, rgba(5,5,6,0.6) 0%, rgba(5,5,6,0.2) 50%, rgba(5,5,6,0.8) 100%);
}

.parallax-content {
  position: relative;
  z-index: 10;
  width: 100%;
}

/* --------------------------------------------------------------------------
   3. CANVAS ANIMATION LAYER (DataNodeCanvas)
   -------------------------------------------------------------------------- */
.anim-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5; /* above overlay, below content */
}

/* --------------------------------------------------------------------------
   4. SPINNING ORB RINGS (from AURELIUS design reference)
   -------------------------------------------------------------------------- */
.orb-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  pointer-events: none;
  z-index: 4;
}

.orb-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid var(--border-accent);
}

.orb-ring--outer {
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  border-style: dashed;
  animation: spin-cw 50s linear infinite;
  opacity: 0.35;
}

.orb-ring--mid {
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;
  animation: spin-ccw 30s linear infinite;
  opacity: 0.5;
}

.orb-ring--inner {
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  border-color: var(--accent-mid);
  animation: spin-cw 18s linear infinite;
  opacity: 0.6;
}

.orb-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow:
    0 0 12px 4px var(--accent-glow),
    0 0 40px 12px rgba(217, 113, 28, 0.15);
  animation: orb-pulse 3.5s ease-in-out infinite;
}

/* Tick marks on outer ring */
.orb-tick {
  position: absolute;
  width: 6px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   5. KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes spin-cw {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spin-ccw {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes orb-pulse {
  0%, 100% {
    opacity: 0.6;
    box-shadow:
      0 0 10px 3px var(--accent-glow),
      0 0 30px 8px rgba(217,113,28,0.12);
  }
  50% {
    opacity: 1;
    box-shadow:
      0 0 20px 8px var(--accent-glow),
      0 0 60px 20px rgba(217,113,28,0.2);
  }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes subtle-breathe {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%       { transform: scale(1.04); opacity: 0.7; }
}

/* Grid pulse animation for hero section */
@keyframes grid-pulse {
  0%, 100% { opacity: 0.03; }
  50%       { opacity: 0.06; }
}

/* Subtle scroll indicator bounce */
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%       { transform: translateY(6px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   6. HERO SCROLL INDICATOR
   -------------------------------------------------------------------------- */
.scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  animation: scroll-bounce 2s ease-in-out infinite;
  cursor: pointer;
}

.scroll-indicator__line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--accent), transparent);
}

.scroll-indicator__label {
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--fg-muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   7. STAT COUNTERS
   -------------------------------------------------------------------------- */
.stat-block {
  text-align: center;
  padding: 2rem 1rem;
}

.stat-number {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 300;
  color: var(--fg-primary);
  line-height: 1;
  margin-bottom: 0.5rem;
  display: block;
}

.stat-unit {
  color: var(--accent);
}

.stat-label {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  max-width: 160px;
  margin-inline: auto;
  line-height: 1.5;
}
.stat-source {
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
  font-style: italic;
  margin-top: 0.4rem;
  text-transform: none;
}

/* --------------------------------------------------------------------------
   8. SECTION TRANSITION GRADIENTS
   These create seamless blends between sections
   -------------------------------------------------------------------------- */
.fade-to-dark::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8rem;
  background: linear-gradient(to bottom, transparent, var(--bg-deep));
  pointer-events: none;
  z-index: 15;
}

.fade-from-dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6rem;
  background: linear-gradient(to top, transparent, var(--bg-deep));
  pointer-events: none;
  z-index: 15;
}

/* --------------------------------------------------------------------------
   9. AMBIENT BACKGROUND GRID (static pages, no video)
   -------------------------------------------------------------------------- */
.ambient-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: grid-pulse 6s ease-in-out infinite;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   10. PAGE HERO (static, no video)
   -------------------------------------------------------------------------- */
.static-hero {
  position: relative;
  overflow: hidden;
  min-height: 55vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: 5rem;
  background: var(--bg-deep);
}

.static-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(217,113,28,0.06) 0%, transparent 70%);
  pointer-events: none;
}