@layer components {
  .mobile-hero-carousel {
    --dur: 18s;
    --ease: cubic-bezier(0.2, 0, 0.1, 1);
    --delay-2: calc(var(--dur) / -3 * 2);
    --delay-3: calc(var(--dur) / -3);
  }

  .mobile-hero-bg {
    animation: mobile-hero-bg var(--dur) var(--ease) infinite;
  }

  @keyframes mobile-hero-bg {
    0%, 26%   { background-color: var(--color-turmeric); }
    30%, 59%  { background-color: var(--color-himalayan-salt); }
    63%, 92%  { background-color: var(--color-cornflower); }
    96%, 100% { background-color: var(--color-turmeric); }
  }

  .mobile-hero-slide {
    animation: mobile-hero-slide var(--dur) var(--ease) infinite both;
  }
  .mobile-hero-slide:nth-child(2),
  .mobile-hero-slide:nth-child(2) .mobile-hero-clip,
  .mobile-hero-slide:nth-child(2) .mobile-hero-img,
  .mobile-hero-slide:nth-child(2) .mobile-hero-text-panel,
  .mobile-hero-slide:nth-child(2) .mobile-hero-text {
    animation-delay: var(--delay-2);
  }
  .mobile-hero-slide:nth-child(3),
  .mobile-hero-slide:nth-child(3) .mobile-hero-clip,
  .mobile-hero-slide:nth-child(3) .mobile-hero-img,
  .mobile-hero-slide:nth-child(3) .mobile-hero-text-panel,
  .mobile-hero-slide:nth-child(3) .mobile-hero-text {
    animation-delay: var(--delay-3);
  }

  @keyframes mobile-hero-slide {
    0%, 24%   { transform: translateX(0); z-index: 2; }
    30%       { transform: translateX(-100%); z-index: 2; }
    30.01%    { transform: translateX(100%); z-index: 0; }
    89.99%    { transform: translateX(100%); z-index: 0; }
    90%       { transform: translateX(100%); z-index: 1; }
    100%      { transform: translateX(0); z-index: 1; }
  }

  .mobile-hero-clip {
    animation: mobile-hero-clip var(--dur) var(--ease) infinite both;
  }

  @keyframes mobile-hero-clip {
    0%, 13%   { clip-path: inset(0 0 0 60%); }
    24%       { clip-path: inset(0 0 0 13%); }
    30%       { clip-path: inset(0 0 0 13%); }
    30.01%, 100% { clip-path: inset(0 0 0 60%); }
  }

  .mobile-hero-img {
    animation: mobile-hero-img var(--dur) var(--ease) infinite both;
  }

  @keyframes mobile-hero-img {
    0%, 12%   { transform: scale(1); }
    26%       { transform: scale(1.12); }
    30%       { transform: scale(1.12); }
    30.01%    { transform: scale(1); }
    90%, 100% { transform: scale(1); }
  }

  .mobile-hero-text-panel {
    animation: mobile-hero-text-panel var(--dur) var(--ease) infinite both;
  }

  @keyframes mobile-hero-text-panel {
    0%, 13%   { width: 62%; }
    24%       { width: 8%; }
    30%       { width: 8%; }
    30.01%, 100% { width: 62%; }
  }

  .mobile-hero-text {
    animation: mobile-hero-text var(--dur) linear infinite both;
  }

  /* Opacity only: visibility would drop the caption out of the accessibility
     tree, leaving screen readers whichever caption the animation landed on. */
  @keyframes mobile-hero-text {
    0%, 10%   { opacity: 1; }
    12%       { opacity: 0; }
    90%       { opacity: 0; }
    100%      { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-hero-carousel * {
      animation: none !important;
    }

    .mobile-hero-bg {
      background-color: var(--color-turmeric);
    }

    .mobile-hero-slide {
      z-index: 1;
    }

    /* Visually collapse to the first slide, but keep the later captions in the
       accessibility tree (display: none would silence them). */
    .mobile-hero-slide ~ .mobile-hero-slide {
      clip-path: inset(50%);
    }

    .mobile-hero-slide .mobile-hero-text-panel {
      width: 62%;
    }

    .mobile-hero-slide .mobile-hero-clip {
      clip-path: inset(0 0 0 60%);
    }
  }
}