/* ============================================================
   ICON SYSTEM — "WhatsApp Studio"
   ============================================================
   A unified icon system that gives the website its own
   identity. NOT flat zinc. NOT rainbow per category. NOT
   stock Phosphor / Heroicons style.

   Signature traits:
   1. Every icon container uses the SAME teal-tinted chip
      (subtle, brand-aware) — no per-category coloring.
   2. SVG strokes are warm-white at ~88% opacity so the icon
      reads on dark surfaces without screaming pure white.
   3. A single small detail per icon carries an *accent teal*
      tone (a dot, a highlight, a stroke segment). The rest
      stays neutral. This is the differentiator vs Phosphor /
      Heroicons / lucide which are uniformly currentColor.
   4. Hover: chip bg + border lift, icon scales 1.05, accent
      detail pulses gently. Single coherent motion, not 3
      effects piled on top.
   5. Reveal-on-scroll with stagger (handled by icons.js).
   6. Hero signature variant: 64px chip + soft teal halo +
      draw-on stroke animation. Reserved for ONE icon per
      page (the largest in hero / lead section).

   All variants share the same chip (bg + border + radius).
   The differentiator across pages is content, not chrome.

   prefers-reduced-motion: ALL animations gated.
   ============================================================ */

:root {
  /* Icon design tokens — derived from --teal/--brand in theme-tokens.css */
  --ws-icon-color: rgba(233, 237, 239, 0.88);   /* warm white, 88% */
  --ws-icon-color-strong: #e9edef;               /* full ink for hover */
  --ws-icon-accent: #00A884;                     /* teal accent dot */
  --ws-icon-accent-glow: rgba(0, 168, 132, 0.55);

  --ws-icon-chip-bg: rgba(0, 168, 132, 0.08);
  --ws-icon-chip-bg-hover: rgba(0, 168, 132, 0.14);
  --ws-icon-chip-border: rgba(0, 168, 132, 0.18);
  --ws-icon-chip-border-hover: rgba(0, 168, 132, 0.32);

  --ws-icon-radius: 12px;
  --ws-icon-radius-hero: 16px;

  --ws-icon-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ws-icon-duration: 220ms;
}

/* ============================================================
   BASE — flat inline icon (in text, in links, in nav)
   No chip. Inherits color from parent so it can sit inside a
   styled span/button without fighting it. Use this when the
   icon is "punctuation" not a "feature".
   ============================================================ */
.ws-icon-flat,
.ws-icon-flat svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  vertical-align: middle;
}
.ws-icon-flat svg {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ============================================================
   CHIP — the workhorse. Used on feature cards, list items,
   step blocks, anywhere that needs a "framed" icon.
   ============================================================ */
.ws-icon-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--ws-icon-radius);
  background-color: var(--ws-icon-chip-bg);
  border: 1px solid var(--ws-icon-chip-border);
  transition:
    background-color var(--ws-icon-duration) var(--ws-icon-ease),
    border-color var(--ws-icon-duration) var(--ws-icon-ease),
    transform var(--ws-icon-duration) var(--ws-icon-ease),
    box-shadow var(--ws-icon-duration) var(--ws-icon-ease);
}

/* Size modifiers — keep chip aspect square */
.ws-icon-chip.is-sm  { width: 32px; height: 32px; border-radius: 9px; }
.ws-icon-chip.is-md  { width: 40px; height: 40px; border-radius: 11px; }
.ws-icon-chip.is-lg  { width: 56px; height: 56px; border-radius: 14px; }

.ws-icon-chip svg {
  width: 60%;
  height: 60%;
  stroke: var(--ws-icon-color);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: stroke var(--ws-icon-duration) var(--ws-icon-ease),
              transform var(--ws-icon-duration) var(--ws-icon-ease);
}

/* Accent detail — any element inside the SVG marked .ws-accent
   takes the teal stroke. Use sparingly: ONE accent per icon. */
.ws-icon-chip svg .ws-accent,
.ws-icon-flat svg .ws-accent,
.ws-icon-hero svg .ws-accent {
  stroke: var(--ws-icon-accent);
  fill: none;
}
.ws-icon-chip svg .ws-accent-fill,
.ws-icon-flat svg .ws-accent-fill,
.ws-icon-hero svg .ws-accent-fill {
  fill: var(--ws-icon-accent);
  stroke: none;
}

/* Hover — the whole parent (.ws-icon-card or :hover on chip itself)
   triggers chip lift + icon brighten. Two ways to wire:
   1. Direct: <span class="ws-icon-chip">...</span> :hover
   2. Parent-driven: <div class="ws-icon-card">...<span class="ws-icon-chip">...</span></div>
*/
.ws-icon-chip:hover,
.ws-icon-card:hover .ws-icon-chip,
.ws-icon-trigger:hover .ws-icon-chip {
  background-color: var(--ws-icon-chip-bg-hover);
  border-color: var(--ws-icon-chip-border-hover);
  transform: translateY(-2px);
}

