/* =============================================================================
 * Dorost 9.0 — glass for the self-contained marketing pages
 * (index.html, contact.html, reviews.html). Those pages carry their own
 * dark-only :root palette inline and never load styles.css, so this file is
 * deliberately small and dark-only. Values are the dark set from
 * docs/design/9.0/glass-tokens.md. CSS only — no markup, meta or SEO changes.
 *
 *   body.gm-scene   → warm blurred scene behind the page + glass cards
 *                     (.method / .card on contact, .rev on reviews)
 *   (index)         → only the scrolled header + the fleet poster get glass;
 *                     the cinematic hero keeps its own scene.
 * ========================================================================== */
:root {
  --gm-glass: rgba(20,17,14,.60);
  --gm-glass-strong: rgba(16,14,12,.74);
  --gm-fallback: rgba(24,21,18,.94);
  --gm-inner: rgba(255,255,255,.05);
  --gm-stroke: rgba(255,255,255,.11);
  --gm-stroke-strong: rgba(255,255,255,.18);
  --gm-hair: rgba(255,255,255,.07);
  --gm-sheen: rgba(255,255,255,.055);
  --gm-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 32px rgba(0,0,0,.36), 0 2px 6px rgba(0,0,0,.22);
  --gm-shadow-hover: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 44px rgba(0,0,0,.46), 0 4px 10px rgba(0,0,0,.26);
  --gm-blur: blur(24px) saturate(150%);
  --gm-blur-chrome: blur(32px) saturate(150%);
  --gm-ease: cubic-bezier(.2,.8,.2,1);
}

/* Header: glass-strong chrome over real content (index only once scrolled). */
body.gm-scene header,
header.scrolled {
  background: var(--gm-glass-strong) !important;
  -webkit-backdrop-filter: var(--gm-blur-chrome); backdrop-filter: var(--gm-blur-chrome);
  border-bottom-color: var(--gm-hair) !important;
}

/* ---- Scene pages (contact, reviews) ---- */
body.gm-scene {
  /* Measured glass text tokens (the solid #9a948a / #8f897f drop below 4.5:1 on glass). */
  --muted: #c9c2b5; --muted2: #a8a194;
  background: transparent;   /* html paints the base colour; the scene sits between */
}
html:has(> body.gm-scene) { background: #0c0907; }
body.gm-scene::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 85% 80% at 50% 45%, transparent 55%, rgba(0,0,0,.45) 100%),
    radial-gradient(circle at 74% 16%, rgba(255,214,150,.50) 0 9px, transparent 30px),
    radial-gradient(circle at 83% 27%, rgba(255,178,108,.36) 0 15px, transparent 50px),
    radial-gradient(circle at 66% 9%, rgba(255,232,196,.30) 0 7px, transparent 26px),
    radial-gradient(circle at 93% 12%, rgba(236,118,78,.30) 0 12px, transparent 44px),
    radial-gradient(circle at 58% 24%, rgba(150,170,205,.22) 0 13px, transparent 44px),
    radial-gradient(circle at 21% 72%, rgba(255,196,120,.16) 0 18px, transparent 60px),
    radial-gradient(ellipse 52% 46% at 10% 14%, rgba(198,134,58,.58), transparent 70%),
    radial-gradient(ellipse 48% 58% at 90% 88%, rgba(126,62,28,.62), transparent 70%),
    radial-gradient(ellipse 58% 40% at 76% 18%, rgba(66,80,104,.50), transparent 70%),
    radial-gradient(ellipse 70% 46% at 38% 102%, rgba(70,40,20,.75), transparent 70%),
    radial-gradient(ellipse 40% 32% at 46% 52%, rgba(150,98,48,.30), transparent 70%),
    linear-gradient(160deg, #130e0a 0%, #1d150e 45%, #0c0907 100%);
}
body.gm-scene .hero { background: transparent; border-bottom-color: var(--gm-hair); }
body.gm-scene :is(.method, .card, .rev) {
  position: relative; background: var(--gm-glass); border: 1px solid var(--gm-stroke); border-radius: 20px;
  box-shadow: var(--gm-shadow);
  -webkit-backdrop-filter: var(--gm-blur); backdrop-filter: var(--gm-blur);
  transition: transform .18s var(--gm-ease), box-shadow .18s var(--gm-ease), border-color .18s var(--gm-ease);
}
body.gm-scene :is(.method, .card, .rev)::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--gm-sheen), transparent 38%);
}
body.gm-scene :is(.method, .card, .rev) > * { position: relative; }
body.gm-scene :is(.method, .rev):hover { transform: translateY(-4px); box-shadow: var(--gm-shadow-hover); border-color: var(--gm-stroke-strong); }
/* Inputs inside glass: inner tint, never a second blur. */
body.gm-scene .inp { background: var(--gm-inner); border-color: var(--gm-stroke-strong); }
body.gm-scene footer { border-top-color: var(--gm-hair); }

/* ---- index: the fleet poster becomes a glass-edged panel ---- */
.poster { border-color: var(--gm-stroke) !important; box-shadow: var(--gm-shadow); }
.poster::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, var(--gm-sheen), transparent 38%);
}
.poster .tag {
  background: var(--gm-glass-strong); border-color: var(--gm-stroke) !important; color: #c9c2b5 !important;
  -webkit-backdrop-filter: var(--gm-blur-chrome); backdrop-filter: var(--gm-blur-chrome);
}

/* ---- Fallbacks ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.gm-scene :is(.method, .card, .rev) { background: var(--gm-fallback); }
}
@media (prefers-reduced-transparency: reduce) {
  body.gm-scene :is(.method, .card, .rev), body.gm-scene header, header.scrolled, .poster .tag {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--gm-fallback) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.gm-scene :is(.method, .card, .rev) { transition: none; }
  body.gm-scene :is(.method, .rev):hover { transform: none; }
}