/* 4G GPS Hardware (EIT-AmEco) page: theme tokens, animations and scene layout.
   Loaded only on its own route (see src/lib/pageStylesheets.ts). */

.gh-root {
  /* Follow the site theme (light/dark) so the page matches vehicle-tracking and the other product pages.
     Channels (H S L) are kept so Tailwind opacity modifiers keep working. */
  --gh-navy-deep: var(--background);
  --gh-navy: var(--muted);
  --gh-glow: var(--primary);
  --gh-primary: var(--primary);
  --gh-on-dark: var(--foreground);
  --gh-on-dark-muted: var(--muted-foreground);
  /* full colour for arbitrary values / gradients */
  --glow: hsl(var(--gh-glow));
  --gh-card-shadow: 0 20px 50px -28px rgb(15 23 42 / 0.28);
}
.dark .gh-root { --gh-card-shadow: 0 24px 60px -28px rgb(0 0 0 / 0.65); }

/* ---------- helpers ---------- */
.gh-root .gh-brand { background-image: none; background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.gh-root .gh-text-gradient { color: hsl(var(--primary)); }
.gh-root .gh-glass {
  background: hsl(var(--gh-on-dark) / 0.06);
  border: 1px solid hsl(var(--gh-on-dark) / 0.12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.gh-root .gh-grid-lines {
  background-image:
    linear-gradient(hsl(var(--gh-on-dark) / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--gh-on-dark) / 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ---------- animations ---------- */
@keyframes gh-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gh-float3d {
  0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
  50% { transform: translateY(-14px) rotateX(3deg) rotateY(-4deg); }
}
@keyframes gh-pulse-glow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes gh-spin-slow { to { transform: rotate(360deg); } }
@keyframes gh-ripple { 0% { transform: scale(.7); opacity: .75; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes gh-shine { 0% { transform: translateX(-130%); } 100% { transform: translateX(480%); } }
@keyframes gh-shadow { 0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .7; } 50% { transform: translateX(-50%) scaleX(.82); opacity: .45; } }

.gh-root .gh-rise { opacity: 0; animation: gh-rise .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.gh-root .gh-float3d { animation: gh-float3d 6s ease-in-out infinite; }
.gh-root .gh-pulse-glow { animation: gh-pulse-glow 4.5s ease-in-out infinite; }
/* softer glows on the light theme */
@keyframes gh-pulse-glow-light { 0%, 100% { opacity: .2; transform: scale(1); } 50% { opacity: .38; transform: scale(1.08); } }
html:not(.dark) .gh-root .gh-pulse-glow { animation-name: gh-pulse-glow-light; }
.gh-root .gh-spin-slow { animation: gh-spin-slow 28s linear infinite; }
.gh-root .gh-ripple { animation: gh-ripple 3.2s ease-out infinite; }
.gh-root .gh-shine { animation: gh-shine 3.4s ease-in-out infinite; }
.gh-root .gh-shadow { animation: gh-shadow 6s ease-in-out infinite; }

/* scroll reveal (toggled by the useReveal hook) */
.gh-root .gh-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.gh-root .gh-reveal.is-visible { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.gh-root .hero-overlay {
  background:
    radial-gradient(60% 60% at 74% 50%, hsl(var(--gh-glow) / 0.16), transparent 70%),
    linear-gradient(90deg, hsl(var(--gh-navy-deep)) 0%, hsl(var(--gh-navy-deep) / 0.88) 34%, hsl(var(--gh-navy-deep) / 0.45) 62%, hsl(var(--gh-navy-deep) / 0.2) 100%);
}

/* ---------- product breakdown (pinned scroll scene) ---------- */
.gh-root .bd-section { height: 380vh; }
.gh-root .bd-stage { height: 100vh; height: 100svh; }
.gh-root .bd-anchor { width: min(36vw, 22rem); aspect-ratio: 1 / 1; }
@media (max-width: 767px) { .gh-root .bd-anchor { width: min(62vw, 18rem); } .gh-root .bd-section { height: 340vh; } }
.gh-root .bd-img { filter: drop-shadow(0 18px 30px hsl(var(--gh-glow) / 0.28)); }
.gh-root .bd-label { opacity: 0; }
.gh-root .bd-fly { contain: layout; }
/* before the scene runs (and without JS motion) the row shows statically */
.gh-root .bd-section[data-bd-state="before"] .bd-slot img,
.gh-root .bd-section:not([data-bd-state]) .bd-slot img { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .gh-root .bd-section { height: auto; }
  .gh-root .bd-stage { height: auto; position: relative; padding: 5rem 0; }
  .gh-root .bd-label { opacity: 1; }
  .gh-root .bd-fly { display: none; }
  .gh-root .gh-rise, .gh-root .gh-reveal { opacity: 1; transform: none; animation: none; transition: none; }
  .gh-root .gh-float3d, .gh-root .gh-pulse-glow, .gh-root .gh-spin-slow, .gh-root .gh-ripple, .gh-root .gh-shine, .gh-root .gh-shadow { animation: none; }
}

/* ---------- capabilities carousel ---------- */
.gh-root .cap-track { --sw: 33.3333%; transform: translateX(calc(50% - var(--sw) / 2 - var(--pos) * var(--sw))); will-change: transform; }
.gh-root .cap-slide { flex: 0 0 var(--sw); width: var(--sw); }
@media (max-width: 1023px) { .gh-root .cap-track { --sw: 50%; } }
@media (max-width: 639px) { .gh-root .cap-track { --sw: 84%; } }

/* ---------- FAQ illustration ---------- */
@keyframes gh-faq-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.gh-root .faq-bob { animation: gh-faq-bob 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .gh-root .faq-bob { animation: none; } }

/* ---------- light theme: drop the large blurred glows (they read as grey/blue smudges on white) ---------- */
html:not(.dark) .gh-root .blur-3xl { display: none; }
html:not(.dark) .gh-root .bd-img { filter: drop-shadow(0 14px 22px rgb(15 23 42 / 0.18)); }
html:not(.dark) .gh-root .gh-sweep { display: none; }