/* ---------- Home hero visual (feedback round 1, item 2) ----------
   The tools a business already uses, wrapped in one AI layer, talking to "העסק שלכם",
   and what comes out of it. Replaces the hero film. Motion: assets/hero-visual.js.
   Explored in research/hero-r2-c/ (direction C2b, AI on the halo). */
.hero-visual { position: relative; }
@media (min-width: 1081px) {
  /* the visual takes the full height of the copy beside it */
  .hero .film-wrap.hero-visual { align-self: stretch; display: flex; }
  .hero-visual .hv { flex: 1; display: grid; align-content: center; }
}
.hv-sprite { position: absolute; width: 0; height: 0; }
.hv {
  position: relative; border-radius: 26px; background: var(--violet);
  padding: clamp(18px, 2.2vw, 28px); color: #fff; overflow: hidden; /* no dark frame: it disappeared into the dark hero */
}
.hv::before { content: ""; position: absolute; inset: 0; background: radial-gradient(#ffffff2e 1.4px, transparent 1.6px) 0 0 / 18px 18px; mask-image: linear-gradient(90deg, transparent 30%, #000); opacity: .6; pointer-events: none; }
.hv > * { position: relative; }
.hv-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(30px, 3vw, 44px); align-items: center; } /* the gap also clears "✦ AI" passing the halo's side; the outcomes take their one-line width; the tools around the business get the rest */

/* the ring: tools around the business */
.hv-ring { position: relative; aspect-ratio: 1 / 1; width: calc(100% / 1.16); max-width: 380px; margin: 8% auto; } /* the halo reaches 8% past the ring on each side, so 1.16 keeps it inside its column */
.hv-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hv-w { stroke: #17182d; stroke-width: 3.2; stroke-linecap: round; transition: stroke .6s; }
.hv.s-wire .hv-w { stroke: #50e3c255; }
.hv-w-in { stroke: var(--mint); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s var(--ease-out) calc(var(--i) * .13s); }
.hv.s-wire .hv-w-in { stroke-dashoffset: 0; }
.hv-w-in.flash { animation: hv-wflash .9s ease-out; }
@keyframes hv-wflash { 35% { stroke: #fff; stroke-width: 2.6; } }
.hv-dots circle { fill: #fff; }
.hv:not(.s-wire) .hv-dots { display: none; }
.hv-slot { position: absolute; width: 18%; aspect-ratio: 1; transform: translate(-50%, -50%); background: #fff; border: 3px solid var(--ink); border-radius: 26%; box-shadow: 3px 3px 0 var(--ink); transition: scale .3s var(--ease-out); }
.hv-slot.ping { scale: 1.1; }
.hv.s-wire:not(.s-done) .hv-slot { animation: hv-pop .5s var(--ease-out) calc(var(--i) * .13s) both; }
@keyframes hv-pop { 45% { scale: 1.12; } }
.hv-mk { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; scale: .7; transition: opacity .45s var(--ease-out), scale .45s var(--ease-out); }
.hv-mk.on { opacity: 1; scale: 1; }
.hv-mk svg { width: 62%; height: 62%; }

/* the business at the centre: it only "lives" very softly */
.hv-biz { position: absolute; left: 50%; top: 50%; width: 50%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; }
.hv-biz-tile { width: 72%; aspect-ratio: 1; padding: 10%; box-sizing: border-box; border-radius: 26%; background: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 #0d0e1f; display: grid; place-items: center; align-content: center; gap: 3px; text-align: center; color: #fff; transition: box-shadow .5s var(--ease-out); }
.hv.s-core .hv-biz-tile { box-shadow: 4px 4px 0 #0d0e1f, 0 0 0 4px #50e3c226, 0 0 18px #50e3c255; }
.hv.s-done .hv-biz-tile { animation: hv-live 7s ease-in-out infinite; }
@keyframes hv-live { 50% { border-color: var(--mint); } }
.hv-biz-ic svg { width: clamp(18px, 1.9vw, 24px); height: clamp(18px, 1.9vw, 24px); fill: none; stroke: var(--mint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hv-biz-tile b { font-size: clamp(11px, 1.05vw, 14px); font-weight: 800; line-height: 1.15; }

/* the AI layer around everything: always there, breathing, sparks on its edge */
.hv-halo { position: absolute; inset: -8%; border-radius: 50%; opacity: 0; transition: opacity .9s var(--ease-out); }
.hv.ran .hv-halo, .hv.s-wire .hv-halo { opacity: 1; }
.hv-halo::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 2px; background: conic-gradient(#50e3c2, #50e3c200 28%, #50e3c200 52%, #50e3c2cc 78%, #50e3c2); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: hv-spin 9s linear infinite; }
@keyframes hv-spin { to { rotate: 360deg; } }
.hv-glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #50e3c224 22%, #50e3c20d 58%, transparent 71%); animation: hv-breathe 5.5s ease-in-out infinite; }
@keyframes hv-breathe { 0%, 100% { scale: .97; opacity: .75; } 50% { scale: 1.02; opacity: 1; } }
.hv-orb { position: absolute; inset: 0; border-radius: 50%; rotate: var(--o); animation: hv-orbit var(--t) linear infinite; pointer-events: none; }
.hv-orb::after { content: ""; position: absolute; left: 50%; top: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px #50e3c2b3; animation: hv-twinkle 2.4s ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes hv-orbit { to { rotate: calc(var(--o) + 360deg); } }
@keyframes hv-twinkle { 50% { opacity: .35; scale: .7; } }
.hv-ripple { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--mint); opacity: 0; scale: .32; }
.hv-halo.beat .hv-ripple { animation: hv-ripple 1.1s var(--ease-out); }
@keyframes hv-ripple { 0% { scale: .32; opacity: .9; } 100% { scale: 1; opacity: 0; } }
/* "✦ AI" travels a short arc over the top, ten o'clock to two o'clock, once per run
   (it rests at 1:30 unrotated, so -105deg is ten o'clock and +15deg is two o'clock) */
.hv-word { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; }
.hv-word text { fill: var(--mint); font-size: 5.6px; font-weight: 800; letter-spacing: .4px; }
.hv-word.orbiting { animation: hv-word var(--run, 14s) ease-in-out 1 both; }
@keyframes hv-word { 0% { rotate: -105deg; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { rotate: 15deg; opacity: 0; } }

/* what comes out of it: compact, one line each, under a mint-underlined heading. The cards are there from the
   start; once (desktop: 5s after arriving, phones: when the whole visual is in view) all three icons deepen
   together, very softly, and stay that way. Nothing here should pull attention from the headline. */
.hv-k { display: block; width: fit-content; margin-bottom: 10px; padding: 0 .12em; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(#50e3c2b3, #50e3c2b3) 0 100% / 100% .3em no-repeat; }
.hv-outs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hv-outs li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 12px; background: #fff; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); font-weight: 700; font-size: clamp(12.5px, .95vw, 14px); line-height: 1.25; white-space: nowrap; }
.hv-ic { width: 26px; height: 26px; border-radius: 8px; background: #50e3c22b; color: var(--ink); display: grid; place-items: center; flex: none; transition: background-color 1.6s ease; }
.hv-out.lit .hv-ic { background: #50e3c266; }
.hv-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Phones and tablets: the two pointers sit below the visual, above the actions */
.ptr-m { display: none; }
@media (max-width: 1080px) {
  .hero .wrap.hero-grid { grid-template-areas: "copy" "film" "ptr" "act"; }
  .hero .ptr-desk { display: none; }
  .hero .ptr-m { display: flex; grid-area: ptr; margin-top: -6px; }
}
@media (max-width: 600px) {
  .hv { border-radius: 22px; padding: 16px 14px; }
  .hv-grid { grid-template-columns: 1fr; gap: 10px; }
  .hv-ring { max-width: 220px; margin: 10% auto 4%; } /* room above for "✦ AI" passing over the halo */
  .hv-biz-tile b { font-size: 11px; }
  .hv-word text { font-size: 6.4px; }
  .hv-k { font-size: 12.5px; margin-bottom: 8px; }
  .hv-outs { gap: 8px; }
  .hv-outs li { font-size: 13.5px; padding: 8px 9px; }
}
/* Reduced motion: the settled frame (set by the script), nothing moves */
@media (prefers-reduced-motion: reduce) {
  .hv *, .hv *::before, .hv *::after { animation: none !important; transition: none !important; }
  .hv-dots, .hv-orb { display: none; }
  .hv-halo, .hv-word { opacity: 1; }
  .hv-word { rotate: -45deg; }
}