/* Global visual polish + subtle animations (safe: no new theme colors)
   Applied across pages via class selectors already used in HTML.
*/

:root{
  --enh-border: rgba(255,255,255,0.08);
  --enh-border-2: rgba(255,255,255,0.12);
  --enh-surface: rgba(255,255,255,0.03);
  --enh-surface-2: rgba(255,255,255,0.05);
  --enh-shadow: 0 18px 55px rgba(0,0,0,0.35);
  --enh-shadow-hover: 0 26px 70px rgba(0,0,0,0.45);
  --enh-radius: var(--radius, 18px);
}

/* Safety baseline: if a page's inline CSS fails to apply for any reason,
   keep the site from rendering as a blank white screen. Pages that define
   their own body/html background later will override this normally. */
html, body{
  background-color: var(--dark, #0a0a14);
  color: var(--text, #f5f5f7);
}

/* Better anchor behavior under fixed navbar */
html{ scroll-behavior: auto; }
section[id], [id].card, [id].wrap{ scroll-margin-top: 95px; }

/* Section divider line to make sections feel intentional */
section:not(.hero){
  position: relative;
}
section:not(.hero)::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--enh-border), transparent);
  pointer-events:none;
}

/* Hero: add a subtle accent bloom without changing palette */
.hero{
  position: relative;
}
.hero::after{
  content:"";
  position:absolute;
  inset:-40px -40px auto -40px;
  height: 220px;
  background:
    radial-gradient(closest-side at 15% 50%, rgba(255,255,255,0.05), transparent 70%),
    radial-gradient(closest-side at 85% 40%, rgba(255,255,255,0.04), transparent 70%);
  filter: blur(8px);
  opacity: 0.9;
  pointer-events:none;
}

/* Consistent micro-interactions */
:where(.cta-button, .btn, .nav-cta, .tab-btn, .form-submit, .feature-cta, .social-link){
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease, filter 180ms ease;
  will-change: transform;
}
:where(.cta-button, .btn, .nav-cta, .tab-btn, .form-submit, .feature-cta, .social-link):hover{
  transform: translateY(-2px);
}
:where(.cta-button, .btn, .nav-cta, .tab-btn, .form-submit, .feature-cta, .social-link):active{
  transform: translateY(0);
}

/* Card polish (avoid touching service/collection cards because pages already
   have their own hover + reveal logic and image transitions). */
:where(.testimonial-card, .card, .venue, .info-item){
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
}
:where(.testimonial-card, .card, .venue, .info-item):hover{
  transform: translateY(-4px);
  box-shadow: var(--enh-shadow-hover);
  border-color: var(--enh-border-2);
}

/* Scroll reveal (only applied when JS adds classes) */
.enh-reveal{
  opacity: 0;
  transform: translateY(18px);
}
.enh-reveal.enh-reveal--shown{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 520ms ease, transform 520ms ease;
}

/* Quick highlight after anchor scroll */
.enh-flash{
  animation: enhFlash 900ms ease-out 1;
}
@keyframes enhFlash{
  0%{ box-shadow: 0 0 0 0 rgba(255,255,255,0.00); }
  30%{ box-shadow: 0 0 0 4px rgba(255,255,255,0.06); }
  100%{ box-shadow: 0 0 0 0 rgba(255,255,255,0.00); }
}

/* Accessibility: prefer-reduced-motion */
@media (prefers-reduced-motion: reduce){
  :where(.cta-button, .btn, .nav-cta, .tab-btn, .form-submit, .feature-cta, .social-link){
    transition: none !important;
  }
  :where(.service-card, .collection-card, .testimonial-card, .card, .venue, .info-item){
    transition: none !important;
  }
  .enh-reveal{ opacity: 1 !important; transform: none !important; }
  .enh-reveal.enh-reveal--shown{ transition: none !important; }
  .enh-flash{ animation: none !important; }
}