/* ============================================================================
 *  effects.css — the "wow factor" layer
 *
 *  Modern shadcn/ui + Magic-UI-inspired effects, applied tastefully on top
 *  of base/sections/animations. Everything here is presentation-only and
 *  100% GPU-friendly (transform / opacity / filter). All motion is fully
 *  disabled under prefers-reduced-motion at the end of the file.
 *
 *  Loaded LAST so it can refine anything. Colour comes from the theme
 *  tokens (so it follows the SIPO Theme Builder palette automatically).
 * ========================================================================== */

/* ---- 1. Spotlight hover on cards -------------------------------------
   A soft radial glow follows the cursor across product / why / stat
   cards. JS (effects.js) sets --mx / --my to the local cursor position.
   Falls back gracefully to a static centred glow on touch devices. */
.card--hover, .why-card, .pcard, .tcard{
  --mx:50%; --my:0%;
}
.card--hover::before, .why-card::before, .pcard::before{
  /* note: #specials .pcard::before is the accent rail — kept separate */
}
.spotlight{ position:relative; }
.spotlight::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(
    240px circle at var(--mx) var(--my),
    rgb(var(--primary) / .14), transparent 60%);
}
.spotlight:hover::after{ opacity:1; }
@media(hover:none){ .spotlight::after{ display:none; } }

/* ---- 2. Animated dot grid on plain hero + CTA band -------------------
   A slowly drifting dot field gives flat backgrounds depth and life,
   like Magic UI's animated grid pattern. Masked so it fades at edges. */
@keyframes gridDrift{ to{ background-position:38px 38px; } }
.hero--plain::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:radial-gradient(rgb(var(--foreground) / .14) 1px, transparent 1.4px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(75% 75% at 50% 35%, #000, transparent);
  mask-image:radial-gradient(75% 75% at 50% 35%, #000, transparent);
  animation:gridDrift 28s linear infinite;
}

/* ---- 3. Aurora wash on tinted sections -------------------------------
   A very soft, slowly shifting brand-coloured aurora behind tint bands —
   premium and barely-there, never distracting from content. */
@keyframes auroraShift{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(4%,-3%,0) scale(1.15); }
}
.section--tint{ position:relative; overflow:hidden; isolation:isolate; }
.section--tint::after{
  content:""; position:absolute; z-index:-1; inset:-30%;
  background:radial-gradient(40% 40% at 25% 30%, rgb(var(--primary) / .1), transparent 70%),
             radial-gradient(35% 35% at 80% 70%, rgb(var(--primary) / .07), transparent 70%);
  animation:auroraShift 22s ease-in-out infinite;
}

/* ---- 4. Border beam on the CTA band ----------------------------------
   A light streak travels the CTA band's edge — Magic UI's "border beam".
   Pure CSS via a conic-gradient mask ring. */
@keyframes beamSpin{ to{ transform:rotate(1turn); } }
.cta-band{ isolation:isolate; }
.cta-band::after{
  /* override the plain decorative blob from sections.css with the beam */
  content:""; position:absolute; inset:0; z-index:0; padding:1.5px;
  border-radius:inherit; pointer-events:none;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgb(255 255 255 / .9) 28deg, transparent 60deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  width:auto; height:auto; opacity:.55;
  animation:beamSpin 7s linear infinite;
}

/* ---- 5. Shine sweep on primary cards & specials ----------------------
   A diagonal light sweep crosses the card on hover. */
@keyframes shineSweep{ to{ transform:translateX(220%) skewX(-18deg); } }
.pcard{ overflow:hidden; }
.pcard .pcard__img, .pcard .pcard__noimg{ position:relative; }
.pcard::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:42%;
  z-index:3; pointer-events:none;
  transform:translateX(-160%) skewX(-18deg);
  background:linear-gradient(90deg, transparent,
    rgb(255 255 255 / .35), transparent);
}
.pcard.card--hover:hover::after{ animation:shineSweep .9s ease both; }

/* ---- 6. Number ticker for the stats band -----------------------------
   effects.js counts the value up when the band scrolls into view; this
   just keeps the digits steady (no layout shift) + adds a count-in glow. */
.stat__v{ font-variant-numeric:tabular-nums; }
.stat.counting .stat__v{ filter:drop-shadow(0 4px 14px rgb(var(--primary) / .25)); }

/* ---- 7. Magnetic / lift CTA buttons ----------------------------------
   Primary CTAs gain a soft floating glow that intensifies on hover. */
