/* sws-interactions.css — interaction patterns extracted from /estimate.html
 *
 * Why this file exists:
 * The estimator page (estimate.html) has a richer interactive feel than the
 * rest of the marketing site — tier cards glow red on selection, upgrade
 * rows tint when checked, quiz options hover smoothly, everything moves at
 * a consistent 0.15s ease rhythm. This file extracts those patterns into
 * reusable utility classes that can be opt-in applied to any card/tile/row
 * across the site to bring the same "alive" feel without the page having
 * to invent its own interaction styling.
 *
 * Usage: add the class to the element. That's it.
 * Combine with existing Tailwind classes — these only add interaction
 * states, they don't override layout/color/spacing decisions.
 *
 * Brand red kept consistent: #9C0018 (primary) / #FF4558 (accent)
 *
 * Created 2026-05-14 as Q1 of design-session ACTIVE_SESSION_QUEUE.md.
 */

/* ──────────────────────────────────────────────────────────────────────
 * Interactive cards — the workhorse pattern (Packages tiers, Industries
 * tiles, Problem cards, How-It-Works steps, etc.). On hover: red-tint
 * border + subtle red-tint background + lifts 1px. On focus (keyboard):
 * stronger ring for accessibility.
 * ────────────────────────────────────────────────────────────────────── */
