/* EFEITOS NECTAR
 * Cantos, brilho e linhas de varredura inspirados na referência.
 * Este arquivo é independente do layout: personalize os efeitos aqui.
 */
:root {
  --effect-speed: 220ms;
  --effect-ease: cubic-bezier(.2, .7, .2, 1);
  --effect-glow: 0 0 1px var(--color-accent), 0 0 8px #ef001b66;
  --effect-corners:
    linear-gradient(currentColor, currentColor) left top / 7px 1px no-repeat,
    linear-gradient(currentColor, currentColor) left top / 1px 7px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 7px 1px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 1px 7px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 7px 1px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 1px 7px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 7px 1px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 1px 7px no-repeat;
}

/* Controles de texto: quatro pequenos cantos, sem alterar seu tamanho. */
:is(.nav-link, .text-button, .outline-button, .primary-button,
    .service-controls button, .value-controls button,
    .footer-nav a, .footer-nav button, .footer-icon, .footer-bottom button, .pause-button) {
  position: relative;
  isolation: isolate;
  transition: color var(--effect-speed), background-color var(--effect-speed),
    border-color var(--effect-speed), text-shadow var(--effect-speed),
    box-shadow var(--effect-speed);
}

:is(.nav-link, .text-button, .outline-button, .primary-button,
    .service-controls button, .value-controls button,
    .footer-nav a, .footer-nav button, .footer-icon, .footer-bottom button, .pause-button)::after {
  content: '';
  position: absolute;
  inset: -5px -7px;
  pointer-events: none;
  color: var(--color-accent);
  background: var(--effect-corners);
  opacity: 0;
  transform: scale(.84);
  transition: opacity var(--effect-speed), transform var(--effect-speed) var(--effect-ease);
}

/* A textura fica atrás do texto: leve efeito de monitor, como na referência. */
:is(.nav-link, .text-button, .outline-button, .service-controls button)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, #ef001b1c 2px 3px);
  opacity: 0;
  transition: opacity var(--effect-speed);
}

:is(.nav-link, .text-button, .outline-button, .primary-button,
    .service-controls button, .value-controls button,
    .footer-nav a, .footer-nav button, .footer-icon, .footer-bottom button, .pause-button):focus-visible::after,
.service-controls button[aria-pressed='true']::after,
.value-controls button[aria-pressed='true']::after {
  opacity: 1;
  transform: scale(1);
}

:is(.nav-link, .text-button, .outline-button, .service-controls button):focus-visible {
  /* Os quatro cantos já sinalizam o foco, sem desenhar uma caixa completa. */
  outline: none;
  color: var(--color-accent);
  text-shadow: var(--effect-glow);
}

:is(.nav-link, .text-button, .outline-button, .service-controls button):focus-visible::before {
  opacity: 1;
}

/* Cantos de serviços ficam dentro da área rolável no celular. */
.service-controls button::after { inset: 1px; }
.service-controls button[aria-pressed='true']::before { opacity: .5; }
.value-controls button::after { inset: -5px; }

/* Cards ganham uma aproximação discreta e bordas iluminadas. */
.hover-corners {
  transition: border-color 280ms, box-shadow 280ms;
}
.hover-corners::after {
  transform: scale(.97);
  transition: opacity 280ms, transform 280ms var(--effect-ease);
}
.hover-corners:focus-visible::after { transform: scale(1); }
.news-title, .vehicle-label { transition: color 220ms, text-shadow 220ms; }
.vehicle-image-wrap img { transition: transform 650ms var(--effect-ease), filter 400ms; }
.news-image { transition: filter 400ms; }
.outline-button > span, .text-button > span, .vehicle-label > span, .nav-link > span {
  display: inline-block;
  transition: transform 220ms var(--effect-ease);
}

/* Hover só em dispositivos com ponteiro, evitando estados presos no toque. */
@media (hover: hover) and (pointer: fine) {
  :is(.nav-link, .text-button, .outline-button, .primary-button,
      .service-controls button, .value-controls button,
      .footer-nav a, .footer-nav button, .footer-icon, .footer-bottom button, .pause-button):hover::after {
    opacity: 1;
    transform: scale(1);
  }
  :is(.nav-link, .text-button, .outline-button, .service-controls button):hover::before {
    opacity: 1;
  }
  :is(.nav-link, .text-button, .outline-button,
      .service-controls button, .value-controls button):hover {
    color: var(--color-accent);
    text-shadow: var(--effect-glow);
  }
  .primary-button:hover { box-shadow: 0 0 20px #ef001b30; }
  .hover-corners:hover::after { transform: scale(1); }
  .vehicle-card:hover { border-color: #ef001b66; box-shadow: 0 0 30px #ef001b0d; }
  .vehicle-card:hover img { transform: scale(1.035); }
  .news-card:hover .news-image { filter: brightness(1.08); }
  .news-card:hover .news-title, .vehicle-card:hover .vehicle-label {
    text-shadow: 0 0 10px #ef001b33;
  }
  :is(.outline-button, .text-button, .vehicle-card, .nav-link):hover > span[aria-hidden='true'],
  .vehicle-card:hover .vehicle-label > span {
    transform: translate(2px, -2px);
  }
}

/* Feedback de toque/clique e de teclado sem deslocar a composição. */
:is(.nav-link, .outline-button, .primary-button, .text-button):active {
  filter: brightness(1.2);
}
:is(.nav-link, .text-button, .outline-button, .primary-button):active::after {
  opacity: 1;
  transform: scale(.96);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .vehicle-card:hover img { transform: none; }
}

/* Cursor NECTAR: X com mira geométrica, apenas para mouse preciso. */
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: url('/images/cursor-tech.svg') 16 16, auto; }
  a, button, summary, select, [role='button'], [role='tab'], .project-gallery button,
  .services-disclosure > summary, .faq-list summary, .service-scope summary,
  .language-picker select, .showroom-card {
    cursor: url('/images/cursor-tech-active.svg') 16 16, pointer;
  }
  :is(a, button, summary, [role='button'], [role='tab']) > * { cursor: inherit; }
  input:not([type='checkbox']):not([type='radio']):not([type='range']), textarea, [contenteditable='true'] { cursor: text; }
  button:disabled, #showroom-viewer button:disabled, .release-controls button:disabled { cursor: not-allowed; }
}