body.is-route-leaving main,
body.is-route-leaving .site-footer {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease;
}

body.is-route-covered main,
body.is-route-covered .site-footer {
  opacity: 0;
  transform: translateY(6px);
  transition: none;
}

body.is-route-entering main,
body.is-route-entering .site-footer {
  animation: page-fill 280ms ease both;
}

.brand img {
  transform-origin: 50% 50%;
  transition: transform 260ms ease, filter 260ms ease;
}

.brand:hover img,
.brand:focus-visible img {
  transform: rotate(-8deg) scale(1.04);
  filter: drop-shadow(0 0 12px rgba(221, 177, 113, 0.22));
}

.brand.is-brand-kick img {
  animation: brand-kick 820ms cubic-bezier(0.18, 0.72, 0.22, 1) both;
}

[data-reveal] {
  opacity: 1;
  transform: none;
}

.js-reveal-active [data-reveal]:not([data-revealed="true"]) {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
}

.js-reveal-active [data-reveal] {
  transition:
    opacity 680ms cubic-bezier(0.18, 0.72, 0.22, 1),
    transform 680ms cubic-bezier(0.18, 0.72, 0.22, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js-reveal-active [data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.mobile-quick-actions {
  display: none;
}

.mobile-quick-action {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(221, 177, 113, 0.42);
  border-radius: 999px;
  padding: 13px 18px;
  color: var(--text);
  background: rgba(26, 32, 24, 0.92);
  font-weight: 800;
  box-shadow: 0 18px 32px rgba(10, 12, 9, 0.28);
}

.mobile-quick-action.primary {
  color: #222a21;
  border-color: var(--gold);
  background: var(--gold);
}

.mobile-quick-action:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes brand-kick {
  0% {
    transform: rotate(0deg) scale(0.96);
  }

  42% {
    transform: rotate(16deg) scale(1.08);
  }

  72% {
    transform: rotate(-7deg) scale(1.02);
  }

  100% {
    transform: rotate(0deg) scale(1);
  }
}

@media (max-width: 720px) {
  body {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }

  .mobile-quick-actions {
    position: fixed;
    right: 14px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 14px;
    z-index: 35;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(221, 177, 113, 0.2);
    border-radius: 999px;
    background: rgba(19, 25, 18, 0.72);
    box-shadow: 0 20px 46px rgba(8, 10, 7, 0.36);
    backdrop-filter: blur(18px);
    animation: quick-actions-rise 640ms cubic-bezier(0.18, 0.72, 0.22, 1) 420ms both;
  }
}

@keyframes quick-actions-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-route-leaving main,
  body.is-route-leaving .site-footer,
  body.is-route-covered main,
  body.is-route-covered .site-footer {
    opacity: 1;
    transform: none;
  }

  .brand:hover img,
  .brand:focus-visible img,
  .brand.is-brand-kick img,
  .mobile-quick-actions,
  .js-reveal-active [data-reveal] {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
}