/* Homepage motion layer. Loaded only on the homepage, after style.css.
   Without JavaScript, or with reduced motion, every element here still has a finished,
   static look; home.js (GSAP) only adds movement on top. */

:root {
  --glow-o: .17;
  --dot: #d6d6d6;
  --grad: linear-gradient(92deg, var(--action) 0%, var(--accent-2) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --glow-o: .26; --dot: #2a2a2a; }
}
:root[data-theme="dark"] { --glow-o: .26; --dot: #2a2a2a; }

.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;
}

/* The hero is hidden only while the intro is about to play (see MOTION_HEAD in build.py). */
.motion [data-intro] { visibility: hidden; }

/* ---------- scroll progress (added to the header by home.js) ---------- */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--grad); transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------- hero ---------- */
/* overflow: clip (not hidden) so the hero can never be scrolled internally, e.g. when the pause
   button takes focus; the glows are clipped by .hero-bg for the same reason. */
.hero { position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding: 84px 0 48px; }
.hero-bg { position: absolute; inset: -40px; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-bg .dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 42%, #000 15%, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 62% at 50% 42%, #000 15%, transparent 72%);
}
.glow {
  position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0%, transparent 62%);
  opacity: var(--glow-o); will-change: transform;
}
.g1 { --c: var(--action);   top: -34vmax; left: -18vmax; animation: drift-a 24s ease-in-out infinite alternate; }
.g2 { --c: var(--accent-2); top: -26vmax; right: -24vmax; animation: drift-b 30s ease-in-out infinite alternate; }
.g3 { --c: #00b8ff;         bottom: -40vmax; left: 18%;  animation: drift-c 27s ease-in-out infinite alternate; opacity: calc(var(--glow-o) * .8); }
@keyframes drift-a { to { transform: translate(14vmax, 8vmax) scale(1.12); } }
@keyframes drift-b { to { transform: translate(-12vmax, 10vmax) scale(.9); } }
@keyframes drift-c { to { transform: translate(-10vmax, -8vmax) scale(1.15); } }

.hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 12px; border: 1px solid var(--divider); border-radius: 999px; background: color-mix(in srgb, var(--bg) 70%, transparent); margin-bottom: 26px; }
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--success); animation: ping 2.4s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }

.hero-title { font-size: clamp(40px, 7vw, 82px); line-height: 1.04; letter-spacing: -0.045em; }
.hero .lede { margin-top: 24px; }
.hero .actions { margin-top: 34px; }

/* Rotating last word. Without JavaScript it is just a gradient "India." */
.rotator { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.rotator.is-live {
  display: inline-block; position: relative; background: none; color: inherit; padding: 0;
  white-space: nowrap;
  clip-path: inset(-0.2em -60vw -0.22em -60vw);
}
.rot-sizer { visibility: hidden; }
.rot-word {
  position: absolute; top: 0; left: 50%; white-space: nowrap;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .06em; will-change: transform;
}
@media (min-width: 641px) { .d-only { display: inline; } }
@media (max-width: 640px) {
  .d-only { display: none; }
  .rotator.is-live { display: block; margin-inline: auto; }
}

/* Split words (headings) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em 0 .12em; margin: -.06em 0 -.12em; }
.wi { display: inline-block; }
.section-head .link { display: inline-block; }

/* Shine sweep on primary buttons */
.btn.shine { position: relative; overflow: hidden; isolation: isolate; }
.btn.shine::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.btn.shine:hover::after { transform: translateX(120%); }
.btn.shine { box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--action) 70%, transparent); }

/* ---------- product network ---------- */
.orbit { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 52px; }
.orbit-lines, .orbit-core { display: none; }
.orbit-node {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 16px 10px; border: 1px solid var(--divider); border-radius: 14px;
  background: var(--bg); text-decoration: none; white-space: nowrap;
  transition: border-color .35s, box-shadow .35s, background-color .35s;
}
.orbit-node strong { font-size: 15px; font-weight: 750; letter-spacing: -0.01em; }
.orbit-node span { font-size: 12px; color: var(--muted); font-weight: 550; }
.orbit-node:hover, .orbit-node:focus-visible, .orbit-node.is-hot {
  border-color: color-mix(in srgb, var(--action) 70%, var(--divider));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--action) 16%, transparent),
              0 14px 32px -14px color-mix(in srgb, var(--action) 65%, transparent);
}
.orbit-node.is-ping { box-shadow: 0 0 0 7px color-mix(in srgb, var(--action) 22%, transparent); border-color: var(--action); transition-duration: .12s; }

