/* AwarenessCORE shared extras: motion, hotspots, Know the signs band, Coming soon, trust strip.
   Linked by ac-catalog.html and every ac-pain page. CSS only, no libraries. Everything that moves is
   inside prefers-reduced-motion: no-preference, and a final reduce block switches the rest off. */

/* ------------------------------------------------------------------ MOTION */
@media (prefers-reduced-motion: no-preference) {
  @keyframes acfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  @keyframes acrise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  /* Slow float: art frames only (banner, card images with their badge, threat heroes). Transform only,
     so nothing around them moves. Durations and starting points differ so they never sync up. */
  .ph-banner,
  .card-art,
  .has-art .em,
  .viz-art .art-frame {
    animation: acfloat var(--fd, 8s) ease-in-out var(--fdl, 0s) infinite;
    will-change: transform;
  }
  .viz-art .art-frame { --fd: 9s; --fdl: -2s; }
  .ph-banner { --fd: 8s; --fdl: -1s; }
  .mgrid > :nth-child(3n+1), .progs > :nth-child(odd) { --fd: 7s; --fdl: -1s; }
  .mgrid > :nth-child(3n+2), .progs > :nth-child(even) { --fd: 8.2s; --fdl: -3.5s; }
  .mgrid > :nth-child(3n+3) { --fd: 9s; --fdl: -6s; }

  /* One orchestrated reveal for the hero, staggered. No other section fades in. */
  .hero .hcopy > *, .hero .viz, .hero .viz-art,
  .page-h:not(.page-h-art) > *, .ph-text > *, .ph-bwrap {
    animation: acrise .6s cubic-bezier(.2, .7, .2, 1) both;
  }
  .hero .hcopy > :nth-child(1), .page-h:not(.page-h-art) > :nth-child(1), .ph-text > :nth-child(1) { animation-delay: .00s; }
  .hero .hcopy > :nth-child(2), .page-h:not(.page-h-art) > :nth-child(2), .ph-text > :nth-child(2) { animation-delay: .07s; }
  .hero .hcopy > :nth-child(3), .page-h:not(.page-h-art) > :nth-child(3), .ph-text > :nth-child(3) { animation-delay: .14s; }
  .hero .hcopy > :nth-child(4) { animation-delay: .21s; }
  .hero .hcopy > :nth-child(5) { animation-delay: .28s; }
  .hero .viz, .hero .viz-art, .ph-bwrap { animation-delay: .18s; }
}

/* Gentle scroll parallax on the staggered rows, where the browser supports scroll-driven animation.
   Elsewhere the rows are simply static. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes acpar { from { transform: translateY(26px); } to { transform: translateY(-26px); } }
    .stagvis {
      animation: acpar linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

/* ---------------------------------------------------------------- HOTSPOTS */
.ioc-wrap { position: relative; }
.hs-layer { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1200 / 900; pointer-events: none; }
.hs {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 36px; height: 36px; padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto;
  display: grid; place-items: center; z-index: 3;
}
.hs-dot { position: relative; width: 16px; height: 16px; border-radius: 50%; background: #dc2626; border: 2px solid #fff; box-shadow: 0 1px 6px rgba(25, 26, 36, .35); }
.hs-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(220, 38, 38, .7); opacity: 0; }
.hs:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 6px #0f766e; border-radius: 50%; }
.hs.open .hs-dot { background: #0f766e; }
.hs-pop {
  position: absolute; z-index: 4; width: 260px; max-width: 78vw; pointer-events: auto;
  left: clamp(0px, calc(var(--x) - 130px), calc(100% - 260px)); top: calc(var(--y) + 22px);
  background: #fff; color: #191a24; border: 1px solid #e2dbcc; border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 12px 30px rgba(25, 26, 36, .22); font-size: 13.5px; line-height: 1.45;
  visibility: hidden; opacity: 0; transform: translateY(4px);
}
.hs-pop.up { top: auto; bottom: calc(100% - var(--y) + 22px); }
.hs-pop strong { display: block; font-family: var(--disp, sans-serif); font-size: 14px; margin-bottom: 4px; }
.hs-pop p { color: #4a4c5c; }
.hs.open + .hs-pop { visibility: visible; opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes acpulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
  .hs-dot::after { animation: acpulse 1.8s ease-out infinite; }
  .hs-pop { transition: opacity .15s, transform .15s, visibility .15s; }
}

/* ---------------------------------------------------------- KNOW THE SIGNS */
.signs-band { background: #0F1B18; color: #d7e6e2; padding: 64px 0; }
.signs-band .sec-eyebrow { font-family: var(--mono, monospace); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #5eead4; }
.signs-band .mid-h { font-family: var(--disp, sans-serif); font-weight: 800; font-size: clamp(23px, 3.2vw, 30px); letter-spacing: -.02em; line-height: 1.15; color: #fff; margin: 8px 0 10px; }
.signs-band a { text-decoration: none; }
.sb-sub { font-size: 15px; color: #a7c4bd; max-width: 640px; margin-bottom: 26px; }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.sb-chip {
  display: flex; flex-direction: column; gap: 7px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(94, 234, 212, .22); background: rgba(255, 255, 255, .03);
}
.sb-chip:hover, .sb-chip:focus-visible { border-color: #5eead4; background: rgba(94, 234, 212, .08); }
.sb-chip[aria-current="page"] { border-color: #5eead4; }
.sb-name { font-family: var(--disp, sans-serif); font-weight: 700; font-size: 15px; color: #5eead4; }
.sb-sign { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.4; color: #e3efec; }
.sb-sign::before { content: ""; flex: 0 0 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: #f87171; }
@media (prefers-reduced-motion: no-preference) {
  .sb-chip { transition: border-color .15s, background .15s, transform .15s; }
  .sb-chip:hover { transform: translateY(-2px); }
}

/* ------------------------------------------------------------- COMING SOON */
.soon-card .stat.soon { background: var(--amber-soft, #f6ead9); color: #9a4d09; }
.soon-card .mfoot { flex-wrap: wrap; }
.soon-read { font-size: 13px; font-weight: 600; color: var(--teal-dark, #0b5a54); text-decoration: underline; text-underline-offset: 3px; }
.soon-card { scroll-margin-top: 80px; }
.modsoon { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft, #4a4c5c); }
.modsoon a { color: var(--teal-dark, #0b5a54); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- TRUST STRIP */
.trust-strip { padding: 34px 0; border-top: 1px solid var(--line, #e2dbcc); }
.ts-title { font-family: var(--disp, sans-serif); font-weight: 800; font-size: 18px; margin-bottom: 14px; }
.ts-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 24px; }
.ts-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; color: var(--ink-soft, #4a4c5c); }
.ts-list svg { width: 17px; height: 17px; stroke: var(--teal, #0f766e); fill: none; stroke-width: 2.4; flex-shrink: 0; margin-top: 3px; }
.ts-built { margin-top: 18px; font-size: 13.5px; color: var(--ink-soft, #4a4c5c); }

/* ------------------------------------------------- OPTIONAL BANNER LOOP */
.ph-vid { display: block; width: 100%; height: auto; aspect-ratio: 2000 / 857; background: #F6F4EE; }

/* Notify me note on the lead form */
.notify-note { font-size: 13px; color: var(--teal-dark, #0b5a54); background: var(--teal-tint, #e3f1ef); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }

/* --------------------------------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}