.sws-card-interactive {
  position: relative;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.sws-card-interactive:hover {
  border-color: rgba(156, 0, 24, 0.5) !important;
  background-color: rgba(156, 0, 24, 0.03);
  transform: translateY(-1px);
}

.sws-card-interactive:focus-visible {
  outline: none;
  border-color: #9C0018 !important;
  box-shadow: 0 0 0 2px rgba(156, 0, 24, 0.35);
}

/* For elements that should signal "selected" (e.g. via JS adding the class) */
.sws-card-interactive.is-selected {
  border-color: #9C0018 !important;
  box-shadow: 0 0 0 1px #9C0018;
  background-color: rgba(156, 0, 24, 0.06);
}

/* ──────────────────────────────────────────────────────────────────────
 * Interactive tiles — for compact link tiles (industries grid, deep-link
 * strip chips). Smaller hover footprint than cards.
 * ────────────────────────────────────────────────────────────────────── */
.sws-tile-interactive {
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

.sws-tile-interactive:hover {
  border-color: #9C0018 !important;
  background-color: rgba(156, 0, 24, 0.08);
  color: #ffffff;
}

.sws-tile-interactive:focus-visible {
  outline: none;
  border-color: #9C0018 !important;
  box-shadow: 0 0 0 2px rgba(156, 0, 24, 0.35);
}

/* ──────────────────────────────────────────────────────────────────────
 * Interactive rows — for items in horizontal/vertical lists (reliability
 * strip chips, trust-band items). Very subtle tint on hover.
 * ────────────────────────────────────────────────────────────────────── */
.sws-row-interactive {
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
  border-radius: 6px;
  padding: 0.15rem 0.3rem;
  margin: -0.15rem -0.3rem;
}

.sws-row-interactive:hover {
  color: #ffffff;
  background-color: rgba(156, 0, 24, 0.05);
}

/* ──────────────────────────────────────────────────────────────────────
 * Interactive pricing — for tier cards specifically. Inherits from
 * card-interactive but adds price-flash on hover (the price gets a hair
 * brighter to draw eye + signal "this is what you'd pay"). Subtle.
 * ────────────────────────────────────────────────────────────────────── */
.sws-pricing-card {
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.sws-pricing-card:hover {
  border-color: rgba(156, 0, 24, 0.6) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(156, 0, 24, 0.08);
}

.sws-pricing-card .sws-price {
  transition: color 0.15s ease;
}

.sws-pricing-card:hover .sws-price {
  color: #FF4558;
}

/* ──────────────────────────────────────────────────────────────────────
 * Scroll-reveal — fade-in + slight rise on viewport entry. One-shot.
 * Apply class: .sws-reveal
 * JS (sws-interactions.js) adds .is-revealed when element scrolls in.
 * Pre-JS state is hidden, so JS load is required; without it, the
 * page is graceful-degraded via the no-JS fallback below.
 *
 * Why "alive but not circus": 12px rise + 0.6s ease feels like content
 * arriving, not like content performing. No bounce, no stagger overload.
 * ────────────────────────────────────────────────────────────────────── */
.sws-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.sws-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* No-JS fallback: if JS doesn't run, html.no-js class stays, and reveals
 * render normally (we don't want a perma-hidden page for users with JS off).
 * sws-interactions.js removes .no-js from <html> at boot. */
html.no-js .sws-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Optional gentle stagger when a container marked .sws-reveal-stagger has
 * multiple .sws-reveal children (e.g. a 3-card grid). Capped at 6 so we
 * don't get a 12-card cascade that drags. */
.sws-reveal-stagger > .sws-reveal:nth-child(1) { transition-delay: 0.00s; }
.sws-reveal-stagger > .sws-reveal:nth-child(2) { transition-delay: 0.08s; }
.sws-reveal-stagger > .sws-reveal:nth-child(3) { transition-delay: 0.16s; }
.sws-reveal-stagger > .sws-reveal:nth-child(4) { transition-delay: 0.24s; }
.sws-reveal-stagger > .sws-reveal:nth-child(5) { transition-delay: 0.32s; }
.sws-reveal-stagger > .sws-reveal:nth-child(6) { transition-delay: 0.40s; }

/* ──────────────────────────────────────────────────────────────────────
 * Hero entrance — apply .sws-hero-enter on elements you want to animate
 * in as soon as the page loads. Unlike .sws-reveal (scroll-triggered),
 * this fires on document ready via body.is-loaded class.
 *
 * Use with .sws-hero-stagger on the parent to cascade children in order:
 *   eyebrow → h1 → sub → CTA → meta strip (each 0.10s apart, capped at 6)
 *
 * Slower + larger than scroll-reveal because it's the FIRST motion the
 * visitor sees — wants to feel like content arriving, not flicking on.
 * ────────────────────────────────────────────────────────────────────── */
.sws-hero-enter {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

body.is-loaded .sws-hero-enter {
  opacity: 1;
  transform: translateY(0);
}

.sws-hero-stagger > .sws-hero-enter:nth-child(1) { transition-delay: 0.05s; }
.sws-hero-stagger > .sws-hero-enter:nth-child(2) { transition-delay: 0.15s; }
.sws-hero-stagger > .sws-hero-enter:nth-child(3) { transition-delay: 0.25s; }
.sws-hero-stagger > .sws-hero-enter:nth-child(4) { transition-delay: 0.35s; }
.sws-hero-stagger > .sws-hero-enter:nth-child(5) { transition-delay: 0.45s; }
.sws-hero-stagger > .sws-hero-enter:nth-child(6) { transition-delay: 0.55s; }

/* No-JS fallback */
html.no-js .sws-hero-enter {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ──────────────────────────────────────────────────────────────────────
 * CTA button — subtle lift on hover. Pairs with existing button styling.
 * Apply .sws-cta-lift to primary CTAs. Reads as "this button is alive"
 * without crossing into bounce/pulse territory.
 * ────────────────────────────────────────────────────────────────────── */
.sws-cta-lift {
  transition:
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, box-shadow;
}

.sws-cta-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(156, 0, 24, 0.18);
}

.sws-cta-lift:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(156, 0, 24, 0.10);
}

/* ──────────────────────────────────────────────────────────────────────
 * Stat counter — number animates from 0 → data-target on viewport entry.
 * Apply class .sws-counter + attribute data-target="1234" on the element.
 * JS handles the actual animation. CSS just sets tabular-nums so digits
 * don't jitter mid-animation.
 *
 * Best for numbers >= 50. Skip for small numbers (1, 4, 6 etc.) — they
 * read as static labels rather than "metric being counted up."
 * ────────────────────────────────────────────────────────────────────── */
.sws-counter {
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────────────
 * Smooth scroll — anchor links + jump-to-section behavior across the
 * entire site. Modern browsers honor this natively, including iOS Safari.
 * Reduced-motion users get instant jumps via the guard below.
 * ────────────────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ──────────────────────────────────────────────────────────────────────
 * Drawn accent underline — brand-red line draws itself under a hero
 * heading's <em>. Fires on page load (hero is above the fold). A craft
 * detail, not a circus. Added 2026-06-02 after the homepage richness pass.
 * ────────────────────────────────────────────────────────────────────── */
.canon-h1 em { position: relative; }
.canon-h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.04em;
  height: 0.09em; background: var(--accent, #9C0018); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}
body.is-loaded .canon-h1 em::after { transform: scaleX(1); }
html.no-js .canon-h1 em::after { transform: scaleX(1); transition: none; }

/* ──────────────────────────────────────────────────────────────────────
 * Live-pulse dot — signals a real/live element (e.g. a "Live proof" tag).
 * Apply <span class="live-dot"></span> inline before the label.
 * ────────────────────────────────────────────────────────────────────── */
.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #FF4558; margin-right: 7px; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(255, 69, 88, 0.5);
  animation: sws-pulse 2.1s ease-out infinite;
}
@keyframes sws-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 69, 88, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 69, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 69, 88, 0); }
}

/* ──────────────────────────────────────────────────────────────────────
 * Reduced-motion guard — accessibility. If the user has set reduce-motion
 * in their OS, kill the transform animations but keep the color states
 * (those are useful, not motion-based).
 * ────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sws-card-interactive,
  .sws-tile-interactive,
  .sws-row-interactive,
  .sws-pricing-card,
  .sws-pricing-card .sws-price {
    transition: none;
  }
  .sws-card-interactive:hover,
  .sws-pricing-card:hover {
    transform: none;
  }
  .sws-reveal,
  .sws-hero-enter {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body.is-loaded .sws-hero-enter {
    opacity: 1;
    transform: none;
  }
  .sws-cta-lift {
    transition: none;
  }
  .sws-cta-lift:hover,
  .sws-cta-lift:active {
    transform: none;
    box-shadow: none;
  }
  .live-dot { animation: none; }
  .canon-h1 em::after { transition: none; transform: scaleX(1); }
  html {
    scroll-behavior: auto;
  }
}