.orbit.is-live {
  display: block; position: relative; max-width: 800px; aspect-ratio: 16 / 8.6; margin: 40px auto 0;
}
.orbit.is-live .orbit-lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit.is-live .orbit-node { position: absolute; left: 50%; top: 50%; z-index: 2; }
.orbit.is-live .orbit-core {
  display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; top: 50%;
  z-index: 3;
}
.orbit-core span {
  position: relative; z-index: 1; display: block; padding: 12px 22px; border-radius: 999px;
  background: var(--fg); color: var(--bg); font-weight: 800; font-size: 17px; letter-spacing: -0.03em;
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--action) 80%, transparent);
}
.orbit-core::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; translate: -50% -50%;
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--action) 30%, transparent), transparent 65%);
  transform: scale(var(--breath, 1)); opacity: .9;
}
.orbit-lines .ring { fill: none; stroke: var(--outline); stroke-width: 1; stroke-dasharray: 2 11; }
.orbit-lines .ring.inner { stroke: var(--divider); stroke-dasharray: 1 7; }
.orbit-lines .line { fill: none; stroke: var(--outline); stroke-width: 1.25; transition: stroke .35s; }
.orbit-lines .line.is-hot { stroke: var(--action); }
.orbit-lines .pulse { fill: none; stroke: var(--action); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 9 120; stroke-dashoffset: 9; }

@media (max-width: 640px) {
  .orbit.is-live { aspect-ratio: 4 / 5; margin-top: 28px; }
  .orbit.is-live .orbit-node span { display: none; }
  .orbit.is-live .orbit-node { padding: 8px 13px; }
  .orbit-core span { font-size: 15px; padding: 10px 18px; }
}

/* Pause control for the looping animation (WCAG 2.2.2) */
.motion-toggle {
  position: absolute; right: 20px; bottom: 18px; z-index: 5;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  border: 1px solid var(--divider); background: color-mix(in srgb, var(--bg) 80%, transparent);
  color: var(--muted); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { color: var(--fg); border-color: var(--outline); }
.motion-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.motion-toggle .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.motion-toggle .i-play, .motion-toggle[aria-pressed="true"] .i-pause { display: none; }
.motion-toggle[aria-pressed="true"] .i-play { display: block; }
@media (max-width: 600px) { .motion-toggle { right: 16px; bottom: 14px; } }

/* ---------- sector band ---------- */
.marquee {
  border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider);
  padding: 26px 0; overflow: hidden; background: var(--bg);
}
.marquee-track { display: flex; justify-content: center; }
.marquee-group { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 28px; padding: 0 20px; }
.marquee-group[aria-hidden="true"] { display: none; }
.m-item { font-size: clamp(22px, 3.4vw, 44px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; white-space: nowrap; }
.m-item:nth-child(4n+3) { color: transparent; -webkit-text-stroke: 1.2px var(--fg); }
.m-star { width: 10px; height: 10px; border-radius: 3px; background: var(--grad); transform: rotate(45deg); flex: none; }
.motion .marquee-track { width: max-content; justify-content: flex-start; will-change: transform; }
.motion .marquee-group { flex-wrap: nowrap; padding: 0 14px 0 14px; gap: 28px; }
.motion .marquee-group[aria-hidden="true"] { display: flex; }

/* ---------- product cards ---------- */
.card { position: relative; overflow: hidden; isolation: isolate; transition: border-color .3s, transform .3s, box-shadow .3s; }
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--action) 13%, transparent), transparent 62%);
  opacity: 0; transition: opacity .35s;
}
a.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--action) 45%, var(--divider)); box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--action) 55%, transparent); }
a.card:hover::before { opacity: 1; }
.card-arrow {
  position: absolute; top: 18px; right: 18px; width: 20px; height: 20px; color: var(--muted);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), color .35s;
}
a.card:hover .card-arrow { transform: translate(3px, -3px); color: var(--action); }

/* ---------- numbers ---------- */
.numbers { padding: 56px 0; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { padding: 8px 12px; }
.stat .num {
  font-size: clamp(44px, 6vw, 72px); font-weight: 800; letter-spacing: -0.05em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .06em;
}
.stat .label { margin-top: 8px; color: var(--muted); font-size: 15px; font-weight: 550; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } }

/* ---------- how we build ---------- */
.build .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.build .tiles > * { max-width: none; }
@media (max-width: 980px) { .build .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin: 0 auto; } }
@media (max-width: 540px) { .build .tiles { grid-template-columns: 1fr; } }
.tile {
  position: relative; overflow: hidden; border: 1px solid transparent;
  transition: transform .3s, border-color .3s, background-color .3s;
}
.tile::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--grad); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.tile:hover { transform: translateY(-3px); border-color: var(--divider); background: var(--bg); }
.tile:hover::after { transform: scaleX(1); }
.tile .n {
  font-size: 30px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 14px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- call to action ---------- */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.cta { position: relative; isolation: isolate; }
.cta::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: conic-gradient(from var(--angle), transparent 0deg 210deg, var(--action) 270deg, var(--accent-2) 320deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 7s linear infinite;
}
@keyframes spin { to { --angle: 360deg; } }

/* ---------- pausing and reduced motion ---------- */
.motion-paused .glow, .motion-paused .cta::before, .motion-paused .live-dot::after,
.hero.is-offscreen .glow, .hero.is-offscreen .live-dot::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .glow, .cta::before, .live-dot::after { animation: none; }
  .btn.shine::after { display: none; }
  .card, .tile, .card-arrow, .tile::after { transition: none; }
  a.card:hover, .tile:hover { transform: none; }
}