/* ==========================================================================
   Movimento extra: entradas escalonadas, micro-interações, anéis da seção Sobre e barra de progresso
   Tudo fica dentro de prefers-reduced-motion: no-preference. Nada repete para sempre:
   as animações em ciclo duram no máximo ~5 s (WCAG 2.2.2). Para desligar a camada inteira,
   remova este arquivo do index.html.
   Os gatilhos são [data-reveal-state="shown"], definidos pelo js/main.js ao rolar.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* ---------- Barra de progresso de leitura (só onde há animation-timeline) ---------- */
  @supports (animation-timeline: scroll()) {
    .header::after {
      content: "";
      position: absolute;
      inset: auto 0 -1px;
      height: 2px;
      background: linear-gradient(90deg, rgb(var(--c-violet)), var(--c-white));
      transform-origin: left;
      scale: 0 1;
      animation: m-progress linear both;
      animation-timeline: scroll(root block);
    }
  }

  /* ---------- Títulos e legendas de seção ---------- */
  [data-reveal-state="shown"] .section-kicker::before {
    transform-origin: left;
    animation: m-draw 0.9s var(--ease-out) 0.1s backwards;
  }

  .section-head[data-reveal-state="shown"] .section-title {
    animation: m-wipe 1s var(--ease-out) 0.12s backwards;
  }

  /* ---------- Projetos ----------
     Cada bloco de texto entra quando ele mesmo chega à tela (data-reveal em cada um): no celular o caso
     é alto e a entrada pelo cartão inteiro acontecia com o texto ainda abaixo da dobra, fora de vista. */
  .case__kicker[data-reveal-state="shown"]::after {
    transform-origin: left;
    animation: m-draw 0.9s var(--ease-out) 0.1s backwards;
  }

  .spec[data-reveal-state="shown"] > div {
    animation: m-rise 0.7s var(--ease-out) backwards;
  }

  .spec[data-reveal-state="shown"] > div:nth-child(1) { animation-delay: 0.1s; }
  .spec[data-reveal-state="shown"] > div:nth-child(2) { animation-delay: 0.2s; }
  .spec[data-reveal-state="shown"] > div:nth-child(3) { animation-delay: 0.3s; }

  .case[data-reveal-state="shown"] .case__main {
    animation: m-device 1s var(--ease-out) 0.05s backwards;
  }

  .case[data-reveal-state="shown"] .case__phone {
    animation: m-device 1s var(--ease-out) 0.3s backwards;
  }

  /* ---------- Serviços, Sobre e Processo ---------- */
  .about__highlights > li[data-reveal-state="shown"] .about__icon {
    animation: m-pop 0.7s var(--ease-out) 0.15s backwards;
  }

  .process__step[data-reveal-state="shown"]::before {
    animation: m-ping 1s ease-out 0.25s backwards;
  }

  .process__step[data-reveal-state="shown"] .process__number {
    animation: m-wipe 0.9s var(--ease-out) 0.1s backwards;
  }

  .about__visual[data-reveal-state="shown"] .about__badge {
    animation: m-pop 1s var(--ease-out) 0.1s backwards;
  }

  @media (hover: hover) {
    .service__icon {
      transition:
        translate var(--dur) var(--ease-out),
        rotate var(--dur) var(--ease-out),
        border-color var(--dur) ease,
        box-shadow var(--dur) var(--ease-out);
    }

    .service:hover .service__icon {
      translate: 0 -3px;
      rotate: -5deg;
    }
  }

  /* ---------- Botões: brilho que atravessa e seta que avança ---------- */
  .button--primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .button--primary::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: -1;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgb(var(--c-violet) / 0.35), transparent);
    translate: -130% 0;
  }

  @media (hover: hover) {
    .button--primary:hover::before {
      translate: 330% 0;
      transition: translate 0.8s var(--ease-out);
    }

    .button .icon {
      transition: translate var(--dur) var(--ease-out);
    }

    .button:hover .icon {
      translate: 2px -2px;
    }
  }

  /* anel que se expande no botão do contato (2 ciclos, ~4,8 s) */
  .contact__actions[data-reveal-state="shown"] .button--primary {
    animation: m-ring 2.4s ease-out 1s 2;
  }

  /* ---------- Sobre: os anéis se abrem uma vez, em sequência ---------- */
  .about__visual[data-reveal-state="shown"] .orbit {
    animation: m-orbit-open 1.3s var(--ease-out) backwards;
  }

  .about__visual[data-reveal-state="shown"] .orbit--b { animation-delay: 0.12s; }
  .about__visual[data-reveal-state="shown"] .orbit--c { animation-delay: 0.24s; }
}

@keyframes m-progress {
  to {
    scale: 1 1;
  }
}

@keyframes m-draw {
  from {
    scale: 0 1;
  }
}

@keyframes m-wipe {
  from {
    clip-path: inset(0 0 100% 0);
    translate: 0 0.4em;
  }
}

@keyframes m-rise {
  from {
    opacity: 0;
    translate: 0 1.25rem;
  }
}

@keyframes m-device {
  from {
    opacity: 0;
    translate: 0 2.5rem;
    scale: 0.96;
  }
}

@keyframes m-pop {
  from {
    opacity: 0;
    scale: 0.55;
    rotate: -14deg;
  }
}

