/* Interactive layer of the home hero (designed 2026-10-07, made the live hero by the owner 2026-10-16). It layers on
   top of the site's hero and changes nothing without its script: a pointer light, depth parallax, faces that take turns saying hello (rings, a
   "talking" pill and the greeting's English meaning), a gold sheen on "gets you." and a magnetic main button.
   Everything that moves is off when the reader prefers reduced motion. */
@property --gx{syntax:"<percentage>";inherits:false;initial-value:-40%}

/* Pointer light: a soft glow, and the dot grid brightening under the cursor. --sx/--sy are px inside the hero. */
.fx-light{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(600px circle at calc(var(--sx,-999) * 1px) calc(var(--sy,-999) * 1px),rgba(255,255,255,.13),rgba(255,255,255,.04) 42%,transparent 66%)}
.fx-light::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.6) 1.2px,transparent 1.7px) 0 0/26px 26px;
  -webkit-mask:radial-gradient(230px circle at calc(var(--sx,-999) * 1px) calc(var(--sy,-999) * 1px),#000,transparent);mask:radial-gradient(230px circle at calc(var(--sx,-999) * 1px) calc(var(--sy,-999) * 1px),#000,transparent)}
.hero.fx-lit .fx-light{opacity:1}

/* Depth: --px/--py run from -1 to 1 with the pointer. Faces move against it (nearer ones more), the copy a little with it. */
.hero-corner{translate:calc(var(--px,0) * var(--dx) * -1px) calc(var(--py,0) * var(--dy) * -1px)}
.hero-c1{--dx:22;--dy:16}.hero-c2{--dx:30;--dy:22}.hero-c3{--dx:18;--dy:14}.hero-c4{--dx:34;--dy:24}
.hero-stk{translate:calc(var(--px,0) * -9px) calc(var(--py,0) * -7px)}
.hero-core{translate:calc(var(--px,0) * 5px) calc(var(--py,0) * 4px)}

/* A face that is speaking: it lifts, voice rings spread from it, a "talking" pill shows and the others dim. */
.hero-face,.hero-stk{pointer-events:auto}
.hero-corner{isolation:isolate}
.hero-face{transition:scale .55s cubic-bezier(.34,1.56,.64,1),filter .45s ease}
.hero-corner::before,.hero-corner::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;border:2px solid rgba(255,255,255,.65);opacity:0;pointer-events:none}
.is-speaking .hero-face{scale:1.045}
.has-speaker .hero-corner:not(.is-speaking) .hero-face{filter:saturate(.7) brightness(.86)}
.fx-talk{position:absolute;z-index:2;left:50%;top:72%;display:flex;align-items:center;gap:3px;height:26px;padding:0 11px;border-radius:999px;background:rgba(18,10,43,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;translate:-50% 8px;transition:opacity .3s ease,translate .45s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.fx-talk b{width:3px;height:12px;border-radius:2px;background:#FFC456;transform-origin:50% 50%}
.is-speaking .fx-talk{opacity:1;translate:-50% 0}

/* The sticker turns to show what the greeting means. */
.hero-stk.fx{display:grid;justify-items:center;overflow:hidden}
.stk-a,.stk-b{grid-area:1/1;transition:opacity .3s ease,translate .5s cubic-bezier(.2,.8,.2,1)}
.stk-b{font-family:var(--font);opacity:0;translate:0 .7em}
.is-speaking .stk-a{opacity:0;translate:0 -.7em}
.is-speaking .stk-b{opacity:1;translate:0 0}

/* A light sheen crosses the gold words now and then. */
.hero h1 em{background:linear-gradient(100deg,#FFC456 calc(var(--gx) - 20%),#FFF5D8 var(--gx),#FFC456 calc(var(--gx) + 20%));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 em .hero-stop{color:#FFC456} /* it hangs outside the em's box, so the clipped gradient never reaches it */

/* Sparkles that burst around the gold words. */
.fx-spark{position:absolute;z-index:6;width:var(--z);height:var(--z);margin:calc(var(--z) / -2) 0 0 calc(var(--z) / -2);color:#FFE7A8;pointer-events:none}

/* The main button leans toward the pointer and a sheen crosses it on hover. */
.hero-primary{position:relative;overflow:hidden;translate:calc(var(--bx,0) * 1px) calc(var(--by,0) * 1px);transition:transform .2s ease,background-color .2s ease}
.hero-primary::after{content:"";position:absolute;inset:-2px;background:linear-gradient(105deg,transparent 35%,rgba(141,87,229,.2) 50%,transparent 65%);translate:-110% 0;transition:translate .8s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.hero-primary:hover::after{translate:110% 0}

@media (max-width:700px){.fx-talk{top:64%;height:22px;padding:0 9px}.fx-talk b{height:9px}}

@media (prefers-reduced-motion:no-preference){
  .is-speaking::before{animation:fx-ring 1.8s cubic-bezier(.2,.6,.3,1) infinite}
  .is-speaking::after{animation:fx-ring 1.8s cubic-bezier(.2,.6,.3,1) .6s infinite}
  .is-speaking .fx-talk b{animation:fx-bar .9s ease-in-out infinite}
  .fx-talk b:nth-child(2){animation-delay:-.3s}.fx-talk b:nth-child(3){animation-delay:-.6s}.fx-talk b:nth-child(4){animation-delay:-.15s}
  .hero h1 em{animation:fx-sheen 7s ease-in-out 1.8s infinite}
  .fx-spark{animation:fx-pop .9s cubic-bezier(.2,.8,.2,1) forwards}
}
@media (prefers-reduced-motion:reduce){
  .stk-a,.stk-b,.fx-talk,.hero-face,.hero-primary,.hero-primary::after{transition:none}
}
@keyframes fx-ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.34)}}
@keyframes fx-bar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes fx-sheen{0%,72%{--gx:-40%}100%{--gx:140%}}
@keyframes fx-pop{0%{opacity:0;transform:scale(0) rotate(0)}35%{opacity:1;transform:scale(1) rotate(45deg)}100%{opacity:0;transform:translateY(-14px) scale(.2) rotate(110deg)}}