/**
 * Index-only: home page “electric / 3D gold” ambience (hero mesh, edge scans, headings).
 * Scope: body.ds-v2.page-index main.ds-page--home
 * Tune intensity via --ep-* on main.ds-page--home (see :root block below).
 */

/* ── Tuning knobs (override on main or :root) ─────────────────────────── */
body.ds-v2.page-index main.ds-page--home {
  --ep-mesh-strength: 0.92;
  --ep-vignette-strength: 0.55;
  --ep-scan-opacity: 0.38;
  --ep-edge-glow-alpha: 0.42;
  --ep-card-edge-alpha: 0.22;
  --ep-heading-shadow-alpha: 0.28;
  --ep-hub-aura-alpha: 0.14;
  --ep-canvas-opacity: 0.2;
  --ep-mesh-shift-duration: 18s;
  --ep-scan-duration: 12s;
  --ep-edge-orbit-duration: 11s;
  --ep-heading-pulse-duration: 5.5s;
}

@keyframes ep-mesh-drift {
  0% {
    background-position: 0% 0%, 100% 100%, 50% 50%, 0% 100%;
    opacity: calc(0.42 * var(--ep-mesh-strength, 1));
  }
  50% {
    background-position: 8% 6%, 92% 88%, 54% 46%, 6% 94%;
    opacity: calc(0.62 * var(--ep-mesh-strength, 1));
  }
  100% {
    background-position: 0% 0%, 100% 100%, 50% 50%, 0% 100%;
    opacity: calc(0.42 * var(--ep-mesh-strength, 1));
  }
}

@keyframes ep-hero-scan {
  0% {
    transform: translateY(-108%);
    opacity: 0;
  }
  8% {
    opacity: var(--ep-scan-opacity, 0.38);
  }
  92% {
    opacity: var(--ep-scan-opacity, 0.38);
  }
  100% {
    transform: translateY(108%);
    opacity: 0;
  }
}

@keyframes ep-edge-shimmer {
  0% {
    opacity: 0.35;
    filter: hue-rotate(-6deg);
  }
  50% {
    opacity: 0.85;
    filter: hue-rotate(8deg);
  }
  100% {
    opacity: 0.35;
    filter: hue-rotate(-6deg);
  }
}

@keyframes ep-heading-soft-pulse {
  0%,
  100% {
    text-shadow:
      0 0 0.35em rgba(var(--color-accent-rgb), calc(0.12 * var(--ep-heading-shadow-alpha, 1))),
      0 0 0.85em rgba(var(--color-accent-rgb), calc(0.06 * var(--ep-heading-shadow-alpha, 1))),
      0 1px 0 rgba(0, 0, 0, 0.55);
  }
  50% {
    text-shadow:
      0 0 0.55em rgba(var(--color-accent-rgb), calc(0.22 * var(--ep-heading-shadow-alpha, 1))),
      0 0 1.15em rgba(var(--color-accent-rgb), calc(0.1 * var(--ep-heading-shadow-alpha, 1))),
      0 0 1.65em rgba(255, 250, 230, calc(0.04 * var(--ep-heading-shadow-alpha, 1))),
      0 1px 0 rgba(0, 0, 0, 0.55);
  }
}

@keyframes ep-hub-outer-breathe {
  0%,
  100% {
    opacity: 0.45;
    transform: translateX(-50%) scaleX(0.96);
  }
  50% {
    opacity: 0.85;
    transform: translateX(-50%) scaleX(1);
  }
}

/* ── Hero: mesh + scan above slides, below canvas + overlay (see index.html layer) ─ */
body.ds-v2.page-index main.ds-page--home .ds-electric-hero-atmo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}

body.ds-v2.page-index main.ds-page--home .ds-electric-hero-atmo::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 120% 80% at 18% 12%, rgba(var(--color-accent-rgb), 0.16) 0%, transparent 52%),
    radial-gradient(ellipse 90% 70% at 88% 78%, rgba(255, 248, 220, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(var(--color-accent-rgb), 0.12) 0%, transparent 58%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 32%, rgba(0, 0, 0, calc(0.28 * var(--ep-vignette-strength, 1))) 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0% 0%, 100% 100%, 50% 50%, 0% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: calc(0.55 * var(--ep-mesh-strength, 1));
  animation: ep-mesh-drift var(--ep-mesh-shift-duration, 18s) ease-in-out infinite;
}

body.ds-v2.page-index main.ds-page--home .ds-electric-hero-atmo::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 0;
  height: 38%;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 252, 235, calc(0.04 * var(--ep-scan-opacity, 1))) 42%,
    rgba(var(--color-accent-rgb), calc(0.22 * var(--ep-scan-opacity, 1))) 50%,
    rgba(255, 252, 235, calc(0.05 * var(--ep-scan-opacity, 1))) 58%,
    transparent 100%
  );
  filter: blur(0.5px);
  opacity: 0.85;
  animation: ep-hero-scan var(--ep-scan-duration, 12s) ease-in-out infinite;
}

