/* ============================================================
   ABSVE GLOBAL SYSTEM — dark premium base, header/footer states,
   buttons, cards, reveals, transition shell.
   Content is always readable without JS: transforms/opacity for
   reveals apply only under html.absve-ready.
   Targets: stable Elementor classes + body family classes +
   data-absve-* roles assigned at runtime by the section mapper.
   ============================================================ */

/* ---------- Base surface & typography ---------- */
body.absve-on {
  background-color: var(--abs-obsidian);
  color: var(--abs-ink-soft);
  font-family: var(--abs-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.absve-on h1, body.absve-on h2, body.absve-on h3,
body.absve-on .elementor-heading-title {
  font-family: var(--abs-font-display);
  color: var(--abs-ink);
  letter-spacing: -0.015em;
  line-height: var(--abs-lh-tight);
}
body.absve-on h1 { font-weight: 800; }
body.absve-on h2 { font-weight: 700; }
body.absve-on h3 { font-weight: 600; }

body.absve-on p,
body.absve-on .elementor-widget-text-editor {
  line-height: var(--abs-lh-body);
}

::selection { background: var(--abs-blue); color: #fff; }

/* Light scenes flip ink colours via mapper-assigned roles. */
body.absve-on [data-absve-scene="light"] h1,
body.absve-on [data-absve-scene="light"] h2,
body.absve-on [data-absve-scene="light"] h3,
body.absve-on [data-absve-scene="light"] .elementor-heading-title {
  color: var(--abs-ink-dark);
}
body.absve-on [data-absve-scene="light"] p { color: #3a4150; }

/* ---------- Header (Elementor Pro theme location) ---------- */
body.absve-on .elementor-location-header {
  position: sticky;
  top: 0;
  z-index: var(--abs-z-header);
  transition: background-color var(--abs-dur) var(--abs-ease-soft),
              backdrop-filter var(--abs-dur) var(--abs-ease-soft),
              box-shadow var(--abs-dur) var(--abs-ease-soft);
}
html.absve-ready body.absve-on .elementor-location-header {
  background-color: rgba(10, 12, 16, 0.55);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
html.absve-scrolled body.absve-on .elementor-location-header {
  background-color: rgba(14, 17, 23, 0.92);
  box-shadow: 0 1px 0 var(--abs-line), var(--abs-shadow-1);
}
body.absve-on .elementor-location-header a { transition: color var(--abs-dur-fast) var(--abs-ease-soft); }
body.absve-on .elementor-location-header a:hover { color: var(--abs-blue-electric); }

/* ---------- Footer ---------- */
body.absve-on .elementor-location-footer {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(42, 42, 114, 0.25) 0%, transparent 55%),
    linear-gradient(180deg, var(--abs-obsidian-2) 0%, #07080c 100%);
  border-top: 1px solid var(--abs-line);
}
body.absve-on .elementor-location-footer a { transition: color var(--abs-dur-fast) var(--abs-ease-soft); }
body.absve-on .elementor-location-footer a:hover { color: var(--abs-blue-electric); }

/* ---------- Buttons & CTAs ---------- */
body.absve-on .elementor-button,
body.absve-on .glow-btn-m a,
body.absve-on button[type="submit"]:not(.forminator-button),
body.absve-on input[type="submit"] {
  border-radius: var(--abs-radius-pill);
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--abs-dur-fast) var(--abs-ease-out),
              box-shadow var(--abs-dur) var(--abs-ease-out),
              background-color var(--abs-dur-fast) var(--abs-ease-soft);
}
body.absve-on .elementor-button:hover,
body.absve-on .glow-btn-m a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--abs-blue-glow);
}
body.absve-on .elementor-button:active,
body.absve-on .glow-btn-m a:active { transform: translateY(0) scale(0.985); }

/* Moving edge highlight (decorative, skipped under reduced motion). */
html.absve-ready:not(.absve-reduced) body.absve-on .absve-cta-sheen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.16) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: absve-sheen 3.8s var(--abs-ease-inout) infinite;
}
@keyframes absve-sheen {
  0%, 55% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}

