/* =====================================================================
   IRDEN CARS — hero.css
   Home hero: premium dark stage, the real Audi A6 presented as a floating
   object with black + gold lighting, load animation, pointer parallax, and
   an auto-scrolling brand strip. Scoped to .hero__* / .marquee* — the rest
   of the site is untouched. Motion = transform/opacity only.
   ===================================================================== */

/* --- layout: content beside the car, marquee pinned at the bottom --- */
.hero {
  flex-direction: column;
  align-items: stretch;
}
.hero > .container {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
  padding-block: clamp(30px, 5vh, 72px);
}

.hero__aura {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(44% 42% at 68% 46%, rgba(200, 162, 76, 0.22), transparent 70%),
    radial-gradient(34% 46% at 96% 14%, rgba(200, 162, 76, 0.10), transparent 72%);
}

.hero__content { max-width: 46ch; position: relative; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-size: clamp(2.2rem, 4.6vw, 3.5rem);
  margin: 0 0 18px;
  color: var(--paper);
}
.hero__title .accent {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.hero__sub {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--paper-dim);
  max-width: 48ch;
  margin: 0;
}
.hero__content .hero-cta { margin-top: 30px; }

/* --- the car --- */
.hero__stage {
  position: relative;
  perspective: 1200px;
  perspective-origin: 50% 45%;
}
.hero__car {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: rotateX(var(--h-rx, 0deg)) rotateY(var(--h-ry, 0deg));
  transition: transform 0.18s linear;
  will-change: transform;
}
.hero__inner {
  position: relative;
  transform-style: preserve-3d;
  animation: hero-float 8s ease-in-out infinite;
  will-change: transform;
}
.hero__glow {
  position: absolute;
  inset: -18% -14%;
  z-index: 0;
  transform: translateZ(-150px);
  background: radial-gradient(56% 54% at 50% 55%, rgba(200, 162, 76, 0.34), transparent 72%);
  filter: blur(30px);
  pointer-events: none;
}
.hero__floor {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -8%;
  height: 15%;
  z-index: 0;
  transform: translateZ(-50px);
  background: radial-gradient(50% 100% at 50% 0%, rgba(0, 0, 0, 0.62), transparent 76%);
  filter: blur(13px);
  animation: hero-floor 8s ease-in-out infinite;
  pointer-events: none;
}
.hero__frame {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-800);
  box-shadow:
    0 46px 100px -34px rgba(0, 0, 0, 0.8),
    0 16px 40px rgba(0, 0, 0, 0.5);
}
.hero__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: 50% 70%;
}
.hero__sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(
    104deg,
    transparent 34%,
    rgba(230, 200, 119, 0) 44%,
    rgba(230, 200, 119, 0.36) 50%,
    rgba(255, 244, 214, 0.15) 55%,
    transparent 66%
  );
  transform: translateX(-62%);
  animation: hero-sheen 9s ease-in-out infinite;
}
.hero__rim {
  position: absolute;
  inset: -1px;
  z-index: 3;
  border-radius: var(--radius-lg);
  transform: translateZ(48px);
  box-shadow:
    inset 0 0 0 1px rgba(200, 162, 76, 0.36),
    0 0 52px -6px rgba(200, 162, 76, 0.30);
  pointer-events: none;
}

/* --- load-in animation (progressive enhancement; base state stays visible) --- */
.js .hero__eyebrow { animation: hero-rise 0.7s 0.05s both var(--ease); }
.js .hero__title { animation: hero-rise 0.8s 0.14s both var(--ease); }
.js .hero__sub { animation: hero-rise 0.8s 0.24s both var(--ease); }
.js .hero__content .hero-cta { animation: hero-rise 0.8s 0.34s both var(--ease); }
.js .hero__stage { animation: hero-car-in 1.1s 0.2s both var(--ease); }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-car-in {
  from { opacity: 0; transform: translateY(34px) scale(0.965); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-float {
  0%, 100% { transform: translateY(-7px) rotateZ(-0.5deg) rotateY(-2.4deg); }
  50% { transform: translateY(7px) rotateZ(0.5deg) rotateY(2.4deg); }
}
@keyframes hero-float-soft {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(4px); }
}
@keyframes hero-floor {
  0%, 100% { transform: translateZ(-50px) scale(0.9); opacity: 0.5; }
  50% { transform: translateZ(-50px) scale(1.05); opacity: 0.72; }
}
@keyframes hero-sheen {
  0%, 12% { transform: translateX(-62%); }
  55%, 100% { transform: translateX(62%); }
}

/* --- auto-scrolling brand strip --- */
.hero__marquee {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line-soft);
  background: rgba(10, 10, 12, 0.42);
}
.marquee {
  overflow: hidden;
  padding: 15px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__row {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: marquee-scroll 46s linear infinite;
  will-change: transform;
}
.marquee__row li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  color: var(--paper-dim);
  letter-spacing: 0.01em;
}
.marquee__row li::after {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  margin: 0 clamp(16px, 3.4vw, 34px);
}
@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}
@media (hover: hover) {
  .marquee:hover .marquee__row { animation-play-state: paused; }
}

/* --- responsive --- */
@media (max-width: 980px) {
  .hero > .container { grid-template-columns: 1fr; gap: clamp(26px, 7vw, 44px); }
  .hero__content { max-width: 100%; }
  .hero__stage { perspective: 1000px; }
  .hero__frame img { aspect-ratio: 16 / 10; }
}
@media (max-width: 860px) {
  .hero__inner { animation-name: hero-float-soft; }
  .hero__car { transform: none; }
  .hero__sheen { animation-duration: 12s; }
}
@media (max-width: 560px) {
  .hero__frame img { aspect-ratio: 4 / 3.3; object-position: 50% 72%; }
  .marquee { padding: 12px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__eyebrow,
  .js .hero__title,
  .js .hero__sub,
  .js .hero__content .hero-cta,
  .js .hero__stage { animation: none; }
  .hero__inner,
  .hero__floor,
  .hero__sheen,
  .marquee__row { animation: none; }
  .hero__car { transform: none; transition: none; }
  .hero__sheen { display: none; }
  .marquee { overflow-x: auto; }
}