/* ==========================================================================
   VERSCHEIN — APPLE SCROLL MOTION & 3D PERSPECTIVE ENGINE
   Scroll-linked 3D Card Rotations, Text Blur Reveals, Interactive Mouse Tilt
   ========================================================================== */

/* 1. Staggered Blur & Slide Text Reveals */
.reveal-text {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.reveal-text.active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* 2. Scroll 3D Perspective Cards */
.scroll-3d-card {
  transform-style: preserve-3d;
  perspective: 1200px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  will-change: transform;
}

/* 3. Subtle floating ambient physics */
@keyframes softFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.floating-badge {
  animation: softFloat 4s ease-in-out infinite;
}

/* 4. Pulse indicator dot */
@keyframes greenPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.7);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(52, 199, 89, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0);
  }
}

.hero-tag-dot {
  width: 7px;
  height: 7px;
  background: var(--apple-green);
  border-radius: 50%;
  animation: greenPulse 2s infinite;
}

/* 5. Stage screen transition */
.stage-screen-content img {
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.stage-screen-content.switching img {
  opacity: 0;
  transform: scale(0.97);
}