/* Shared cinematic atmosphere + premium interactions — all pages */

:root {
  --bg-black: #020202;
  --bg-deep: #050608;
  --panel: rgba(12, 12, 12, 0.88);
  --panel-soft: rgba(255, 255, 255, 0.045);
  --line: rgba(255, 255, 255, 0.12);
  --line-bright: rgba(255, 255, 255, 0.32);
  --text-main: rgba(255, 255, 255, 0.92);
  --text-soft: rgba(220, 225, 235, 0.66);
}

html {
  scroll-behavior: smooth;
  background: var(--bg-black);
}

body.page-root {
  margin: 0;
  background: var(--bg-black) !important;
  background-image: none !important;
  color: var(--text-main);
  overflow-x: hidden;
}

/* Global animated atmosphere */
body.page-root::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
  display: block !important;
  opacity: 1 !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(35, 42, 55, 0.28), transparent 34%),
    linear-gradient(180deg, #020202 0%, #05070b 46%, #020202 100%) !important;
  background-image:
    radial-gradient(circle at 50% 20%, rgba(35, 42, 55, 0.28), transparent 34%),
    linear-gradient(180deg, #020202 0%, #05070b 46%, #020202 100%) !important;
}

body.page-root::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  display: block !important;
  opacity: 0.16 !important;
  mix-blend-mode: normal !important;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.75) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.42) 0 1px, transparent 1.4px) !important;
  background-size: 260px 260px, 430px 430px;
  background-position: 0 0, 90px 160px;
  animation: starfieldDrift 80s linear infinite;
}

.ambient-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.ambient-bg::before {
  content: "";
  position: absolute;
  inset: -30%;
  opacity: 0.08;
  background:
    repeating-linear-gradient(
      115deg,
      transparent 0,
      transparent 110px,
      rgba(255, 255, 255, 0.08) 111px,
      transparent 113px
    );
  animation: chromeStreakMove 38s linear infinite;
}

.ambient-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.055;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 90px 90px;
  mask-image: radial-gradient(circle at 50% 35%, black, transparent 72%);
}

@keyframes starfieldDrift {
  from {
    background-position: 0 0, 90px 160px;
  }
  to {
    background-position: -260px 260px, -340px 590px;
  }
}

@keyframes chromeStreakMove {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-180px, 120px, 0);
  }
}

/* Transparent page shells — global atmosphere shows through */
#page-body,
main.page,
.feat-page,
.dl-page,
.walk-page,
.qa-page,
.trust-page {
  background: transparent !important;
}

/* Premium head-bar */
.site-head {
  background: rgba(0, 0, 0, 0.82) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: min(560px, 60vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  pointer-events: none;
}

/* Premium panels / cards */
.card,
.feat-card,
.more-card,
.feat-stat,
.feat-panel,
.dl-card,
.release-panel,
.install-step,
.security-card,
.trust-card:not(.warn-card):not(.trust-card-highlight),
.trust-mini-card,
.qa-item,
.walk-sect,
.voice-card,
.cmp-table-wrap {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.014)),
    rgba(8, 8, 8, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 24px 70px rgba(0, 0, 0, 0.42);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

.card:hover,
.feat-card:hover,
.more-card:hover,
.feat-stat:hover,
.feat-panel:hover,
.dl-card:hover,
.release-panel:hover,
.install-step:hover,
.security-card:hover,
.trust-card:not(.warn-card):not(.trust-card-highlight):hover,
.trust-mini-card:hover,
.qa-item:hover,
.walk-sect:hover,
.voice-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 34px 90px rgba(0, 0, 0, 0.55),
    0 0 42px rgba(255, 255, 255, 0.035);
}

.card:not(.trust-card):not(.qa-item):not(.warn-card)::before,
.feat-panel:not(.trust-card)::before,
.dl-card::before,
.release-panel::before,
.install-step::before,
.walk-sect::before,
.feat-stat::before,
.security-card::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 24px;
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.42), transparent);
  opacity: 0.65;
  pointer-events: none;
}

/* Section dividers */
.sect-rule,
.page-divider {
  width: min(260px, 42vw);
  height: 1px;
  margin: 72px auto;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
}

.sect-rule::after,
.page-divider::after {
  content: "";
  display: block;
  width: 52px;
  height: 1px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.22);
}

/* Buttons */
button,
.btn,
.button,
.dl-button,
.fab-download,
.nav-dl-btn,
a[class*="button"],
a[class*="btn"] {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

button:hover,
.btn:hover,
.button:hover,
.dl-button:hover,
.fab-download:hover,
.nav-dl-btn:hover,
a[class*="button"]:hover,
a[class*="btn"]:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow:
    0 0 28px rgba(255, 255, 255, 0.08),
    0 16px 36px rgba(0, 0, 0, 0.42);
}

/* Screenshot frames */
img {
  max-width: 100%;
}

.feat-visual,
.install-step-media,
.capture-frame,
.walk-shot {
  position: relative;
  overflow: hidden;
}

.feat-visual::after,
.install-step-media::after,
.capture-frame::after,
.walk-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, transparent 58%);
  transform: translateX(-120%);
  opacity: 0;
  transition: transform 700ms ease, opacity 250ms ease;
}

.feat-visual:hover::after,
.install-step-media:hover::after,
.capture-frame:hover::after,
.walk-shot:hover::after {
  transform: translateX(120%);
  opacity: 1;
}

/* Reveal animation */
.scroll-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 700ms ease,
    transform 700ms ease;
}

.scroll-reveal.has-appeared {
  opacity: 1;
  transform: translateY(0);
}

/* Subtle heading glow */
body.page-root h1,
body.page-root h2 {
  text-shadow:
    0 0 22px rgba(255, 255, 255, 0.06),
    0 18px 60px rgba(0, 0, 0, 0.65);
}

/* Overflow guard */
html,
body.page-root {
  max-width: 100%;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .scroll-reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 700px) {
  .sect-rule,
  .page-divider {
    margin: 48px auto;
  }
}