/* ── Canvas layer (filled by electric-home.js) ───────────────────────── */
body.ds-v2.page-index main.ds-page--home .ds-electric-canvas-host {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}

body.ds-v2.page-index main.ds-page--home .ds-electric-canvas-host canvas.ds-electric-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: var(--ep-canvas-opacity, 0.2);
}

/* ── Hub section: outer aura (frame already uses ::before/::after) ───── */
body.ds-v2.page-index main.ds-page--home .ds-home-hub {
  position: relative;
}

body.ds-v2.page-index main.ds-page--home .ds-home-hub::before {
  content: "";
  position: absolute;
  inset: clamp(0.5rem, 2vw, 1.25rem);
  border-radius: calc(var(--ds-radius-xl, 28px) + 6px);
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    135deg,
    rgba(var(--color-accent-rgb), calc(0.12 * var(--ep-hub-aura-alpha, 1))) 0%,
    transparent 38%,
    transparent 62%,
    rgba(var(--color-accent-rgb), calc(0.1 * var(--ep-hub-aura-alpha, 1))) 100%
  );
  box-shadow:
    0 0 48px rgba(var(--color-accent-rgb), calc(0.08 * var(--ep-edge-glow-alpha, 1))),
    inset 0 0 60px rgba(var(--color-accent-rgb), calc(0.04 * var(--ep-edge-glow-alpha, 1)));
  opacity: 0.75;
  animation: ep-edge-shimmer var(--ep-edge-orbit-duration, 11s) ease-in-out infinite;
}

body.ds-v2.page-index main.ds-page--home .ds-home-hub__frame {
  box-shadow:
    0 0 0 1px rgba(var(--color-accent-rgb), 0.06),
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 26px 72px rgba(0, 0, 0, 0.58),
    0 0 56px rgba(var(--color-accent-rgb), 0.055),
    0 0 40px rgba(var(--color-accent-rgb), calc(0.06 * var(--ep-edge-glow-alpha, 1)));
}

/* Product ecosystem: centered intro + documentation CTA (scoped home index only) */
body.ds-v2.page-index main.ds-page--home .ds-sanctum-features .section-header.ds-section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

body.ds-v2.page-index main.ds-page--home .ds-sanctum-features .ds-hub-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: min(42rem, 100%);
  margin-inline: auto;
  text-align: center;
}

body.ds-v2.page-index main.ds-page--home .ds-sanctum-features .ds-hub-intro .section-tag {
  margin-bottom: 1rem;
}

body.ds-v2.page-index main.ds-page--home .ds-sanctum-features .ds-hub-intro h2 {
  margin: 0 0 0.75rem;
}

body.ds-v2.page-index main.ds-page--home .ds-sanctum-features .ds-hub-intro p {
  margin: 0;
  max-width: 52ch;
}

body.ds-v2.page-index main.ds-page--home .ds-sanctum-features .ds-hub-intro__doc {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

@media (max-width: 768px) {
  body.ds-v2.page-index main.ds-page--home .ds-sanctum-features .feature-card-deluxe {
    text-align: center;
  }

  body.ds-v2.page-index main.ds-page--home .ds-sanctum-features .feature-card-deluxe .icon {
    margin-left: auto;
    margin-right: auto;
  }

  body.ds-v2.page-index main.ds-page--home .ds-home-hub__links-head {
    text-align: center;
    margin-inline: auto;
    width: 100%;
  }

  body.ds-v2.page-index main.ds-page--home .ds-home-hub__links-sub {
    margin-inline: auto;
  }
}

/* ── Features strip: energize existing grid frame ─────────────────────── */
body.ds-v2.page-index main.ds-page--home .ds-sanctum-features .features-grid-deluxe::before {
  animation: ep-edge-shimmer calc(var(--ep-edge-orbit-duration, 11s) * 1.15) ease-in-out infinite;
  border-color: rgba(var(--color-accent-rgb), calc(0.14 + 0.12 * var(--ep-edge-glow-alpha, 1)));
}

/* ── Feature cards: subtle animated rim ( ::before used elsewhere ) ──── */
body.ds-v2.page-index main.ds-page--home .ds-sanctum-features .feature-card-deluxe {
  position: relative;
}

body.ds-v2.page-index main.ds-page--home .ds-sanctum-features .feature-card-deluxe::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  padding: 1px;
  background: linear-gradient(
    118deg,
    transparent 0%,
    rgba(var(--color-accent-rgb), calc(0.12 * var(--ep-card-edge-alpha, 1))) 38%,
    rgba(255, 250, 230, calc(0.18 * var(--ep-card-edge-alpha, 1))) 50%,
    rgba(var(--color-accent-rgb), calc(0.1 * var(--ep-card-edge-alpha, 1))) 62%,
    transparent 100%
  );
  background-size: 220% 220%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.55;
  animation: ep-card-border-flow 7s ease-in-out infinite;
}

