/* ===== OBSIDIAN MOTORS RIVIERA — Cinematic ScrollStage Hero ===== */
/* Vanilla-JS/CSS port of the BIRRIA/PRIME ScrollStage pattern (React+GSAP+Canvas),
   same technique, same "complete kit" (gate, HUD, callouts-ready), our own palette. */

:root {
  --ss-bg: #0d0b09;
  --ss-text: #fbf7ef;
  --ss-muted: #9a9080;
  --ss-stroke: #262019;
  --ss-accent: #c9a24b;
}

.ss-wrap { position: relative; }
.ss-pin {
  position: relative; height: 100vh; width: 100%; overflow: hidden; background: var(--ss-bg);
}
.ss-canvas { position: absolute; inset: 0; height: 100%; width: 100%; display: block; }
.ss-fallback { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; pointer-events: none; }

.ss-top-fade {
  position: absolute; inset: 0 0 auto 0; height: 80px; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, rgba(13,11,9,.55) 0%, transparent 100%);
}
.ss-side-fade {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, rgba(13,11,9,.55) 0%, rgba(13,11,9,.12) 22%, transparent 42%);
}

/* ===== HUD ===== */
.ss-hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; color: var(--ss-muted); font-family: 'Inter', system-ui, sans-serif; }
.ss-hud-scan {
  position: absolute; inset: 0 0 auto 0; height: 1px; background: rgba(201,162,75,.15);
  animation: ss-scan 7s linear infinite;
}
@keyframes ss-scan { from { transform: translateY(-6vh); } to { transform: translateY(100vh); } }

.ss-top-row {
  position: absolute; left: 20px; right: 20px; top: 68px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 8px;
  font-size: 9px; letter-spacing: .3em; color: rgba(154,144,128,.7);
}
@media (min-width: 768px) { .ss-top-row { left: 32px; right: 32px; } }
.ss-rec { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ss-rec-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #ff2d2d; box-shadow: 0 0 10px #ff2d2d; animation: ss-rec-blink 1s steps(1,end) infinite; }
@keyframes ss-rec-blink { 0%,100% { opacity: 1; } 50% { opacity: .12; } }
.ss-rec-label { color: #ff5a5a; }
.ss-tc { margin-left: 4px; color: var(--ss-text); font-variant-numeric: tabular-nums; }
.ss-top-mid { display: none; }
@media (min-width: 768px) { .ss-top-mid { display: inline; } }
.ss-top-right { font-variant-numeric: tabular-nums; color: rgba(154,144,128,.8); }

.ss-corner { position: absolute; width: 36px; height: 36px; border-color: rgba(255,255,255,.65); }
.ss-corner.tl { left: 20px; top: 96px; border-left: 2px solid; border-top: 2px solid; }
.ss-corner.tr { right: 20px; top: 96px; border-right: 2px solid; border-top: 2px solid; }
.ss-corner.bl { left: 20px; bottom: 80px; border-left: 2px solid; border-bottom: 2px solid; }
.ss-corner.br { right: 20px; bottom: 80px; border-right: 2px solid; border-bottom: 2px solid; }
@media (min-width: 768px) {
  .ss-corner.tl, .ss-corner.bl { left: 32px; }
  .ss-corner.tr, .ss-corner.br { right: 32px; }
}

.ss-rail { position: absolute; left: 32px; top: 28%; height: 44%; width: 1px; background: rgba(255,255,255,.12); display: none; }
@media (min-width: 768px) { .ss-rail { display: block; } }
.ss-rail-tick { position: absolute; left: 50%; width: 6px; height: 6px; transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: var(--ss-bg); }
.ss-rail-dot { position: absolute; left: 50%; top: 0; width: 8px; height: 8px; transform: translate(-50%,-50%); border-radius: 50%; background: var(--ss-accent); box-shadow: 0 0 8px var(--ss-accent); }

.ss-reticle { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 176px; height: 176px; }
@media (min-width: 768px) { .ss-reticle { width: 256px; height: 256px; } }
.ss-reticle span.line-v { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); background: rgba(255,255,255,.12); }
.ss-reticle span.line-h { position: absolute; top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); background: rgba(255,255,255,.12); }
.ss-reticle span.dot { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid rgba(201,162,75,.7); }
.ss-reticle span.corner { position: absolute; width: 12px; height: 12px; border-color: rgba(201,162,75,.5); }
.ss-reticle span.corner.tl { left: 0; top: 0; border-left: 1px solid; border-top: 1px solid; }
.ss-reticle span.corner.tr { right: 0; top: 0; border-right: 1px solid; border-top: 1px solid; }
.ss-reticle span.corner.bl { left: 0; bottom: 0; border-left: 1px solid; border-bottom: 1px solid; }
.ss-reticle span.corner.br { right: 0; bottom: 0; border-right: 1px solid; border-bottom: 1px solid; }

