/* =====================================================
   Trend Dres - Animasyonlar
   ===================================================== */

/* ============ REVEAL ============ */
.reveal-up     { opacity: 0; transform: translateY(40px); transition: all .8s var(--ease); }
.reveal-down   { opacity: 0; transform: translateY(-40px); transition: all .8s var(--ease); }
.reveal-left   { opacity: 0; transform: translateX(-60px); transition: all .8s var(--ease); }
.reveal-right  { opacity: 0; transform: translateX(60px); transition: all .8s var(--ease); }
.reveal-scale  { opacity: 0; transform: scale(.92); transition: all .8s var(--ease); }
.reveal-rotate { opacity: 0; transform: rotate(-8deg) translateY(30px); transition: all 1s var(--ease); }

.reveal-up.in,
.reveal-down.in,
.reveal-left.in,
.reveal-right.in,
.reveal-scale.in,
.reveal-rotate.in {
  opacity: 1;
  transform: none;
}

/* Stagger (children) */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
  transition: all .6s var(--ease);
}
.stagger-children.in > *           { opacity: 1; transform: none; }
.stagger-children.in > *:nth-child(1) { transition-delay: .05s; }
.stagger-children.in > *:nth-child(2) { transition-delay: .15s; }
.stagger-children.in > *:nth-child(3) { transition-delay: .25s; }
.stagger-children.in > *:nth-child(4) { transition-delay: .35s; }
.stagger-children.in > *:nth-child(5) { transition-delay: .45s; }
.stagger-children.in > *:nth-child(6) { transition-delay: .55s; }
.stagger-children.in > *:nth-child(7) { transition-delay: .65s; }
.stagger-children.in > *:nth-child(8) { transition-delay: .75s; }

/* ============ SHIMMER / GLITTER ============ */
.shimmer {
  position: relative;
  overflow: hidden;
}
.shimmer::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5), transparent 70%);
  animation: shimmerMove 3s infinite;
}
@keyframes shimmerMove {
  0%   { left: -60%; }
  100% { left: 120%; }
}

/* ============ TEXT GRADIENT ANIMATION ============ */
.text-gradient {
  background: linear-gradient(90deg, var(--rose-500), var(--gold), var(--rose-500));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 4s linear infinite;
}
@keyframes gradientShift {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}

/* ============ HEART POP ============ */
@keyframes heartPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); }
  60%  { transform: scale(.9); }
  100% { transform: scale(1); }
}
.heart-pop { animation: heartPop .6s var(--ease); }

/* Flying heart */
.flying-heart {
  position: fixed; z-index: 2000;
  pointer-events: none;
  color: var(--rose-500);
  font-size: 1.8rem;
  animation: flyHeart 1s ease-out forwards;
}
@keyframes flyHeart {
  0%   { transform: scale(1) translateY(0); opacity: 1; }
  100% { transform: scale(1.8) translateY(-80px); opacity: 0; }
}

/* ============ BUTTON RIPPLE ============ */
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.5);
  transform: scale(0); opacity: 1;
  animation: ripple .7s ease-out;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

/* ============ IMAGE HOVER LIGHT ============ */
.img-light-sweep {
  position: relative; overflow: hidden;
}
.img-light-sweep::before {
  content: ''; position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%; z-index: 3;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 100%);
  transform: skewX(-25deg);
  transition: left .7s;
}
.img-light-sweep:hover::before { left: 125%; }

/* ============ FLOATING ICONS ============ */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(3deg); }
}
.float-slow { animation: floatSlow 4s ease-in-out infinite; }

/* ============ GLOW PULSE ============ */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236,64,122,.4); }
  50%      { box-shadow: 0 0 0 20px rgba(236,64,122,0); }
}
.glow-pulse { animation: glowPulse 2s infinite; }

/* ============ COUNTER FADE ============ */
@keyframes counterFade {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* ============ FADE IN ============ */
.fade-in { animation: fadeIn .6s var(--ease) both; }

/* ============ WIGGLE ============ */
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-3deg); }
  75%      { transform: rotate(3deg); }
}
.wiggle:hover { animation: wiggle .5s ease-in-out; }

/* ============ FLOWER SPIN ============ */
@keyframes flowerSpin {
  0%   { transform: rotate(0) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ============ SPARKLE TEXT ============ */
.sparkle-text {
  position: relative;
  display: inline-block;
}
.sparkle-text::before,
.sparkle-text::after {
  content: '✧'; position: absolute;
  color: var(--gold);
  animation: sparkleTwinkle 2s ease-in-out infinite;
}
.sparkle-text::before { top: -10px; left: -20px; animation-delay: 0s; }
.sparkle-text::after  { bottom: -10px; right: -20px; animation-delay: 1s; }
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50%      { opacity: 1; transform: scale(1); }
}

/* ============ CURSOR TRAIL ============ */
.cursor-trail {
  position: fixed; pointer-events: none;
  width: 6px; height: 6px;
  background: var(--rose-400); border-radius: 50%;
  z-index: 9998; opacity: .6;
  transition: transform .15s ease-out;
  mix-blend-mode: multiply;
}

/* ============ PRODUCT CARD ADD-FAV PULSE ============ */
.fav-added { animation: favPulse .5s ease-out; }
@keyframes favPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); background: var(--rose-500); color: #fff; }
  100% { transform: scale(1); }
}

/* ============ PAGE TRANSITION ============ */
.page-enter { animation: pageEnter .6s var(--ease) both; }
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* ============ MARQUEE LIST ============ */
.ticker {
  display: flex; gap: 40px;
  animation: marquee 25s linear infinite;
  width: max-content;
}