/* === 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}
.hero .hero-rating{animation:fadeInUp .7s ease 1.1s both}

/* Hero rating badge */
.hero-rating{margin-top:32px;display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border:1px solid rgba(201,168,76,.35);border-radius:999px;background:rgba(10,10,10,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-rating .stars{color:var(--gold-light);letter-spacing:.1em;font-size:.95rem}
.hero-rating .rating-text{font-family:var(--sans);font-size:.78rem;color:rgba(250,247,242,.85);letter-spacing:.04em;font-weight:500}

/* 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)}

/* Site brand (logo + open status) */
.site-brand{display:flex;align-items:center;gap:14px;min-height:40px}
.open-status{font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(250,247,242,.55);position:relative;padding-left:14px;white-space:nowrap}
.open-status::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:rgba(250,247,242,.3)}
.open-status.is-open{color:var(--gold-light)}
.open-status.is-open::before{background:var(--gold);box-shadow:0 0 0 0 rgba(201,168,76,.4);animation:pulseDot 2.6s ease-in-out infinite}
.open-status.is-closed{color:rgba(250,247,242,.5)}
.open-status.is-closed::before{background:rgba(250,247,242,.35)}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,.35)}50%{box-shadow:0 0 0 5px rgba(201,168,76,0)}}
@media(max-width:600px){.open-status{display:none}}

/* 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}

/* === Sticky Mobile Book + Call bar === */
.mobile-book-bar{display:none}
@media(max-width:900px){
  .mobile-book-bar{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:800;
    font-family:var(--sans,'Figtree',sans-serif);
    box-shadow:0 -2px 18px rgba(10,10,10,.35);
  }
  .mobile-book-bar a{
    flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    padding:14px 18px;
    font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    text-decoration:none;
    transition:opacity .2s ease, background .2s ease;
  }
  .mobile-book-bar__call{
    flex:0 0 38%;
    background:var(--charcoal,#1A1A1A);
    color:var(--cream,#FAF7F2);
    border-right:1px solid rgba(201,168,76,.2);
  }
  .mobile-book-bar__call svg{opacity:.85}
  .mobile-book-bar__call:hover,.mobile-book-bar__call:active{background:var(--black,#0A0A0A)}
  .mobile-book-bar__book{
    background:var(--gold,#C9A84C);
    color:var(--black,#0A0A0A);
  }
  .mobile-book-bar__book:hover,.mobile-book-bar__book:active{background:var(--gold-light,#D4B968)}
  body{padding-bottom:54px}
}

/* 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 pricing hint */
.card-price{font-family:var(--serif);font-size:1rem;font-weight:600;color:var(--gold-dark);margin-bottom:16px;letter-spacing:.02em}
.service-card-accent .card-price{color:var(--gold-light)}

/* 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}

/* === Reviews Section === */
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-bottom:32px}
.review-card{background:var(--warm-white);border:1px solid rgba(201,168,76,.12);padding:32px 28px;margin:0;position:relative;transition:transform .3s ease,box-shadow .3s ease}
.review-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.review-stars{color:var(--gold);font-size:1rem;letter-spacing:.12em;margin-bottom:14px}
.review-card blockquote{font-family:var(--sans);font-size:.92rem;color:var(--text-dark);line-height:1.65;margin:0 0 20px;quotes:"\201C""\201D""\2018""\2019"}
.review-card blockquote::before{content:open-quote;font-family:var(--serif);font-size:3rem;color:rgba(201,168,76,.25);position:absolute;top:14px;right:22px;line-height:1}
.review-card figcaption{display:flex;flex-direction:column;gap:4px;border-top:1px solid rgba(201,168,76,.1);padding-top:16px}
.review-card figcaption strong{font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--text-dark)}
.review-card .review-service{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dark)}
.reviews-cta{text-align:center;margin-top:16px}
.reviews-cta a{font-family:var(--sans);font-size:.85rem;font-weight:600;letter-spacing:.05em;color:var(--gold-dark);border-bottom:1px solid transparent;transition:border-color .2s}
.reviews-cta a:hover{border-bottom-color:var(--gold-dark)}

/* === Memberships strip === */
.memberships-strip{padding:64px 0;background:linear-gradient(135deg,var(--cream-dark) 0%,var(--cream) 100%);border-top:1px solid rgba(201,168,76,.12);border-bottom:1px solid rgba(201,168,76,.12)}
.memberships-strip-inner{display:grid;grid-template-columns:2fr auto;gap:48px;align-items:center}
.memberships-strip-text .label{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.memberships-strip-text h2{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:500;line-height:1.2;margin-bottom:10px;color:var(--text-dark)}
.memberships-strip-text p{font-size:.92rem;color:var(--text-muted);line-height:1.7;max-width:560px}
@media(max-width:800px){
  .memberships-strip-inner{grid-template-columns:1fr;gap:24px;text-align:center}
  .memberships-strip-text p{max-width:none;margin:0 auto}
}

/* === FAQ Section === */
.faq-section .section-header{margin-bottom:32px}
.faq-list{margin-top:8px}
.faq-item{background:var(--warm-white);border:1px solid rgba(201,168,76,.12);margin-bottom:10px;transition:border-color .2s ease}
.faq-item[open]{border-color:rgba(201,168,76,.35);box-shadow:var(--shadow)}
.faq-item summary{font-family:var(--serif);font-size:1.1rem;font-weight:600;padding:18px 22px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--text-dark)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-family:var(--sans);font-weight:300;font-size:1.5rem;color:var(--gold);transition:transform .2s ease;flex-shrink:0}
.faq-item[open] summary::after{content:'−'}
.faq-answer{padding:0 22px 20px}
.faq-answer p{font-size:.9rem;color:var(--text-muted);line-height:1.7;margin:0}

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