.ss-vlabel { position: absolute; top: 50%; display: none; font-size: 9px; letter-spacing: .45em; color: rgba(154,144,128,.6); writing-mode: vertical-rl; }
@media (min-width: 768px) { .ss-vlabel { display: block; } }
.ss-vlabel.right { right: 10px; transform: translateY(-50%); }
.ss-vlabel.left { left: 10px; transform: translateY(-50%) rotate(180deg); color: rgba(154,144,128,.5); }

.ss-bottom { position: absolute; left: 20px; right: 20px; bottom: 24px; }
@media (min-width: 768px) { .ss-bottom { left: 32px; right: 32px; } }
.ss-bottom-row1 { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; font-size: 9px; letter-spacing: .3em; color: rgba(154,144,128,.8); }
.ss-status-chip { display: flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.4); padding: 4px 10px; backdrop-filter: blur(4px); }
.ss-status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ss-accent); animation: ss-hud-blink 1.1s steps(1,end) infinite; }
@keyframes ss-hud-blink { 0%,100% { opacity: 1; } 50% { opacity: .1; } }
.ss-status-text { color: var(--ss-text); }
.ss-audio-bars { display: none; align-items: flex-end; gap: 2px; height: 16px; margin-left: 12px; }
@media (min-width: 768px) { .ss-audio-bars { display: flex; } }
.ss-audio-bars span { display: block; width: 2px; background: rgba(201,162,75,.8); height: 55%; animation: ss-audio-meter .42s ease-in-out infinite alternate; }
@keyframes ss-audio-meter { 0% { height: 25%; } 100% { height: 95%; } }
.ss-bottom-right { display: none; align-items: center; gap: 20px; }
@media (min-width: 768px) { .ss-bottom-right { display: flex; } }
.ss-bottom-right .val { color: var(--ss-text); font-variant-numeric: tabular-nums; }
.ss-accent-text { color: var(--ss-accent); font-variant-numeric: tabular-nums; }
.ss-scrub-chip { border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.4); padding: 4px 10px; color: var(--ss-accent); }

.ss-track { position: relative; height: 32px; }
.ss-track-labels { position: absolute; top: -12px; left: 0; right: 0; display: flex; justify-content: space-between; font-size: 8px; letter-spacing: .2em; color: rgba(154,144,128,.55); }
.ss-ticks-fine, .ss-ticks-major, .ss-ticks { position: absolute; bottom: 18px; height: 6px; width: 100%; opacity: .5; }
.ss-ticks-fine { background-image: repeating-linear-gradient(to right, rgba(255,255,255,.22) 0 1px, transparent 1px 5px); }
.ss-ticks-major { bottom: 6px; height: 20px; opacity: .9; background-image: repeating-linear-gradient(to right, rgba(201,162,75,.75) 0 1.5px, transparent 1.5px 50px); }
.ss-baseline { position: absolute; bottom: 6px; height: 1px; width: 100%; background: rgba(255,255,255,.35); }
.ss-progress { position: absolute; bottom: 5px; height: 3px; width: 100%; transform-origin: left; background: var(--ss-accent); box-shadow: 0 0 16px 3px var(--ss-accent); border-radius: 99px; transform: scaleX(0); }
.ss-notch { position: absolute; bottom: 1px; left: 0; width: 12px; height: 12px; transform: translate(-50%,50%) rotate(45deg); background: var(--ss-accent); box-shadow: 0 0 18px 5px var(--ss-accent); }

/* ===== copy blocks ===== */
.ss-copy { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); z-index: 20; max-width: calc(100% - 48px); }
@media (min-width: 768px) { .ss-copy { left: 56px; max-width: 560px; } }
.ss-eyebrow { margin-bottom: 16px; font-size: 11px; letter-spacing: .4em; color: var(--ss-muted); }
.ss-title { font-weight: 800; line-height: .96; letter-spacing: -.01em; color: var(--ss-text); font-size: clamp(48px,9vw,112px); font-style: italic; }
.ss-title .mark { color: var(--ss-accent); font-style: normal; }
.ss-subtitle { margin-top: 10px; font-size: clamp(20px,2.6vw,34px); font-weight: 700; letter-spacing: -.01em; color: rgba(251,247,239,.55); }
.ss-tagline { margin-top: 16px; font-size: 14px; letter-spacing: .25em; color: var(--ss-muted); }

