/* =========================================================
   Animações — entrada do hero + revelações no scroll
   Só valem com JS ativo (html.js) e sem "reduzir movimento".
   Usa as propriedades individuais translate/scale/rotate para
   não conflitar com os transform de hover e de layout.
   ========================================================= */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Entrada (quando a página fica pronta) ---------- */

  /* estado inicial: escondido até html.is-ready */
  .js:not(.is-ready) :is(
    .hero__decor .d, .hero__logo, .hero__title, .hero__script, .hero__lead, .btn--hero,
    .hv--avatar, .hv--orbit, .hv--pointers, .tag, .hero__grass, .band__track
  ) { opacity: 0; }

  /* faixas curvas: "desenhando" da esquerda para a direita */
  .is-ready .hero__decor .d { animation: drawIn 1.8s var(--ease-out) both; }
  .is-ready .hero__decor .d--teal { animation-delay: .15s; }

  /* textos e botão sobem em sequência */
  .is-ready :is(.hero__logo, .hero__title, .hero__lead, .btn--hero) { animation: fadeUp 1s var(--ease-out) both; }
  .is-ready .hero__logo { animation-delay: .25s; }
  .is-ready .hero__title { animation-delay: .4s; }
  .is-ready .hero__lead { animation-delay: .75s; }
  .is-ready .btn--hero { animation-delay: .9s; }

  /* "Criativo" escrito à mão */
  .is-ready .hero__script { animation: writeIn 1.2s cubic-bezier(.65, 0, .35, 1) .7s both; }

  /* avatar, anel e setas */
  .is-ready .hv--avatar { animation: popIn 1.2s var(--ease-back) .35s both; }
  .is-ready .hv--orbit { animation: ringIn 1.4s var(--ease-out) .55s both, spin 60s linear 1.9s infinite; }
  .is-ready .hv--pointers { animation: fadeIn 1s ease 1.4s both; }

  /* tags pulam e depois ficam flutuando */
  .is-ready .tag { animation: tagIn .7s var(--ease-back) both, float 5s ease-in-out infinite; }
  .is-ready .tag:nth-of-type(1) { animation-delay: 1.05s, 1.75s; }
  .is-ready .tag:nth-of-type(2) { animation-delay: 1.17s, .5s; }
  .is-ready .tag:nth-of-type(3) { animation-delay: 1.29s, 1.25s; }
  .is-ready .tag:nth-of-type(4) { animation-delay: 1.41s, 0s; }

  /* grama sobe do chão */
  .is-ready .hero__grass { animation: riseIn 1.6s var(--ease-out) .1s both; }

  /* carrossel da faixa aparece por último */
  .is-ready .band__track { animation: fadeIn .8s ease 1.3s both, marquee 40s linear infinite; }

  /* ---------- Parallax leve no hero (desktop) ---------- */
  @media (min-width: 1100px) {
    .hero__decor { translate: 0 calc(var(--sy, 0) * .25px); }
    .hero__visual { translate: 0 calc(var(--sy, 0) * .12px); }
    .hero__grass { translate: 0 calc(var(--sy, 0) * -.06px); }
  }

  /* ---------- Revelações no scroll ---------- */
  .js [data-reveal] {
    opacity: 0;
    transition:
      opacity .9s var(--ease-out) var(--d, 0s),
      translate 1s var(--ease-out) var(--d, 0s),
      scale 1s var(--ease-out) var(--d, 0s),
      rotate 1.2s var(--ease-out) var(--d, 0s),
      transform .3s ease,
      background .2s ease,
      filter .2s ease;
  }
  .js [data-reveal="up"] { translate: 0 60px; }
  .js [data-reveal="left"] { translate: -80px 0; }
  .js [data-reveal="right"] { translate: 80px 0; }
  .js [data-reveal="zoom"] { scale: .9; }
  .js [data-reveal="fan"] { translate: 0 100px; }
  .js [data-reveal="spin"] { scale: .4; rotate: -200deg; }

  .js [data-reveal].is-visible { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }
  /* depois de revelado, o hover não herda o atraso */
  .js [data-reveal].is-done { transition-delay: 0s; }

  /* ---------- Leque do portfólio ---------- */
  /* fechado: todas as cartas em pé, empilhadas no centro como um baralho */
  .js .fan__card {
    transition:
      translate 1.4s var(--ease-out) calc(.25s + var(--fd)),
      rotate 1.4s var(--ease-out) calc(.25s + var(--fd)),
      scale 1.4s var(--ease-out) calc(.25s + var(--fd)),
      transform .35s cubic-bezier(.34, 1.56, .64, 1);
  }
  .js .fan__deck:not(.is-visible) .fan__card {
    translate: var(--tx) var(--ty);
    rotate: calc(var(--r) * -1);
    scale: .9;
  }
  /* aberto: cada carta volta para a posição do Figma (abre do centro para as pontas) */
}