.btn--primary{
  box-shadow:0 1px 2px rgb(0 0 0 / .08),
             0 6px 18px -8px rgb(var(--primary) / .55);
}
.btn--primary:hover{
  box-shadow:0 2px 6px rgb(0 0 0 / .1),
             0 14px 30px -10px rgb(var(--primary) / .7);
}
.btn--lg{ letter-spacing:-.005em; }

/* ---- 8. Hero eyebrow: live "pulse" pill ------------------------------
   The little dot already pulses; add a faint expanding ring for life. */
@keyframes haloPulse{ 0%{ box-shadow:0 0 0 0 rgb(var(--primary) / .35); }
  70%,100%{ box-shadow:0 0 0 10px rgb(var(--primary) / 0); } }
.hero--plain .hero__eyebrow::before{ animation:dotPulse 2s ease-in-out infinite,
  haloPulse 2.4s ease-out infinite; }

/* ---- 9. Section eyebrow underline grow on reveal ---------------------
   The leading accent line draws itself in when the head scrolls in. */
.section__head .section__eyebrow::before{ transition:width .6s
  cubic-bezier(.22,1,.36,1) .15s; }
.section__head:not(.in) .section__eyebrow::before{ width:0; }

/* ---- 10. Gradient headline accent on section heads -------------------
   A subtle vertical sheen on section headings — kept gentle so it never
   washes out the text, with padding so descenders never clip. */
.section__head h2{
  background:linear-gradient(175deg,
    rgb(var(--foreground)) 55%, rgb(var(--primary)) 145%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  padding-bottom:.08em;            /* breathing room for descenders */
}

/* ---- 11. Image reveal: clip-path wipe --------------------------------
   Hero & about images wipe in elegantly instead of a plain fade. */
@keyframes clipReveal{ from{ clip-path:inset(0 0 100% 0); }
  to{ clip-path:inset(0 0 0 0); } }
.about__media.in img{ animation:clipReveal .9s cubic-bezier(.22,1,.36,1) both; }

/* ---- 12. Marquee strip (optional, used if effects.js adds it) --------
   A continuous logo/word strip — set up here, opt-in via .marquee. */
@keyframes marqueeRun{ to{ transform:translateX(-50%); } }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,
  transparent, #000 12%, #000 88%, transparent); }
.marquee__track{ display:flex; gap:2.5rem; width:max-content;
  animation:marqueeRun 32s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ---- 13. Scroll progress bar -----------------------------------------
   A thin brand-coloured progress bar pinned to the top of the viewport;
   effects.js sets --scroll (0..1). */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px;
  z-index:80; transform-origin:0 50%; transform:scaleX(var(--scroll,0));
  background:linear-gradient(90deg, rgb(var(--primary)),
    rgb(var(--primary-hover))); transition:transform .1s linear; }

/* ---- 14. Refined focus ring (accessible + on-brand) ------------------ */
:focus-visible{ outline:2px solid rgb(var(--ring));
  outline-offset:2px; border-radius:6px; }

/* ---- 15. Smooth back-to-top button ----------------------------------- */
.to-top{ position:fixed; right:1.1rem; bottom:1.1rem; z-index:65;
  width:2.85rem; height:2.85rem; border-radius:50%;
  display:grid; place-content:center;
  background:rgb(var(--primary)); color:rgb(var(--primary-foreground));
  box-shadow:0 8px 24px -8px rgb(var(--primary) / .6);
  opacity:0; transform:translateY(14px) scale(.9);
  transition:opacity .25s, transform .25s; pointer-events:none; }
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:rgb(var(--primary-hover)); }
.to-top svg{ width:1.15rem; height:1.15rem; }
/* lift it above the mobile sticky order bar */
@media(max-width:767px){ body.ready .to-top{ bottom:calc(4.6rem + env(safe-area-inset-bottom)); } }

/* ---- 16. Card entrance: 3D tilt-in ----------------------------------- */
@keyframes tiltIn{ from{ opacity:0; transform:perspective(800px) rotateX(7deg) translateY(26px); }
  to{ opacity:1; transform:none; } }
.grid.in > .card{ animation:tiltIn .6s cubic-bezier(.22,1,.36,1) both; }

/* ============================================================================
 *  Reduced motion — disable every animation; keep static, legible styling.
 * ========================================================================== */
@media(prefers-reduced-motion:reduce){
  .hero--plain::before, .section--tint::after, .cta-band::after,
  .pcard::after, .hero--plain .hero__eyebrow::before,
  .about__media.in img, .marquee__track, .grid.in > .card{
    animation:none !important;
  }
  .section__head:not(.in) .section__eyebrow::before{ width:1.4rem; }
  .scroll-progress{ transition:none; }
  .to-top{ transition:none; }
}