/* ── Ventoro Exploded View — Styles ── */

/* ── Tokens ── */
.vev-hero {
  --vev-bg:       #000000;
  --vev-border:   rgba(255,255,255,.1);
  --vev-white:    #ffffff;
  --vev-muted:    rgba(255,255,255,.4);
  --vev-accent:   #ffffff;
  --vev-glow:     rgba(255,255,255,.05);
  --vev-tag-bg:   rgba(0,0,0,.96);
  --vev-ease:     cubic-bezier(.22,.68,0,1.2);
  --vev-ease-out: cubic-bezier(.16,1,.3,1);
}

/* ── Hero ── */
.vev-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  background: var(--vev-bg);
  overflow: hidden;
  box-sizing: border-box;
}
.vev-hero *, .vev-hero *::before, .vev-hero *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Background ── */
.vev-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.vev-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}
.vev-bg-glow {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 80vw; height: 70vh;
  background: radial-gradient(ellipse at 40% 60%, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 40%, transparent 70%);
  animation: vev-glow-pulse 6s ease-in-out infinite;
}
@keyframes vev-glow-pulse {
  0%,100% { opacity: .8; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1;  transform: translate(-50%,-50%) scale(1.08); }
}

/* ── Stage ── */
.vev-stage { position: absolute; inset: 0; z-index: 1; isolation: isolate; }

/* ── Car ── */
.vev-car {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 60px rgba(255,255,255,.04));
  transition: filter .6s ease;
}
.vev-car img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

/* ── Left dark gradient so copy text pops ── */
.vev-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 35%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,.55) 100%);
  z-index: 2;
  pointer-events: none;
}

/* ── Parts ── */
.vev-part {
  position: absolute;
  left: var(--px, 50%);
  top:  var(--py, 50%);
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 10;
  transition: transform .32s var(--vev-ease-out), opacity .25s ease, filter .25s ease;
  animation: vev-part-in 1.2s cubic-bezier(.16,1,.3,1) both;
}
.vev-part img {
  display: block;
  width: var(--part-size, 8vw);
  height: auto;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,.8));
  transition: filter .35s ease, transform .35s ease;
  mix-blend-mode: lighten;
}
.vev-part:hover img {
  filter: drop-shadow(0 0 22px rgba(255,255,255,.45)) drop-shadow(0 4px 20px rgba(0,0,0,.8));
  transform: scale(1.1);
}
.vev-part img,
.vev-part-tag,
.vev-part-dot { pointer-events: none; }
.vev-stage.has-hover .vev-part:not(.vev-hovered) {
  opacity: .28;
  filter: grayscale(.7);
}
.vev-stage.has-hover .vev-part.vev-hovered { opacity: 1; filter: none; }

.vev-part:nth-child(1) { animation-delay: .8s; }
.vev-part:nth-child(2) { animation-delay: 1.0s; }
.vev-part:nth-child(3) { animation-delay: 1.2s; }
.vev-part:nth-child(4) { animation-delay: 1.4s; }
.vev-part:nth-child(5) { animation-delay: 1.6s; }
@keyframes vev-part-in {
  from { opacity: 0; transform: translate(-50%,-50%) scale(.8); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* ── Info tag ── */
.vev-part-tag {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--vev-tag-bg);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 6px;
  padding: 11px 15px;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 30;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.vev-part-tag::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  border-radius: 6px 6px 0 0;
}
.vev-part-tag::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: rgba(255,255,255,.13);
}
.vev-part.vev-tag-below .vev-part-tag {
  bottom: auto;
  top: calc(100% + 16px);
  transform: translateX(-50%) translateY(-8px);
}
.vev-part.vev-tag-below:hover .vev-part-tag,
.vev-part.vev-tag-below.vev-strip-active .vev-part-tag {
  transform: translateX(-50%) translateY(0);
}
.vev-part.vev-tag-below .vev-part-tag::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: rgba(255,255,255,.13);
}
.vev-part.vev-tag-below .vev-part-tag::before {
  top: auto; bottom: 0;
  border-radius: 0 0 6px 6px;
}
.vev-part:hover .vev-part-tag,
.vev-part.vev-strip-active .vev-part-tag {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.vev-tag-name  { font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--vev-accent); text-transform: uppercase; }
.vev-tag-spec  { font-size: 11px; color: var(--vev-muted); letter-spacing: .05em; }
.vev-tag-weight { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: .04em; }

/* ── Dot ── */
.vev-part-dot {
  position: absolute; bottom: -8px; left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--vev-accent);
  opacity: 0;
  box-shadow: 0 0 12px var(--vev-accent);
  transition: opacity .2s ease .1s;
}
.vev-part:hover .vev-part-dot,
.vev-part.vev-strip-active .vev-part-dot { opacity: 1; }

/* ── Copy block ── */
.vev-copy {
  position: absolute;
  left: 5vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  max-width: min(660px, 58vw);
  display: flex;
  flex-direction: column;
  gap: 22px;
  pointer-events: none;
}

/* ── Eyebrow ── */
.vev-eyebrow {
  font-size: 9px;
  letter-spacing: .38em;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  animation: vev-eyebrow-in 1s cubic-bezier(.16,1,.3,1) .2s forwards;
}
.vev-eyebrow-line {
  display: block;
  flex-shrink: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.5), transparent);
  animation: vev-line-grow 1.4s cubic-bezier(.16,1,.3,1) .5s both;
  width: 0;
}
@keyframes vev-eyebrow-in {
  from { opacity: 0; transform: translateX(-16px); letter-spacing: .55em; }
  to   { opacity: 1; transform: translateX(0);     letter-spacing: .38em; }
}
@keyframes vev-line-grow {
  from { width: 0; }
  to   { width: 52px; }
}

