/*=============== CINEMATIC ANIMATIONS V2 ===============*/

/* ── Gold palette ── */
:root {
  --gold:       #d4af37;
  --gold-light: #ffd700;
  --gold-dim:   rgba(212, 175, 55, 0.12);
  --ink:        #0a0a0a;
}

/* ── FOUC Prevention ── */
[data-reveal] {
  visibility: hidden;
}

.js-ready [data-reveal] {
  visibility: visible;
}

/* ── Word split containers ── */
.word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.2;
}

.word {
  display: inline-block;
  will-change: transform;
}

/* ── Grain Overlay ── */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  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.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 9997;
  animation: grain-anim 0.65s steps(1) infinite;
  will-change: transform;
}

@keyframes grain-anim {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, 10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, -5%); }
  70% { transform: translate(0, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}

/* ── Scroll Progress Bar ── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  z-index: 10001;
  pointer-events: none;
  transform-origin: left;
}

/* ── Marquee Tech Strip ── */
.marquee-strip {
  overflow: hidden;
  padding: 1.2rem 0;
  border-top: 1px solid var(--gold-dim);
  border-bottom: 1px solid var(--gold-dim);
  margin: 3.5rem 0;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-run 30s linear infinite;
}

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

.marquee-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 2rem;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-color-light);
  white-space: nowrap;
  transition: color 0.2s;
}

.marquee-item:hover { color: var(--gold); }

.marquee-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.45;
  flex-shrink: 0;
}

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

/* ── Footer Time Badge ── */
.footer__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--text-color-light);
}

.badge__avail {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ecf8e;
  flex-shrink: 0;
  animation: avail-pulse 2.2s ease-out infinite;
}

@keyframes avail-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(62, 207, 142, 0.55); }
  50%       { box-shadow: 0 0 0 5px rgba(62, 207, 142, 0);  }
}

/* ── Section title gold rule ── */
.section__title::after {
  content: '';
  display: block;
  width: 1.75rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
  margin: 0.4rem auto 0;
}

/* ── Service card enhanced hover ── */
.services__card {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease !important;
}

.services__card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 18px 45px rgba(212, 175, 55, 0.09);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  body::after        { animation: none; opacity: 0.02; }
  .marquee-track     { animation: none; }
  [data-reveal]      { visibility: visible; }
  .js-ready [data-reveal] { visibility: visible; }
  .word              { transform: none !important; opacity: 1 !important; }
  #scroll-progress   { display: none; }
}