/* Movimento: "entra na contagem".
   Tudo é múltiplo de uma batida (--beat) e o hero acende como luz de palco.
   Só transform, opacity e clip-path, exceto a máscara do canhão de luz no hero.
   O estado de repouso de cada elemento é o estado final: sem CSS de animação,
   sem JS ou com prefers-reduced-motion, a página aparece completa. */

@property --rx { syntax: '<percentage>'; inherits: false; initial-value: 70%; }
@property --ry { syntax: '<percentage>'; inherits: false; initial-value: 62%; }

:root {
  --beat: .22s;
  --stagger: .09s;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* ---------- Hero: a luz acende e o título entra em 5-6-7-8 ---------- */
  .hero__img { animation: lights-up 1.6s var(--ease-out) backwards; }
  @keyframes lights-up {
    from { --rx: 16%; --ry: 12%; opacity: 0; }
  }

  .line__in { animation: line-rise .9s var(--ease-out) backwards; }
  .line:nth-child(1) .line__in { animation-delay: calc(var(--beat) * 1); }
  .line:nth-child(2) .line__in { animation-delay: calc(var(--beat) * 2); }
  .line:nth-child(3) .line__in { animation-delay: calc(var(--beat) * 3); }
  .line:nth-child(4) .line__in { animation-delay: calc(var(--beat) * 4); }
  @keyframes line-rise {
    from { transform: translateY(112%); }
  }

  .mark { animation: mark-in .8s var(--ease-out) backwards; }
  .mark--tl { --mx: 10px; --my: 10px; animation-delay: calc(var(--beat) * 1); }
  .mark--tr { --mx: -10px; --my: 10px; animation-delay: calc(var(--beat) * 2); }
  .mark--bl { --mx: 10px; --my: -10px; animation-delay: calc(var(--beat) * 3); }
  .mark--br { --mx: -10px; --my: -10px; animation-delay: calc(var(--beat) * 4); }
  @keyframes mark-in {
    from { opacity: 0; transform: translate(var(--mx), var(--my)); }
  }

  .hero__side, .hero__cta { animation: rise .8s var(--ease-out) calc(var(--beat) * 5) backwards; }

  /* ---------- Revelação ao rolar (a classe vem do main.js) ---------- */
  .js [data-reveal]:not(.is-in) { opacity: 0; }
  .js [data-reveal='wipe']:not(.is-in) { opacity: 1; clip-path: inset(100% 0 0 0 round var(--radius-lg)); }

  .js [data-reveal].is-in {
    animation: rise .85s var(--ease-out) calc(var(--i, 0) * var(--stagger)) backwards;
  }
  .js [data-reveal='wipe'].is-in {
    animation: curtain 1.05s var(--ease-in-out) calc(var(--i, 0) * var(--stagger)) backwards;
  }
  .js [data-reveal='wipe'].is-in > img {
    animation: settle 1.5s var(--ease-out) calc(var(--i, 0) * var(--stagger)) backwards;
  }

  @keyframes rise {
    from { opacity: 0; transform: translateY(26px); }
  }
  @keyframes curtain {
    from { clip-path: inset(100% 0 0 0 round var(--radius-lg)); }
    to { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
  }
  @keyframes settle {
    from { transform: scale(1.14); }
  }

  /* ---------- Sobre: as palavras acendem conforme a leitura ---------- */
  .word { transition: opacity .35s linear; }
  .word.is-dim { opacity: .2; }

  /* ---------- Troca de dia na grade (mobile) ---------- */
  .day.is-switching .class-row { animation: row-in .5s var(--ease-out) calc(var(--i, 0) * 45ms) backwards; }
  @keyframes row-in {
    from { opacity: 0; transform: translateX(14px); }
  }

  /* ---------- Menu mobile: abre como cortina ---------- */
  .menu {
    clip-path: inset(0 0 100% 0);
    transition: clip-path .55s var(--ease-in-out), overlay .55s allow-discrete, display .55s allow-discrete;
  }
  .menu[open] { clip-path: inset(0); }
  @starting-style {
    .menu[open] { clip-path: inset(0 0 100% 0); }
  }
  .menu[open] .menu__links a { animation: rise .7s var(--ease-out) backwards; }
  .menu[open] .menu__links a:nth-child(1) { animation-delay: .16s; }
  .menu[open] .menu__links a:nth-child(2) { animation-delay: .22s; }
  .menu[open] .menu__links a:nth-child(3) { animation-delay: .28s; }
  .menu[open] .menu__links a:nth-child(4) { animation-delay: .34s; }
  .menu[open] .menu__links a:nth-child(5) { animation-delay: .40s; }
  .menu[open] .menu__foot { animation: rise .7s var(--ease-out) .5s backwards; }

  /* ---------- Ligado à rolagem, sem custo no thread principal ---------- */
  @supports (animation-timeline: scroll()) {
    .header::after {
      content: '';
      position: absolute;
      inset-inline: 0;
      bottom: -1px;
      height: 1px;
      background: var(--red);
      transform-origin: 0 50%;
      animation: progress linear both;
      animation-timeline: scroll(root);
    }
    @keyframes progress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    .hero__title { animation: hero-title-out linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    @keyframes hero-title-out {
      to { translate: 0 -7%; }
    }

    .classes__title { animation: title-drift linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
    @keyframes title-drift {
      from { translate: -5% 0; opacity: .25; }
      to { translate: 0 0; opacity: 1; }
    }

    /* Paralaxe das fotos ao deslizar o carrossel */
    .card--photo img { scale: 1.12; animation: rail-parallax linear both; animation-timeline: view(inline); }
    @keyframes rail-parallax {
      from { translate: 5% 0; }
      to { translate: -5% 0; }
    }
  }
}

/* ---------- Estados de interação: presentes mesmo com movimento reduzido,
   mas sem deslocamento. ---------- */
a, button { transition: color .2s, background-color .2s, border-color .2s, opacity .2s; }
.btn:active, .level:active, .rail-btn:active, .days-nav button:active, .card__cta:active { opacity: .85; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .level, .arrow, .rail-btn, .card__cta, .fest-item, .quote, .link-arrow {
    transition: transform .4s var(--ease-out), color .2s, background-color .2s, border-color .2s, box-shadow .4s var(--ease-out), opacity .2s;
  }
  .btn:active, .card__cta:active, .rail-btn:active, .days-nav button:active { transform: scale(.97); }
  .level:active { transform: scale(.985); }
}

.nav a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 4px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .45s var(--ease-out);
}
.nav a.is-current::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav a.is-current { color: #fff; }

@media (hover: hover) and (pointer: fine) {
  .nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
  .nav a:hover { color: #fff; }
  a.link-arrow:hover, .info .link-arrow:hover { color: var(--red-hover); }

  .btn--primary:hover { background: #ff1f21; box-shadow: 0 10px 34px -10px rgba(231, 11, 13, .85); }
  .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
  .level:hover { border-color: rgba(231, 11, 13, .8); background: #160707; }
  .fest-item:hover, .quote:hover { border-color: rgba(255, 255, 255, .34); }
  .rail-btn:not(:disabled):hover { background: var(--red); border-color: var(--red); }
  .class-row:hover { background: rgba(231, 11, 13, .08); }
  .footer__nav a:hover { color: #fff; }
  .info__tel:hover { color: var(--red-hover); }

  .rail { cursor: grab; }
  .rail.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
  .rail.is-dragging a { pointer-events: none; }
  .rail-buttons { display: flex; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:hover, .card__cta:hover { transform: translateY(-2px); }
  .level:hover { transform: translateY(-4px); }
  .level:hover .arrow { transform: rotate(45deg) scale(1.08); }
  .card__cta:hover .arrow { transform: rotate(45deg); }

  .card__label span { transition: padding-bottom .45s var(--ease-out); }
  .card--photo:hover .card__label span { padding-bottom: 14px; }
  .fest-photo img, .gallery__item img { transition: transform 1.2s var(--ease-out); }
  .fest-photo:hover img, .gallery__item:hover img { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
}

@media print {
  [data-reveal], .word { opacity: 1 !important; clip-path: none !important; animation: none !important; }
}