/* ============================================
   BEAST LAB — Animations
   Intentional motion with purpose
   ============================================ */

/* ═══════════════════════════════════════════
   SCROLL REVEALS
   ═══════════════════════════════════════════ */

/* Base reveal state — invisible and shifted */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out);
}

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

/* Reveal from left */
.reveal--left {
  opacity: 0;
  transform: translateX(-40px);
}

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

/* Reveal from right */
.reveal--right {
  opacity: 0;
  transform: translateX(40px);
}

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

/* Reveal with scale */
.reveal--scale {
  opacity: 0;
  transform: scale(0.95);
}

.reveal--scale.reveal--visible {
  opacity: 1;
  transform: scale(1);
}

/* Reveal fade only (no movement) */
.reveal--fade {
  opacity: 0;
  transform: none;
}

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

/* Staggered children — add delay to each child in .reveal-group */
.reveal-group > *:nth-child(1) { transition-delay: 0ms; }
.reveal-group > *:nth-child(2) { transition-delay: 100ms; }
.reveal-group > *:nth-child(3) { transition-delay: 200ms; }
.reveal-group > *:nth-child(4) { transition-delay: 300ms; }
.reveal-group > *:nth-child(5) { transition-delay: 400ms; }
.reveal-group > *:nth-child(6) { transition-delay: 500ms; }
.reveal-group > *:nth-child(7) { transition-delay: 600ms; }
.reveal-group > *:nth-child(8) { transition-delay: 700ms; }


/* ═══════════════════════════════════════════
   PHILOSOPHY TEXT ANIMATION
   ═══════════════════════════════════════════ */
.philosophy__line {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

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

/* Stagger philosophy lines */
.philosophy__line:nth-child(1) { transition-delay: 0ms; }
.philosophy__line:nth-child(2) { transition-delay: 150ms; }
.philosophy__line:nth-child(3) { transition-delay: 300ms; }
.philosophy__line:nth-child(4) { transition-delay: 450ms; }
.philosophy__line:nth-child(5) { transition-delay: 600ms; }


/* ═══════════════════════════════════════════
   HERO ANIMATIONS
   ═══════════════════════════════════════════ */
.hero__content {
  animation: heroFadeIn 1.6s var(--ease-out) 0.5s both;
}

.hero__tagline {
  animation: heroFadeIn 1.4s var(--ease-out) 1s both;
}

.hero__scroll-indicator {
  animation: heroFadeIn 1s var(--ease-out) 1.8s both;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ═══════════════════════════════════════════
   PARALLAX LAYERS
   ═══════════════════════════════════════════ */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}


/* ═══════════════════════════════════════════
   CARD 3D TILT
   ═══════════════════════════════════════════ */
.tilt-3d {
  transform-style: preserve-3d;
  transition: transform var(--duration-base) var(--ease-out);
}

.tilt-3d:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateZ(10px);
}


/* ═══════════════════════════════════════════
   HORIZONTAL GALLERY
   ═══════════════════════════════════════════ */
.gallery__track {
  cursor: grab;
}

.gallery__track.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.gallery__item {
  transition: transform var(--duration-base) var(--ease-out),
              filter var(--duration-base) var(--ease-out);
}

.gallery__item:hover {
  transform: scale(1.02);
}


/* ═══════════════════════════════════════════
   DIVIDER ANIMATION
   ═══════════════════════════════════════════ */
.divider-animated {
  width: 0;
  height: 1px;
  background-color: var(--accent-brass);
  transition: width var(--duration-dramatic) var(--ease-out);
}

.divider-animated--visible {
  width: 80px;
}


/* ═══════════════════════════════════════════
   LOGO ENTRANCE
   ═══════════════════════════════════════════ */
@keyframes logoReveal {
  from {
    opacity: 0;
    letter-spacing: 0.6em;
    filter: blur(4px);
  }
  to {
    opacity: 1;
    letter-spacing: var(--tracking-mega);
    filter: blur(0);
  }
}

.logo-animate {
  animation: logoReveal 2s var(--ease-out) 0.2s both;
}


/* ═══════════════════════════════════════════
   BRASS LINE ACCENT
   ═══════════════════════════════════════════ */
.brass-line {
  display: block;
  width: 60px;
  height: 1px;
  background-color: var(--accent-brass);
  margin: var(--space-6) 0;
}

.brass-line--center {
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════
   MAP STYLING
   ═══════════════════════════════════════════ */
.map-wrapper {
  position: relative;
  overflow: hidden;
  border: var(--border-hairline);
}

.map-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 60px rgba(250, 248, 245, 0.3);
}

.map-wrapper iframe {
  display: block;
  width: 100%;
  filter: grayscale(0.4) contrast(1.05) brightness(1.05);
  transition: filter var(--duration-base) var(--ease-out);
}

.map-wrapper:hover iframe {
  filter: grayscale(0) contrast(1) brightness(1);
}