/* ---------- Card system ---------- */
body.absve-on .absve-card,
body.absve-on [data-absve-role="card"] {
  background: linear-gradient(180deg, var(--abs-graphite) 0%, var(--abs-graphite-2) 130%);
  border: 1px solid var(--abs-line);
  border-radius: var(--abs-radius-l);
  box-shadow: var(--abs-shadow-1);
  transition: transform var(--abs-dur) var(--abs-ease-out),
              box-shadow var(--abs-dur) var(--abs-ease-out),
              border-color var(--abs-dur) var(--abs-ease-soft);
  will-change: transform;
}
@media (hover: hover) {
  body.absve-on .absve-card:hover,
  body.absve-on [data-absve-role="card"]:hover {
    transform: translateY(-6px);
    border-color: var(--abs-line-strong);
    box-shadow: var(--abs-card-glow-blue), var(--abs-shadow-2);
  }
}

/* ---------- Image frames ---------- */
body.absve-on [data-absve-role="frame"] img,
body.absve-on .absve-frame img {
  border-radius: var(--abs-radius);
  box-shadow: var(--abs-shadow-1);
}

/* ---------- Reveal baseline (progressive enhancement) ---------- */
html.absve-ready [data-absve-reveal],
html.absve-ready .absve-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--abs-dur-slow) var(--abs-ease-out),
              transform var(--abs-dur-slow) var(--abs-ease-out);
  will-change: opacity, transform;
}
html.absve-ready .absve-in,
html.absve-ready.absve-reduced [data-absve-reveal],
html.absve-ready.absve-reduced .absve-reveal {
  opacity: 1;
  transform: none;
}
/* Staggered children reveals. */
html.absve-ready .absve-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--abs-dur-slow) var(--abs-ease-out),
              transform var(--abs-dur-slow) var(--abs-ease-out);
}
html.absve-ready .absve-stagger.absve-in > * { opacity: 1; transform: none; }
html.absve-ready .absve-stagger.absve-in > *:nth-child(2) { transition-delay: 90ms; }
html.absve-ready .absve-stagger.absve-in > *:nth-child(3) { transition-delay: 180ms; }
html.absve-ready .absve-stagger.absve-in > *:nth-child(4) { transition-delay: 270ms; }
html.absve-ready .absve-stagger.absve-in > *:nth-child(5) { transition-delay: 360ms; }
html.absve-ready .absve-stagger.absve-in > *:nth-child(6) { transition-delay: 450ms; }
html.absve-ready.absve-reduced .absve-stagger > * { opacity: 1; transform: none; transition: none; }

/* ---------- SplitText line masks ---------- */
body.absve-on .absve-split-line {
  display: block;
  overflow: hidden;
}

/* ---------- Page-transition shell ---------- */
#absve-transition {
  position: fixed;
  inset: 0;
  z-index: var(--abs-z-transition);
  background: linear-gradient(160deg, var(--abs-obsidian) 0%, var(--abs-indigo) 160%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--abs-ease-inout);
}
#absve-transition.absve-t-active { opacity: 1; pointer-events: auto; }
html.absve-reduced #absve-transition { display: none; }

/* ---------- Scene atmosphere layers (JS-injected, decorative) ---------- */
.absve-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.absve-decor canvas { width: 100%; height: 100%; display: block; }

/* ---------- Accessibility ---------- */
body.absve-on a:focus-visible,
body.absve-on button:focus-visible,
body.absve-on input:focus-visible,
body.absve-on select:focus-visible,
body.absve-on textarea:focus-visible,
body.absve-on [tabindex]:focus-visible {
  outline: 2px solid var(--abs-blue-electric);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  body.absve-on *,
  body.absve-on *::before,
  body.absve-on *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html.absve-lowpower .absve-decor,
html.absve-lowpower .absve-particles,
html.absve-lowpower .absve-webgl { display: none !important; }
