/* Animations - Scroll Reveals, Entrances & Transitions */

/* ========================================
   SCROLL REVEAL — BASE
   ======================================== */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   SCROLL REVEAL — DIRECTIONAL VARIANTS
   ======================================== */

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

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

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ========================================
   STAGGER
   ======================================== */

.stagger:nth-child(1) { transition-delay: 0ms; }
.stagger:nth-child(2) { transition-delay: 80ms; }
.stagger:nth-child(3) { transition-delay: 160ms; }
.stagger:nth-child(4) { transition-delay: 240ms; }
.stagger:nth-child(5) { transition-delay: 320ms; }
.stagger:nth-child(6) { transition-delay: 400ms; }

/* ========================================
   HERO ENTRANCE — PAGE LOAD SEQUENCE
   ======================================== */

.hero-entrance .hero-badge,
.hero-entrance h1,
.hero-entrance .hero-description,
.hero-entrance .hero-ctas {
  opacity: 0;
  transform: translateY(20px);
}

.hero-entrance .hero-visual {
  opacity: 0;
}

.hero-entrance.loaded .hero-badge {
  animation: hero-fade-in 700ms cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards;
}

.hero-entrance.loaded h1 {
  animation: hero-fade-in 700ms cubic-bezier(0.16, 1, 0.3, 1) 350ms forwards;
}

.hero-entrance.loaded .hero-description {
  animation: hero-fade-in 700ms cubic-bezier(0.16, 1, 0.3, 1) 500ms forwards;
}

.hero-entrance.loaded .hero-ctas {
  animation: hero-fade-in 600ms cubic-bezier(0.16, 1, 0.3, 1) 650ms forwards;
}

.hero-entrance.loaded .hero-visual {
  animation: fade-in 1200ms cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards;
}

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

@keyframes hero-image-in {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Gradient shimmer removed — solid two-tone typography */

/* ========================================
   HERO NETWORK — FLOATING NODES & PARTICLES
   ======================================== */

@keyframes heroNodeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes heroParticleDrift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(3px, -4px); }
  50% { transform: translate(-2px, 3px); }
  75% { transform: translate(4px, 2px); }
}

/* ========================================
   STAT COUNTER
   ======================================== */

.stat-number {
  transition: opacity 400ms ease;
}

/* ========================================
   GALLERY IMAGE HOVER
   ======================================== */

.gallery-scroll img {
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .gallery-scroll img:hover {
    transform: scale(1.03);
    border-color: var(--border-hover);
  }
}

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

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

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

/* ========================================
   MOBILE MENU
   ======================================== */

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-up {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}

/* ========================================
   BLUEPRINT ANIMATIONS — HERO SVG
   ======================================== */

/* Commons room breathing glow */
.bp-commons-glow {
  animation: bp-breathe 5s ease-in-out infinite;
}

@keyframes bp-breathe {
  0%, 100% { fill-opacity: 0.04; }
  50% { fill-opacity: 0.1; }
}

/* Scan line sweep (top to bottom) */
.bp-scan-line {
  animation: bp-scan 14s ease-in-out infinite;
}

@keyframes bp-scan {
  0%, 3% { transform: translateY(0); opacity: 0; }
  8% { opacity: 1; }
  85% { opacity: 1; }
  95%, 100% { transform: translateY(370px); opacity: 0; }
}

/* Activity pulse dots — occupied desks */
.bp-dot {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

@keyframes bp-pulse {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  15% { opacity: 0.5; transform: scale(1); }
  75% { opacity: 0.5; transform: scale(1); }
  90% { opacity: 0; transform: scale(0.5); }
}

/* Commons: top desk chairs */
.bp-dot-1  { animation: bp-pulse 6s ease-in-out infinite 0.5s; }
.bp-dot-2  { animation: bp-pulse 7.5s ease-in-out infinite 3s; }
.bp-dot-3  { animation: bp-pulse 7s ease-in-out infinite 1.2s; }
.bp-dot-4  { animation: bp-pulse 8s ease-in-out infinite 4.5s; }
/* Commons: communal table top */
.bp-dot-5  { animation: bp-pulse 8s ease-in-out infinite 1s; }
.bp-dot-6  { animation: bp-pulse 6.5s ease-in-out infinite 2.5s; }
.bp-dot-7  { animation: bp-pulse 7s ease-in-out infinite 5s; }
.bp-dot-8  { animation: bp-pulse 9s ease-in-out infinite 0.8s; }
/* Commons: communal table bottom */
.bp-dot-9  { animation: bp-pulse 7.5s ease-in-out infinite 3.5s; }
.bp-dot-10 { animation: bp-pulse 6s ease-in-out infinite 6s; }
.bp-dot-11 { animation: bp-pulse 8.5s ease-in-out infinite 1.8s; }
/* Commons: bottom desk chairs */
.bp-dot-12 { animation: bp-pulse 7s ease-in-out infinite 4s; }
.bp-dot-13 { animation: bp-pulse 8s ease-in-out infinite 2s; }
/* Commons: standing stools */
.bp-dot-14 { animation: bp-pulse 9s ease-in-out infinite 5.5s; }
.bp-dot-15 { animation: bp-pulse 7.5s ease-in-out infinite 1.5s; }
/* Side rooms */
.bp-dot-16 { animation: bp-pulse 9s ease-in-out infinite 3s; }
.bp-dot-17 { animation: bp-pulse 8s ease-in-out infinite 7s; }
.bp-dot-18 { animation: bp-pulse 6.5s ease-in-out infinite 1s; }
.bp-dot-19 { animation: bp-pulse 8.5s ease-in-out infinite 4s; }
.bp-dot-20 { animation: bp-pulse 7s ease-in-out infinite 2s; }
.bp-dot-21 { animation: bp-pulse 9s ease-in-out infinite 5s; }
.bp-dot-22 { animation: bp-pulse 7.5s ease-in-out infinite 0.5s; }
.bp-dot-23 { animation: bp-pulse 8s ease-in-out infinite 6.5s; }
.bp-dot-24 { animation: bp-pulse 6.5s ease-in-out infinite 3.5s; }
.bp-dot-25 { animation: bp-pulse 8.5s ease-in-out infinite 2.5s; }

/* ========================================
   MOBILE — DISABLE SCROLL REVEALS
   ======================================== */

@media (max-width: 768px) {
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .stagger:nth-child(n) {
    transition-delay: 0ms;
  }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
  }

  .hero-entrance .hero-badge,
  .hero-entrance h1,
  .hero-entrance .hero-description,
  .hero-entrance .hero-ctas,
  .hero-entrance .hero-visual {
    opacity: 1;
    transform: none;
  }
}