.ss-specs { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); z-index: 20; max-width: calc(100% - 48px); opacity: 0; }
@media (min-width: 768px) { .ss-specs { left: 56px; max-width: 420px; } }
.ss-specs-eyebrow { font-size: 11px; letter-spacing: .3em; color: var(--ss-muted); }
.ss-specs h2 { margin-top: 10px; font-weight: 800; line-height: 1; letter-spacing: -.01em; color: var(--ss-text); font-style: italic; font-size: clamp(34px,5.5vw,72px); }
.ss-specs h2 .mark { color: var(--ss-accent); font-style: normal; }
.ss-specs-sub { margin-top: 6px; font-size: 13px; letter-spacing: .2em; color: rgba(251,247,239,.55); text-transform: uppercase; }
.ss-spec-label { margin-top: 18px; font-size: 11px; letter-spacing: .3em; color: var(--ss-muted); }
.ss-spec-value { font-variant-numeric: tabular-nums; font-size: 44px; font-weight: 800; color: var(--ss-accent); }
@media (min-width: 768px) { .ss-spec-value { font-size: 64px; } }
.ss-specs-text { margin-top: 16px; max-width: 320px; font-size: 13px; line-height: 1.7; color: var(--ss-muted); }
.ss-spec-rows { margin-top: 20px; display: flex; flex-direction: column; gap: 6px; }
.ss-spec-row { display: flex; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--ss-stroke); padding-bottom: 4px; font-size: 10.5px; letter-spacing: .05em; }
.ss-spec-row .k { color: var(--ss-muted); }
.ss-spec-row .v { color: var(--ss-text); font-variant-numeric: tabular-nums; }

/* ===== entry gate (Dolby-style sound-on) ===== */
.ss-gate { position: absolute; inset: 0; z-index: 40; }
.ss-gate-bg { position: absolute; inset: 0; transition: background .8s ease, backdrop-filter .8s ease; background: rgba(4,4,6,.85); backdrop-filter: blur(2px); }
.ss-gate-bg.hidden { background: rgba(4,4,6,0); backdrop-filter: blur(0); }
.ss-gate-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.ss-gate-ring-wrap { position: relative; width: 96px; height: 96px; }
.ss-gate-ring { position: absolute; inset: 0; border: 1.5px solid var(--ss-accent); border-radius: 50%; animation: ss-gate-ring 2.6s ease-out infinite; }
@keyframes ss-gate-ring { 0% { transform: scale(.72); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
.ss-gate-btn {
  position: absolute; inset: 8px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15);
  background: rgba(13,11,9,.9); display: flex; align-items: center; justify-content: center;
  cursor: pointer; animation: ss-gate-core-glow 2.6s ease-in-out infinite;
}
@keyframes ss-gate-core-glow {
  0%,100% { box-shadow: 0 0 38px rgba(201,162,75,.28); border-color: rgba(255,255,255,.15); }
  50% { box-shadow: 0 0 72px rgba(201,162,75,.55); border-color: rgba(201,162,75,.5); }
}
.ss-gate-btn svg { width: 30px; height: 30px; fill: var(--ss-accent); }
.ss-gate-label { font-size: 13px; font-weight: 700; letter-spacing: .35em; color: var(--ss-text); text-align: center; }
.ss-gate-sub { font-size: 11px; letter-spacing: .3em; color: var(--ss-muted); text-align: center; }
.ss-gate.entering .ss-gate-center { opacity: 0; pointer-events: none; transition: opacity .5s ease; }

.ss-gate-prompt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: opacity .7s ease, transform .7s ease; opacity: 0; transform: translateY(12px); }
.ss-gate-prompt.visible { opacity: 1; transform: translateY(0); }
.ss-gate-prompt-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; border: 1px solid rgba(201,162,75,.55); background: rgba(0,0,0,.7); padding: 20px 48px; box-shadow: 0 0 70px rgba(201,162,75,.4), inset 0 0 30px rgba(0,0,0,.6); }
.ss-gate-prompt-title { font-size: 24px; font-weight: 800; letter-spacing: .3em; color: var(--ss-accent); text-shadow: 0 0 28px rgba(201,162,75,.95), 0 3px 12px rgba(0,0,0,.95); }
.ss-gate-prompt-sub { font-size: 11px; letter-spacing: .4em; color: var(--ss-text); text-shadow: 0 2px 10px rgba(0,0,0,.95); }
.ss-gate-arrow { font-size: 32px; color: var(--ss-accent); animation: ss-gate-bounce 1.5s ease-in-out infinite; filter: drop-shadow(0 0 20px rgba(201,162,75,.95)); }
@keyframes ss-gate-bounce { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(9px); opacity: 1; } }