@keyframes m-ping {
  from {
    box-shadow:
      0 0 0 1px var(--c-white),
      0 0 0 0 rgb(var(--c-violet) / 0.8);
  }

  to {
    box-shadow:
      0 0 0 1px var(--c-white),
      0 0 0 14px rgb(var(--c-violet) / 0);
  }
}

@keyframes m-ring {
  from {
    box-shadow: 0 0 0 0 rgb(var(--c-violet) / 0.55);
  }

  to {
    box-shadow: 0 0 0 18px rgb(var(--c-violet) / 0);
  }
}

@keyframes m-orbit-open {
  from {
    scale: 0.25;
    opacity: 0;
  }
}

/* ---------- Serviços: faixa de luz que segue o mouse ---------- */
.service::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    circle 16rem at var(--mx, 85%) var(--my, 50%),
    rgb(var(--c-violet) / 0.16),
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) ease;
}

.service {
  isolation: isolate;
}

@media (hover: hover) and (pointer: fine) {
  .service:hover::after {
    opacity: 1;
  }
}

/* ---------- Header: porcentagem de leitura (só em telas largas) ---------- */
.header__pct {
  display: none;
  color: var(--c-pencil);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  letter-spacing: 0.08em;
}

.header__pct[hidden] {
  display: none !important;
}

@media (width >= 75em) {
  .header__pct {
    display: inline-block;
    min-width: 3.5ch;
    text-align: right;
  }
}

/* ==========================================================================
   Camada 2: hero vivo, cards de projeto, transições entre seções e MDN Flow
   (tudo em prefers-reduced-motion: no-preference; nada repete para sempre)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* ---------- Hero: as camadas flutuam 2 ciclos (~5 s) e param; o painel desliza mais devagar que a página ---------- */
  .hero-visual__logo {
    animation:
      hv-rise 0.8s var(--ease-out) 0.75s forwards,
      m-float 2.4s ease-in-out 2.2s 2;
  }

  .hero-visual__phone {
    animation: m-float 2.6s ease-in-out 2.4s 2;
  }

  .hero-visual__bubble {
    animation:
      hv-pop 0.6s var(--ease-out) 1.6s forwards,
      m-float 2.2s ease-in-out 2.6s 2;
  }

  @supports (animation-timeline: scroll()) {
    .hero-visual__world {
      animation: m-hero-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 75vh;
    }
  }

  /* ---------- Seções: um fio de luz se desenha na entrada de cada uma ---------- */
  @supports (animation-timeline: view()) {
    .section {
      position: relative;
    }

    .section::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: min(26rem, 60%);
      height: 1px;
      translate: -50% 0;
      background: linear-gradient(90deg, transparent, rgb(var(--c-violet) / 0.9), transparent);
      transform-origin: center;
      animation: m-hairline linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
      pointer-events: none;
    }
  }

  /* ---------- Como funciona: número, título e texto entram em sequência ---------- */
  .process__step[data-reveal-state="shown"] :is(.process__title, .process__text) {
    animation: m-rise 0.8s var(--ease-out) backwards;
  }

  .process__step[data-reveal-state="shown"] .process__title { animation-delay: 0.22s; }
  .process__step[data-reveal-state="shown"] .process__text { animation-delay: 0.34s; }

  /* ---------- MDN Flow: os destaques da tela flutuam 2 ciclos (sem as cenas de rolagem) ---------- */
  .product[data-reveal-state="shown"] .flow--menu { animation: m-float 2.8s ease-in-out 1.2s 2; }
  .product[data-reveal-state="shown"] .flow--totals { animation: m-float 2.6s ease-in-out 1.6s 2; }

  /* ---------- Serviços: título acompanha o hover ---------- */
  .service__title {
    transition: translate var(--dur) var(--ease-out);
  }
}

/* ---------- Cards de projeto: elevação, profundidade e destaque (só com mouse) ---------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .case__media {
    transition:
      translate 0.45s var(--ease-out),
      border-color var(--dur) ease,
      box-shadow 0.45s var(--ease-out);
  }

  .case:hover .case__media {
    translate: 0 -6px;
    border-color: rgb(var(--c-violet) / 0.55);
    box-shadow:
      0 36px 60px -34px rgb(var(--c-violet) / 0.5),
      0 0 0 1px rgb(var(--c-violet) / 0.2);
  }

  .case__main,
  .case__phone {
    transition: scale 0.5s var(--ease-out);
  }

  .case:hover .case__main {
    scale: 1.025;
  }

  .case:hover .case__phone {
    scale: 1.06;
  }

  .case__title {
    width: fit-content;
    padding-bottom: 0.25rem;
    background: linear-gradient(90deg, rgb(var(--c-violet)), var(--c-white)) left bottom / 0 2px no-repeat;
    transition: background-size 0.6s var(--ease-out);
  }

  .case:hover .case__title {
    background-size: 100% 2px;
  }

  .case:hover .spec dt {
    color: var(--c-chalk);
  }

  .service:hover .service__title {
    translate: 4px 0;
  }
}

@keyframes m-float {
  50% {
    translate: 0 -0.5rem;
  }
}

@keyframes m-hero-drift {
  to {
    translate: 0 -3.5rem;
  }
}

@keyframes m-hairline {
  from {
    scale: 0 1;
    opacity: 0;
  }
}