/* ═══════════════════════════════════════════════════════════
   SEPEP — Animations & Micro-interactions
   ═══════════════════════════════════════════════════════════ */

/* ── Page Transitions ──────────────────────────────────────── */
.page-enter {
  animation: page-slide-in var(--duration-slow) var(--ease-spring) forwards;
}

.page-exit {
  animation: page-slide-out var(--duration-slow) var(--ease-smooth) forwards;
}

.page-enter-bottom {
  animation: page-slide-up var(--duration-slow) var(--ease-spring) forwards;
}

.page-exit-bottom {
  animation: page-slide-down var(--duration-slow) var(--ease-smooth) forwards;
}

@keyframes page-slide-in {
  from { transform: translateX(100%); opacity: 0.8; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes page-slide-out {
  from { transform: translateX(0);   opacity: 1; }
  to   { transform: translateX(-30%); opacity: 0; }
}

@keyframes page-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes page-slide-down {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

/* ── Fade ──────────────────────────────────────────────────── */
.fade-in {
  animation: fade-in var(--duration-base) var(--ease-smooth) forwards;
}

.fade-in-up {
  animation: fade-in-up var(--duration-slow) var(--ease-spring) forwards;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(16px);
  animation: fade-in-up var(--duration-slow) var(--ease-spring) forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 60ms; }
.stagger-children > *:nth-child(3) { animation-delay: 120ms; }
.stagger-children > *:nth-child(4) { animation-delay: 180ms; }
.stagger-children > *:nth-child(5) { animation-delay: 240ms; }
.stagger-children > *:nth-child(6) { animation-delay: 300ms; }
.stagger-children > *:nth-child(7) { animation-delay: 360ms; }
.stagger-children > *:nth-child(8) { animation-delay: 420ms; }

/* ── Scale Pop ─────────────────────────────────────────────── */
.scale-pop {
  animation: scale-pop var(--duration-base) var(--ease-spring) forwards;
}

@keyframes scale-pop {
  0%   { transform: scale(0.8); opacity: 0; }
  70%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Heart Like ────────────────────────────────────────────── */
.heart-burst {
  animation: heart-burst 0.5s var(--ease-spring) forwards;
}

@keyframes heart-burst {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.4); }
  50%  { transform: scale(1.2); }
  75%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ── Shimmer ───────────────────────────────────────────────── */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.06) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: shimmer-move 2s ease infinite;
}

@keyframes shimmer-move {
  100% { transform: translateX(100%); }
}

/* shimmer alias — skeleton loading için ── */
@keyframes shimmer {
  0%   { background-color: var(--surface-2); }
  50%  { background-color: var(--surface-3, #2c2c2e); }
  100% { background-color: var(--surface-2); }
}

/* ── Floating ──────────────────────────────────────────────── */
.floating {
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── Glass Morph Hover ─────────────────────────────────────── */
.glass-hover {
  transition: all var(--duration-base) var(--ease-smooth);
}

.glass-hover:hover {
  background: var(--glass-bg-light);
  border-color: var(--glass-border-strong);
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.12);
}

/* ── Press Scale ───────────────────────────────────────────── */
.press-scale {
  transition: transform var(--duration-fast) var(--ease-spring);
}

.press-scale:active { transform: scale(0.94); }

/* ── Spin ──────────────────────────────────────────────────── */
.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Pulse Ring ────────────────────────────────────────────── */
.pulse-ring {
  position: relative;
}

.pulse-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--blue);
  opacity: 0;
  animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
  0%   { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* ── Liquid Button ─────────────────────────────────────────── */
.liquid-btn {
  position: relative;
  overflow: hidden;
}

.liquid-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.liquid-btn:active::before {
  width: 200%;
  height: 200%;
  padding-bottom: 200%;
}

/* ── Number Counter ────────────────────────────────────────── */
.count-up {
  animation: count-up var(--duration-slowest) var(--ease-out) forwards;
}

@keyframes count-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Live Dot ──────────────────────────────────────────────── */
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
  animation: live-blink 1.2s ease infinite;
}

@keyframes live-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── Loading spinner ───────────────────────────────────────── */
.loader {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--surface-3);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loader-sm { width: 16px; height: 16px; border-width: 2px; }
.loader-lg { width: 36px; height: 36px; border-width: 3px; }

/* ── Story Progress ────────────────────────────────────────── */
.story-progress-bar {
  height: 2px;
  background: rgba(255,255,255,0.35);
  border-radius: 1px;
  flex: 1;
  overflow: hidden;
}

.story-progress-fill {
  height: 100%;
  background: white;
  border-radius: 1px;
  transform-origin: left;
  animation: story-timer 5s linear forwards;
}

@keyframes story-timer {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Notification bounce ───────────────────────────────────── */
.notif-bounce {
  animation: notif-bounce 0.4s var(--ease-spring);
}

@keyframes notif-bounce {
  0%  { transform: scale(1); }
  30% { transform: scale(1.25); }
  60% { transform: scale(0.95); }
  100%{ transform: scale(1); }
}

/* ── Swipe Hint ────────────────────────────────────────────── */
.swipe-hint {
  animation: swipe-hint 2s ease-in-out 1s 2 both;
}

@keyframes swipe-hint {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* ── Text Gradient Animate ─────────────────────────────────── */
.gradient-animate {
  background: linear-gradient(90deg, var(--blue), var(--purple), var(--pink), var(--blue));
  background-size: 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s ease infinite;
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Reveal animations ─────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-smooth),
              transform var(--duration-slow) var(--ease-spring);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Spring scale on tap ───────────────────────────────────── */
[data-press]:active {
  transform: scale(0.95);
  transition: transform 0.1s;
}

/* ── TikTok Stili Çift Tıklama Kalp Animasyonu ─────────────── */
@keyframes heartBurst {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 1; }
  40%  { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  70%  { transform: translate(-50%, -50%) scale(1.1); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}