/* === SpaHub Tulsa – Shared UX Enhancements === */

/* Hero entrance animations (homepage only) */
@keyframes fadeInUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.hero .hero-logo{animation:fadeIn .9s ease both}
.hero .hero-tagline{animation:fadeInUp .7s ease .35s both}
.hero h1{animation:fadeInUp .7s ease .55s both}
.hero .hero-content>p{animation:fadeInUp .7s ease .75s both}
.hero .hero-ctas{animation:fadeInUp .7s ease .95s both}

/* Scroll-reveal base */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:none}

/* Scroll indicator (homepage hero) */
@keyframes indicatorBounce{0%,100%{transform:translateX(-50%) translateY(0)}55%{transform:translateX(-50%) translateY(9px)}}
.scroll-indicator{position:absolute;bottom:36px;left:50%;z-index:2;background:none;border:none;cursor:pointer;padding:6px;opacity:.45;animation:indicatorBounce 2.4s ease-in-out infinite}
.scroll-indicator svg{display:block;width:24px;height:24px;stroke:var(--gold-light,#D4B968);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.scroll-indicator:hover{opacity:.75}
.scroll-indicator:focus-visible{outline:2px solid var(--gold,#C9A84C);outline-offset:4px;border-radius:4px}

/* Header shadow when scrolled */
.site-header.scrolled{box-shadow:0 2px 24px rgba(0,0,0,.4)}

/* Hamburger → X */
.mobile-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.mobile-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Team member hover lift (homepage) */
.team-member{transition:transform .3s ease,box-shadow .3s ease}
.team-member:hover{transform:translateY(-5px);box-shadow:0 10px 36px rgba(10,10,10,.13)}
.team-member img{transition:transform .45s ease}
.team-member:hover img{transform:scale(1.07)}

/* Page hero entrance for service pages */
@keyframes pageHeroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.page-hero h1{animation:pageHeroIn .65s ease .1s both}
.page-hero p{animation:pageHeroIn .65s ease .25s both}
.page-hero .breadcrumb{animation:fadeIn .5s ease both}

/* Mobile Book bar */
.mobile-book-bar{display:none}
@media(max-width:900px){
  .mobile-book-bar{
    display:block;position:fixed;bottom:0;left:0;right:0;z-index:800;
    text-align:center;
    background:var(--gold,#C9A84C);
    padding:15px 24px;
    font-family:var(--sans,'Figtree',sans-serif);
    font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--black,#0A0A0A);
    box-shadow:0 -2px 18px rgba(201,168,76,.38);
    transition:opacity .3s,transform .3s;
  }
  .mobile-book-bar:hover{opacity:.9}
  body{padding-bottom:52px}
}

/* Service row hover */
.service-table .row{transition:background .2s ease,padding-left .2s ease}
.service-table .row:hover{background:rgba(201,168,76,.04);padding-left:8px}

/* Gold divider animation on scroll */
.section-header .divider{transition:width .6s ease}
.reveal.visible .divider{width:48px}
.reveal .divider{width:0}

/* Active nav highlight */
.nav-links a[aria-current="page"]{opacity:1;color:var(--gold)}

/* Service card title link */
.service-card h3 a{transition:color .2s ease}
.service-card h3 a:hover{color:var(--gold)}

/* CTA banner button glow pulse */
@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,0)}50%{box-shadow:0 0 0 12px rgba(201,168,76,.15)}}
.cta-banner .btn-book{animation:ctaPulse 3s ease-in-out infinite}
.cta-banner .btn-book:hover{animation:none}

/* Footer link separator */
.footer-links a + a{position:relative;margin-left:24px}
.footer-links a + a::before{content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:1px;height:10px;background:rgba(250,247,242,.2)}

/* Page transitions */
body{animation:fadeIn .3s ease both;transition:opacity .15s ease}
body.page-exit{opacity:0}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}