/* ── Headline ── */
.vev-headline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.08;
  position: relative;
}
.vev-headline-line {
  font-size: clamp(18px, 2.2vw, 36px);
  font-weight: 300;
  letter-spacing: .01em;
  color: #fff;
  opacity: 0;
  animation: vev-hl-in 1.2s cubic-bezier(.16,1,.3,1) both;
}
.vev-headline-line:nth-child(1) { animation-delay: .4s; }
.vev-headline-line:nth-child(2) { animation-delay: .6s; }
@keyframes vev-hl-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vev-hl-exploded {
  font-size: clamp(18px, 2.2vw, 36px);
  font-weight: 300;
  letter-spacing: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.40) 0%,
    rgba(255,255,255,.75) 35%,
    rgba(255,255,255,.40) 65%,
    rgba(255,255,255,.60) 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: vev-chrome-sweep 5s linear 1.8s infinite, vev-hl-in 1.2s cubic-bezier(.16,1,.3,1) .6s both;
}
@keyframes vev-chrome-sweep {
  from { background-position: 0% center; }
  to   { background-position: 220% center; }
}
.vev-hl-carbon {
  position: relative;
  animation: vev-hl-in 1.2s cubic-bezier(.16,1,.3,1) .4s both, vev-flicker 5s 1.8s infinite;
}
@keyframes vev-flicker {
  0%,78%,80%,82%,84%,87%,100% { opacity: 1; }
  79%  { opacity: .15; }
  81%  { opacity: .6;  }
  83%  { opacity: .1;  }
  85%,86% { opacity: .45; }
}

/* ── Rule ── */
.vev-rule {
  height: 1px;
  background: rgba(255,255,255,.15);
  opacity: 0;
  width: 0;
  animation: vev-rule-in 1s ease .9s forwards;
}
@keyframes vev-rule-in { from { opacity:0; width:0; } to { opacity:1; width:100%; } }

/* ── Sub ── */
.vev-sub {
  font-size: clamp(9px, .85vw, 11px);
  line-height: 1.9;
  color: rgba(255,255,255,.45);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  animation: vev-fade-up 1s ease 1s forwards;
}
.vev-sub strong { color: rgba(255,255,255,.85); font-weight: 700; letter-spacing: .14em; }

/* ── CTA ── */
.vev-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  position: relative;
  padding: 14px 32px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  align-self: flex-start;
  pointer-events: all;
  opacity: 0;
  animation: vev-fade-up 1s ease 1.2s forwards;
}
.vev-cta-fill {
  position: absolute; inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.vev-cta:hover .vev-cta-fill { transform: scaleX(1); }
.vev-cta-text {
  position: relative;
  font-size: 9px;
  letter-spacing: .32em;
  color: rgba(255,255,255,.8);
  font-weight: 400;
  text-transform: uppercase;
  transition: color .35s ease;
}
.vev-cta:hover .vev-cta-text { color: #000; }
.vev-cta-arrow {
  position: relative;
  font-size: 13px;
  color: rgba(255,255,255,.55);
  transition: transform .3s ease, color .35s ease;
}
.vev-cta:hover .vev-cta-arrow { transform: translateX(5px); color: #000; }

@keyframes vev-fade-up {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Hint ── */
.vev-hint {
  position: absolute;
  bottom: 28px; right: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: .15em;
  color: rgba(255,255,255,.28);
  text-transform: uppercase;
  z-index: 20;
  pointer-events: none;
  animation: vev-fade-up 1s ease 1.6s both;
}

/* ── Strip ── */
.vev-strip {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  border-top: 1px solid rgba(255,255,255,.06);
  z-index: 20;
}
.vev-strip-item {
  flex: 1;
  text-align: center;
  padding: 14px 0;
  font-size: 9px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  cursor: pointer;
  border-right: 1px solid rgba(255,255,255,.06);
  transition: color .25s ease, background .25s ease;
  position: relative;
  overflow: hidden;
}
.vev-strip-item:last-child { border-right: none; }
.vev-strip-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 40%; height: 1px;
  background: rgba(255,255,255,.5);
  transition: transform .3s ease;
}
.vev-strip-item:hover { color: #000; background: #fff; }
.vev-strip-item.vev-active { color: #fff; }
.vev-strip-item.vev-active::after { transform: translateX(-50%) scaleX(1); }

/* ── SVG connector lines ── */
.vev-lines {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 9;
  overflow: visible;
}
.vev-connector { fill: none; stroke: rgba(255,255,255,.6); stroke-width: 1.5px; opacity: 0; }
.vev-target-dot  { fill: #fff; opacity: 0; }
.vev-target-ring { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 1px; opacity: 0; }
@keyframes vev-ring-expand {
  0%   { r: 6;  opacity: .7; }
  100% { r: 16; opacity: 0;  }
}

/* ── Tablet overrides (≤1024px) ── */
@media (max-width: 1024px) {
  #vev-part-diffuser { --px: 92%; }
  #vev-part-spoiler  { --px: 90%; }
}