/*
 * Efeitos de movimento e interação (fase 5 do redesign), em todas as páginas. Regras do projeto:
 * - anima só transform, opacity, clip-path e mask (sem layout por quadro);
 * - os efeitos de ponteiro valem só com mouse (hover + ponteiro fino) e com a classe
 *   `com-ponteiro` que o JS (efeitos/ponteiro.js) põe no <html>;
 * - tudo que se mexe sozinho só vale com html[data-movimento="ligado"] (sistema sem prefers-reduced-motion, ou a pessoa ligou), e o que gira
 *   sozinho (carrossel, destaques) tem botão de pausar (WCAG 2.2.2);
 * - camada própria (`efeitos`), declarada depois de `paginas` em site.css: vence o hover simples.
 */

/* A lente da ilustração anima o raio; registrado para a transição funcionar. */
@property --raio-lente {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@layer efeitos {
  /* 1. Cartões que seguem o ponteiro: inclinação, foco de luz e borda acesa. ------------------- */
  @media (hover: hover) and (pointer: fine) {
    .com-ponteiro:where([data-movimento="ligado"])
      :is(
        .cartao-pc,
        .cartao-peca,
        .porta-verbo,
        .quiz__tile,
        .prestador,
        .etapas__item,
        .chat__sugestao,
        .carrossel__slide
      ) {
      position: relative;
      transform: perspective(70rem) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
      transition:
        transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 220ms ease,
        border-color 220ms ease;
      isolation: isolate;
    }

    .com-ponteiro:where([data-movimento="ligado"])
      [data-ponteiro]:is(
        .cartao-pc,
        .cartao-peca,
        .porta-verbo,
        .quiz__tile,
        .prestador,
        .etapas__item,
        .chat__sugestao,
        .carrossel__slide
      ) {
      border-color: var(--color-border-control);
      box-shadow: var(--shadow-lg);
      transform: perspective(70rem) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg))
        translateY(-4px);
      transition-duration: 120ms, 220ms, 220ms;
    }

    /* Foco de luz: um disco com gradiente que só se move (transform) para baixo do ponteiro. */
    .com-ponteiro:where([data-movimento="ligado"])
      :is(
        .cartao-pc,
        .cartao-peca,
        .porta-verbo,
        .quiz__tile,
        .prestador,
        .etapas__item,
        .chat__sugestao,
        .carrossel__slide
      )::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
      width: 26rem;
      height: 26rem;
      margin: -13rem 0 0 -13rem;
      border-radius: 50%;
      background: radial-gradient(
        closest-side,
        color-mix(in srgb, var(--color-accent) 20%, transparent),
        transparent
      );
      opacity: 0;
      pointer-events: none;
      transform: translate(var(--mx, 50%), var(--my, 50%));
      transition: opacity 260ms ease;
    }

    .com-ponteiro:where([data-movimento="ligado"]) [data-ponteiro]::before {
      opacity: 1;
    }

    /* Borda acesa perto do ponteiro: um anel (máscara) com o gradiente sob o mouse. */
    .com-ponteiro:where([data-movimento="ligado"])
      :is(.cartao-pc, .cartao-peca, .porta-verbo, .quiz__tile, .carrossel__slide)::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 4;
      padding: 1.5px;
      border-radius: inherit;
      background: radial-gradient(
        16rem circle at var(--mx, 50%) var(--my, 50%),
        var(--color-accent),
        transparent 70%
      );
      mask:
        linear-gradient(#000 0 0) content-box exclude,
        linear-gradient(#000 0 0);
      opacity: 0;
      pointer-events: none;
      transition: opacity 260ms ease;
    }

    .com-ponteiro:where([data-movimento="ligado"]) [data-ponteiro]::after {
      opacity: 1;
    }

    /* O preço cresce um pouco quando o cartão está sob o ponteiro. */
    .com-ponteiro:where([data-movimento="ligado"])
      :is(.cartao-pc__preco strong, .cartao-peca__preco, .carrossel__preco) {
      display: inline-block;
      transform-origin: left center;
      transition: transform 220ms ease;
    }

    .com-ponteiro:where([data-movimento="ligado"])
      [data-ponteiro]
      :is(.cartao-pc__preco strong, .cartao-peca__preco, .carrossel__preco) {
      transform: scale(1.06);
    }

    /* 2. Lente na ilustração do PC: a tampa (vidro fumê) fica por cima e o ponteiro abre um
       círculo que mostra o interior; o raio cresce ao entrar e some ao sair. -------------------- */
    .com-ponteiro:where([data-movimento="ligado"]) .ilustracao-tampa {
      display: block;
    }

    .com-ponteiro:where([data-movimento="ligado"]) [data-ponteiro] {
      --raio-lente: 5.5rem;
    }

    .com-ponteiro:where([data-movimento="ligado"]) .ilustracao-tampa {
      mask-image: radial-gradient(
        circle var(--raio-lente) at var(--mx, 50%) var(--my, 50%),
        transparent 0 92%,
        #000 100%
      );
      transition: --raio-lente 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
  }

  /* Sem mouse (toque, teclado) ou com menos movimento, a tampa nem aparece: fica o interior. */
  .ilustracao-tampa {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  /* Vidro fumê: deixa entrever o interior; a lente mostra o interior nítido. */
  .il-tampa-vidro {
    fill: color-mix(in srgb, #0b1220 82%, var(--color-accent));
    fill-opacity: 0.84;
    stroke: var(--color-border-control);
    stroke-width: 1.5;
  }

  .il-tampa-reflexo {
    fill: none;
    stroke: rgb(255 255 255 / 0.16);
    stroke-width: 6;
    stroke-linecap: round;
  }

  .il-tampa-marca {
    fill: var(--color-accent);
  }

  .il-tampa-texto {
    fill: rgb(229 231 235 / 0.9);
    font-family: var(--font-mono);
    font-size: 7px;
    letter-spacing: 0.06em;
  }

  /* 3. Selos que chamam o olhar: um brilho atravessa o selo de tempos em tempos. ---------------- */
  .selo-brilho {
    overflow: hidden;
    isolation: isolate;
  }

  /* O selo da foto do PC já é posicionado (absolute); os outros ganham a referência aqui. */
  .selo-brilho:not(.cartao-pc__selo) {
    position: relative;
  }
  :where(html[data-movimento="ligado"]) .selo-brilho::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      100deg,
      transparent 30%,
      color-mix(in srgb, #fff 55%, transparent) 50%,
      transparent 70%
    );
    transform: translateX(-120%);
    animation: selo-brilho 5.5s ease-in-out infinite;
    pointer-events: none;
  }

  :where(html[data-movimento="ligado"]) .selo-brilho:nth-of-type(2n)::after {
    animation-delay: 1.4s;
  }

  @keyframes selo-brilho {
    0%,
    62% {
      transform: translateX(-120%);
    }

    82%,
    100% {
      transform: translateX(120%);
    }
  }

  /* 4. Destaques que giram (texto curto, um por vez). ----------------------------------------- */
  .rotativo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    min-height: var(--target-min);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background:
      radial-gradient(
        circle at 0% 50%,
        color-mix(in srgb, var(--color-accent) 14%, transparent),
        transparent 40%
      ),
      var(--color-surface);
    font-size: var(--text-sm);
  }

  .rotativo__rotulo {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .rotativo__janela {
    position: relative;
    flex: 1;
    min-width: 12rem;
    height: 1.5em;
    overflow: hidden;
  }

  .rotativo__item {
    position: absolute;
    inset: 0;
    overflow: hidden;
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(100%);
  }

  .rotativo__item[data-atual] {
    opacity: 1;
    transform: none;
  }

  .rotativo__item[data-saindo] {
    opacity: 0;
    transform: translateY(-100%);
  }
  :where(html[data-movimento="ligado"]) .rotativo__item {
    transition:
      transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 480ms ease;
  }

  .destaques-kits {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  /* 5. Carrossel (kits novos e destaques): trilho com encaixe, botões com texto, pausa. -------- */
  .carrossel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .carrossel__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
  }

  .carrossel__controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  /* As setas ficam coladas nas bordas do palco, no meio da altura; o alternador de pausa vai ao lado
     dos pontos. Em tela estreita e em toque as setas somem (arrastar e os pontos bastam). */
  .carrossel__palco {
    position: relative;
  }

  .carrossel__seta {
    position: absolute;
    top: 50%;
    z-index: 2;
    translate: 0 -50%;
  }

  .carrossel__seta--anterior {
    left: var(--space-3);
  }

  .carrossel__seta--proximo {
    right: var(--space-3);
  }

  .carrossel__rodape {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .carrossel__rodape > .carrossel__pontos {
    grid-column: 2;
  }

  .carrossel__pausa {
    grid-column: 3;
    justify-self: end;
  }

  @media (width >= 48rem) {
    .carrossel__trilho .carrossel__slide {
      padding-inline: calc(var(--target-min) + var(--space-6));
    }
  }

  @media (width < 48rem), (hover: none) {
    .carrossel__seta {
      display: none;
    }
  }

  /* Setas de lado de um trilho que rola (ui/setas.js): coladas nas bordas, só quando há o que rolar. */
  .com-setas {
    position: relative;
  }

  .com-setas__seta {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: none;
    translate: 0 -50%;
  }

  .com-setas[data-rola] > .com-setas__seta {
    display: inline-grid;
  }

  .com-setas__seta:disabled {
    visibility: hidden;
  }

  .com-setas__seta--anterior {
    left: -0.75rem;
  }

  .com-setas__seta--proxima {
    right: -0.75rem;
  }

  @media (hover: none) {
    .com-setas[data-rola] > .com-setas__seta {
      display: none;
    }
  }

  .carrossel__trilho {
    display: grid;
    grid-auto-columns: 100%;
    grid-auto-flow: column;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--radius-lg);
  }

  .carrossel__trilho::-webkit-scrollbar {
    display: none;
  }

  .carrossel__trilho > .carrossel__item {
    display: flex;
    scroll-snap-align: start;
  }

  .carrossel__slide {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-5);
    min-height: clamp(20rem, 30vw, 31rem);
    padding: var(--space-5) clamp(1.25rem, 3vw, 3rem);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
      radial-gradient(
        circle at 85% 40%,
        color-mix(in srgb, var(--color-accent) 22%, transparent),
        transparent 55%
      ),
      linear-gradient(135deg, var(--color-surface), var(--color-bg-muted));
  }

  /* Primeiro slide: mesmo tratamento dos botões Kits e Montador da navegação (fundo de destaque,
     texto sobre ele, peso forte). O botão do slide inverte para continuar visível. */
  .carrossel__slide--destaque {
    border-color: var(--color-accent);
    background:
      radial-gradient(
        circle at 85% 40%,
        color-mix(in srgb, var(--color-on-accent) 18%, transparent),
        transparent 55%
      ),
      var(--gradient-accent);
    color: var(--color-on-accent);
  }

  .carrossel__slide--destaque
    :is(.carrossel__etiqueta, .carrossel__nota, .carrossel__titulo, .carrossel__preco) {
    color: var(--color-on-accent);
  }

  .carrossel__slide--destaque :is(.carrossel__titulo, .carrossel__preco) {
    font-weight: var(--font-weight-semibold);
  }

  .carrossel__slide--destaque .ui-button--primary {
    background: var(--color-on-accent);
    color: var(--color-accent-hover);
    font-weight: var(--font-weight-semibold);
  }

  .carrossel__texto {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Preço e legenda na mesma linha, com respiro entre eles. */
  .carrossel__texto > p {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    margin: 0;
  }

  .carrossel__etiqueta {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 0.65rem + 0.3vw, 1rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* Texto que cresce com a largura do cartão: ocupa o espaço em vez de ficar num canto. */
  .carrossel__titulo {
    font-size: clamp(1.75rem, 0.9rem + 2.4vw, 3.25rem);
    line-height: 1.08;
  }

  .carrossel__preco {
    font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
    font-weight: var(--font-weight-semibold);
  }

  .carrossel__nota {
    color: var(--color-fg-muted);
    font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1.125rem);
  }

  .carrossel__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }

  /* A forma geométrica atrás da ilustração do slide. */
  .carrossel__arte {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    max-height: 28rem;
  }

  .carrossel__forma {
    position: absolute;
    inset: 4% 8%;
    background: conic-gradient(
      from 200deg,
      color-mix(in srgb, var(--color-accent) 55%, transparent),
      color-mix(in srgb, var(--color-accent) 12%, transparent),
      color-mix(in srgb, var(--color-accent) 40%, transparent)
    );
    clip-path: polygon(14% 4%, 72% 0%, 100% 34%, 92% 82%, 46% 100%, 4% 78%, 0% 30%);
    opacity: 0.55;
  }

  .carrossel__arte .ilustracao {
    position: relative;
    width: 82%;
    height: auto;
  }

  .carrossel__pontos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .carrossel__ponto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .carrossel__ponto::before {
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    border: 1px solid var(--color-border-control);
    border-radius: 50%;
    background-color: var(--color-surface-2);
  }

  .carrossel__ponto[aria-current="true"]::before {
    width: 1.75rem;
    border-color: var(--color-accent);
    border-radius: var(--radius-pill);
    background-color: var(--color-accent);
  }
  :where(html[data-movimento="ligado"]) .carrossel__trilho {
    scroll-behavior: smooth;
  }

  :where(html[data-movimento="ligado"]) .carrossel__ponto::before {
    transition:
      width 260ms ease,
      background-color 260ms ease;
  }

  :where(html[data-movimento="ligado"]) .carrossel__forma {
    animation: forma-respira 9s ease-in-out infinite alternate;
  }

  /* O slide que entra: a arte sobe e o texto aparece em sequência. */
  :where(html[data-movimento="ligado"])
    .carrossel__trilho
    > .carrossel__item[data-atual]
    .carrossel__texto
    > * {
    animation: entra-de-baixo 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  :where(html[data-movimento="ligado"])
    .carrossel__trilho
    > .carrossel__item[data-atual]
    .carrossel__texto
    > :nth-child(2) {
    animation-delay: 60ms;
  }

  :where(html[data-movimento="ligado"])
    .carrossel__trilho
    > .carrossel__item[data-atual]
    .carrossel__texto
    > :nth-child(3) {
    animation-delay: 120ms;
  }

  :where(html[data-movimento="ligado"])
    .carrossel__trilho
    > .carrossel__item[data-atual]
    .carrossel__texto
    > :nth-child(n + 4) {
    animation-delay: 180ms;
  }

  :where(html[data-movimento="ligado"])
    .carrossel__trilho
    > .carrossel__item[data-atual]
    .carrossel__arte
    .ilustracao {
    animation: arte-entra 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  @keyframes forma-respira {
    from {
      clip-path: polygon(14% 4%, 72% 0%, 100% 34%, 92% 82%, 46% 100%, 4% 78%, 0% 30%);
      transform: rotate(-3deg);
    }

    to {
      clip-path: polygon(6% 12%, 62% 2%, 96% 22%, 100% 70%, 58% 96%, 10% 92%, 2% 46%);
      transform: rotate(4deg) scale(1.03);
    }
  }

  @keyframes entra-de-baixo {
    from {
      opacity: 0;
      transform: translateY(0.75rem);
    }
  }

  @keyframes arte-entra {
    from {
      opacity: 0;
      transform: translateX(2rem) rotate(-4deg) scale(0.94);
    }
  }

  @media (width < 48rem) {
    .carrossel__controles {
      flex: 1 1 100%;
    }

    .rotativo {
      border-radius: var(--radius-lg);
    }

    .rotativo__janela {
      order: 3;
      flex-basis: 100%;
    }

    .rotativo__pausa {
      margin-left: auto;
    }

    .carrossel__slide {
      grid-template-columns: minmax(0, 1fr);
    }

    .carrossel__arte {
      order: -1;
      max-height: 12rem;
    }
  }

  /* 6. Transição de página: a mídia do cartão vira a mídia da página de detalhe (o JS dá o nome
     à mídia do cartão clicado; a página de detalhe já tem o mesmo nome na dela). -------------- */
  :where(html[data-movimento="ligado"]) .galeria,
  :where(html[data-movimento="ligado"]) .produto__visual {
    view-transition-name: midia-destaque;
  }

  ::view-transition-group(midia-destaque) {
    animation-duration: 420ms;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* 7. Versão reduzida dos efeitos FUNCIONAIS (movimento desligado: sistema pede menos movimento e
     a pessoa não religou). O que só enfeita (inclinação, blob, faixa, giro, parallax, rotação
     sozinha) fica parado de vez; o que comunica algo (trocar de foto ou de slide, mostrar o
     interior da placa, chegar à página de detalhe) vira um fundido curto de opacidade, sem
     deslocamento, escala nem giro. Decisão e lista em research/ux-ui/movimento-funcional-e-decorativo.md. */
  :where(html[data-movimento="desligado"]) .fotos__img {
    transition: opacity 120ms ease;
  }

  /* Banner rotativo: a mensagem troca por fundido, parada no lugar. */
  :where(html[data-movimento="desligado"]) .rotativo__item {
    transform: none;
    transition: opacity 150ms ease;
  }

  /* Slide do carrossel (troca pelas setas, pontos ou rolagem): o conteúdo novo surge por fundido. */
  :where(html[data-movimento="desligado"]) .carrossel__trilho > .carrossel__item[data-atual] {
    animation: surge-reduzido 150ms ease-out both;
  }

  /* Revelação da placa de vídeo: com mouse, passar por cima mostra o interior por fundido (no lugar
     do rastro desenhado), e o botão "Mostrar por dentro" continua abrindo e fechando. */
  :where(html[data-movimento="desligado"]) .ia-revela__dentro {
    clip-path: none;
    opacity: 0;
    transition: opacity 150ms ease;
  }

  :where(html[data-movimento="desligado"]) [data-aberto] .ia-revela__dentro {
    opacity: 1;
  }

  @media (hover: hover) and (pointer: fine) {
    :where(html[data-movimento="desligado"]) .ia-revela__quadro:hover .ia-revela__dentro {
      opacity: 1;
    }
  }

  /* Narrativa da home ("Como o motor confere"): a peça que está sendo lida acende por fundido
     curto, sem o aumento (scale) da versão completa. */
  :where(html[data-movimento="desligado"]) .ia-historia .ia-peca,
  :where(html[data-movimento="desligado"]) .ia-historia .ia-marca circle,
  :where(html[data-movimento="desligado"]) .ia-historia .ia-marca-num text {
    transition: opacity 150ms ease;
  }

  :where(html[data-movimento="desligado"]) .ia-historia__passo {
    transition:
      color 150ms ease,
      border-color 150ms ease;
  }

  /* Navegação entre páginas (e do cartão para o detalhe): só o fundido do documento, curto. */
  :where(html[data-movimento="desligado"])::view-transition-group(root),
  :where(html[data-movimento="desligado"])::view-transition-old(root),
  :where(html[data-movimento="desligado"])::view-transition-new(root) {
    animation-duration: 150ms;
  }

  @keyframes surge-reduzido {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
}