/**
 * WindForge — 3D & Motion styles.
 *
 * Companion to blocks/tailwind/{tilt_card,flip_card,parallax_hero,
 * particle_hero,animated_gradient,glass_cards}. Tailwind utilities cover
 * layout/color; this file covers the geometry and keyframes that utilities
 * cannot: 3D perspective, preserve-3d, flip mechanics, glare, float and
 * gradient-blob animation, parallax hints, and reveal transitions.
 *
 * Enqueued on the frontend when any 3D & Motion block is present.
 */

/* ── 3D tilt ────────────────────────────────────────────────────────── */
.wf-tilt-scene { perspective: 1000px; }
.wf-tilt {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.15s ease-out;
  position: relative;
}
.wf-tilt-inner {
  transform: translateZ(30px);
  transform-style: preserve-3d;
}
.wf-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--wf-glare-x, 50%) var(--wf-glare-y, 50%),
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0) 60%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
}
.wf-tilt[data-wf-glare="1"]:hover .wf-glare { opacity: 1; }

/* ── 3D flip card ─────────────────────────────────────────────────────── */
.wf-flip-scene { perspective: 1200px; }
.wf-flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1.2);
  cursor: pointer;
  outline-offset: 4px;
}
.wf-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.wf-flip-back { transform: rotateY(180deg); }
@media (hover: hover) {
  .wf-flip:hover { transform: rotateY(180deg); }
}
.wf-flip.wf-flipped { transform: rotateY(180deg); }

/* ── Float (glass cards) ──────────────────────────────────────────────── */
@keyframes wfFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.wf-float { animation: wfFloat 6s ease-in-out infinite; }
.wf-float-2 { animation-delay: -2s; }
.wf-float-3 { animation-delay: -4s; }

/* ── Glassmorphism ────────────────────────────────────────────────────── */
.wf-glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ── Animated gradient blobs ──────────────────────────────────────────── */
@keyframes wfBlobDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(6rem, 3rem) scale(1.15); }
  66%      { transform: translate(-3rem, 6rem) scale(0.92); }
}
@keyframes wfBlobDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1.1); }
  50%      { transform: translate(-7rem, -4rem) scale(0.95); }
}
@keyframes wfBlobDrift3 {
  0%, 100% { transform: translate(0, 0) scale(0.95); }
  50%      { transform: translate(5rem, -5rem) scale(1.12); }
}
.wf-grad-blob { will-change: transform; }
.wf-grad-blob-1 { animation: wfBlobDrift1 22s ease-in-out infinite; }
.wf-grad-blob-2 { animation: wfBlobDrift2 28s ease-in-out infinite; }
.wf-grad-blob-3 { animation: wfBlobDrift3 25s ease-in-out infinite; }

/* ── Parallax ─────────────────────────────────────────────────────────── */
.wf-parallax [data-wf-parallax] { will-change: transform; }
@keyframes wfScrollDot {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
.wf-scroll-hint > div { animation: wfScrollDot 2s ease-in-out infinite; }

/* ── Reveal on scroll ─────────────────────────────────────────────────── */
[data-wf-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
[data-wf-reveal].wf-in { opacity: 1; transform: none; }

/* ── Particles ────────────────────────────────────────────────────────── */
canvas[data-wf-particles] { display: block; }

/* ── Responsive tweaks ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Softer tilt on small screens, float kept but subtler. */
  @keyframes wfFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }
}

/* ── Reduced motion: disable all motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wf-float,
  .wf-grad-blob,
  .wf-scroll-hint > div { animation: none !important; }
  .wf-tilt,
  .wf-flip { transition: none !important; }
  .wf-flip { transform: none !important; }
  [data-wf-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}