/* ============================================================
   MAGARA TATTOO STUDIO — Animations & Effects
   Ink Universe · Purple Tattoo Realm
   ============================================================ */

/* ── Keyframes ── */

@keyframes preloaderFade {
  to { opacity: 1; }
}

@keyframes preloaderBar {
  to { width: 100%; }
}

@keyframes preloaderInk {
  to { height: 300px; opacity: 0.15; }
}

@keyframes preloaderExit {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-100%); }
}

@keyframes heroCharIn {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.90); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  45%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  55%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

@keyframes inkPulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.06; }
  33%       { transform: scale(1.05) rotate(2deg); opacity: 0.09; }
  66%       { transform: scale(0.96) rotate(-1deg); opacity: 0.05; }
}

@keyframes inkDrip {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: scaleY(1); transform-origin: top; opacity: 0.8; }
}

@keyframes inkSpread {
  0%   { transform: scale(0); opacity: 0.8; }
  100% { transform: scale(3); opacity: 0; }
}

@keyframes inkFloat {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0.8; }
  100% { transform: translateY(-120px) rotate(20deg); opacity: 0; }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(123,53,204,0.3); }
  50%       { box-shadow: 0 0 40px rgba(123,53,204,0.5), 0 0 80px rgba(123,53,204,0.2); }
}

@keyframes textGlow {
  0%, 100% {
    text-shadow: 0 0 20px rgba(200,170,238,0.3);
  }
  50% {
    text-shadow: 0 0 40px rgba(200,170,238,0.6), 0 0 80px rgba(155,93,222,0.3);
  }
}

@keyframes borderDraw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

@keyframes lineGrow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

@keyframes inkReveal {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0% 0 0); }
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75%      { opacity: 0; }
}

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

@keyframes rotateSlowly {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

@keyframes marqueeLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes inkDrop {
  0% {
    transform: translateY(-20px) scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    transform: translateY(0) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translateY(10px) scale(1.3);
    opacity: 0;
  }
}

@keyframes splatter {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx, 20px), var(--ty, -20px)) scale(0); opacity: 0; }
}

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

@keyframes cursorTrail {
  0% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
}

/* ── Utility Animation Classes ── */

.animate-fade-in {
  animation: fadeIn 0.6s var(--ease-out) forwards;
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s var(--ease-out) forwards;
}

.animate-slide-left {
  animation: slideInLeft 0.6s var(--ease-out) forwards;
}

.animate-slide-right {
  animation: slideInRight 0.6s var(--ease-out) forwards;
}

.animate-scale-in {
  animation: scaleIn 0.4s var(--ease-spring) forwards;
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.animate-glow {
  animation: glowPulse 3s ease-in-out infinite;
}

.animate-text-glow {
  animation: textGlow 3s ease-in-out infinite;
}

.animate-blink {
  animation: blink 1.2s step-end infinite;
}

.animate-spin-slow {
  animation: rotateSlowly 20s linear infinite;
}

/* Delay utilities */
.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; }
.delay-1000 { animation-delay: 1.0s; }
.delay-1200 { animation-delay: 1.2s; }

/* ── Ink Text Effect ── */
.ink-text {
  position: relative;
  display: inline-block;
}
.ink-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  color: var(--c-primary);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s var(--ease-out);
}
.ink-text:hover::after {
  clip-path: inset(0 0% 0 0);
}

/* ── Ink Underline Effect ── */
.ink-underline {
  position: relative;
  display: inline-block;
}
.ink-underline::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-primary-2), var(--c-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
  border-radius: 2px;
}
.ink-underline:hover::after { transform: scaleX(1); }
.ink-underline.active::after { transform: scaleX(1); }

/* ── Ink Stroke Heading ── */
.ink-stroke {
  -webkit-text-stroke: 1.5px var(--c-primary-2);
  color: transparent;
  transition: color 0.4s var(--ease), -webkit-text-stroke 0.4s var(--ease);
}
.ink-stroke:hover {
  color: var(--c-primary-2);
  -webkit-text-stroke: 0px;
}

/* ── Split Text Chars (hero animation) ── */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  animation: heroCharIn 0.7s var(--ease-spring) forwards;
}

/* ── Shimmer Skeleton ── */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--c-surface) 25%,
    var(--c-surface-2) 50%,
    var(--c-surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* ── Ink Particle (canvas particles use these classes) ── */
.ink-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: inkDrop 1.5s ease-out forwards;
}

/* ── Progress Bar ── */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-primary-2), var(--c-accent));
  z-index: 9999;
  transition: width 0.1s;
  box-shadow: 0 0 10px rgba(123,53,204,0.5);
}

/* ── Parallax layers ── */
.parallax-slow { will-change: transform; }
.parallax-med  { will-change: transform; }
.parallax-fast { will-change: transform; }

