/* ═══════════════════════════════════════════════════════════════════════
   INKTASTIC — LIQUID ANIMATIONS v3
   Warm editorial publishing house aesthetic · Gold accent system
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Background blobs — organic float ─────────────────────────────── */
@keyframes blobFloat1 {
  0%,100% { transform: translate(0,0)      scale(1)    rotate(0deg); }
  20%     { transform: translate(50px,-70px) scale(1.06) rotate(4deg); }
  45%     { transform: translate(-35px,45px) scale(0.94) rotate(-3deg); }
  70%     { transform: translate(25px,30px)  scale(1.04) rotate(2deg); }
}
@keyframes blobFloat2 {
  0%,100% { transform: translate(0,0)       scale(1)    rotate(0deg); }
  30%     { transform: translate(-55px,50px) scale(1.08) rotate(-6deg); }
  65%     { transform: translate(40px,-55px) scale(0.93) rotate(5deg); }
}
@keyframes blobFloat3 {
  0%,100% { transform: translate(0,0)       scale(1); }
  35%     { transform: translate(70px,25px)  scale(1.1); }
  75%     { transform: translate(-50px,-35px) scale(0.91); }
}
@keyframes blobFloat4 {
  0%,100% { transform: translate(0,0)        scale(1)    rotate(0deg); }
  55%     { transform: translate(-65px,55px)  scale(1.05) rotate(9deg); }
}

.b1 { animation: blobFloat1 20s ease-in-out infinite; }
.b2 { animation: blobFloat2 25s ease-in-out infinite; }
.b3 { animation: blobFloat3 30s ease-in-out infinite; }
.b4 { animation: blobFloat4 22s ease-in-out infinite; }

/* ─── Glass shimmer sweep ────────────────────────────────────────────── */
@keyframes shimmerPass {
  0%   { transform: translateX(-140%) skewX(-18deg); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(240%) skewX(-18deg); opacity: 0; }
}

.glass-shimmer { position: relative; overflow: hidden; }
.glass-shimmer::after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.06) 40%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.06) 60%,
    transparent 100%
  );
  pointer-events: none;
  animation: shimmerPass 9s ease-in-out infinite;
}

.glass-shimmer:nth-child(2)::after { animation-delay: 1.2s; }
.glass-shimmer:nth-child(3)::after { animation-delay: 2.4s; }
.glass-shimmer:nth-child(4)::after { animation-delay: 3.6s; }
.glass-shimmer:nth-child(5)::after { animation-delay: 4.8s; }
.glass-shimmer:nth-child(6)::after { animation-delay: 6.0s; }

/* ─── Ripple on click ────────────────────────────────────────────────── */
.liquid-btn { position: relative; overflow: hidden; }

@keyframes liquidRipple {
  0%   { transform: scale(0); opacity: 0.45; }
  100% { transform: scale(5.5); opacity: 0; }
}
.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(184,144,42,0.25);
  width: 64px; height: 64px;
  margin-left: -32px; margin-top: -32px;
  pointer-events: none;
  animation: liquidRipple 0.75s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
  z-index: 10;
}

/* ─── Floating elements ──────────────────────────────────────────────── */
@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
@keyframes floatYSlow {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-7px) rotate(1deg); }
}
.float-anim { animation: floatY 4s ease-in-out infinite; }
.float-slow { animation: floatYSlow 6.5s ease-in-out infinite; }

/* ─── Gold pulse glow ────────────────────────────────────────────────── */
@keyframes pulseBlue {
  0%,100% { box-shadow: 0 0 20px rgba(184,144,42,0.22), 0 0 40px rgba(184,144,42,0.08); }
  50%     { box-shadow: 0 0 44px rgba(184,144,42,0.55), 0 0 88px rgba(184,144,42,0.20); }
}
.pulse-gold  { animation: pulseBlue 3s ease-in-out infinite; }
.pulse-blue  { animation: pulseBlue 3s ease-in-out infinite; }
.pulse-accent{ animation: pulseBlue 3s ease-in-out infinite; }

/* ─── Ink pulse ──────────────────────────────────────────────────────── */
@keyframes pulseIndigo {
  0%,100% { box-shadow: 0 0 16px rgba(28,21,16,0.2); }
  50%     { box-shadow: 0 0 36px rgba(28,21,16,0.5); }
}
.pulse-indigo { animation: pulseIndigo 3.5s ease-in-out infinite; }

/* ─── Flowing gradient (badges, CTAs) ───────────────────────────────── */
@keyframes gradientFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-flow {
  background-size: 250% 250%;
  animation: gradientFlow 5s ease infinite;
}

/* ─── Iridescent hover border — warm gold/amber spectrum ────────────── */
@keyframes iridescenceSpin {
  from { background-position: 0% 50%; }
  to   { background-position: 400% 50%; }
}
.iridescent-border { position: relative; }
.iridescent-border::before {
  content: '';
  position: absolute; inset: -1.5px;
  border-radius: inherit;
  background: linear-gradient(90deg,
    #B8902A, #D4A840, #C9A050, #E8C060, #B8902A, #D4A840, #B8902A
  );
  background-size: 400% 100%;
  animation: iridescenceSpin 5s linear infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.iridescent-border:hover::before { opacity: 0 !important; } /* disabled per UX cleanup */

/* ─── Logo icon pulse ────────────────────────────────────────────────── */
@keyframes logoPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(184,144,42,0.35); }
  50%     { box-shadow: 0 0 0 10px rgba(184,144,42,0); }
}
.logo-icon { animation: none !important; }

