/* ==========================================================================
   Pixelz Lab — Landing Page Motion Layer (landing-animations.css)
   --------------------------------------------------------------------------
   Isolates all motion for the redesigned landing page so it can be neutralized
   in a single place under prefers-reduced-motion (Req 13.6, 13.7, 7.7).

   Loaded ALONGSIDE css/landing.css, so the design tokens declared in :root
   there (--glow-blue, --dur-fast, --dur-lift, --ease, --color-primary, …)
   are available to the rules below.

   Requirements covered: 13.1, 13.2, 13.3, 13.4, 13.5, 13.6, 13.7, 7.7
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

/* Hero illustration cards float — peak displacement 10px (≤12px), 5s cycle
   (within 3–8s). Req 13.1 */
@keyframes hero-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* Pixel-block decorations float — peak displacement 8px (≤12px), 9s cycle
   (within 6–12s). Req 13.5 */
@keyframes pixel-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Hero illustration float (Req 13.1)
   -------------------------------------------------------------------------- */

.hero-illustration .hero-window,
.hero-illustration .hero-chip,
.hero-illustration .hero-code,
.hero-illustration .hero-chart,
.hero-illustration .hero-message {
  animation: hero-float 5s ease-in-out infinite;
}

/* Stagger the cards so they don't bob in unison; all stay within 3–8s. */
.hero-illustration .hero-chip    { animation-duration: 6s;   animation-delay: -0.6s; }
.hero-illustration .hero-code    { animation-duration: 5.5s; animation-delay: -1.2s; }
.hero-illustration .hero-chart   { animation-duration: 6.5s; animation-delay: -0.9s; }
.hero-illustration .hero-message { animation-duration: 7s;   animation-delay: -1.5s; }

/* --------------------------------------------------------------------------
   Pixel-block float (Req 13.5)
   -------------------------------------------------------------------------- */

.pixel {
  animation: pixel-float 9s ease-in-out infinite;
}

/* Vary durations while staying within 6–12s so blocks drift independently. */
.pixel--sm { animation-duration: 7s;  animation-delay: -1s; }
.pixel--md { animation-duration: 9s;  animation-delay: -3s; }
.pixel--lg { animation-duration: 11s; animation-delay: -5s; }

/* --------------------------------------------------------------------------
   Section fade-in (Req 13.2)
   Sections start hidden and transition opacity 0 → 1 over 400ms (within
   200–600ms) when JS adds `.is-visible` (IntersectionObserver at 0.2).
   -------------------------------------------------------------------------- */

.section {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 400ms var(--ease, ease),
    transform 400ms var(--ease, ease);
}

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

/* --------------------------------------------------------------------------
   Button glow (Req 13.3, 13.4)
   Glow is applied on hover/focus and removed on leave within ≤200ms.
   -------------------------------------------------------------------------- */

.btn {
  transition:
    box-shadow var(--dur-fast, 200ms) var(--ease, ease),
    transform var(--dur-fast, 200ms) var(--ease, ease);
}

.btn:hover,
.btn:focus-visible {
  box-shadow: var(--glow-blue, 0 0 48px rgba(55, 124, 251, 0.45));
}

/* --------------------------------------------------------------------------
   Reduced motion (Req 13.6, 13.7, 7.7)
   A single block that neutralizes hero float, pixel-block float, section
   fade-in, button glow motion, and the project hover-lift, leaving every
   section in its final visible state at opacity 1.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* Disable hero illustration + pixel-block looping float */
  .hero-illustration .hero-window,
  .hero-illustration .hero-chip,
  .hero-illustration .hero-code,
  .hero-illustration .hero-chart,
  .hero-illustration .hero-message,
  .pixel,
  .pixel--sm,
  .pixel--md,
  .pixel--lg {
    animation: none;
    transform: none;
  }

  /* Sections render in their final visible state — no fade-in motion */
  .section,
  .section.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Disable button glow motion (glow no longer animated on hover/focus) */
  .btn {
    transition: none;
  }

  .btn:hover,
  .btn:focus-visible {
    box-shadow: none;
  }

  /* Disable project card hover-lift translation (Req 7.7) */
  .card--project,
  .card--project:hover {
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   App Showcase — featured mockup float + play-button pulse (subtle/premium)
   ========================================================================== */

/* Featured frame slowly floats (≤10px, 6s). Applied to the inner frame so it
   does not conflict with the card's hover transform. */
@keyframes showcase-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.showcase-card--featured .showcase-card__frame {
  animation: showcase-float 6s ease-in-out infinite;
}

/* Soft pulse on the play button — compositor-friendly. Instead of animating
   box-shadow (which repaints every frame), a pseudo-element ring animates only
   transform + opacity, which the GPU composites without repainting. */
@keyframes play-pulse {
  0%   { transform: scale(0.9); opacity: 0.55; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

.showcase-card__play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(55, 124, 251, 0.45);
  z-index: -1;
  animation: play-pulse 2.6s ease-in-out infinite;
}

/* Reduced motion: disable showcase float + play pulse (Req 13.6 style). */
@media (prefers-reduced-motion: reduce) {
  .showcase-card--featured .showcase-card__frame,
  .showcase-card__play {
    animation: none;
  }
  .showcase-card__play::after {
    animation: none;
    opacity: 0;
  }
}