@keyframes ep-card-border-flow {
  0%,
  100% {
    background-position: 0% 40%;
  }
  50% {
    background-position: 100% 60%;
  }
}

/* ── Closer card: ::before is border mask — use ::after for sweep ────── */
body.ds-v2.page-index main.ds-page--home .ds-home-closer-card > * {
  position: relative;
  z-index: 2;
}

body.ds-v2.page-index main.ds-page--home .ds-home-closer-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 252, 235, calc(0.06 * var(--ep-scan-opacity, 1))) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  opacity: 0.38;
  mix-blend-mode: soft-light;
  animation: ep-closer-sweep 14s ease-in-out infinite;
}

@keyframes ep-closer-sweep {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

body.ds-v2.page-index main.ds-page--home .ds-home-closer-card {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 26px 72px rgba(0, 0, 0, 0.58),
    0 0 56px rgba(var(--color-accent-rgb), 0.1),
    0 0 44px rgba(var(--color-accent-rgb), calc(0.06 * var(--ep-edge-glow-alpha, 1)));
}

/* ── Section headings: readable gold lift ───────────────────────────── */
body.ds-v2.page-index main.ds-page--home .ds-section-header h2,
body.ds-v2.page-index main.ds-page--home .section-header h2 {
  animation: ep-heading-soft-pulse var(--ep-heading-pulse-duration, 5.5s) ease-in-out infinite;
}

body.ds-v2.page-index main.ds-page--home .ds-section-header .gradient-text {
  animation: ep-heading-soft-pulse calc(var(--ep-heading-pulse-duration, 5.5s) * 1.1) ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.ds-v2.page-index main.ds-page--home .ds-electric-hero-atmo::before,
  body.ds-v2.page-index main.ds-page--home .ds-electric-hero-atmo::after,
  body.ds-v2.page-index main.ds-page--home .ds-home-hub::before,
  body.ds-v2.page-index main.ds-page--home .ds-sanctum-features .features-grid-deluxe::before,
  body.ds-v2.page-index main.ds-page--home .ds-sanctum-features .feature-card-deluxe::after,
  body.ds-v2.page-index main.ds-page--home .ds-home-closer-card::after,
  body.ds-v2.page-index main.ds-page--home .ds-section-header h2,
  body.ds-v2.page-index main.ds-page--home .section-header h2,
  body.ds-v2.page-index main.ds-page--home .ds-section-header .gradient-text {
    animation: none !important;
  }

  body.ds-v2.page-index main.ds-page--home .ds-electric-hero-atmo::before {
    opacity: calc(0.48 * var(--ep-mesh-strength, 1));
    transform: none;
  }

  body.ds-v2.page-index main.ds-page--home .ds-electric-hero-atmo::after {
    transform: translateY(0);
    top: 42%;
    height: 22%;
    opacity: calc(0.35 * var(--ep-scan-opacity, 1));
  }

  body.ds-v2.page-index main.ds-page--home .ds-home-hub::before {
    opacity: 0.55;
    transform: translateX(-50%) scaleX(1);
  }

  body.ds-v2.page-index main.ds-page--home .ds-sanctum-features .feature-card-deluxe::after {
    background-position: 50% 50%;
    opacity: 0.35;
  }

  body.ds-v2.page-index main.ds-page--home .ds-home-closer-card::after {
    background-position: 50% 50%;
    opacity: 0.28;
  }

  body.ds-v2.page-index main.ds-page--home .ds-section-header h2,
  body.ds-v2.page-index main.ds-page--home .section-header h2,
  body.ds-v2.page-index main.ds-page--home .ds-section-header .gradient-text {
    text-shadow:
      0 0 0.45em rgba(var(--color-accent-rgb), 0.12),
      0 1px 0 rgba(0, 0, 0, 0.55);
  }
}