/* Motion enhances the original design; content is visible without JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  .motion-enabled .motion-pending {
    opacity: 0;
    transform: translateY(18px);
  }

  .motion-enabled .motion-reveal {
    animation: nate-reveal 760ms cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: var(--motion-delay, 0ms);
  }

  .motion-enabled .hero-visual.motion-reveal {
    animation-name: nate-photo-reveal;
    animation-duration: 1100ms;
  }

  .motion-enabled .motion-pending:focus-within,
  .motion-enabled .motion-reveal:focus-within {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .motion-reveal .small-rule {
    transform-origin: left;
    animation: nate-rule-reveal 700ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .button,
  .nav-book,
  .back-top {
    transition: transform 220ms ease, background-color 220ms ease,
      border-color 220ms ease, box-shadow 220ms ease;
  }

  .button-gold {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .button-gold::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .3) 50%, transparent 75%);
    transform: translateX(-110%);
    pointer-events: none;
  }

  .button-gold:focus-visible::after {
    animation: nate-gold-sheen 620ms ease-out;
  }

  .text-link > span,
  .event-link > span,
  .review-card figcaption a > span,
  .nav-book > span,
  .button > span {
    display: inline-block;
    transition: transform 220ms ease;
  }

  .main-nav > a:not(.nav-book) {
    position: relative;
  }

  .main-nav > a:not(.nav-book)::after {
    content: "";
    position: absolute;
    inset: auto 0 -5px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms ease;
  }

  .main-nav > a:focus-visible::after {
    transform: scaleX(1);
  }

  .hero-photo {
    overflow: hidden;
  }

  .hero-photo img,
  .about-portrait {
    transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
  }

  .brand-star {
    transform-origin: center;
    transition: transform 550ms cubic-bezier(.22, 1, .36, 1);
  }

  .event-card,
  .review-card {
    transition: background-color 280ms ease, box-shadow 280ms ease;
  }

  .event-card:focus-within {
    background-color: rgba(212, 175, 124, .1);
  }

  .review-card:focus-within {
    background-color: #1b1b20;
    box-shadow: inset 0 1px var(--gold);
  }

  @media (hover: hover) and (pointer: fine) {
    .button:hover,
    .nav-book:hover,
    .back-top:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
    }

    .button-gold:hover::after {
      animation: nate-gold-sheen 620ms ease-out;
    }

    .text-link:hover > span,
    .event-link:hover > span,
    .review-card figcaption a:hover > span,
    .nav-book:hover > span,
    .button:hover > span {
      transform: translate(3px, -3px);
    }

    .main-nav > a:hover::after {
      transform: scaleX(1);
    }

    .hero-photo:hover img {
      transform: scale(1.035);
    }

    .about-identity:hover .about-portrait {
      transform: scale(1.02);
    }

    .event-card:hover {
      background-color: rgba(212, 175, 124, .1);
    }

    .review-card:hover {
      background-color: #1b1b20;
      box-shadow: inset 0 1px var(--gold);
    }

    .event-card:hover .brand-star,
    .hero-photo:hover .brand-star {
      transform: rotate(25deg) scale(1.12);
    }
  }

  .button:active,
  .back-top:active {
    transform: translateY(1px);
  }

  @media (max-width: 820px) {
    .main-nav.is-open {
      animation: nate-menu-reveal 240ms ease-out;
    }

    .main-nav > a:not(.nav-book)::after {
      bottom: 5px;
    }
  }
}

@keyframes nate-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes nate-photo-reveal {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@keyframes nate-rule-reveal {
  from { transform: scaleX(.2); }
  to { transform: scaleX(1); }
}

@keyframes nate-gold-sheen {
  from { transform: translateX(-110%); }
  to { transform: translateX(110%); }
}

@keyframes nate-menu-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* Also restores content immediately if the preference changes mid-animation. */
@media (prefers-reduced-motion: reduce), print {
  .motion-pending,
  .motion-reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}