.ws-icon-chip:hover svg,
.ws-icon-card:hover .ws-icon-chip svg,
.ws-icon-trigger:hover .ws-icon-chip svg {
  stroke: var(--ws-icon-color-strong);
  transform: scale(1.05);
}

/* Pulse the accent detail on hover so the brand color flickers in */
.ws-icon-chip:hover svg .ws-accent,
.ws-icon-card:hover .ws-icon-chip svg .ws-accent,
.ws-icon-trigger:hover .ws-icon-chip svg .ws-accent,
.ws-icon-chip:hover svg .ws-accent-fill,
.ws-icon-card:hover .ws-icon-chip svg .ws-accent-fill,
.ws-icon-trigger:hover .ws-icon-chip svg .ws-accent-fill {
  animation: ws-icon-accent-pulse 1.4s ease-in-out infinite alternate;
}

/* ============================================================
   HERO — signature icon. Bigger chip, soft teal halo,
   draw-on stroke animation. Use ONCE per page.
   ============================================================ */
.ws-icon-hero {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--ws-icon-radius-hero);
  background-color: var(--ws-icon-chip-bg);
  border: 1px solid var(--ws-icon-chip-border);
  box-shadow:
    0 0 24px rgba(0, 168, 132, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.32);
}
.ws-icon-hero::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: calc(var(--ws-icon-radius-hero) + 8px);
  background: radial-gradient(
    ellipse at center,
    rgba(0, 168, 132, 0.22) 0%,
    transparent 70%
  );
  z-index: -1;
  pointer-events: none;
  animation: ws-icon-halo-breathe 4.2s ease-in-out infinite alternate;
}
.ws-icon-hero svg {
  width: 60%;
  height: 60%;
  stroke: var(--ws-icon-color-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Draw-on path — stroke offset animated in via icons.js */
.ws-icon-hero[data-draw-on] svg path,
.ws-icon-hero[data-draw-on] svg line,
.ws-icon-hero[data-draw-on] svg polyline,
.ws-icon-hero[data-draw-on] svg circle,
.ws-icon-hero[data-draw-on] svg rect {
  stroke-dasharray: var(--ws-draw-len, 200);
  stroke-dashoffset: var(--ws-draw-len, 200);
  transition: stroke-dashoffset 900ms var(--ws-icon-ease);
}
.ws-icon-hero.is-drawn svg path,
.ws-icon-hero.is-drawn svg line,
.ws-icon-hero.is-drawn svg polyline,
.ws-icon-hero.is-drawn svg circle,
.ws-icon-hero.is-drawn svg rect {
  stroke-dashoffset: 0;
}

/* ============================================================
   REVEAL — IntersectionObserver in icons.js adds .is-revealed
   ============================================================ */
.ws-icon-chip,
.ws-icon-hero {
  /* default state for reveal */
  opacity: 1;
}
.ws-reveal-pending .ws-icon-chip,
.ws-reveal-pending.ws-icon-chip,
.ws-reveal-pending .ws-icon-hero,
.ws-reveal-pending.ws-icon-hero {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 520ms var(--ws-icon-ease),
    transform 520ms var(--ws-icon-ease),
    background-color var(--ws-icon-duration) var(--ws-icon-ease),
    border-color var(--ws-icon-duration) var(--ws-icon-ease);
}
.ws-revealed .ws-icon-chip,
.ws-revealed.ws-icon-chip,
.ws-revealed .ws-icon-hero,
.ws-revealed.ws-icon-hero {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   COMPATIBILITY SHIMS — gradually rebrand existing classes
   without rewriting every page from scratch. These rules
   target the legacy chip wrappers used in modul-* pages.
   ============================================================ */

/* Module pages: doc-section-icon / doc-feat-icon / doc-rule-icon /
   doc-step-icon / doc-tip-icon / doc-target-icon all become
   teal-tinted chips. Existing inline `bg-white/5` is overridden. */
.doc-section-icon,
.doc-feat-icon,
.doc-rule-icon,
.doc-step-icon,
.doc-tip-icon,
.doc-target-icon,
.doc-setup-step-icon,
span.doc-section-icon.bg-white\/5,
span.doc-feat-icon.bg-white\/5,
span.doc-rule-icon.bg-white\/5,
span.doc-step-icon.bg-white\/5,
span.doc-tip-icon.bg-white\/5,
span.doc-target-icon.bg-white\/5 {
  background-color: var(--ws-icon-chip-bg) !important;
  border: 1px solid var(--ws-icon-chip-border) !important;
  border-radius: 10px !important;
  transition:
    background-color var(--ws-icon-duration) var(--ws-icon-ease),
    border-color var(--ws-icon-duration) var(--ws-icon-ease),
    transform var(--ws-icon-duration) var(--ws-icon-ease);
}

.doc-section-icon svg,
.doc-feat-icon svg,
.doc-rule-icon svg,
.doc-step-icon svg,
.doc-tip-icon svg,
.doc-target-icon svg,
.doc-setup-step-icon svg {
  stroke: var(--ws-icon-color) !important;
  transition:
    stroke var(--ws-icon-duration) var(--ws-icon-ease),
    transform var(--ws-icon-duration) var(--ws-icon-ease);
}

/* Hover lifting on the parent card lifts the chip too */
.doc-feature-card:hover .doc-feat-icon,
.doc-rule-card:hover .doc-rule-icon,
.doc-step-card:hover .doc-step-icon,
.doc-tip-card:hover .doc-tip-icon,
.doc-target-card:hover .doc-target-icon {
  background-color: var(--ws-icon-chip-bg-hover) !important;
  border-color: var(--ws-icon-chip-border-hover) !important;
  transform: translateY(-2px);
}
.doc-feature-card:hover .doc-feat-icon svg,
.doc-rule-card:hover .doc-rule-icon svg,
.doc-step-card:hover .doc-step-icon svg,
.doc-tip-card:hover .doc-tip-icon svg,
.doc-target-card:hover .doc-target-icon svg {
  stroke: var(--ws-icon-color-strong) !important;
  transform: scale(1.05);
}

/* Index page module hero icons — already use bg-[#25D366]/10
   chip + text-[#25D366] icon. Keep them but match the new
   chip token so the whole site stays uniform. */
.bg-\[\#25D366\]\/10 {
  background-color: var(--ws-icon-chip-bg) !important;
  border: 1px solid var(--ws-icon-chip-border) !important;
  transition:
    background-color var(--ws-icon-duration) var(--ws-icon-ease),
    border-color var(--ws-icon-duration) var(--ws-icon-ease),
    transform var(--ws-icon-duration) var(--ws-icon-ease);
}
.bg-\[\#25D366\]\/10:hover,
*:hover > .bg-\[\#25D366\]\/10 {
  background-color: var(--ws-icon-chip-bg-hover) !important;
  border-color: var(--ws-icon-chip-border-hover) !important;
}

/* The actual SVG inside #25D366 chips on index.html — strip the
   eye-watering full-saturation green and let only the .ws-accent
   marked path keep the teal tint. The rest goes warm white. */
.bg-\[\#25D366\]\/10 svg.text-\[\#25D366\] {
  color: var(--ws-icon-color) !important;
}
.bg-\[\#25D366\]\/10 svg.text-\[\#25D366\] .ws-accent {
  stroke: var(--ws-icon-accent) !important;
}
.bg-\[\#25D366\]\/10 svg.text-\[\#25D366\] .ws-accent-fill {
  fill: var(--ws-icon-accent) !important;
  stroke: none !important;
}

/* Checkmark list items on index — keep teal, they're functional
   confirmations. But align to the accent token for consistency. */
.text-\[\#25D366\] {
  color: var(--ws-icon-accent) !important;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes ws-icon-accent-pulse {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

@keyframes ws-icon-halo-breathe {
  from { opacity: 0.55; transform: scale(0.96); }
  to   { opacity: 1;    transform: scale(1.04); }
}

/* ============================================================
   REDUCED MOTION — kill all icon-system animation, keep state
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ws-icon-chip,
  .ws-icon-hero,
  .ws-icon-chip svg,
  .ws-icon-hero svg,
  .doc-section-icon,
  .doc-feat-icon,
  .doc-rule-icon,
  .doc-step-icon,
  .doc-tip-icon,
  .doc-target-icon,
  .doc-section-icon svg,
  .doc-feat-icon svg,
  .doc-rule-icon svg,
  .doc-step-icon svg,
  .doc-tip-icon svg,
  .doc-target-icon svg,
  .bg-\[\#25D366\]\/10 {
    transition: none !important;
    animation: none !important;
  }
  .ws-icon-hero::before { animation: none !important; }
  .ws-icon-chip:hover,
  .ws-icon-card:hover .ws-icon-chip,
  .ws-icon-trigger:hover .ws-icon-chip,
  .doc-feature-card:hover .doc-feat-icon,
  .doc-rule-card:hover .doc-rule-icon,
  .doc-step-card:hover .doc-step-icon,
  .doc-tip-card:hover .doc-tip-icon,
  .doc-target-card:hover .doc-target-icon {
    transform: none !important;
  }
  .ws-icon-chip:hover svg,
  .ws-icon-card:hover .ws-icon-chip svg,
  .ws-icon-trigger:hover .ws-icon-chip svg,
  .doc-feature-card:hover .doc-feat-icon svg,
  .doc-rule-card:hover .doc-rule-icon svg,
  .doc-step-card:hover .doc-step-icon svg,
  .doc-tip-card:hover .doc-tip-icon svg,
  .doc-target-card:hover .doc-target-icon svg {
    transform: none !important;
  }
  .ws-icon-hero[data-draw-on] svg path,
  .ws-icon-hero[data-draw-on] svg line,
  .ws-icon-hero[data-draw-on] svg polyline,
  .ws-icon-hero[data-draw-on] svg circle,
  .ws-icon-hero[data-draw-on] svg rect {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
  .ws-reveal-pending .ws-icon-chip,
  .ws-reveal-pending.ws-icon-chip,
  .ws-reveal-pending .ws-icon-hero,
  .ws-reveal-pending.ws-icon-hero {
    opacity: 1 !important;
    transform: none !important;
  }
}