[data-enter="1"], [data-delay="1"] { --motion-delay: 65ms; }
[data-enter="2"], [data-delay="2"] { --motion-delay: 130ms; }
[data-enter="3"], [data-delay="3"] { --motion-delay: 195ms; }

@media (prefers-reduced-motion: no-preference) {
  [data-enter]:not(:focus-within) {
    animation: page-enter 640ms cubic-bezier(.22, 1, .36, 1) var(--motion-delay, 0ms) backwards;
  }

  [data-reveal].reveal-ready {
    transition:
      opacity 550ms ease var(--motion-delay, 0ms),
      transform 620ms cubic-bezier(.22, 1, .36, 1) var(--motion-delay, 0ms),
      box-shadow 220ms ease,
      background-color 220ms ease,
      border-color 220ms ease;
  }

  [data-reveal].reveal-ready:not(.is-revealed, :target, :focus-within) {
    opacity: 0;
    transform: translateY(16px);
  }

  [data-reveal].reveal-ready:is(:target, :focus-within) {
    transition: none;
  }

  [data-reveal].reveal-ready:not(.is-revealed):has(:target) {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .detail-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .detail-hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 77% 0%, rgb(174 187 234 / 30%), transparent 60%);
    animation: detail-halo-in 900ms cubic-bezier(.22, 1, .36, 1) backwards;
    content: "";
  }

  .theme-tarot .detail-hero::before, .theme-astro .detail-hero::before {
    background: radial-gradient(ellipse at 77% 0%, rgb(94 113 207 / 23%), transparent 60%);
  }

  .button {
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      color 160ms ease,
      box-shadow 200ms ease,
      transform 180ms cubic-bezier(.22, 1, .36, 1);
  }

  .button:active { transform: scale(.97); }

  .copy-status:not(:empty) {
    animation: page-enter 320ms cubic-bezier(.22, 1, .36, 1) backwards;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.feature-card, .project-strengths, .project-audience, .example-steps li,
      .flow-step, .flow-benefits dl > div, .other-links a, .contact-qr) {
    transition: box-shadow 220ms ease, background-color 220ms ease, border-color 220ms ease;
  }

  :is(.feature-card, .project-strengths, .project-audience, .flow-step, .contact-qr):hover {
    box-shadow: 0 11px 28px rgb(29 29 31 / 8%), 0 1px 5px rgb(29 29 31 / 4%);
  }

  :is(.example-steps li, .other-links a):hover {
    box-shadow: 0 4px 13px rgb(29 29 31 / 8%);
  }

  .flow-benefits dl > div:hover dd { color: var(--ink); }
  .flow-benefits dd { transition: color 220ms ease; }
  .button:hover { box-shadow: 0 5px 13px rgb(0 91 184 / 16%); }
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(13px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes detail-halo-in {
  from {
    opacity: 0;
    transform: translateX(7%);
  }

  to {
    opacity: 1;
    transform: none;
  }
}