/* ============================================================
   TellTours - Motion (vanilla Aceternity-style adaptations)
   Everything here is gated on html.js (added by an inline head
   script, see index.html) and/or prefers-reduced-motion, so the
   site degrades to fully visible/static without JS or when the
   visitor prefers reduced motion. Paired with js/motion.js.
   ============================================================ */

/* ── C1: Hero text generate effect ───────────────────────────
   js/motion.js wraps each word of the hero h1 in a
   .word-fade span and toggles .word-fade-in on the h1 once
   ready. Without JS the spans never exist, so the h1 just
   renders its plain text. ── */
html.js .hero-text h1 .word-fade {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(6px);
  transition: opacity 0.5s ease-out, filter 0.5s ease-out, transform 0.5s ease-out;
}
html.js .hero-text h1.word-fade-in .word-fade {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* ── C2: Spotlight cards ──────────────────────────────────────
   A single delegated pointermove listener (js/motion.js) sets
   --mx/--my on whichever card is under the pointer. Desktop /
   hover-capable pointers only - this is a lighting effect, not
   a touch interaction.
   Retuned for the flat hairline-card system: a faint 6% white
   radial "torchlight on paper" instead of a green glow wash, paired
   with a brightening border-color (the actual structural signal). ── */
@media (hover: hover) {
  .roadmap-card,
  .mode-card,
  .price-card,
  .faq-item {
    position: relative;
  }
  .roadmap-card::before,
  .mode-card::before,
  .price-card::before,
  .faq-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(240px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.06), transparent 60%);
    opacity: 0;
    transition: opacity 0.25s ease-out;
    pointer-events: none;
  }
  .roadmap-card:hover::before,
  .mode-card:hover::before,
  .price-card:hover::before,
  .faq-item:hover::before {
    opacity: 1;
  }
  /* roadmap-card keeps its own green-tinted hover border (sections.css) */
  .mode-card:hover,
  .price-card:hover {
    border-color: rgba(255,255,255,0.22);
  }
  .price-card.featured:hover {
    border-color: var(--green-light);
  }
}

/* ── C3: Border beam on the featured Pro price card ──────────
   A slow conic highlight traced around the border via a masked
   ::after. js/motion.js toggles .beam-active only while the
   card is in the viewport, and never under reduced motion. ── */
@property --beam-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.price-card.featured::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--beam-angle, 0deg), transparent 0%, rgba(82,194,127,0.85) 8%, transparent 22%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.price-card.featured.beam-active::after {
  opacity: 1;
  animation: beam-rotate 7s linear infinite;
}
@keyframes beam-rotate {
  to { --beam-angle: 360deg; }
}

/* ── C4: Staggered grid reveals ───────────────────────────────
   Extends the existing .reveal system: once the parent grid
   gets .in (added by reveal.js, unchanged), children stagger in
   using transition-delay: calc(var(--i) * 60ms), with --i set
   per nth-child in CSS (no JS needed). ── */
html.js .roadmap-grid > *,
html.js .modes-grid > *,
html.js .how-steps > *,
html.js .pricing-grid > *,
html.js .faq-list > *,
html.js .cap-strip .cap-row > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(.2,.7,.2,1), transform 0.6s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 60ms);
}
html.js .roadmap-grid.in > *,
html.js .modes-grid.in > *,
html.js .how-steps.in > *,
html.js .pricing-grid.in > *,
html.js .faq-list.in > *,
html.js .cap-strip.in .cap-row > * {
  opacity: 1;
  transform: none;
}
.roadmap-grid > *:nth-child(1), .modes-grid > *:nth-child(1), .how-steps > *:nth-child(1),
.pricing-grid > *:nth-child(1), .faq-list > *:nth-child(1), .cap-strip .cap-row > *:nth-child(1) { --i: 1; }
.roadmap-grid > *:nth-child(2), .modes-grid > *:nth-child(2), .how-steps > *:nth-child(2),
.pricing-grid > *:nth-child(2), .faq-list > *:nth-child(2), .cap-strip .cap-row > *:nth-child(2) { --i: 2; }
.roadmap-grid > *:nth-child(3), .modes-grid > *:nth-child(3), .how-steps > *:nth-child(3),
.pricing-grid > *:nth-child(3), .faq-list > *:nth-child(3), .cap-strip .cap-row > *:nth-child(3) { --i: 3; }
.roadmap-grid > *:nth-child(4), .modes-grid > *:nth-child(4), .how-steps > *:nth-child(4),
.pricing-grid > *:nth-child(4), .faq-list > *:nth-child(4), .cap-strip .cap-row > *:nth-child(4) { --i: 4; }
.roadmap-grid > *:nth-child(5), .modes-grid > *:nth-child(5), .how-steps > *:nth-child(5),
.pricing-grid > *:nth-child(5), .faq-list > *:nth-child(5), .cap-strip .cap-row > *:nth-child(5) { --i: 5; }
.roadmap-grid > *:nth-child(6), .modes-grid > *:nth-child(6), .how-steps > *:nth-child(6),
.pricing-grid > *:nth-child(6), .faq-list > *:nth-child(6), .cap-strip .cap-row > *:nth-child(6) { --i: 6; }

/* ── C5: Phone screenshot fade-in ─────────────────────────────
   .phone-shot / .ss-shot fade from 0 to 1 once loaded (js/motion.js
   toggles .shot-loaded on 'load'/already-complete). A shimmer
   skeleton (same visual language as .skeleton-target in ui.css)
   sits behind the screen while the image is loading; it is a
   separate class so it never gets picked up by ui.js's own
   .skeleton-target timers. Images are already absolutely
   positioned, so none of this shifts layout. ── */
html.js .phone-shot,
html.js .ss-shot {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
html.js .phone-shot.shot-loaded,
html.js .ss-shot.shot-loaded {
  opacity: 1;
}
.phone-screen.shot-loading::after,
.ss-screen.shot-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface);
  z-index: 44;
  border-radius: inherit;
  transition: opacity 0.4s ease;
}
.phone-screen.shot-loading::before,
.ss-screen.shot-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  z-index: 44;
  border-radius: inherit;
  transform: translateX(-100%);
  animation: skeleton-shimmer 1.5s infinite;
  transition: opacity 0.4s ease;
}
.phone-screen.shot-loading.shot-done::after,
.phone-screen.shot-loading.shot-done::before,
.ss-screen.shot-loading.shot-done::after,
.ss-screen.shot-loading.shot-done::before {
  opacity: 0;
  pointer-events: none;
}