/* =========================================================
   SeoContentPilot — custom CSS
   All Tailwind utilities are handled by the Play CDN.
   This file only covers things Tailwind can't do:
   keyframe animations, FAQ accordion, modal transitions.
   ========================================================= */

/* --- Global --- */
:root { --ease: cubic-bezier(0.16, 1, 0.3, 1); }   /* the brand motion curve */
::selection { background: #ef4d23; color: white; }

/* --- Headline line-reveal (JS-driven via SplitText) --- */
.js .js-reveal { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .js .js-reveal { visibility: visible; }
}

/* --- Navbar slide-in --- */
@keyframes slideDown {
  from { transform: translateY(-100px); opacity: 0; }
  to   { transform: translateY(0);      opacity: 1; }
}
.navbar-animate {
  animation: slideDown 0.8s var(--ease) forwards;
}

/* --- Hero staggered entrance (fires immediately on load) --- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* hero-h1 entrance is handled by the JS line-reveal (SplitText) */
.hero-badge    { animation: fadeUp 0.7s var(--ease) 0.15s both; }
.hero-p        { animation: fadeUp 0.7s var(--ease) 0.30s both; }
.hero-stats    { animation: fadeUp 0.7s var(--ease) 0.42s both; }
.hero-cta      { animation: fadeUp 0.7s var(--ease) 0.54s backwards; }
.hero-benefits { animation: fadeIn 0.7s var(--ease) 0.66s both; }

/* --- Modal transitions --- */
#modal-backdrop { transition: opacity 0.25s var(--ease); }
#modal-box      { transition: opacity 0.25s var(--ease), transform 0.35s var(--ease); }

.step-enter { animation: stepIn  0.3s var(--ease) forwards; }
.step-exit  { animation: stepOut 0.2s var(--ease) forwards; }

@keyframes stepIn  {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes stepOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* --- FAQ accordion --- */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease), opacity 0.4s var(--ease);
  opacity: 0;
}
.faq-content.open {
  max-height: 500px;
  opacity: 1;
}

/* --- Custom scrollbar (time slots in modal) --- */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* --- Noise texture overlay --- */
.noise-overlay {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  mix-blend-mode: overlay;
}

/* --- Ensure modal is on top --- */
#modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* --- Ambient film grain --- */
#grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  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.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Navbar scrolled state --- */
#nav-pill.nav-scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 34px -10px rgba(11, 15, 26, 0.20);
}

/* --- Timeline progress line (drawn on scroll) --- */
.js .timeline-progress { transform: scaleY(0); }

@media (prefers-reduced-motion: reduce) {
  .js .timeline-progress { transform: scaleY(1); }
}