/* Shared motion styles for NET pages. Effects are vanilla GSAP ports of React Bits
   ideas (SplitText, RotatingText, ShinyText, ScrollReveal, SpotlightCard, StarBorder, Magnet).
   Everything here degrades to static, readable content without JS or with reduced motion. */

/* Hide intro elements only while the intro is about to play; motion.js adds .motion-ready
   (or a 3s fallback does) so content can never stay hidden. */
.motion:not(.motion-ready) [data-intro],
.motion:not(.motion-ready) [data-split],
.motion:not(.motion-ready) [data-rotate],
.motion:not(.motion-ready) [data-logo] { visibility: hidden; }

/* Background: circuit canvas (circuit.js) over drifting red and gold light.
   Pages keep body transparent so these show; html carries the base colour. */
.circuit-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.bg-glow { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.bg-glow i { position: absolute; border-radius: 50%; will-change: transform; }
.bg-glow .g1 { width: 80vmax; height: 80vmax; left: -34vmax; top: -30vmax; background: radial-gradient(closest-side, rgba(179, 0, 12, .26), rgba(179, 0, 12, .08) 55%, transparent); }
.bg-glow .g2 { width: 70vmax; height: 70vmax; right: -30vmax; top: 10vh; background: radial-gradient(closest-side, rgba(217, 180, 90, .11), transparent); }
.bg-glow .g3 { width: 75vmax; height: 75vmax; right: -20vmax; bottom: -40vmax; background: radial-gradient(closest-side, rgba(200, 16, 24, .2), rgba(200, 16, 24, .05) 60%, transparent); }
/* Glass: frosted panels over the circuit background. Pages opt in per rule with these tokens. */
:root {
  --glass-bg: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .015) 45%, rgba(255, 255, 255, .03)), rgba(16, 14, 12, .46);
  --glass-border: rgba(255, 240, 210, .12);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 24px 48px -28px rgba(0, 0, 0, .8);
  --glass-blur: blur(16px) saturate(150%);
}
/* Browsers without backdrop-filter get a solid panel so text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: rgba(19, 18, 16, .94); }
}

/* Thin red-to-gold rule used as an accent on both pages. */
.redline { height: 1px; background: linear-gradient(90deg, transparent, var(--red) 25%, var(--gold) 75%, transparent); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* RotatingText: words stack in one grid cell; the clip keeps outgoing letters from spilling. */
.rotator { display: inline-grid; vertical-align: bottom; clip-path: inset(-0.15em -0.3em -0.3em -0.3em); }
.rotator > .rot-word { grid-area: 1 / 1; white-space: nowrap; }
.rotator > .rot-word + .rot-word { visibility: hidden; }

/* ShinyText: a light band sweeps across gold text. */
.shiny {
  background: linear-gradient(110deg, var(--gold) 0%, var(--gold) 40%, #FFF6D6 50%, var(--gold) 60%, var(--gold) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold);
}

/* SpotlightCard: soft light and a lit edge follow the pointer. --o fades both in. */
.spot { position: relative; isolation: isolate; overflow: hidden; --x: 50%; --y: 0%; --o: 0; }
.spot::before, .spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--o); }
.spot::before { z-index: -1; background: radial-gradient(280px circle at var(--x) var(--y), rgba(243, 220, 151, .13), transparent 70%); }
.spot::after {
  padding: 1px;
  background: radial-gradient(200px circle at var(--x) var(--y), rgba(243, 220, 151, .85), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* StarBorder: a point of light travels round the outline. */
.star {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--gold-hi); background: #15130F; border: 0; border-radius: 999px; padding: 15px 26px; min-height: 52px; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(217, 180, 90, .35); --a: 0deg;
  -webkit-tap-highlight-color: transparent;
}
.star::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--a), transparent 0 62%, rgba(255, 240, 184, .15) 74%, #FFF0B8 86%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.star:hover { color: #FFF6D6; box-shadow: inset 0 0 0 1px rgba(243, 220, 151, .6), 0 0 32px -8px rgba(217, 180, 90, .45); }
.star .arrow { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.star:hover .arrow { transform: translateX(3px); }
.star.solid { background: linear-gradient(135deg, #B8862A, #F3DC97 45%, #C9982F 70%, #8A6418); color: #120F08; box-shadow: none; }
.star.solid::after { background: conic-gradient(from var(--a), transparent 0 62%, rgba(255, 255, 255, .25) 74%, #fff 86%, transparent 92%); }
.star.solid:hover { color: #000; box-shadow: 0 0 36px -8px rgba(243, 220, 151, .55); }

/* Magnet targets need their own layer so the transform is cheap. */
[data-magnet] { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .star .arrow, .star:hover .arrow { transition: none; transform: none; }
}

/* ---------- Floating WhatsApp button (assets/contact.js adds it once a number is set) ---------- */
.wa-float{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:30;
  display:inline-flex;align-items:center;gap:0;height:56px;min-width:56px;padding:0 16px;border-radius:999px;text-decoration:none;
  color:#fff;background:#1DA851;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 10px 28px -8px rgba(0,0,0,.8),0 0 24px -6px rgba(37,211,102,.55);
  transition:gap .3s cubic-bezier(.2,.8,.2,1),background-color .2s;animation:wa-in .6s cubic-bezier(.2,.8,.2,1) 1.2s backwards}
.wa-float:hover,.wa-float:focus-visible{color:#fff;background:#127A3C;gap:10px}
.wa-float.wa-away{opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;visibility:hidden;transition:opacity .25s,transform .25s,visibility 0s .25s}
.wa-float{transition:gap .3s cubic-bezier(.2,.8,.2,1),background-color .2s,opacity .25s,transform .25s}
.wa-float svg{width:26px;height:26px;fill:currentColor;flex:none}
.wa-float .wa-lbl{max-width:0;overflow:hidden;white-space:nowrap;font-weight:700;font-size:14px;letter-spacing:.02em;transition:max-width .35s cubic-bezier(.2,.8,.2,1)}
.wa-float:hover .wa-lbl,.wa-float:focus-visible .wa-lbl{max-width:160px}
@keyframes wa-in{from{opacity:0;transform:translateY(20px) scale(.8)}to{opacity:1;transform:none}}
@media (hover:none){.wa-float .wa-lbl{display:none}}
@media (max-width:640px){.has-wa body{padding-bottom:84px}}
@media (prefers-reduced-motion:reduce){.wa-float{animation:none;transition:none}.wa-float .wa-lbl{transition:none}}