/* ── Hover Ink Burst ── */
.ink-burst {
  position: relative;
  overflow: visible;
}
.ink-burst::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123,53,204,0.25) 0%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
  pointer-events: none;
}
.ink-burst:hover::before { transform: scale(1); opacity: 1; }

/* ── Glow Text ── */
.glow-text {
  animation: textGlow 4s ease-in-out infinite;
}

/* ── Ink Bleed Heading (special hero decoration) ── */
.ink-bleed-wrap {
  position: relative;
  display: inline-block;
}
.ink-bleed-wrap::before {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: var(--c-primary);
  opacity: 0.04;
  filter: blur(24px);
  transform: scale(1.02) translateY(4px);
  pointer-events: none;
  user-select: none;
}

/* ── Liquid Glass Panel ── */
.glass-panel {
  background: rgba(26, 10, 46, 0.60);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(123,53,204,0.20);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 8px 32px rgba(0,0,0,0.40);
}

/* ── Hover tilt effect ── */
.tilt-card {
  transition: transform 0.3s var(--ease);
  transform-style: preserve-3d;
}

/* ── Wave text animation ── */
.wave-text .char:nth-child(1)  { animation-delay: 0.00s; }
.wave-text .char:nth-child(2)  { animation-delay: 0.05s; }
.wave-text .char:nth-child(3)  { animation-delay: 0.10s; }
.wave-text .char:nth-child(4)  { animation-delay: 0.15s; }
.wave-text .char:nth-child(5)  { animation-delay: 0.20s; }
.wave-text .char:nth-child(6)  { animation-delay: 0.25s; }
.wave-text .char:nth-child(7)  { animation-delay: 0.30s; }
.wave-text .char:nth-child(8)  { animation-delay: 0.35s; }
.wave-text .char:nth-child(9)  { animation-delay: 0.40s; }
.wave-text .char:nth-child(10) { animation-delay: 0.45s; }

.wave-text:hover .char {
  animation: waveText 0.5s ease-in-out both;
}

/* ── Noise Texture Overlay ── */
.noise-overlay {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* ── Ink splatter blobs ── */
.blob-bg {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: inkPulse 10s ease-in-out infinite;
}

.blob-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(123,53,204,0.15) 0%, transparent 70%);
  top: -10%; left: -15%;
  animation-delay: 0s;
}

.blob-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(155,93,222,0.12) 0%, transparent 70%);
  bottom: -10%; right: -10%;
  animation-delay: 3s;
}

.blob-3 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(200,170,238,0.08) 0%, transparent 70%);
  top: 40%; left: 40%;
  animation-delay: 6s;
}

/* ── SVG Ink Art Animations ── */
.ink-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: borderDraw 2s var(--ease-out) forwards;
}

.ink-fill {
  clip-path: inset(0 100% 0 0);
  animation: inkReveal 1s var(--ease-out) forwards;
}

/* ── Loading spinner (alternative to preloader) ── */
.spinner {
  width: 40px; height: 40px;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: rotateSlowly 0.8s linear infinite;
}

/* ── Scroll Progress Indicator ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-primary-2), var(--c-accent));
  z-index: 10000;
  transition: width 0.1s;
  box-shadow: 0 0 8px rgba(123,53,204,0.6);
}

/* ── Toast notifications ── */
.toast {
  position: fixed;
  bottom: 2rem; right: 2rem;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-2);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  font-size: 0.875rem;
  z-index: 9999;
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.4s var(--ease-spring), opacity 0.4s var(--ease-out);
  box-shadow: var(--glow-sm);
  max-width: 320px;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ── Focus styles ── */
:focus-visible {
  outline: 2px solid var(--c-primary-2);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ── Page transition ── */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--c-bg);
  z-index: 9000;
  pointer-events: none;
  transform: translateY(100%);
  transition: transform 0.5s var(--ease);
}
.page-transition.entering { transform: translateY(0); }
.page-transition.leaving  { transform: translateY(-100%); }

/* ── Hero ink drip decoration ── */
.hero-ink-decoration {
  position: absolute;
  right: 10%;
  top: 0;
  width: 300px;
  opacity: 0.15;
  pointer-events: none;
  animation: float 6s ease-in-out infinite;
}

/* ── Section number decoration ── */
.section-num {
  font-family: var(--f-head);
  font-size: 8rem;
  font-weight: 800;
  color: rgba(123,53,204,0.04);
  position: absolute;
  top: -2rem;
  right: 2rem;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* ── Horizontal scroll snap ── */
.scroll-snap-x {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
  gap: 1.5rem;
  scrollbar-width: none;
}
.scroll-snap-x::-webkit-scrollbar { display: none; }
.snap-item {
  scroll-snap-align: start;
  flex-shrink: 0;
}