/* JT AutoWorkz theme tokens. Values are RGB channels so Tailwind opacity modifiers work. */
:root,
[data-theme="red"] {
  --brand-300: 255 107 134;
  --brand-400: 229 16 65;
  --brand-600: 182 7 40;
  --brand-900: 81 7 18;
  --bg: 8 8 9;
  --bg-2: 18 18 20;
  --bg-3: 30 30 33;
  --mute: 184 184 190;
  --hi: 255 214 221;
}
[data-theme="blue"] {
  --brand-300: 143 179 255;
  --brand-400: 57 112 221;
  --brand-600: 29 79 196;
  --brand-900: 11 31 92;
  --bg: 27 32 38;
  --bg-2: 37 43 51;
  --bg-3: 50 58 68;
  --mute: 190 200 211;
  --hi: 210 225 250;
}

html { scroll-behavior: smooth; }
body { background: rgb(var(--bg)); }
.wide { font-stretch: 118%; }
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .45s ease, border-color .45s ease, color .45s ease, fill .45s ease, stop-color .45s ease !important;
}

.glow { background:
  radial-gradient(60% 50% at 8% 0%, rgb(var(--brand-600) / .30) 0%, transparent 70%),
  radial-gradient(50% 50% at 100% 100%, rgb(var(--brand-900) / .45) 0%, transparent 70%),
  rgb(var(--bg)); }
.cut-bottom { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
.cut-top { clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%); }
.outline-type { -webkit-text-stroke: 1.5px rgb(255 255 255 / .12); color: transparent; }

/* Marquee */
.marquee-track { animation: marquee 60s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* Horizontal strip */
.strip { scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }

/* Gallery + lightbox (MD-Regulation-1 Chapter 9) */
.g-item picture { display: block; height: 100%; }
.g-item.is-hidden { display: none; }
#lightbox { background: rgba(0,0,0,.96); }
#lb-frame { overflow: hidden; }
#lb-frame img { pointer-events: none; transition: transform .2s ease; }
#lb-frame.zoomed img { transform: scale(2.5); }
@media (hover: none) { #lb-frame.zoomed img { transform: none; } }

/* Mobile call bar spacing */
@media (max-width: 767px) { body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); } }

/* Theme swapper (client review only, remove once a theme is chosen) */
.ts-dot { width: 22px; height: 22px; border-radius: 999px; border: 2px solid rgb(255 255 255 / .25); }
.ts-btn[aria-pressed="true"] { background: rgb(255 255 255 / .16); }
.ts-btn[aria-pressed="true"] .ts-dot { border-color: #fff; box-shadow: 0 0 0 2px rgb(255 255 255 / .35); }

/* Logo: hydraulic hop on load (front, back, both, then settle) */
.logo-car.hop { transform-origin: 50% 100%; animation: hydraulic 2.6s cubic-bezier(.3,0,.3,1) .4s 1 both; }
@keyframes hydraulic {
  0%   { transform: translateY(0) rotate(0); }
  9%   { transform: translateY(-7px) rotate(-6deg); }
  18%  { transform: translateY(0) rotate(0); }
  27%  { transform: translateY(-7px) rotate(5deg); }
  36%  { transform: translateY(0) rotate(0); }
  47%  { transform: translateY(-11px) rotate(0); }
  58%  { transform: translateY(1px) rotate(0); }
  66%  { transform: translateY(-5px) rotate(-3deg); }
  74%  { transform: translateY(0) rotate(0); }
  82%  { transform: translateY(-2px) rotate(1deg); }
  90%, 100% { transform: translateY(0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .logo-car.hop { animation: none; } }

/* Logo color follows the theme: the artwork is red, shift it to blue for the blue preview */
[data-theme="blue"] .logo-tint { filter: hue-rotate(-138deg) saturate(1.1); }

/* Hero slideshow: crossfade with a slow zoom */
.hero-slides .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.hero-slides .slide.is-active { opacity: 1; }
.hero-slides .slide.is-active img { animation: kenburns 7s ease-out both; }
@keyframes kenburns { from { transform: scale(1.07); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero-slides .slide.is-active img { animation: none; } }

/* Hero "AutoWorkz": slow, subtle gradient wave */
.wave-text {
  background-image: linear-gradient(100deg, #ffffff 0%, rgb(var(--hi)) 22%, rgb(var(--brand-300)) 50%, rgb(var(--hi)) 78%, #ffffff 100%);
  background-size: 200% 100%;
  animation: wave-text 9s linear infinite;
  text-shadow: none;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.5));
}
@keyframes wave-text { from { background-position: 0% 50%; } to { background-position: -200% 50%; } }
@media (prefers-reduced-motion: reduce) { .wave-text { animation: none; } }