@layer animations {

  /* ── Loader / Intro (Simbolo.png) ────────────────────── */
  .loader {
    position:        fixed;
    inset:           0;
    z-index:         9999;
    background:      var(--black);
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      opacity .7s var(--ease), visibility .7s var(--ease);
  }

  .loader.is-done {
    opacity:        0;
    visibility:     hidden;
    pointer-events: none;
  }

  .loader__symbol {
    width:     clamp(128px, 24vw, 272px);
    height:    auto;
    filter:    brightness(0) invert(1);
    animation: loaderReveal 1.6s var(--ease) forwards;
  }

  @keyframes loaderReveal {
    0%   { opacity: 0; scale: 0.72; }
    38%  { opacity: 1; scale: 1.02; }
    75%  { opacity: 1; scale: 1; }
    100% { opacity: 0; scale: 1.18; }
  }


  /* ── Reveal: fade + slide up ──────────────────────────
   * Hidden only when JS is active (body.js-on).
   * ───────────────────────────────────────────────────── */
  .js-on .reveal {
    opacity:   0;
    translate: 0 28px;
    transition: opacity .9s var(--ease),
                translate .9s var(--ease);
  }

  .js-on .reveal.is-visible { opacity: 1; translate: 0 0; }

  .js-on .reveal[data-delay="1"] { transition-delay: .1s; }
  .js-on .reveal[data-delay="2"] { transition-delay: .2s; }
  .js-on .reveal[data-delay="3"] { transition-delay: .3s; }
  .js-on .reveal[data-delay="4"] { transition-delay: .4s; }

  /* ── Rule grow ────────────────────────────────────────── */
  .js-on .rule-grow {
    transform-origin: left;
    scale:      0 1;
    transition: scale 1.1s var(--ease);
  }

  .js-on .rule-grow.is-visible { scale: 1 1; }

  /* ── Cycling text (adapted from animated-hero React) ──── */
  .cta-cycling-word {
    display: inline-block;
    opacity: 0;
  }

  .cta-cycling-word.is-entering {
    animation: wordSlideIn .55s var(--ease) forwards;
  }

  .cta-cycling-word.is-exiting {
    animation: wordSlideOut .38s var(--ease) forwards;
  }

  @keyframes wordSlideIn {
    from { opacity: 0; translate: 0 35px; }
    to   { opacity: 1; translate: 0 0; }
  }

  @keyframes wordSlideOut {
    from { opacity: 1; translate: 0 0; }
    to   { opacity: 0; translate: 0 -35px; }
  }

  /* ── WhatsApp pulse ──────────────────────────────────── */
  @keyframes waPulse {
    0%   { box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 0 0 rgba(37,211,102,.55); }
    70%  { box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 0 22px transparent; }
    100% { box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 0 0 rgba(37,211,102,.55); }
  }

  /* ── Court lines entrance ─────────────────────────────── */
  .js-on .court-lines {
    opacity: 0;
    transition: opacity 2s ease 0.5s;
  }

  .js-on .court-lines.is-visible { opacity: 1; }

  /* ── Prefers-reduced-motion ───────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .js-on .reveal { opacity: 1 !important; translate: none !important; }
    .js-on .rule-grow { scale: 1 1 !important; }
    .js-on .hero-title .line-inner { translate: 0 0 !important; }
    .nav  { opacity: 1 !important; translate: 0 0 !important; }
    .hero__sub, .hero__actions { opacity: 1 !important; translate: 0 0 !important; }
    .btn--wa { animation: none !important; }
    .cta-cycling-word { opacity: 1 !important; animation: none !important; }
  }
}

@layer utilities {
  .sr-only {
    position:    absolute;
    width:       1px;
    height:      1px;
    padding:     0;
    margin:      -1px;
    overflow:    hidden;
    clip:        rect(0,0,0,0);
    white-space: nowrap;
    border:      0;
  }
}