/* ============================================================
   VICTOR & TAILORS — animations.css
   Scroll-triggered · Entrance · Hover · Micro-interactions
   ============================================================ */

/* ============================
   SCROLL-REVEAL BASE STATES
   ============================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
              transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Stagger delays for child elements */
.stagger-children > *:nth-child(1)  { transition-delay: 0ms; }
.stagger-children > *:nth-child(2)  { transition-delay: 100ms; }
.stagger-children > *:nth-child(3)  { transition-delay: 200ms; }
.stagger-children > *:nth-child(4)  { transition-delay: 300ms; }
.stagger-children > *:nth-child(5)  { transition-delay: 400ms; }
.stagger-children > *:nth-child(6)  { transition-delay: 500ms; }
.stagger-children > *:nth-child(7)  { transition-delay: 600ms; }
.stagger-children > *:nth-child(8)  { transition-delay: 700ms; }

/* ============================
   GOLD LINE DRAW
   ============================ */
.line-draw {
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 2px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.line-draw.visible { transform: scaleX(1); }

/* ============================
   COUNTER ANIMATION
   ============================ */
.counter-num {
  display: inline-block;
  transition: none;
}

/* ============================
   PROGRESS BARS
   ============================ */
.progress-bar-wrap {
  background: var(--neutral-200);
  border-radius: var(--radius-pill);
  height: 8px;
  overflow: hidden;
  margin-top: 8px;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: var(--radius-pill);
  width: 0%;
  transition: width 1.2s cubic-bezier(0.16,1,0.3,1);
}

/* ============================
   PAGE TRANSITION
   ============================ */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--primary);
  z-index: 99990;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.page-transition-overlay.fade-out {
  opacity: 1;
  pointer-events: all;
}

/* ============================
   GOLD DUST PARTICLES
   ============================ */
.particles-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: particle-float var(--dur, 6s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes particle-float {
  0%   { opacity: 0; transform: translateY(100px) translateX(0) scale(0); }
  10%  { opacity: 0.6; }
  80%  { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-100px) translateX(var(--drift, 30px)) scale(1.5); }
}

/* ============================
   SPLIT TEXT CHARS
   ============================ */
.split-word {
  overflow: hidden;
  display: inline-block;
}
.split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.split-char.visible { opacity: 1; transform: translateY(0); }

/* ============================
   FLOATING SCISSORS BG
   ============================ */
.bg-scissors {
  position: absolute;
  right: 5%;
  top: 20%;
  opacity: 0.04;
  animation: scissors-bg 8s ease-in-out infinite;
  pointer-events: none;
  color: var(--white);
}
@keyframes scissors-bg {
  0%,100% { transform: rotate(-15deg) scale(1); }
  50%      { transform: rotate(15deg) scale(1.05); }
}

/* ============================
   SHIMMER EFFECT
   ============================ */
.shimmer {
  position: relative;
  overflow: hidden;
}
.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: shimmer-move 3s ease-in-out infinite 2s;
}
@keyframes shimmer-move {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ============================
   HOVER GLOW
   ============================ */
.hover-glow {
  transition: box-shadow var(--transition-med);
}
.hover-glow:hover {
  box-shadow: var(--shadow-gold) !important;
}

/* ============================
   TYPING CURSOR
   ============================ */
.typing-cursor::after {
  content: '|';
  color: var(--accent);
  animation: cursor-blink 1s step-end infinite;
}
@keyframes cursor-blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ============================
   STAR RATING ANIMATION
   ============================ */
.stars-animate .star {
  opacity: 0;
  transform: scale(0) rotate(-30deg);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.stars-animate.visible .star:nth-child(1) { opacity: 1; transform: scale(1) rotate(0); transition-delay: 0ms; }
.stars-animate.visible .star:nth-child(2) { opacity: 1; transform: scale(1) rotate(0); transition-delay: 80ms; }
.stars-animate.visible .star:nth-child(3) { opacity: 1; transform: scale(1) rotate(0); transition-delay: 160ms; }
.stars-animate.visible .star:nth-child(4) { opacity: 1; transform: scale(1) rotate(0); transition-delay: 240ms; }
.stars-animate.visible .star:nth-child(5) { opacity: 1; transform: scale(1) rotate(0); transition-delay: 320ms; }

/* ============================
   BUTTON LOADING SPINNER
   ============================ */
.btn-loading {
  pointer-events: none;
  opacity: 0.8;
}
.btn-loading::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================
   PULSE RING
   ============================ */
.pulse-ring {
  position: relative;
  display: inline-flex;
}
.pulse-ring::before,
.pulse-ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: pulse-ring-anim 2s ease-out infinite;
}
.pulse-ring::after { animation-delay: 0.6s; }
@keyframes pulse-ring-anim {
  0%   { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ============================
   TILT CARD
   ============================ */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.1s ease;
}

/* ============================
   GRADIENT TEXT
   ============================ */
.gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 50%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: gradient-flow 4s linear infinite;
}
@keyframes gradient-flow {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ============================
   GOLD BORDER DRAW ON HOVER
   ============================ */
.border-draw {
  position: relative;
}
.border-draw::before,
.border-draw::after {
  content: '';
  position: absolute;
  background: var(--accent);
  transition: width 0.4s ease, height 0.4s ease;
}
.border-draw::before {
  top: 0; left: 0;
  height: 2px; width: 0%;
}
.border-draw::after {
  bottom: 0; right: 0;
  height: 2px; width: 0%;
}
.border-draw:hover::before,
.border-draw:hover::after { width: 100%; }

/* ============================
   SECTION ENTRANCE
   ============================ */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slide-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes zoom-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}