/* =====================================================
   DIJITAL DENEYIM — animations.css
   ===================================================== */

/* ---- Reveal on scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.revealed { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ---- Confetti keyframe (used by JS) ---- */
@keyframes fall {
  to { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}
@keyframes heartRain {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(110vh) scale(.5); opacity: 0; }
}
@keyframes starTwinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: .4; transform: scale(.6) rotate(180deg); }
}
@keyframes balloonRise {
  0% { transform: translateY(110vh); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(-10vh); opacity: 0; }
}
@keyframes lightPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.7); }
}
@keyframes petalFall {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translateY(115vh) rotate(540deg) scale(.7); opacity: 0; }
}

/* ---- Envelope animation ---- */
@keyframes envelopeOpen {
  0% { transform: rotateX(0); }
  100% { transform: rotateX(-180deg); }
}
@keyframes cardRise {
  0% { transform: translateX(-50%) translateY(60px); opacity: 0; }
  100% { transform: translateX(-50%) translateY(-16px); opacity: 1; }
}

/* ---- Shake (error) ---- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.shake { animation: shake .4s ease; }

/* ---- Bounce ---- */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}
.bounce { animation: bounce .6s ease; }

/* ---- Fade in ---- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.anim-fadein { animation: fadeIn .4s ease both; }

/* ---- Scale in ---- */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: scale(1); }
}
.anim-scalein { animation: scaleIn .35s ease both; }

/* ---- Slide up ---- */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}
.anim-slideup { animation: slideUp .5s ease both; }

/* ---- Pulse ring ---- */
@keyframes pulseRing {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(215,174,91,.5); }
  70% { transform: scale(1.02); box-shadow: 0 0 0 12px rgba(215,174,91,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(215,174,91,0); }
}
.pulse-ring { animation: pulseRing 2s ease infinite; }

/* ---- Shimmer (loading skeleton) ---- */
@keyframes shimmer {
  from { background-position: -400px 0; }
  to { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--line) 25%, var(--card2) 50%, var(--line) 75%);
  background-size: 400px;
  animation: shimmer 1.4s infinite linear;
  border-radius: 8px;
}

/* ---- Phone float (hero) ---- */
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-14px) rotate(var(--rot, 0deg)); }
}

/* ---- Gold glow ---- */
@keyframes goldGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(215,174,91,.25); }
  50% { box-shadow: 0 0 40px rgba(215,174,91,.5); }
}
.gold-glow { animation: goldGlow 3s ease infinite; }

/* ---- Typing dots ---- */
@keyframes dot1 { 0%,20%{opacity:.3}40%{opacity:1}100%{opacity:.3} }
@keyframes dot2 { 0%,30%{opacity:.3}50%{opacity:1}100%{opacity:.3} }
@keyframes dot3 { 0%,40%{opacity:.3}60%{opacity:1}100%{opacity:.3} }
.typing-dot:nth-child(1) { animation: dot1 1.4s infinite; }
.typing-dot:nth-child(2) { animation: dot2 1.4s infinite; }
.typing-dot:nth-child(3) { animation: dot3 1.4s infinite; }

/* ---- Gradient text ---- */
.gradient-text {
  background: linear-gradient(135deg, var(--gold3), var(--gold), #c98f1a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Wave (section divider) ---- */
.wave-divider { overflow: hidden; line-height: 0; }
.wave-divider svg { display: block; }

/* ---- Premium hover lift ---- */
@keyframes premiumLift {
  0%   { transform: translateY(0) scale(1); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
  100% { transform: translateY(-6px) scale(1.02); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
}

/* ---- Spring scale ---- */
@keyframes springIn {
  0%   { transform: scale(.85); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  80%  { transform: scale(.98); }
  100% { transform: scale(1); }
}

/* ---- Card shimmer ---- */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ---- Glow pulse ---- */
@keyframes glowPulse2 {
  0%,100% { box-shadow: 0 0 20px rgba(215,174,91,.15); }
  50%      { box-shadow: 0 0 40px rgba(215,174,91,.4), 0 0 80px rgba(215,174,91,.1); }
}