/* ============================================================
   aura.css — public landing for the aura. product (docs/aura A2).
   Layout only; consumes tokens + the dd- kit (kicker, card, button,
   reveal). Photo-less hero: a coral glow on the paper canvas, mirroring
   the shared hero recipe so it reads as one site. The visualizer's own
   (dark) styling lives separately in features/aura/app.css.
   ============================================================ */

/* ---------------- SLIDESHOW DECK ---------------- */
/* Two full-viewport slides; the page scroll-snaps to each so they settle into
   place like a slideshow once you scroll past a threshold. `proximity` (not
   `mandatory`) so the footer below the deck stays reachable. The slides are
   plain relative sections — deliberately NOT sticky, and the ink canvas below
   carries no opacity/mask — because that compositing stack glitched the WebGL
   canvas to black on some GPUs. */
html { scroll-snap-type: y proximity; }
.aura-slide {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--bg);
  padding: calc(var(--navbar-h) + var(--space-8)) var(--container-pad) var(--space-9);
}
.aura-slide__cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-soft);
  animation: aura-cue 2.4s ease-in-out infinite;
}
@keyframes aura-cue {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
  50%      { transform: translate(-50%, 6px); opacity: 0.85; }
}

/* ---------------- HERO (slide 1) ---------------- */
.aura-hero {
  isolation: isolate; /* keeps the ink / glow / grain z-layers behind the copy */
}

/* Coral bloom centered behind the wordmark, grounding to the page colour at
   the bottom so it blends into the first section (same recipe as the site heroes). */
.aura-hero__glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    var(--glow-coral),
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--paper-2) 30%, transparent) 60%,
      var(--bg) 100%);
}
.aura-hero__grain { position: absolute; inset: 0; z-index: -1; }

/* Live ink teaser (landing.js) — a plain full-bleed WebGL layer behind the
   coral glow, which tints it and fades it into the first section. No opacity or
   mask on the canvas itself (that composited to black on some GPUs); the glow
   and text scrim above do the blending instead. landing.js clears it to the
   ink's water colour up front so it never shows the black default buffer. */
.aura-hero__ink {
  position: absolute;
  inset: 0;
  z-index: -3;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .aura-hero__ink { display: none; }
  .aura-slide__cue { animation: none; }
}

/* soft paper backing behind the hero copy so it stays legible over whatever
   the ink is doing — sits above the ink/glow (inner's own stacking context),
   below the text. A gentle radial wash, reads as a natural vignette. */
.aura-hero__inner::before {
  content: "";
  position: absolute;
  inset: -18% -24%;
  z-index: -1;
  background: radial-gradient(58% 58% at 50% 48%,
    color-mix(in srgb, var(--bg) 55%, transparent) 0%,
    transparent 74%);
  pointer-events: none;
}

.aura-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  max-width: 52rem;
}

.aura-hero__kicker { color: var(--text-soft); }

.aura-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.aura-hero__dot { color: var(--accent); }

.aura-hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-soft);
  max-width: 40rem;
}

.aura-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

/* ---------------- SECTION HEADERS ---------------- */
/* Centered kicker + title (the global rule lives in home/service css, which
   this page does not load — same pattern as the_space.css). */
.section-head {
  max-width: 52rem;
  margin: 0 auto var(--space-10);
  text-align: center;
}
.section-head .dd-kicker { margin-bottom: var(--space-4); }
.section-head .section-title { margin-bottom: 0; }

/* ---------------- WHAT IT DOES (feature cards + closing CTA) ---------------- */
/* slide 2 is centred full-viewport by .aura-slide — no extra vertical padding.
   Four cards in a row; the section head sits above and the launch CTA below,
   so the whole pitch lands in one viewport. */

.aura-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.aura-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.aura-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface-tint);
  color: var(--accent-strong);
}
.aura-feature__icon .dd-icon { width: 22px; height: 22px; }
.aura-feature__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--text);
}
.aura-feature p {
  color: var(--text-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* closing ask, under the cards */
.aura-what__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-9);
}

/* ---------------- responsive ---------------- */
/* 2×2 below the 4-up breakpoint; the head margin and the slide's bottom padding
   come in with it so the cards + CTA still land inside one viewport. */
@media (max-width: 1180px) {
  .aura-grid { grid-template-columns: repeat(2, 1fr); }
  .aura-what .section-head { margin-bottom: var(--space-8); }
  .aura-what { padding-bottom: var(--space-7); }
  .aura-what__cta { margin-top: var(--space-8); }
}
/* single column — four stacked cards run past one screen, so this slide simply
   scrolls (the deck snaps on proximity, not mandatory). Cards tighten up. */
@media (max-width: 700px) {
  .aura-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .aura-feature { padding: var(--space-6); }
  .aura-feature__icon { margin-bottom: 0; }
  .aura-what__cta { margin-top: var(--space-7); }
}