:root {
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-fast: 180ms;
  --motion-base: 420ms;
  --motion-slow: 720ms;
}

html {
  scroll-behavior: smooth;
}

body {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease);
}

body.motion-ready {
  opacity: 1;
  transform: translateY(0);
}

body.motion-leaving {
  opacity: 0;
  transform: translateY(-8px);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 215, 0, 0.12), transparent 26rem),
    radial-gradient(circle at 85% 20%, rgba(255, 246, 223, 0.06), transparent 24rem);
  opacity: 0.8;
}

nav {
  transition:
    background-color var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease);
}

nav.motion-scrolled {
  border-color: rgba(255, 215, 0, 0.24) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

a,
button,
input,
select,
textarea {
  transition-duration: var(--motion-fast);
  transition-timing-function: var(--motion-ease);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #ffd700;
  outline-offset: 4px;
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition:
    opacity var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease),
    filter var(--motion-slow) var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.motion-card {
  will-change: transform;
}

.motion-card:hover {
  transform: translateY(-6px);
}

.motion-card img {
  transition:
    transform 700ms var(--motion-ease),
    filter 700ms var(--motion-ease);
}

.motion-card:hover img {
  filter: saturate(1.08) contrast(1.04);
}

.gold-glow,
.gold-glow-hover,
.gold-glow-static,
.glass-card,
.news-card,
.light-panel {
  transition:
    transform var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    background-color var(--motion-base) var(--motion-ease),
    opacity var(--motion-base) var(--motion-ease);
}

.gold-glow:hover,
.gold-glow-hover:hover,
.gold-glow-static:hover {
  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.28),
    0 0 34px rgba(255, 215, 0, 0.16);
}

.section-sheen {
  position: relative;
  overflow: hidden;
}

.section-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 215, 0, 0.04) 48%, transparent 78%);
  transform: translateX(-120%);
  transition: transform 1200ms var(--motion-ease);
}

.section-sheen.is-visible::after {
  transform: translateX(120%);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  body,
  body.motion-leaving,
  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }
}