/* The Influence Suite - Kinetic & Brand Identity Stylesheet */

:root {
  --color-cream: #F5EFEB;
  --color-rust: #B03B2E;
  --color-navy: #1B324A;
  --color-yellow: #E5A93C;
  --color-taupe: #BAA898;
  --color-charcoal: #222222;
  --color-border: #1E1E1E;
}

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--color-charcoal);
  background-color: var(--color-cream);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.font-serif {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Split Comparison Slider Styles */
#split-container {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#split-overlay {
  will-change: width;
}

#split-handle {
  will-change: left;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #F5EFEB;
  border-left: 1px solid var(--color-border);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-rust);
}

/* --- KINETIC MARQUEE ANIMATIONS --- */
.marquee-container {
  white-space: nowrap;
  display: flex;
}

.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 24s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-track-reverse {
  display: inline-flex;
  white-space: nowrap;
  animation: marqueeReverse 28s linear infinite;
}

.marquee-track-reverse:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes marqueeReverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

/* --- ROTATING STAMP ANIMATION --- */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

/* --- AMBIENT SOHO LOFT LIGHT SHADOW ANIMATION --- */
.loft-ambient-light {
  position: absolute;
  top: -20%;
  left: -10%;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle at 40% 30%, rgba(229, 169, 60, 0.12) 0%, rgba(176, 59, 46, 0.04) 40%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  animation: ambientShift 12s ease-in-out infinite alternate;
}

@keyframes ambientShift {
  0% {
    transform: translate(0px, 0px) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(30px, -20px) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translate(-20px, 25px) scale(0.98);
    opacity: 0.75;
  }
}

/* --- 3D TILT EFFECT CONTAINER --- */
#tilt-card {
  perspective: 1000px;
  transform-style: preserve-3d;
  will-change: transform;
}

/* --- ACTIVE BUTTON & HOVER STATES --- */
.acronym-btn.active {
  border-color: var(--color-rust) !important;
  background-color: #FFFDF9 !important;
  box-shadow: 0 4px 0 var(--color-rust);
  transform: translateY(-2px);
}

.swag-btn.active {
  border-color: var(--color-rust) !important;
  background-color: white !important;
  box-shadow: 0 4px 0 var(--color-rust);
  transform: translateY(-2px);
}

/* Navigation Link Underline Motion */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background-color: var(--color-rust);
  transition: width 0.25s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* Modal animation */
#article-modal.active,
#salon-modal.active,
#advisory-modal.active {
  display: flex !important;
  animation: modalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Subtle bounce */
@keyframes bounceX {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.animate-bounce-x {
  animation: bounceX 1.5s infinite;
}