/* ============================================================
   PodGrunt — small custom stylesheet
   Most styling is Tailwind utility classes in index.html.
   This file holds the bits Tailwind utilities don't cover cleanly:
   focus rings + scroll animation states.
   ============================================================ */

/* Consistent, visible focus ring on interactive elements */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #181c1f, 0 0 0 4px #fd6f0b;
}

/* Scroll-in animation -------------------------------------- */
.will-animate {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.is-visible {
  opacity: 1;
  transform: none;
}

/* Safety: if JS never runs, content must still be visible */
@media (prefers-reduced-motion: reduce) {
  .will-animate {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* inline <code> */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
}

/* Staggered reveal — children animate in sequence ---------- */
.stagger > .will-animate { transition-delay: 0ms; }
.stagger > .will-animate:nth-child(2) { transition-delay: 70ms; }
.stagger > .will-animate:nth-child(3) { transition-delay: 140ms; }
.stagger > .will-animate:nth-child(4) { transition-delay: 210ms; }
.stagger > .will-animate:nth-child(5) { transition-delay: 280ms; }
.stagger > .will-animate:nth-child(6) { transition-delay: 350ms; }

/* Scrolling ticker / marquee ------------------------------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; will-change: transform; animation: marquee 30s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Oversized decorative watermark word ---------------------- */
.watermark {
  font-family: 'Kanit', system-ui, sans-serif;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}