/* ═══════════════════════════════════════════════════════════════════════════
   effects.css — Premium animations & 3D effects for Stiletto Womanhood™
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SCROLL REVEAL ──────────────────────────────────────────────────────────── */
.sw-up, .sw-left, .sw-right, .sw-scale, .sw-fade {
  opacity: 0;
  transition: all 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.sw-up { transform: translateY(50px); }
.sw-left { transform: translateX(-50px); }
.sw-right { transform: translateX(50px); }
.sw-scale { transform: scale(0.92); }
.sw-fade { opacity: 0; transform: none; }

.sw-up.visible, .sw-left.visible, .sw-right.visible, .sw-scale.visible, .sw-fade.visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* SW Stagger children delay */
.sw-stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.sw-stagger.visible > *:nth-child(2) { transition-delay: 0.08s; }
.sw-stagger.visible > *:nth-child(3) { transition-delay: 0.16s; }
.sw-stagger.visible > *:nth-child(4) { transition-delay: 0.24s; }
.sw-stagger.visible > *:nth-child(5) { transition-delay: 0.32s; }
.sw-stagger.visible > *:nth-child(6) { transition-delay: 0.40s; }
.sw-stagger.visible > *:nth-child(7) { transition-delay: 0.48s; }
.sw-stagger.visible > *:nth-child(8) { transition-delay: 0.56s; }

/* ── 3D TILT ───────────────────────────────────────────────────────────────── */
.tilt-3d {
  transition: transform 0.15s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* ── PARALLAX ──────────────────────────────────────────────────────────────── */
.parallax-wrap { overflow: hidden; position: relative; }
.parallax-wrap img { transition: transform 0.1s linear; will-change: transform; }

/* ── MAGNETIC BUTTONS ──────────────────────────────────────────────────────── */
.btn-magnetic {
  transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}

/* ── PREMIUM SHIMMER BUTTON (cursor-aware) ────────────────────────────────── */
.btn-premium {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--jade-teal), var(--jade-teal-strong));
  z-index: 1;
}
.btn-premium::before {
  content: '';
  position: absolute;
  top: var(--shine-y, -100%);
  left: var(--shine-x, -100%);
  width: 300%;
  height: 300%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.25) 0%, transparent 60%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}

/* ── 3D FLOATING ────────────────────────────────────────────────────────────── */
.float-3d {
  transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}

/* ── FLOATING ANIMATIONS ──────────────────────────────────────────────────── */
.float-y {
  animation: floatY 5s ease-in-out infinite;
}
.float-y-slow {
  animation: floatY 7s ease-in-out infinite;
}
.float-y-fast {
  animation: floatY 3s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* ── GLOW PULSE ───────────────────────────────────────────────────────────── */
.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(61, 158, 140, 0.25); }
  50% { box-shadow: 0 0 45px rgba(61, 158, 140, 0.5); }
}

/* ── GRADIENT TEXT ────────────────────────────────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, var(--jade-teal) 0%, var(--coral) 50%, var(--amber) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-jade {
  background: linear-gradient(135deg, var(--jade-teal), #6DC5B5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-coral {
  background: linear-gradient(135deg, var(--coral), #F0A090);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── IMAGE ZOOM ON HOVER ──────────────────────────────────────────────────── */
.img-zoom-wrap { overflow: hidden; }
.img-zoom-wrap img { transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1); }
.img-zoom-wrap:hover img { transform: scale(1.06); }

/* ── BORDER GLOW ──────────────────────────────────────────────────────────── */
.border-glow {
  transition: box-shadow 0.3s;
}
.border-glow:hover {
  box-shadow: 0 0 0 2px var(--jade-teal), 0 0 20px rgba(61, 158, 140, 0.2);
}

/* ── ANIMATED GRADIENT MESH BACKGROUND ────────────────────────────────────── */
.bg-mesh {
  background: linear-gradient(-45deg, var(--deep-navy), #1a2a4a, var(--jade-teal), var(--deep-navy));
  background-size: 400% 400%;
  animation: meshShift 20s ease infinite;
}
.bg-mesh-light {
  background: linear-gradient(-45deg, var(--off-white), #f0f7f5, #faf0ee, var(--off-white));
  background-size: 400% 400%;
  animation: meshShift 20s ease infinite;
}
@keyframes meshShift {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

/* ── HERO ENTRANCE (initial load) ──────────────────────────────────────────── */
.hero-entrance {
  animation: heroEntrance 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes heroEntrance {
  from { opacity: 0; transform: translateY(30px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── CARD LIFT (smooth hover) ─────────────────────────────────────────────── */
.card-lift {
  transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1),
              box-shadow 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(28, 39, 68, 0.15);
}

/* ── SCALE IN ──────────────────────────────────────────────────────────────── */
.scale-in {
  transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}
.scale-in:hover {
  transform: scale(1.03);
}

/* ── ROTATE GENTLE (for icons) ────────────────────────────────────────────── */
.rotate-gentle {
  transition: transform 0.5s;
}
.rotate-gentle:hover {
  transform: rotate(5deg) scale(1.1);
}

/* ── SHIMMER LINE (loading shimmer) ────────────────────────────────────────── */
.shimmer-line {
  background: linear-gradient(90deg, transparent, rgba(61, 158, 140, 0.08), transparent);
  background-size: 200% 100%;
  animation: shimmerLine 2s infinite;
}
@keyframes shimmerLine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── CURSOR GLOW CONTAINER ────────────────────────────────────────────────── */
.cursor-glow {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
}

/* ── REDUCED MOTION ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sw-up, .sw-left, .sw-right, .sw-scale, .sw-fade { opacity: 1; transform: none; }
  .sw-stagger.visible > * { transition-delay: 0s !important; }
  .tilt-3d { transform: none !important; }
  .float-y, .float-y-slow, .float-y-fast { animation: none; }
  .bg-mesh, .bg-mesh-light { animation: none; }
  .cursor-glow { display: none; }
}