/* Banners prontos da página da oficina — feitos só com CSS, então acompanham a cor de destaque
   e o modelo escolhidos (variáveis --destaque e --fundo). Usado na página pública e na prévia do editor. */

.banner { position: relative; overflow: hidden; background-color: var(--fundo, #16191c); }
.banner img { width: 100%; height: 100%; object-fit: cover; }

/* Faixa zebrada: a fita de oficina, bem larga, com um brilho por cima. */
.banner-listras {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.35)),
    repeating-linear-gradient(-45deg, var(--destaque, #f5c518) 0 36px, #15171a 36px 72px);
}

/* Asfalto: pista escura com a faixa central tracejada e as linhas da borda. */
.banner-pista {
  background:
    linear-gradient(180deg, transparent calc(50% - 3px), var(--destaque, #f5c518) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)) 0 0 / 90px 100%,
    linear-gradient(180deg, transparent 14%, rgba(255,255,255,.85) 14% calc(14% + 3px), transparent calc(14% + 3px) calc(86% - 3px), rgba(255,255,255,.85) calc(86% - 3px) 86%, transparent 86%),
    radial-gradient(ellipse at 30% 40%, rgba(255,255,255,.06), transparent 60%),
    #2a2d31;
}
.banner-pista::after { /* o tracejado: some de 45 em 45 px */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 45px, #2a2d31 45px 90px);
  -webkit-mask: linear-gradient(180deg, transparent calc(50% - 4px), #000 calc(50% - 4px) calc(50% + 4px), transparent calc(50% + 4px));
          mask: linear-gradient(180deg, transparent calc(50% - 4px), #000 calc(50% - 4px) calc(50% + 4px), transparent calc(50% + 4px));
}

/* Bandeirada: xadrez de chegada que vai sumindo para a esquerda. */
.banner-xadrez {
  background: linear-gradient(90deg, var(--fundo, #16191c) 15%, color-mix(in srgb, var(--fundo, #16191c) 40%, transparent) 60%, transparent),
              conic-gradient(#f4f4f0 25%, #111 0 50%, #f4f4f0 0 75%, #111 0) 0 0 / 56px 56px;
}
.banner-xadrez::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--destaque, #f5c518);
}

/* Fibra de carbono: trama escura com um reflexo na cor de destaque. */
.banner-carbono {
  background:
    radial-gradient(ellipse 60% 120% at 85% 0%, color-mix(in srgb, var(--destaque, #f5c518) 45%, transparent), transparent 70%),
    linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0,
    linear-gradient(27deg, #222 5px, transparent 5px) 0 10px,
    linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
    linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
  background-color: #131313;
  background-size: 100% 100%, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px;
}

/* Projeto: papel de desenho técnico (blueprint) na cor de destaque. */
.banner-planta {
  background:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(135deg, color-mix(in srgb, var(--destaque, #1f5f8b) 85%, #000), color-mix(in srgb, var(--destaque, #1f5f8b) 55%, #000));
}
.banner-planta::after { /* uma engrenagem desenhada no canto */
  content: ""; position: absolute; right: 6%; top: 50%; width: 34%; max-width: 260px; aspect-ratio: 1; transform: translateY(-50%);
  border-radius: 50%; border: 2px dashed rgba(255,255,255,.35); box-shadow: 0 0 0 22px transparent, inset 0 0 0 28px rgba(255,255,255,.05);
}

/* Degradê: a cor de destaque com luzes suaves. */
.banner-degrade {
  background:
    radial-gradient(circle at 20% 120%, rgba(255,255,255,.28), transparent 45%),
    radial-gradient(circle at 90% -20%, rgba(255,255,255,.22), transparent 50%),
    linear-gradient(120deg, var(--destaque, #0f9a8a), color-mix(in srgb, var(--destaque, #0f9a8a) 45%, #000));
}