/* ─── 3D tilt card ───────────────────────────────────────────────────── */
.liquid-card {
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.liquid-card:hover { transform: translateZ(0); }

/* ─── Scroll reveal ──────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.75s cubic-bezier(0.25,0.46,0.45,0.94);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Stagger delays ─────────────────────────────────────────────────── */
.stagger > *         { opacity: 0; transform: translateY(28px); transition: opacity 0.65s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.65s cubic-bezier(0.25,0.46,0.45,0.94); }
.stagger > *.visible { opacity: 1; transform: translateY(0); }
.stagger > *:nth-child(1) { transition-delay: 0.04s; }
.stagger > *:nth-child(2) { transition-delay: 0.10s; }
.stagger > *:nth-child(3) { transition-delay: 0.16s; }
.stagger > *:nth-child(4) { transition-delay: 0.22s; }
.stagger > *:nth-child(5) { transition-delay: 0.28s; }
.stagger > *:nth-child(6) { transition-delay: 0.34s; }
.stagger > *:nth-child(7) { transition-delay: 0.40s; }
.stagger > *:nth-child(8) { transition-delay: 0.46s; }
.stagger > *:nth-child(9) { transition-delay: 0.52s; }

/* ─── Stat pop in ────────────────────────────────────────────────────── */
@keyframes statPop {
  0%   { transform: scale(0.75); opacity: 0; }
  70%  { transform: scale(1.07); }
  100% { transform: scale(1);    opacity: 1; }
}
.stat-pop { animation: statPop 0.55s cubic-bezier(0.34,1.56,0.64,1) both; }

/* ─── Page load fade ─────────────────────────────────────────────────── */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
body { animation: pageFadeIn 0.45s ease both; }

/* ─── Cursor glow — warm gold ────────────────────────────────────────── */
#cursor-glow {
  position: fixed; pointer-events: none; z-index: 9000;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(184,144,42,0.04) 0%, rgba(28,21,16,0.02) 50%, transparent 70%);
  transform: translate(-50%,-50%);
  top: 0; left: 0;
  transition: width 0.4s, height 0.4s;
  mix-blend-mode: multiply;
}

/* ─── Nav must never clip dropdowns ─────────────────────────────────── */
nav { overflow: visible !important; }

/* ─── Liquid wave underline on nav links — gold ─────────────────────── */
.nav-links a, .nav-right a {
  position: relative;
}
.nav-links a::after, .nav-right a::after {
  content: '';
  position: absolute; bottom: -2px; left: 0;
  width: 100%; height: 1.5px;
  background: linear-gradient(90deg, transparent, #B8902A, transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}
.nav-links a:hover::after, .nav-right a:hover::after,
.nav-links a.active::after, .nav-right a.active::after { transform: scaleX(1); }

/* ─── Section reveal wrapper ─────────────────────────────────────────── */
section { position: relative; z-index: 1; }

/* ─── Animated hero badge — gold shimmer ────────────────────────────── */
@keyframes badgeShine {
  0%,100% { background-position: 200% center; }
  50%     { background-position: -200% center; }
}
.hero-badge {
  background: linear-gradient(90deg,
    rgba(184,144,42,0.10) 0%,
    rgba(212,168,64,0.22) 40%,
    rgba(184,144,42,0.10) 60%,
    rgba(212,168,64,0.08) 100%
  ) !important;
  background-size: 300% 100% !important;
  animation: badgeShine 4s ease-in-out infinite !important;
}

/* ─── Liquid morphing separator ──────────────────────────────────────── */
@keyframes morphBlob {
  0%,100% { border-radius: 60% 40% 55% 45% / 55% 45% 60% 40%; }
  25%     { border-radius: 45% 55% 40% 60% / 60% 40% 55% 45%; }
  50%     { border-radius: 55% 45% 65% 35% / 40% 60% 45% 55%; }
  75%     { border-radius: 35% 65% 45% 55% / 50% 50% 40% 60%; }
}

/* ─── App pill hover ────────────────────────────────────────────────── */
.app-pill {
  transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}
.app-pill:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 24px rgba(184,144,42,0.14);
}

/* ─── Accent gradient utility ────────────────────────────────────────── */
.accent-grd {
  background: linear-gradient(135deg, #B8902A, #D4A840, #E8C060);
}
.accent-text {
  background: linear-gradient(135deg, #B8902A, #D4A840);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Cinematic section entrance ─────────────────────────────────────── */
@keyframes sectionSlideIn {
  from { opacity: 0; transform: translateY(48px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.cinematic-in { animation: sectionSlideIn 0.9s cubic-bezier(0.16,1,0.3,1) both; }

/* ─── Grid scan-line overlay (paper grain texture) ───────────────────── */
.scanlines::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(184,144,42,0.012) 3px,
    rgba(184,144,42,0.012) 4px
  );
}

/* ─── Holographic card sheen ─────────────────────────────────────────── */
@keyframes holoSheen {
  0%   { background-position: -200% 50%; }
  100% { background-position: 200% 50%; }
}
.holo-card::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg,
    transparent 20%,
    rgba(184,144,42,0.04) 40%,
    rgba(212,168,64,0.06) 50%,
    rgba(184,144,42,0.04) 60%,
    transparent 80%
  );
  background-size: 200% 200%;
  animation: holoSheen 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.holo-card > * { position: relative; z-index: 1; }

/* ─── Respect reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body { animation: none; }
}