/* ============================================================================
   Easy Group — Aurora design layer (light edition)
   Soft sky glows on the Cloud ground. Sits on top of brand.css / tokens.css.

   The dark kit painted neon on a void; the light kit paints weather on a sky:
   Beam / Signal radial washes at low alpha, blue-tinted shadows instead of
   black, and depth carried by shadow-hero rather than glow. Every class name
   from the dark layer is kept so host templates keep working unchanged.

   Everything here is pure CSS + inline SVG: no external assets, no libraries,
   so a landing page stays a single fast request on any of the four servers.
   ========================================================================== */

/* ---------------------------------------------------------------- 3D stage */

/* Decorative layers deliberately exceed the viewport (the 140vw horizon, the
   orbs hanging off both edges). Clip them here so no page that includes this
   layer ever grows a horizontal scrollbar. */
html, body { overflow-x: hidden; }

/* The page itself becomes a perspective stage so children can sit on
   different Z planes. */
.stage {
  perspective: 1400px;
  perspective-origin: 50% 30%;
  transform-style: preserve-3d;
}

/* Receding grid floor — now a faint blueprint on Cloud, not a neon wireframe.
   Drawn once, animated by translating the background. */
.grid-floor {
  position: absolute;
  inset: auto 0 0 0;
  height: 62vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 38%, transparent 78%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 38%, transparent 78%);
}

.grid-floor::before {
  content: "";
  position: absolute;
  inset: -60% -60% -30% -60%;
  background-image:
    linear-gradient(to right, rgba(36,104,216,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(36,104,216,.10) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: rotateX(74deg);
  transform-origin: 50% 100%;
  animation: floorDrift 22s linear infinite;
}

@keyframes floorDrift {
  from { background-position: 0 0; }
  to   { background-position: 0 64px; }
}

/* Horizon glow sitting where the grid vanishes — a band of morning sky. */
.horizon {
  position: absolute;
  left: 50%;
  bottom: 46vh;
  width: 140vw;
  height: 320px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 100%,
              rgba(107,214,255,.30), rgba(21,158,255,.10) 45%, transparent 72%);
  filter: blur(28px);
}

/* Floating sky glows. Two is enough — more reads as noise, not depth. */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  opacity: .55;
}

.orb.a {
  width: 520px; height: 520px;
  top: -140px; left: -120px;
  background: radial-gradient(circle, rgba(107,214,255,.40), transparent 66%);
  animation: orbFloat 19s ease-in-out infinite alternate;
}

.orb.b {
  width: 420px; height: 420px;
  top: 120px; right: -110px;
  background: radial-gradient(circle, rgba(21,158,255,.26), transparent 66%);
  animation: orbFloat 24s ease-in-out infinite alternate-reverse;
}

@keyframes orbFloat {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(40px,-30px,0) scale(1.12); }
}

/* Everything that should sit above the atmosphere. */
.above { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- glass panels */

/* Frosted white panes. On a light ground the pane is whiter than the sky
   behind it; depth comes from the blue-tinted hero shadow, and the lit top
   edge becomes a crisp white highlight. */
.glass {
  position: relative;
  border-radius: var(--eg-r-hero, 20px);
  background: linear-gradient(165deg, rgba(255,255,255,.86), rgba(255,255,255,.70));
  border: 1px solid rgba(217,229,242,.9);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    var(--eg-shadow-hero, 0 24px 60px -34px rgba(16,58,133,.55));
  transform-style: preserve-3d;
}

/* Top edge light sweep. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  opacity: .9;
}

/* Cards that tilt toward the cursor. Transform is set from JS via CSS vars so
   the browser only recomposites — no layout, no paint. */
.tilt {
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
  transform:
    perspective(900px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateZ(var(--tz, 0px));
  will-change: transform;
}

.tilt:hover {
  --tz: 16px;
  border-color: rgba(21,158,255,.35);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 34px 78px -30px rgba(16,58,133,.5),
    0 0 42px -18px rgba(21,158,255,.35);
}

/* ---------------------------------------------------------------- glow type */

/* On white, "glow" is a soft blue lift under the letters, not a halo. */
.glow-text {
  text-shadow: 0 8px 30px rgba(21,158,255,.28), 0 2px 10px rgba(16,58,133,.14);
}

/* Gradient headline that keeps working when the gradient can't paint.
   Starts at Signal, not Beam — Beam washes out on white. */
.grad-text {
  background: linear-gradient(96deg, var(--signal) 0%, var(--core) 52%, var(--deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* A thin lit rule used to separate sections. */
.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(36,104,216,.35), transparent);
  margin: 0;
}

/* ---------------------------------------------------------------- buttons */

.btn-glow {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--core), var(--signal));
  border: 0;
  box-shadow: 0 8px 26px -10px rgba(36,104,216,.7), 0 0 0 1px rgba(255,255,255,.25) inset;
}

.btn-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.42) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .65s ease;
}

.btn-glow:hover::after { transform: translateX(130%); }
.btn-glow:hover { background: linear-gradient(135deg, var(--eg-core-hover, #1D57B8), var(--signal)); }

/* ---------------------------------------------------------------- data chips */

.chipline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(21,158,255,.28);
  background: var(--eg-ice, #F2F8FF);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--core);
}

.pulse-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 rgba(21,158,255,.6);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(21,158,255,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(21,158,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(21,158,255,0); }
}

/* ---------------------------------------------------------------- reveal */

/* Elements rise out of depth as they scroll into view. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 26px, -40px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}

.reveal.in { opacity: 1; transform: translate3d(0,0,0); }

/* ---------------------------------------------------------------- scan sweep */

/* A slow vertical sweep across hero art. Reads as an instrument scanning,
   which is the right metaphor for all three tools. */
.scan { position: relative; overflow: hidden; }

.scan::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 34%;
  top: -34%;
  background: linear-gradient(180deg, transparent, rgba(21,158,255,.10), transparent);
  animation: scanSweep 5.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes scanSweep {
  0%   { top: -34%; }
  70%  { top: 100%; }
  100% { top: 100%; }
}

/* ---------------------------------------------------------------- motion safety */

/* Anyone who asks the OS for reduced motion gets a still, high-contrast page.
   The design must not depend on movement to be legible. */
@media (prefers-reduced-motion: reduce) {
  .grid-floor::before,
  .orb,
  .scan::after,
  .pulse-dot { animation: none !important; }

  .reveal { opacity: 1; transform: none; transition: none; }
  .tilt { transition: none; }
  .btn-glow::after { display: none; }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 940px) {
  .grid-floor { height: 40vh; }
  .orb.a { width: 300px; height: 300px; }
  .orb.b { width: 260px; height: 260px; }
  /* Tilt on touch devices fires on tap and sticks — disable it. */
  .tilt { transform: none !important; }
}