/* ==========================================================================
   Hero · Painel em camadas
   A área da foto principal é um corte do painel do Fusca: a chapa pintada com
   o recorte do mostrador, o aro fino e a foto atrás, em profundidades
   diferentes. Momento único: o mostrador se abre como íris ao carregar.
   ========================================================================== */
@property --aperture {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.hero-media-box {
  --box-h: clamp(220px, 36vw, 440px);
  --ap-r: calc(var(--box-h) * 0.4);
  --aperture: var(--ap-r);
  --px: 0;
  --py: 0;
  position: relative;
  height: var(--box-h);
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--color-charcoal-slate);
}

/* Camada 3 (fundo): a foto, vista através do recorte */
.dash-photo {
  position: absolute;
  inset: -28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-charcoal-slate);
  transform: translate3d(calc(var(--px) * -14px), calc(var(--py) * -10px), 0);
}

.dash-photo-label {
  max-width: calc(var(--ap-r) * 1.45);
  text-align: center;
  line-height: 1.5;
  color: var(--color-chassis-subtext);
}

/* Selo da marca no mostrador: a borda do selo coincide com o recorte.
   Para continuar encaixado, o selo acompanha a chapa (sem paralaxe própria). */
.dash-photo-img {
  display: block;
  flex: none;
  width: calc(var(--ap-r) * 2 + 2px);
  height: auto;
  max-width: none;
}

.dash-photo:has(.dash-photo-img) {
  transform: translate3d(calc(var(--px) * 4px), calc(var(--py) * 3px), 0);
  animation: none;
}

.hero-media-box:has(.dash-photo-img) .dash-bezel-inner {
  display: none;
}

/* Camada 2 (frente): a chapa do painel, pintada, com o recorte do mostrador */
.dash-sheet {
  position: absolute;
  inset: -12px;
  background-color: var(--color-navy-panel);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--aperture), #000 calc(var(--aperture) + 1px));
          mask-image: radial-gradient(circle at 50% 50%, transparent var(--aperture), #000 calc(var(--aperture) + 1px));
  transform: translate3d(calc(var(--px) * 4px), calc(var(--py) * 3px), 0);
}

/* Friso horizontal da chapa: a aba inferior do painel */
.dash-sheet::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 74%;
  height: 1px;
  background-color: var(--color-navy-border);
}

/* Camada 1 (aro): fino, assentado na borda do recorte */
.dash-bezel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc((var(--ap-r) + 3px) * 100 / 49);
  height: calc((var(--ap-r) + 3px) * 100 / 49);
  margin-left: calc((var(--ap-r) + 3px) * -100 / 98);
  margin-top: calc((var(--ap-r) + 3px) * -100 / 98);
  overflow: visible;
  transform: translate3d(calc(var(--px) * 5px), calc(var(--py) * 3.5px), 0) rotate(-90deg);
  pointer-events: none;
}

.dash-bezel circle {
  fill: none;
}

.dash-bezel-ring {
  stroke: var(--color-vintage-sky-tint);
  stroke-width: 0.45;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

.dash-bezel-inner {
  stroke: var(--color-navy-border);
  stroke-width: 0.3;
}

/* --------------------------------------------------------------------------
   Momento único: a íris do mostrador se abre e o aro se traça
   -------------------------------------------------------------------------- */
@keyframes dash-iris {
  from { --aperture: 0px; }
  to   { --aperture: var(--ap-r); }
}

@keyframes dash-ring {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

@keyframes dash-label {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.dash-sheet {
  animation: dash-iris 1100ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 650ms both;
}

.dash-bezel-ring {
  animation: dash-ring 1300ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 800ms both;
}

.dash-photo-label,
.dash-photo-img {
  animation: dash-label 600ms ease 1300ms both;
}

/* Profundidade no scroll: a foto desce mais devagar que a chapa */
@supports (animation-timeline: view()) {
  @keyframes dash-drift {
    from { translate: 0 -16px; }
    to   { translate: 0 22px; }
  }

  .dash-photo {
    animation: dash-drift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

/* --------------------------------------------------------------------------
   Celular
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .hero-media-box {
    --box-h: clamp(200px, 56vw, 260px);
    --ap-r: calc(var(--box-h) * 0.42);
  }

  .dash-bezel-ring { stroke-width: 0.75; }
  .dash-bezel-inner { stroke-width: 0.5; }

  .dash-photo-label {
    font-size: 12px;
    max-width: calc(var(--ap-r) * 1.5);
  }
}

/* --------------------------------------------------------------------------
   Movimento reduzido: painel montado e parado, sem íris nem paralaxe
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dash-sheet,
  .dash-bezel-ring,
  .dash-photo-label,
  .dash-photo-img,
  .dash-photo {
    animation: none;
  }

  .dash-photo,
  .dash-sheet,
  .dash-bezel {
    --px: 0;
    --py: 0;
  }
}