@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; translate: 0 40px; } }
@keyframes drawIn { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes writeIn { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -5% -20% 0); } }
@keyframes popIn { from { opacity: 0; scale: .8; translate: 0 60px; } }
@keyframes ringIn { from { opacity: 0; scale: .6; } }
@keyframes tagIn { from { opacity: 0; scale: .3; } }
@keyframes riseIn { from { opacity: 0; translate: 0 160px; } }

/* =========================================================
   Tela de loading
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* faixas: o contorno é desenhado e depois a cor preenche */
  .loader__swoosh path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    fill-opacity: 0;
    animation:
      ldDraw 1.5s cubic-bezier(.65, 0, .35, 1) var(--draw, .1s) forwards,
      ldFill .7s ease var(--fill, 1.2s) forwards;
  }
  .loader__swoosh--teal path { --draw: .25s; --fill: 1.35s; }

  /* avatar surge do desfoque com um leve quique */
  .lv--avatar { animation: ldPop 1.2s var(--ease-back) .45s both; }
  /* anel entra girando e continua girando */
  .lv--orbit { animation: ldRing 1.3s var(--ease-out) .6s both, spin 30s linear 1.9s infinite; }
  .lv--pointers { animation: ldPtr .9s var(--ease-out) 1.45s both; }
  .ltag { animation: ldTag .7s var(--ease-back) both, float 5s ease-in-out 2s infinite; }
  .ltag:nth-of-type(1) { animation-delay: 1s, 2s; }
  .ltag:nth-of-type(2) { animation-delay: 1.12s, 2.4s; }
  .ltag:nth-of-type(3) { animation-delay: 1.24s, 2.8s; }
  .ltag:nth-of-type(4) { animation-delay: 1.36s, 3.2s; }
  .loader__progress { animation: fadeIn .6s ease .2s both; }

  /* saída: o painel creme sobe, seguido das cortinas amarela e teal */
  .loader__panel,
  .loader__curtain { transition: translate 1s cubic-bezier(.76, 0, .24, 1); }
  .loader.is-leaving .loader__panel { translate: 0 -115%; }
  .loader.is-leaving .loader__curtain--yellow { translate: 0 -115%; transition-delay: .12s; }
  .loader.is-leaving .loader__curtain--teal { translate: 0 -115%; transition-delay: .24s; }
  .loader__stage { transition: scale .8s cubic-bezier(.76, 0, .24, 1), opacity .6s ease; }
  .loader.is-leaving .loader__stage { scale: .9; opacity: .4; }
  .loader.is-leaving .loader__progress { opacity: 0; transition: opacity .3s ease; }
}

@media (prefers-reduced-motion: reduce) {
  .loader { transition: opacity .4s ease; }
  .loader.is-leaving { opacity: 0; }
}

@keyframes ldDraw { to { stroke-dashoffset: 0; } }
@keyframes ldFill { to { fill-opacity: 1; } }
@keyframes ldPop {
  from { opacity: 0; scale: .7; filter: blur(14px); }
  60% { opacity: 1; filter: blur(0); }
  to { opacity: 1; scale: 1; filter: blur(0); }
}
@keyframes ldRing { from { opacity: 0; scale: .6; rotate: -140deg; } }
@keyframes ldTag { from { opacity: 0; scale: .3; } }
@keyframes ldPtr { from { opacity: 0; translate: 0 -24px; } }