/* Motion that stays quiet. Reduced-motion preferences turn it off. */

.hero-content > * {
  animation: rise 0.75s ease both;
}

.hero-content > *:nth-child(2) { animation-delay: 0.08s; }
.hero-content > *:nth-child(3) { animation-delay: 0.16s; }
.hero-content > *:nth-child(4) { animation-delay: 0.24s; }
.hero-content > *:nth-child(5) { animation-delay: 0.32s; }

.gold-rule {
  transform-origin: left center;
  animation: draw-rule 0.7s ease both;
}

.hero-shapes span {
  animation: drift 10s ease-in-out infinite;
}

.hero-shapes span:nth-child(2) { animation-duration: 12s; animation-delay: -2s; }
.hero-shapes span:nth-child(3) { animation-duration: 14s; animation-delay: -4s; }

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.frame,
.gallery-item {
  overflow: hidden;
}

.frame img,
.gallery-item img {
  transition: transform 0.55s ease;
}

.frame:hover img,
.gallery-item:hover img {
  transform: scale(1.045);
}

.card,
.icon-card,
.programme-card,
.notice-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover,
.icon-card:hover,
.programme-card:hover,
.notice-card:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 164, 92, 0.7);
  box-shadow: var(--shadow);
}

.submenu,
.to-top,
.nav-overlay {
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.site-nav {
  transition: clip-path 0.28s ease, visibility 0.28s ease;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes draw-rule {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes drift {
  50% { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js .reveal,
  .gold-rule,
  .hero-content > * {
    opacity: 1;
    transform: none;
  }

  .hero-shapes {
    display: none;
  }
}