/* ============================================================
   MORBID MYSTIQUE — ANIMATIONS
   Designed & developed by Novelio Technologies 2026
   ============================================================ */

/* ─── REDUCED MOTION GUARD ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-parallax-bg { transform: none !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ─── KEYFRAMES ──────────────────────────────────────────────── */

/* Loader */
@keyframes loaderReveal {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes loaderBar {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(0%); }
  100% { transform: translateX(110%); }
}

/* Hero entrance */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Float */
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-14px) rotate(1deg); }
  66%       { transform: translateY(-8px) rotate(-0.5deg); }
}

/* Badge float */
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

/* Scroll line pulse */
@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50%       { opacity: 1; transform: scaleY(1.15); }
}

/* Candle flame */
@keyframes flameDance {
  0%   { transform: skewX(-3deg) scaleX(1) scaleY(1); }
  25%  { transform: skewX(2deg) scaleX(0.95) scaleY(1.04); }
  50%  { transform: skewX(-1deg) scaleX(1.03) scaleY(0.97); }
  75%  { transform: skewX(3deg) scaleX(0.97) scaleY(1.06); }
  100% { transform: skewX(-2deg) scaleX(1.01) scaleY(1.02); }
}
@keyframes flameInner {
  0%   { transform: scaleX(0.9) scaleY(1.1); opacity: 0.8; }
  50%  { transform: scaleX(1.05) scaleY(0.92); opacity: 1; }
  100% { transform: scaleX(0.95) scaleY(1.05); opacity: 0.9; }
}
@keyframes flameGlow {
  0%, 100% { filter: blur(8px); opacity: 0.4; }
  50%       { filter: blur(12px); opacity: 0.65; }
}

/* Marquee */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Connector slide */
@keyframes connectorSlide {
  0%   { left: 0%; opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Sticky button bounce */
@keyframes smbtnBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* Fade in up */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

/* Pulse ring */
@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Rotate slow */
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Scale in */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* Slide in left */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Slide in right */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Star twinkle */
@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50%       { opacity: 1; transform: scale(1.2); }
}

/* Underline grow */
@keyframes underlineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Typing cursor blink */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─── UTILITY ANIMATION CLASSES ──────────────────────────────── */

/* Float animation classes */
.animate-float     { animation: floatY 6s ease-in-out infinite; }
.animate-float-sm  { animation: floatY 4.5s ease-in-out infinite; }
.animate-float-lg  { animation: floatY 8s ease-in-out infinite; }
.animate-float-2   { animation: floatY 7s ease-in-out 1s infinite; }
.animate-float-3   { animation: floatY 9s ease-in-out 2s infinite; }

/* Entrance classes */
.animate-fade-in      { animation: fadeIn 0.6s ease forwards; }
.animate-fade-up      { animation: fadeInUp 0.7s ease forwards; }
.animate-scale-in     { animation: scaleIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.animate-slide-left   { animation: slideInLeft 0.7s ease forwards; }
.animate-slide-right  { animation: slideInRight 0.7s ease forwards; }

/* Delay classes */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* ─── SHIMMER TEXT ────────────────────────────────────────────── */
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--color-accent-light) 0%,
    var(--color-accent) 30%,
    #fff8e7 50%,
    var(--color-accent) 70%,
    var(--color-accent-light) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3.5s linear infinite;
}

/* ─── GLOW PULSE ─────────────────────────────────────────────── */
.glow-pulse {
  position: relative;
}
.glow-pulse::before {
  content: '';
  position: absolute; inset: -8px;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, rgba(201,169,110,0.2) 0%, transparent 70%);
  animation: pulseRing 2.5s ease-out infinite;
  pointer-events: none;
}

/* ─── PARTICLE CANVAS ────────────────────────────────────────── */
#particle-canvas {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: 0.7;
}

/* ─── HERO PARTICLES (CSS backup) ───────────────────────────── */
.star-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--color-accent);
  pointer-events: none;
  animation: twinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* ─── GLASSMORPHISM HOVER ────────────────────────────────────── */
.glass-hover {
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}
.glass-hover:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(201,169,110,0.35);
  box-shadow: var(--shadow-glow);
  transform: translateY(-4px);
}

/* ─── PARALLAX LAYERS ────────────────────────────────────────── */
.parallax-layer { will-change: transform; }
.parallax-slow  { transition: transform 0.1s linear; }
.parallax-mid   { transition: transform 0.05s linear; }
.parallax-fast  { transition: transform 0.02s linear; }

/* ─── MAGNETIC BUTTON ────────────────────────────────────────── */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  display: inline-flex;
}

/* ─── PAGE TRANSITION ────────────────────────────────────────── */
.page-transition {
  position: fixed; inset: 0;
  background: var(--color-primary);
  z-index: calc(var(--z-loader) - 1);
  transform: scaleY(0); transform-origin: bottom;
  pointer-events: none;
}
.page-transition.entering {
  animation: pageEnter 0.5s cubic-bezier(0.76,0,0.24,1) forwards;
}
.page-transition.leaving {
  animation: pageLeave 0.5s cubic-bezier(0.76,0,0.24,1) 0.1s forwards;
}
@keyframes pageEnter {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}
@keyframes pageLeave {
  from { transform: scaleY(1); transform-origin: top; }
  to   { transform: scaleY(0); transform-origin: top; }
}

/* ─── HOVER LIFT ─────────────────────────────────────────────── */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  cursor: pointer;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* ─── STAGGER GROUP ──────────────────────────────────────────── */
.stagger-group .reveal:nth-child(1) { transition-delay: 0.05s; }
.stagger-group .reveal:nth-child(2) { transition-delay: 0.15s; }
.stagger-group .reveal:nth-child(3) { transition-delay: 0.25s; }
.stagger-group .reveal:nth-child(4) { transition-delay: 0.35s; }
.stagger-group .reveal:nth-child(5) { transition-delay: 0.45s; }
.stagger-group .reveal:nth-child(6) { transition-delay: 0.55s; }

/* ─── TOPBAR SHIMMER ─────────────────────────────────────────── */
.topbar-promo {
  position: relative; overflow: hidden;
}
.topbar-promo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(201,169,110,0.12) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 4s linear infinite;
  pointer-events: none;
}

/* ─── COUNTER ANIMATION ──────────────────────────────────────── */
.count-up {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* ─── ACCORDION ANIMATION ────────────────────────────────────── */
.accordion-enter {
  animation: fadeInUp 0.3s ease forwards;
}

/* ─── PRODUCT CARD 3D ────────────────────────────────────────── */
.card-3d {
  transform-style: preserve-3d;
  perspective: 1000px;
}
.card-3d:hover {
  transform: perspective(800px) rotateX(4deg) rotateY(-4deg) translateZ(8px);
}

/* ─── GOLD BORDER ANIMATION ──────────────────────────────────── */
@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(201,169,110,0.2); }
  50%       { box-shadow: 0 0 20px rgba(201,169,110,0.4), 0 0 40px rgba(201,169,110,0.15); }
}
.border-glow-anim { animation: borderGlow 2.5s ease-in-out infinite; }

/* ─── SMOKE / MIST CSS BACKUP ────────────────────────────────── */
@keyframes smokeRise {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.15; }
  50%  { transform: translateY(-60px) translateX(10px) scale(1.3); opacity: 0.08; }
  100% { transform: translateY(-120px) translateX(-5px) scale(1.6); opacity: 0; }
}
.smoke-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(201,169,110,0.15) 0%, transparent 70%);
  pointer-events: none;
  animation: smokeRise var(--dur, 5s) ease-out var(--delay, 0s) infinite;
  filter: blur(8px);
}