/*
  WebAssisto — "Binnenkort live" temporary demo page stylesheet
  Page-specific only: layout for the two-column hero and the custom
  "website being built" illustration. Shared chrome (nav, footer, mobile
  menu, focus-visible, buttons hover base) lives in site.css and is
  reused unchanged, not duplicated here.

  Color direction: the coral/orange (#ff6b4a) and warm dark-red/burgundy
  undertone (#2a2226 / #1c1a1e) are taken directly from the first
  Kapsalon card's own mockup on the demo overview page
  (03_Production_Build/demos/index.html), so this page visibly belongs to
  that same card. Lime (#d4ff5f) is kept for actual interactive elements
  (buttons, status dot) to match the site-wide CTA convention — even the
  Kapsalon card's own "Bekijk kapsalon-demo" button is lime, not coral.
  Blue (#4a90e2) is used once, subtly, only inside the illustration.
*/

/* ---------- Hero layout ---------- */
.c-soon-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.c-soon-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
  color: #ff8f74; margin-bottom: 18px; font-family: 'Space Grotesk', sans-serif;
}
.c-soon-title {
  font-size: 38px; line-height: 1.15; font-weight: 700;
  margin: 0 0 18px; letter-spacing: -0.02em; max-width: 480px;
}
.c-soon-text {
  font-size: 17px; line-height: 1.65; color: #b7b5ac;
  margin: 0 0 16px; max-width: 480px;
}
.c-soon-text-secondary {
  font-size: 14.5px; line-height: 1.6; color: #8a887e;
  margin: 0 0 28px; max-width: 480px;
}
.c-soon-status {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,107,74,0.1); border: 1px solid rgba(255,107,74,0.3);
  color: #ff9c7f; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.02em; font-family: 'Space Grotesk', sans-serif;
  padding: 7px 14px 7px 10px; border-radius: 20px; margin-bottom: 32px;
}
.c-soon-status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #d4ff5f;
  animation: c-soon-dot-pulse 2s ease-in-out infinite;
}
@keyframes c-soon-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.75); }
}
.c-soon-actions {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.c-soon-btn-primary {
  background: #d4ff5f; color: #14151a; font-weight: 700; font-size: 15px;
  padding: 14px 24px; border-radius: 9px; text-decoration: none;
  transition: background 0.15s ease;
  display: inline-flex; align-items: center; min-height: 44px;
}
.c-soon-btn-primary:hover { background: #c4ef4d; }
.c-soon-btn-ghost {
  color: #b7b5ac; font-weight: 600; font-size: 14px;
  border: 1.5px solid rgba(236,234,228,0.25); padding: 12.5px 22px;
  border-radius: 9px; transition: border-color 0.15s ease, color 0.15s ease;
  text-decoration: none; display: inline-flex; align-items: center; min-height: 44px;
}
.c-soon-btn-ghost:hover { border-color: #eceae4; color: #eceae4; }

@media (max-width: 900px) {
  .c-soon-grid { grid-template-columns: 1fr; gap: 40px; }
  .c-soon-title, .c-soon-text, .c-soon-text-secondary { max-width: 560px; }
  .c-soon-visual { max-width: 480px; margin: 0 auto; width: 100%; }
}
@media (max-width: 480px) {
  .c-soon-title { font-size: 30px; }
}

/* ---------- Illustration panel (browser-window chrome) ---------- */
.c-soon-illustration {
  background: linear-gradient(160deg, #241f22, #1c1e26);
  border: 1px solid rgba(236,234,228,0.1); border-radius: 18px;
  padding: 16px; box-shadow: 0 40px 90px rgba(0,0,0,0.5); position: relative;
}
.c-soon-chrome {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 14px;
}
.c-soon-chrome-dot { width: 9px; height: 9px; border-radius: 50%; }
.c-soon-chrome-bar {
  flex: 1; background: #14151a; border-radius: 5px; padding: 6px 12px;
  font-size: 12px; color: #77756c; font-family: 'Space Grotesk', sans-serif;
  margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Construction canvas ---------- */
.c-soon-canvas {
  background: #14151a; border-radius: 8px; height: 320px;
  position: relative; overflow: hidden;
  background-image: radial-gradient(rgba(236,234,228,0.05) 1px, transparent 1px);
  background-size: 18px 18px;
}
@media (max-width: 900px) { .c-soon-canvas { height: 260px; } }
@media (max-width: 480px) { .c-soon-canvas { height: 220px; } }

.c-soon-glow {
  position: absolute; left: 50%; top: 50%; width: 70%; padding-top: 55%;
  transform: translate(-50%, -50%) scale(0.95);
  background: radial-gradient(closest-side, rgba(255,107,74,0.35), transparent);
  border-radius: 50%; opacity: 0; pointer-events: none;
  animation: c-soon-glow-pulse 10s ease-in-out infinite;
}

.c-soon-bit {
  position: absolute; width: 9px; height: 9px; border-radius: 3px;
}
.c-soon-connector {
  position: absolute; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(255,143,116,0.7), transparent);
  opacity: 0;
}

.c-soon-navbar {
  position: absolute; left: 24px; right: 24px; top: 28px; height: 10px;
  border-radius: 3px; background: #ff6b4a; transform-origin: left center;
}
.c-soon-image {
  position: absolute; left: 24px; top: 56px; width: 42%; bottom: 58px;
  border-radius: 8px; background: linear-gradient(135deg, #322229, #1c1a1e);
  border: 1px solid rgba(255,107,74,0.18);
}
.c-soon-text-line {
  position: absolute; right: 24px; height: 7px; border-radius: 3px;
  background: rgba(236,234,228,0.22);
}
.c-soon-text-line.c-soon-text-1 { top: 62px; left: 50%; }
.c-soon-text-line.c-soon-text-2 { top: 82px; left: 50%; width: 70%; }
.c-soon-text-line.c-soon-text-3 { top: 102px; left: 50%; width: 55%; }

.c-soon-cta {
  position: absolute; left: 24px; bottom: 20px; width: 118px; height: 26px;
  border-radius: 7px; background: #ff6b4a; display: flex; align-items: center;
  justify-content: center; font-size: 10.5px; font-weight: 700; color: #14151a;
  font-family: 'Space Grotesk', sans-serif;
}
.c-soon-check {
  position: absolute; right: 22px; bottom: 18px; width: 26px; height: 26px;
  border-radius: 50%; background: #d4ff5f; display: flex; align-items: center;
  justify-content: center;
}
.c-soon-progress-track {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(236,234,228,0.06);
}
.c-soon-progress-fill {
  height: 100%; background: linear-gradient(90deg, #ff6b4a, #d4ff5f);
}

/* Individual bit positions + keyframes (each bit travels toward the block
   it "becomes", then fades as that block appears) */
.c-soon-bit-1 { left: 6%;  top: 10%;  background: #d4ff5f; animation: c-soon-bit1 10s ease-in-out infinite; }
.c-soon-bit-2 { left: 88%; top: 14%;  background: #ff6b4a; animation: c-soon-bit2 10s ease-in-out infinite; }
.c-soon-bit-3 { left: 10%; top: 78%;  background: #4a90e2; animation: c-soon-bit3 10s ease-in-out infinite; }
.c-soon-bit-4 { left: 82%; top: 70%;  background: #ff6b4a; animation: c-soon-bit4 10s ease-in-out infinite; }
.c-soon-bit-5 { left: 50%; top: 4%;   background: #d4ff5f; animation: c-soon-bit5 10s ease-in-out infinite; }

.c-soon-connector-1 { left: 14%; top: 20%; width: 22%; transform: rotate(18deg); animation: c-soon-connector-fade 10s ease-in-out infinite; }
.c-soon-connector-2 { right: 14%; top: 30%; width: 20%; transform: rotate(-14deg); animation: c-soon-connector-fade 10s ease-in-out infinite; }

@keyframes c-soon-bit1 {
  0%, 2%   { opacity: 0; transform: translate(0,0) scale(0.5); }
  10%      { opacity: 1; transform: translate(18px, 18px) scale(1); }
  22%, 100%{ opacity: 0; transform: translate(24px, 22px) scale(0.6); }
}
@keyframes c-soon-bit2 {
  0%, 4%   { opacity: 0; transform: translate(0,0) scale(0.5); }
  13%      { opacity: 1; transform: translate(-30px, 16px) scale(1); }
  24%, 100%{ opacity: 0; transform: translate(-34px, 18px) scale(0.6); }
}
@keyframes c-soon-bit3 {
  0%, 3%   { opacity: 0; transform: translate(0,0) scale(0.5); }
  16%      { opacity: 1; transform: translate(10px, -46px) scale(1); }
  28%, 100%{ opacity: 0; transform: translate(14px, -50px) scale(0.6); }
}
@keyframes c-soon-bit4 {
  0%, 5%   { opacity: 0; transform: translate(0,0) scale(0.5); }
  18%      { opacity: 1; transform: translate(-20px, -34px) scale(1); }
  30%, 100%{ opacity: 0; transform: translate(-24px, -38px) scale(0.6); }
}
@keyframes c-soon-bit5 {
  0%, 6%   { opacity: 0; transform: translate(0,0) scale(0.5); }
  20%      { opacity: 1; transform: translate(0, 24px) scale(1); }
  32%, 100%{ opacity: 0; transform: translate(0, 28px) scale(0.6); }
}
@keyframes c-soon-connector-fade {
  0%, 6%   { opacity: 0; }
  14%, 20% { opacity: 0.6; }
  30%, 100%{ opacity: 0; }
}

@keyframes c-soon-navbar {
  0%, 14%   { opacity: 0; transform: scaleX(0); }
  26%, 86%  { opacity: 1; transform: scaleX(1); }
  96%, 100% { opacity: 0; transform: scaleX(0); }
}
@keyframes c-soon-image {
  0%, 26%   { opacity: 0; transform: translateX(-16px); }
  40%, 86%  { opacity: 1; transform: translateX(0); }
  96%, 100% { opacity: 0; transform: translateX(-12px); }
}
@keyframes c-soon-text-1 {
  0%, 32%   { opacity: 0; transform: translateX(14px); }
  42%, 86%  { opacity: 1; transform: translateX(0); }
  96%, 100% { opacity: 0; transform: translateX(10px); }
}
@keyframes c-soon-text-2 {
  0%, 36%   { opacity: 0; transform: translateX(14px); }
  46%, 86%  { opacity: 1; transform: translateX(0); }
  96%, 100% { opacity: 0; transform: translateX(10px); }
}
@keyframes c-soon-text-3 {
  0%, 40%   { opacity: 0; transform: translateX(14px); }
  50%, 86%  { opacity: 1; transform: translateX(0); }
  96%, 100% { opacity: 0; transform: translateX(10px); }
}
@keyframes c-soon-cta {
  0%, 44%   { opacity: 0; transform: scale(0.6); }
  52%       { opacity: 1; transform: scale(1.08); }
  58%, 86%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.8); }
}
@keyframes c-soon-glow-pulse {
  0%, 56%   { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  68%       { opacity: 0.6; transform: translate(-50%, -50%) scale(1.05); }
  80%, 88%  { opacity: 0.15; transform: translate(-50%, -50%) scale(1.1); }
  96%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}
@keyframes c-soon-check {
  0%, 60%   { opacity: 0; transform: scale(0.4) rotate(-8deg); }
  68%       { opacity: 1; transform: scale(1.15) rotate(0deg); }
  76%, 84%  { opacity: 1; transform: scale(1) rotate(0deg); }
  92%, 100% { opacity: 0; transform: scale(0.7) rotate(0deg); }
}
@keyframes c-soon-progress {
  0%        { width: 0%; }
  4%        { width: 2%; }
  74%       { width: 100%; }
  88%       { width: 100%; }
  96%, 100% { width: 0%; }
}

.c-soon-navbar    { animation: c-soon-navbar 10s ease-in-out infinite; }
.c-soon-image     { animation: c-soon-image 10s ease-in-out infinite; }
.c-soon-text-1    { animation: c-soon-text-1 10s ease-in-out infinite; }
.c-soon-text-2    { animation: c-soon-text-2 10s ease-in-out infinite; }
.c-soon-text-3    { animation: c-soon-text-3 10s ease-in-out infinite; }
.c-soon-cta       { animation: c-soon-cta 10s ease-in-out infinite; }
.c-soon-check     { animation: c-soon-check 10s ease-in-out infinite; }
.c-soon-progress-fill { animation: c-soon-progress 10s ease-in-out infinite; }

/* ---------- Reduced motion: freeze on the completed, assembled state ---------- */
@media (prefers-reduced-motion: reduce) {
  .c-soon-status-dot { animation: none !important; opacity: 1; transform: none; }

  .c-soon-bit, .c-soon-connector, .c-soon-glow {
    animation: none !important; opacity: 0 !important;
  }
  .c-soon-navbar, .c-soon-image, .c-soon-text-line, .c-soon-cta, .c-soon-check {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .c-soon-progress-fill { animation: none !important; width: 100% !important; }
}

/* ================================================================
   HOVENIER — page-specific illustration ("one-page site growing")
   All classes below are additive only: applied ALONGSIDE the shared
   c-soon-* classes above (e.g. class="c-soon-status c-soon-hov-status"),
   never replacing them, so the approved Kapsalon page — which never
   receives these classes — is completely unaffected.

   Color source: the Hovenier card's own mockup on the demo overview page
   (03_Production_Build/demos/index.html) — deep/muted forest-green bar
   gradients (#2a3a2f / #334a35 / #1c2a1f) and its lime accent bar
   (#d4ff5f). Blue (#4a90e2) appears once, subtly, inside the bits only.

   Distinct construction story from Kapsalon (see the report for the full
   sequence): bits enter -> three vertical blocks GROW UPWARD (a new
   scaleY mechanic Kapsalon does not use) -> a header strip SLIDES DOWN
   from above (Kapsalon's header instead grows via scaleX) -> two service
   blocks fade in -> thin "root" lines draw in beneath the grown blocks to
   visually tie the layout together (a shape Kapsalon has no equivalent
   of) -> a green CTA forms -> glow + check -> reset.
   ================================================================ */

.c-soon-hov-illustration { background: linear-gradient(160deg, #1e2621, #1c1e26); }
.c-soon-hov-status {
  background: rgba(107,158,115,0.12); border-color: rgba(107,158,115,0.35);
  color: #a8cead;
}

.c-soon-hov-bit-1 { left: 8%;  top: 12%; background: #4f7a58; animation: c-soon-hov-bit1 10s ease-in-out infinite; }
.c-soon-hov-bit-2 { left: 90%; top: 10%; background: #d4ff5f; animation: c-soon-hov-bit2 10s ease-in-out infinite; }
.c-soon-hov-bit-3 { left: 14%; top: 82%; background: #4a90e2; animation: c-soon-hov-bit3 10s ease-in-out infinite; }
.c-soon-hov-bit-4 { left: 78%; top: 76%; background: #4f7a58; animation: c-soon-hov-bit4 10s ease-in-out infinite; }
.c-soon-hov-bit-5 { left: 46%; top: 6%;  background: #d4ff5f; animation: c-soon-hov-bit5 10s ease-in-out infinite; }
@keyframes c-soon-hov-bit1 { 0%,2%{opacity:0; transform:translate(0,0) scale(.5);} 9%{opacity:1; transform:translate(16px,26px) scale(1);} 20%,100%{opacity:0; transform:translate(18px,30px) scale(.6);} }
@keyframes c-soon-hov-bit2 { 0%,4%{opacity:0; transform:translate(0,0) scale(.5);} 11%{opacity:1; transform:translate(-24px,30px) scale(1);} 22%,100%{opacity:0; transform:translate(-26px,34px) scale(.6);} }
@keyframes c-soon-hov-bit3 { 0%,3%{opacity:0; transform:translate(0,0) scale(.5);} 13%{opacity:1; transform:translate(6px,-40px) scale(1);} 24%,100%{opacity:0; transform:translate(8px,-44px) scale(.6);} }
@keyframes c-soon-hov-bit4 { 0%,5%{opacity:0; transform:translate(0,0) scale(.5);} 14%{opacity:1; transform:translate(-14px,-36px) scale(1);} 26%,100%{opacity:0; transform:translate(-16px,-40px) scale(.6);} }
@keyframes c-soon-hov-bit5 { 0%,6%{opacity:0; transform:translate(0,0) scale(.5);} 16%{opacity:1; transform:translate(0,30px) scale(1);} 28%,100%{opacity:0; transform:translate(0,34px) scale(.6);} }

.c-soon-hov-bar {
  position: absolute; bottom: 128px; border-radius: 4px 4px 0 0;
  transform-origin: bottom; width: 26px;
}
.c-soon-hov-bar-1 { left: 24px;  height: 72px;  background: linear-gradient(180deg,#3a5442,#1c2a1f); animation: c-soon-hov-bar1 10s ease-in-out infinite; }
.c-soon-hov-bar-2 { left: 60px;  height: 106px; background: linear-gradient(180deg,#456351,#1c2a1f); animation: c-soon-hov-bar2 10s ease-in-out infinite; }
.c-soon-hov-bar-3 { left: 96px;  height: 53px;  background: linear-gradient(180deg,#3a5442,#1c2a1f); animation: c-soon-hov-bar3 10s ease-in-out infinite; }
@keyframes c-soon-hov-bar1 { 0%,16%{opacity:0; transform:scaleY(0);} 26%,86%{opacity:1; transform:scaleY(1);} 96%,100%{opacity:0; transform:scaleY(0);} }
@keyframes c-soon-hov-bar2 { 0%,20%{opacity:0; transform:scaleY(0);} 30%,86%{opacity:1; transform:scaleY(1);} 96%,100%{opacity:0; transform:scaleY(0);} }
@keyframes c-soon-hov-bar3 { 0%,24%{opacity:0; transform:scaleY(0);} 34%,86%{opacity:1; transform:scaleY(1);} 96%,100%{opacity:0; transform:scaleY(0);} }

.c-soon-hov-navbar {
  position: absolute; left: 24px; right: 24px; top: 28px; height: 10px;
  border-radius: 3px; background: linear-gradient(90deg,#4f7a58,#334a35);
  animation: c-soon-hov-navbar 10s ease-in-out infinite;
}
@keyframes c-soon-hov-navbar {
  0%, 28%   { opacity: 0; transform: translateY(-10px); }
  38%, 86%  { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(-8px); }
}

.c-soon-hov-card { position: absolute; right: 24px; border-radius: 8px; background: rgba(107,158,115,0.1); border: 1px solid rgba(107,158,115,0.3); }
.c-soon-hov-card-1 { top: 56px;  width: 44%; height: 46px; animation: c-soon-hov-card1 10s ease-in-out infinite; }
.c-soon-hov-card-2 { top: 112px; width: 44%; height: 34px; animation: c-soon-hov-card2 10s ease-in-out infinite; }
@keyframes c-soon-hov-card1 { 0%,40%{opacity:0; transform:translateY(10px);} 50%,86%{opacity:1; transform:translateY(0);} 96%,100%{opacity:0; transform:translateY(8px);} }
@keyframes c-soon-hov-card2 { 0%,44%{opacity:0; transform:translateY(10px);} 54%,86%{opacity:1; transform:translateY(0);} 96%,100%{opacity:0; transform:translateY(8px);} }

.c-soon-hov-root {
  position: absolute; bottom: 122px; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(212,255,95,0.55), transparent);
  opacity: 0;
}
.c-soon-hov-root-1 { left: 30px; width: 60px; animation: c-soon-hov-root 10s ease-in-out infinite; }
.c-soon-hov-root-2 { left: 66px; width: 60px; animation: c-soon-hov-root 10s ease-in-out infinite; }
@keyframes c-soon-hov-root { 0%,56%{opacity:0;} 64%,76%{opacity:.7;} 86%,100%{opacity:0;} }

.c-soon-hov-cta {
  position: absolute; left: 24px; bottom: 20px; width: 100px; height: 26px;
  border-radius: 7px; background: #4f7a58; display: flex; align-items: center;
  justify-content: center; font-size: 10.5px; font-weight: 700; color: #eceae4;
  font-family: 'Space Grotesk', sans-serif; animation: c-soon-hov-cta 10s ease-in-out infinite;
}
@keyframes c-soon-hov-cta {
  0%, 60%   { opacity: 0; transform: scale(0.6); }
  68%       { opacity: 1; transform: scale(1.08); }
  74%, 86%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.8); }
}

.c-soon-hov-check {
  position: absolute; right: 22px; bottom: 18px; width: 26px; height: 26px;
  border-radius: 50%; background: #d4ff5f; display: flex; align-items: center;
  justify-content: center; animation: c-soon-hov-check 10s ease-in-out infinite;
}
@keyframes c-soon-hov-check {
  0%, 72%   { opacity: 0; transform: scale(0.4) rotate(8deg); }
  80%       { opacity: 1; transform: scale(1.15) rotate(0deg); }
  86%, 90%  { opacity: 1; transform: scale(1) rotate(0deg); }
  96%, 100% { opacity: 0; transform: scale(0.7) rotate(0deg); }
}

.c-soon-hov-glow {
  position: absolute; left: 50%; top: 50%; width: 70%; padding-top: 55%;
  transform: translate(-50%, -50%) scale(0.95);
  background: radial-gradient(closest-side, rgba(107,158,115,0.35), transparent);
  border-radius: 50%; opacity: 0; pointer-events: none;
  animation: c-soon-hov-glow 10s ease-in-out infinite;
}
@keyframes c-soon-hov-glow {
  0%, 68%   { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  78%       { opacity: 0.6; transform: translate(-50%, -50%) scale(1.05); }
  88%, 92%  { opacity: 0.15; transform: translate(-50%, -50%) scale(1.1); }
  96%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}

.c-soon-hov-progress-fill { height: 100%; background: linear-gradient(90deg, #4f7a58, #d4ff5f); animation: c-soon-hov-progress 10s ease-in-out infinite; }
@keyframes c-soon-hov-progress {
  0%        { width: 0%; }
  4%        { width: 2%; }
  80%       { width: 100%; }
  90%       { width: 100%; }
  96%, 100% { width: 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .c-soon-hov-bit, [class^="c-soon-hov-bit-"], .c-soon-hov-root, .c-soon-hov-glow {
    animation: none !important; opacity: 0 !important;
  }
  .c-soon-hov-navbar, .c-soon-hov-bar, [class^="c-soon-hov-bar-"], .c-soon-hov-card,
  [class^="c-soon-hov-card-"], .c-soon-hov-cta, .c-soon-hov-check {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .c-soon-hov-progress-fill { animation: none !important; width: 100% !important; }
}


/* ================================================================
   GARAGE — page-specific illustration ("multi-page site assembling
   from modules")
   Additive only, same convention as the Hovenier block above.

   Color source: the Garage card's own mockup on the demo overview page —
   dark navy gradient (#20303f / #1a2028), steel blue (#4a90e2), and
   muted graphite/cool-gray surfaces (rgba(236,234,228, 0.06-0.16)). Lime
   is used only for the confirmation check and progress-bar end, per the
   site-wide CTA/confirmation convention.

   Distinct construction story from Kapsalon and Hovenier: bits enter ->
   TWO PAGE TABS snap into place at the top (a multi-page cue neither
   other page has) -> a large main panel assembles with a "lock-in"
   scale-overshoot -> three small service/vehicle/contact MODULES fill in
   -> a BLUE SCAN LINE sweeps once top-to-bottom across the panel (a
   mechanic unique to Garage) -> three PAGE-INDICATOR DOTS light up in
   sequence (also unique to Garage) -> glow + check -> reset.
   ================================================================ */

.c-soon-gar-illustration { background: linear-gradient(160deg, #1a2530, #1c1e26); }
.c-soon-gar-status {
  background: rgba(74,144,226,0.12); border-color: rgba(74,144,226,0.35);
  color: #8fbdf0;
}

.c-soon-gar-bit-1 { left: 7%;  top: 14%; background: #4a90e2; animation: c-soon-gar-bit1 10s ease-in-out infinite; }
.c-soon-gar-bit-2 { left: 89%; top: 12%; background: #5a6472; animation: c-soon-gar-bit2 10s ease-in-out infinite; }
.c-soon-gar-bit-3 { left: 12%; top: 80%; background: #d4ff5f; animation: c-soon-gar-bit3 10s ease-in-out infinite; }
.c-soon-gar-bit-4 { left: 80%; top: 74%; background: #4a90e2; animation: c-soon-gar-bit4 10s ease-in-out infinite; }
.c-soon-gar-bit-5 { left: 48%; top: 5%;  background: #5a6472; animation: c-soon-gar-bit5 10s ease-in-out infinite; }
@keyframes c-soon-gar-bit1 { 0%,2%{opacity:0; transform:translate(0,0) scale(.5);} 8%{opacity:1; transform:translate(14px,10px) scale(1);} 17%,100%{opacity:0; transform:translate(16px,12px) scale(.6);} }
@keyframes c-soon-gar-bit2 { 0%,3%{opacity:0; transform:translate(0,0) scale(.5);} 9%{opacity:1; transform:translate(-22px,10px) scale(1);} 18%,100%{opacity:0; transform:translate(-24px,12px) scale(.6);} }
@keyframes c-soon-gar-bit3 { 0%,4%{opacity:0; transform:translate(0,0) scale(.5);} 11%{opacity:1; transform:translate(8px,-30px) scale(1);} 20%,100%{opacity:0; transform:translate(10px,-32px) scale(.6);} }
@keyframes c-soon-gar-bit4 { 0%,5%{opacity:0; transform:translate(0,0) scale(.5);} 12%{opacity:1; transform:translate(-12px,-26px) scale(1);} 21%,100%{opacity:0; transform:translate(-14px,-28px) scale(.6);} }
@keyframes c-soon-gar-bit5 { 0%,6%{opacity:0; transform:translate(0,0) scale(.5);} 13%{opacity:1; transform:translate(0,22px) scale(1);} 22%,100%{opacity:0; transform:translate(0,26px) scale(.6);} }

.c-soon-gar-tab {
  position: absolute; top: 20px; width: 54px; height: 14px; border-radius: 4px 4px 0 0;
  background: rgba(74,144,226,0.16); border: 1px solid rgba(74,144,226,0.35); border-bottom: none;
}
.c-soon-gar-tab-1 { left: 24px; animation: c-soon-gar-tab1 10s ease-in-out infinite; }
.c-soon-gar-tab-1::after { content:''; position:absolute; left:6px; right:6px; top:-2px; height:2px; background:#d4ff5f; border-radius:1px; }
.c-soon-gar-tab-2 { left: 82px; background: rgba(236,234,228,0.06); border-color: rgba(236,234,228,0.16); animation: c-soon-gar-tab2 10s ease-in-out infinite; }
@keyframes c-soon-gar-tab1 { 0%,14%{opacity:0; transform:translateX(-16px);} 20%{opacity:1; transform:translateX(3px);} 25%,86%{opacity:1; transform:translateX(0);} 96%,100%{opacity:0; transform:translateX(-10px);} }
@keyframes c-soon-gar-tab2 { 0%,18%{opacity:0; transform:translateX(16px);} 24%{opacity:1; transform:translateX(-3px);} 29%,86%{opacity:1; transform:translateX(0);} 96%,100%{opacity:0; transform:translateX(10px);} }

.c-soon-gar-panel {
  position: absolute; left: 24px; right: 24px; top: 34px; bottom: 30px;
  border-radius: 0 8px 8px 8px; background: linear-gradient(120deg,#20303f,#1a2028);
  border: 1px solid rgba(74,144,226,0.25); overflow: hidden;
  animation: c-soon-gar-panel 10s ease-in-out infinite;
}
@keyframes c-soon-gar-panel {
  0%, 26%   { opacity: 0; transform: scale(0.92); }
  34%       { opacity: 1; transform: scale(1.015); }
  40%, 86%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.94); }
}

.c-soon-gar-module { position: absolute; top: 18px; border-radius: 6px; height: 28px; }
.c-soon-gar-module-1 { left: 14px;  width: 27%; background: rgba(74,144,226,0.18); border: 1px solid rgba(74,144,226,0.4); animation: c-soon-gar-module1 10s ease-in-out infinite; }
.c-soon-gar-module-2 { left: calc(27% + 24px); width: 27%; background: rgba(236,234,228,0.07); border: 1px dashed rgba(236,234,228,0.2); animation: c-soon-gar-module2 10s ease-in-out infinite; }
.c-soon-gar-module-3 { right: 14px; width: 27%; background: rgba(212,255,95,0.1); border: 1px solid rgba(212,255,95,0.3); animation: c-soon-gar-module3 10s ease-in-out infinite; }
@keyframes c-soon-gar-module1 { 0%,42%{opacity:0; transform:translateY(10px);} 50%,86%{opacity:1; transform:translateY(0);} 96%,100%{opacity:0; transform:translateY(8px);} }
@keyframes c-soon-gar-module2 { 0%,46%{opacity:0; transform:translateY(10px);} 54%,86%{opacity:1; transform:translateY(0);} 96%,100%{opacity:0; transform:translateY(8px);} }
@keyframes c-soon-gar-module3 { 0%,50%{opacity:0; transform:translateY(10px);} 58%,86%{opacity:1; transform:translateY(0);} 96%,100%{opacity:0; transform:translateY(8px);} }

.c-soon-gar-scanline {
  position: absolute; left: 8px; right: 8px; top: 18px; height: 2px;
  background: linear-gradient(90deg, transparent, #4a90e2, transparent);
  opacity: 0; animation: c-soon-gar-scanline 10s ease-in-out infinite;
}
@keyframes c-soon-gar-scanline {
  0%, 58%   { opacity: 0; top: 18px; }
  62%, 74%  { opacity: 0.8; }
  78%       { opacity: 0; top: calc(100% - 20px); }
  100%      { opacity: 0; top: 18px; }
}

.c-soon-gar-dot { position: absolute; bottom: 20px; width: 7px; height: 7px; border-radius: 50%; background: rgba(236,234,228,0.2); }
.c-soon-gar-dot-1 { left: 130px; animation: c-soon-gar-dot 10s ease-in-out infinite; }
.c-soon-gar-dot-2 { left: 144px; animation: c-soon-gar-dot 10s ease-in-out infinite 0.15s; }
.c-soon-gar-dot-3 { left: 158px; animation: c-soon-gar-dot 10s ease-in-out infinite 0.3s; }
@keyframes c-soon-gar-dot {
  0%, 76%   { background: rgba(236,234,228,0.2); transform: scale(1); }
  80%       { background: #d4ff5f; transform: scale(1.3); }
  84%, 90%  { background: #d4ff5f; transform: scale(1); }
  96%, 100% { background: rgba(236,234,228,0.2); transform: scale(1); }
}

.c-soon-gar-cta {
  position: absolute; left: 24px; bottom: 20px; width: 96px; height: 26px;
  border-radius: 7px; background: #4a90e2; display: flex; align-items: center;
  justify-content: center; font-size: 10.5px; font-weight: 700; color: #eceae4;
  font-family: 'Space Grotesk', sans-serif; z-index: 2;
  animation: c-soon-gar-cta 10s ease-in-out infinite;
}
@keyframes c-soon-gar-cta {
  0%, 62%   { opacity: 0; transform: scale(0.6); }
  70%       { opacity: 1; transform: scale(1.08); }
  76%, 86%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.8); }
}

.c-soon-gar-check {
  position: absolute; right: 22px; bottom: 18px; width: 26px; height: 26px;
  border-radius: 50%; background: #d4ff5f; display: flex; align-items: center;
  justify-content: center; z-index: 2; animation: c-soon-gar-check 10s ease-in-out infinite;
}
@keyframes c-soon-gar-check {
  0%, 74%   { opacity: 0; transform: scale(0.4) rotate(-8deg); }
  82%       { opacity: 1; transform: scale(1.15) rotate(0deg); }
  88%, 91%  { opacity: 1; transform: scale(1) rotate(0deg); }
  96%, 100% { opacity: 0; transform: scale(0.7) rotate(0deg); }
}

.c-soon-gar-glow {
  position: absolute; left: 50%; top: 50%; width: 70%; padding-top: 55%;
  transform: translate(-50%, -50%) scale(0.95);
  background: radial-gradient(closest-side, rgba(74,144,226,0.35), transparent);
  border-radius: 50%; opacity: 0; pointer-events: none;
  animation: c-soon-gar-glow 10s ease-in-out infinite;
}
@keyframes c-soon-gar-glow {
  0%, 70%   { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  80%       { opacity: 0.6; transform: translate(-50%, -50%) scale(1.05); }
  90%, 93%  { opacity: 0.15; transform: translate(-50%, -50%) scale(1.1); }
  96%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}

.c-soon-gar-progress-fill { height: 100%; background: linear-gradient(90deg, #4a90e2, #d4ff5f); animation: c-soon-gar-progress 10s ease-in-out infinite; }
@keyframes c-soon-gar-progress {
  0%        { width: 0%; }
  4%        { width: 2%; }
  84%       { width: 100%; }
  92%       { width: 100%; }
  96%, 100% { width: 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .c-soon-gar-bit, [class^="c-soon-gar-bit-"], .c-soon-gar-scanline, .c-soon-gar-glow {
    animation: none !important; opacity: 0 !important;
  }
  .c-soon-gar-tab-1, .c-soon-gar-tab-2, .c-soon-gar-panel, .c-soon-gar-module,
  [class^="c-soon-gar-module-"], .c-soon-gar-cta, .c-soon-gar-check {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .c-soon-gar-dot-1, .c-soon-gar-dot-2, .c-soon-gar-dot-3 {
    animation: none !important; background: #d4ff5f !important; transform: none !important;
  }
  .c-soon-gar-progress-fill { animation: none !important; width: 100% !important; }
}