/* =========================================================
   Devanta Digital  -  visual enhancements layer v1.1.0
   Systems-studio polish: subdued console depth, hard rules,
   restrained motion, and industrial accents.

   Loaded after tokens → base → components.
   Pure additive  -  zero structural HTML changes required.
   ========================================================= */

/* ----- Hero: industrial depth field ----- */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 44% at 68% 36%, rgba(25,179,107,0.11) 0%, transparent 68%),
    linear-gradient(115deg, transparent 0 54%, rgba(55,213,231,0.055) 54% 55%, transparent 55% 100%);
}

/* Aurora reads poorly on the warm-paper light background  -  suppress it */
[data-theme="light"] .hero::before { display: none; }


/* ----- H1 accent word: solid command accent ----- */
.hero h1 .grad {
  color: var(--brand-emerald-hi);
}

/* Light mode: use the deeper accent on warm paper */
[data-theme="light"] .hero h1 .grad {
  color: var(--accent);
}


/* ----- Hero / product proof panels: emerald + cyan atmospheric glow ----- */
[data-theme="dark"] .hero-proof,
[data-theme="dark"] .product-proof {
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 40px 90px -38px rgba(0,0,0,.7),
    0 0 80px 28px rgba(25,179,107,0.08),
    0 0 180px 90px rgba(55,213,231,0.04);
}


/* ----- Hero / product proof panels: subtle float animation ----- */
@media (prefers-reduced-motion: no-preference) {
  .hero-proof,
  .product-proof {
    will-change: transform;
    animation: hero-float 5.4s ease-in-out infinite;
  }
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}


/* ----- Hero copy + art: staggered entry on first load ----- */
@media (prefers-reduced-motion: no-preference) {
  .hero .chip,
  .hero h1,
  .hero .lede,
  .hero .hero-actions,
  .hero .hero-checks,
  .hero .hero-art {
    animation-name: hero-enter;
    animation-duration: var(--dur-4);
    animation-timing-function: var(--ease-out);
    animation-fill-mode: both;
  }
  .hero .chip         { animation-delay: 0ms; }
  .hero h1            { animation-delay: 80ms; }
  .hero .hero-art     { animation-delay: 100ms; }
  .hero .lede         { animation-delay: 160ms; }
  .hero .hero-actions { animation-delay: 220ms; }
  .hero .hero-checks  { animation-delay: 280ms; }
}

@keyframes hero-enter {
  from { opacity: 1; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ----- Method strip: staggered child reveals ----- */
/* Parent [data-reveal] handles opacity; children handle their own translateY stagger. */
@media (prefers-reduced-motion: no-preference) {
  .method-strip li {
    transform: translateY(12px);
    transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-2);
  }
  .method-strip.is-in li                  { transform: translateY(0); }
  .method-strip.is-in li:nth-child(2)     { transition-delay: 90ms; }
  .method-strip.is-in li:nth-child(3)     { transition-delay: 180ms; }
}


/* ----- Chip: gradient border treatment ----- */
.chip {
  border-color: transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, var(--accent-border) 0%, var(--cyan-border) 100%) border-box;
}


/* ----- Eyebrow accent rule: gradient fade ----- */
.eyebrow::before {
  background: linear-gradient(90deg, var(--accent) 0%, var(--brand-cyan) 55%, transparent 100%);
}


/* ----- Browser bar: macOS traffic-light dots ----- */
.browser-bar i:nth-child(1) { background: #FF5F57; }
.browser-bar i:nth-child(2) { background: #FEBC2E; }
.browser-bar i:nth-child(3) { background: #28C840; }