/* ============================================================================
   Easy Group — Aurora design layer
   Blue-light, high-tech, three-dimensional. Sits on top of brand.css tokens.

   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 */

/* The page itself becomes a perspective stage so children can sit on
   different Z planes. Depth is what sells "three-dimensional" more than
   any single effect. */
.stage {
  perspective: 1400px;
  perspective-origin: 50% 30%;
  transform-style: preserve-3d;
}

/* Receding grid floor. Drawn once, animated by translating the background,
   so it costs one composited layer instead of thousands of DOM nodes. */
.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(18,171,242,.20) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18,171,242,.20) 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. */
.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(18,171,242,.28), rgba(30,116,232,.12) 45%, transparent 72%);
  filter: blur(28px);
}

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

.orb.a {
  width: 520px; height: 520px;
  top: -140px; left: -120px;
  background: radial-gradient(circle, rgba(18,196,242,.55), 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(30,116,232,.5), 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 */

/* Layered glass with a lit top edge — the edge highlight is what makes a
   flat rectangle read as a physical pane catching light. */
.glass {
  position: relative;
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(23,34,48,.82), rgba(10,14,19,.88));
  border: 1px solid rgba(120,190,240,.14);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow:
    0 1px 0 rgba(160,215,255,.16) inset,
    0 24px 60px -22px rgba(0,0,0,.85),
    0 0 0 1px rgba(0,0,0,.28);
  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(140,216,250,.72), transparent);
  opacity: .8;
}

/* 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(140,216,250,.34);
  box-shadow:
    0 1px 0 rgba(160,215,255,.26) inset,
    0 34px 78px -26px rgba(0,0,0,.9),
    0 0 42px -14px rgba(18,171,242,.5);
}

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

.glow-text {
  text-shadow: 0 0 26px rgba(18,171,242,.42), 0 0 68px rgba(30,116,232,.22);
}

/* Gradient headline that keeps working when the gradient can't paint. */
.grad-text {
  background: linear-gradient(96deg, var(--beam) 0%, var(--signal) 42%, var(--core) 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(18,171,242,.4), 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 -8px rgba(18,171,242,.75), 0 0 0 1px rgba(140,216,250,.24) 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, #2a82f5, #2fc0ff); }

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

.chipline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(120,190,240,.22);
  background: rgba(18,171,242,.07);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--beam);
}

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

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(18,171,242,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(18,171,242,0); }
  100% { box-shadow: 0 0 0 0 rgba(18,171,242,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(18,196,242,.14), 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; }
}