/*
 * CSS não crítico — nada aqui é necessário para pintar a primeira dobra.
 * São animações de entrada (scroll-driven) e parallax decorativo.
 * Carregado de forma assíncrona a partir de src/routes/__root.tsx.
 */

/* =========================================================
   Entrance animations — text, images, cards, buttons
   ========================================================= */

@keyframes premium-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes premium-zoom-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes premium-slide-left {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes premium-slide-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    main section h1,
    main section h2,
    main section h3,
    main section h4,
    main section p,
    main section li,
    main section blockquote {
      animation: premium-fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
    main section img,
    main section video,
    main section figure,
    main section picture {
      animation: premium-zoom-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    main section a[class*="foil"],
    main section button,
    main section .paper-card {
      animation: premium-fade-up linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 30%;
    }
    main section > :nth-child(odd) > figure,
    main section > :nth-child(odd) > img {
      animation-name: premium-slide-left;
    }
    main section > :nth-child(even) > figure,
    main section > :nth-child(even) > img {
      animation-name: premium-slide-right;
    }
  }
}

/* Soft parallax on decorative layers when scroll-driven timelines exist */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes section-parallax {
      to { transform: translate3d(0, -6%, 0); }
    }
    main section::before {
      animation: section-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes section-parallax-dots {
      to { transform: translate3d(0, 4%, 0); }
    }
    main section::after {
      animation: section-parallax-dots linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

/* Mobile perf: dial back section decorations */
@media (max-width: 767px) {
  main section::before,
  body > section::before {
    opacity: 0.55;
    background-size: auto, auto, auto, auto;
  }
  main section::after,
  body > section::after {
    opacity: 0.35;
    background-size: 26px 26px, 40px 40px;
  }
}

/* Accessibility: honor reduced motion for all new decorations/animations */
@media (prefers-reduced-motion: reduce) {
  main section::before,
  main section::after,
  body > section::before,
  body > section::after {
    animation: none !important;
  }
  main section h1,
  main section h2,
  main section h3,
  main section h4,
  main section p,
  main section li,
  main section blockquote,
  main section img,
  main section video,
  main section figure,
  main section picture,
  main section a[class*="foil"],
  main section button,
  main section .paper-card {
    animation: none !important;
  }
}

@media (prefers-reduced-data: reduce) {
  main section::before,
  main section::after,
  body > section::before,
  body > section::after { display: none; }
}