/* Global animation variables and safety */
:root {
  --anim-dur: 600ms;
  --anim-ease: cubic-bezier(.22,.61,.36,1);
  --underline-dur: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* IntersectionObserver reveals */
.reveal { opacity: 0; transform: translateY(0); transition: opacity var(--anim-dur) var(--anim-ease), transform var(--anim-dur) var(--anim-ease); }
.reveal-up { opacity: 0; transform: translateY(16px); transition: opacity var(--anim-dur) var(--anim-ease), transform var(--anim-dur) var(--anim-ease); }
.in-view { opacity: 1 !important; transform: translateY(0) !important; }

/* Header nav underline animation */
.nav-underline { position: relative; text-decoration: none; }
.nav-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform var(--underline-dur) ease-out;
}
.nav-underline:hover::after, .nav-underline:focus-visible::after { transform: scaleX(1); }

/* Button gradient glow */
.btn-glow { position: relative; isolation: isolate; }
.btn-glow::before {
  content: ""; position: absolute; inset: -4px; border-radius: 9999px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
              linear-gradient(90deg, rgba(169,82,40,.35), rgba(253,241,71,.4), rgba(0,0,0,.35));
  filter: blur(14px); opacity: 0; z-index: -1; transition: opacity 240ms ease, transform 240ms ease; transform: scale(.98);
}
.btn-glow:hover::before, .btn-glow:focus-visible::before { opacity: .9; transform: scale(1); }

/* Card subtle tilt */
.tilt-card { transform-style: preserve-3d; transition: transform 200ms var(--anim-ease), box-shadow 200ms var(--anim-ease); will-change: transform; }
.tilt-shadow { transition: box-shadow 200ms var(--anim-ease); }
.tilt-active { box-shadow: 0 18px 32px rgba(0,0,0,.25); }

/* Image zoom + mask */
.zoom-mask { position: relative; overflow: hidden; }
.zoom-mask img { transition: transform 350ms var(--anim-ease); }
.zoom-mask::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 100%); opacity: 0; transition: opacity 350ms var(--anim-ease); }
.zoom-mask:hover img { transform: scale(1.05); }
.zoom-mask:hover::after { opacity: 1; }

/* Hero slider */
#heroSlider { position: relative; min-height: clamp(28rem, 60vh, 44rem); }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 600ms var(--anim-ease), visibility 600ms var(--anim-ease); }
.slide::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  /* Per-slide overlay control - improved gradient for smoother transition */
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,var(--overlay-top, .25)) 0%,
      rgba(0,0,0,calc(var(--overlay-top, .25) + .15)) 30%,
      rgba(0,0,0,calc(var(--overlay-bottom, .55) - .1)) 60%,
      rgba(0,0,0,var(--overlay-bottom, .55)) 100%
    ),
    var(--slide-bg, none);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.slide > .content { position: relative; z-index: 1; padding-top: clamp(5rem, 22vh, 12rem); }
.slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.slider-controls { position: absolute; inset: auto 0 1rem 0; display: flex; justify-content: center; gap: .5rem; }
.slider-dot { width: .625rem; height: .625rem; border-radius: 9999px; border: 1px solid currentColor; opacity: .6; background: transparent; transition: opacity 200ms ease, transform 200ms ease; }
.slider-dot[aria-selected="true"] { opacity: 1; transform: scale(1.2); }
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: transparent; border: 1px solid currentColor; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 9999px; opacity: .8; }
.slider-arrow:hover, .slider-arrow:focus-visible { opacity: 1; }
.slider-arrow.prev { left: .75rem; }
.slider-arrow.next { right: .75rem; }