/*
 * TWF Hospitality — Premium Interaction Layer
 * Shared subtle-premium micro-interactions applied across all pages.
 * Designed to complement existing inline styles without conflict.
 *
 * Philosophy: restrained luxury. Motion should feel earned, not decorative.
 * Every transition uses an easing curve from the design system.
 */

:root {
  --tp-ease: cubic-bezier(.25,.46,.45,.94);
  --tp-ease-out: cubic-bezier(.16,1,.3,1);
  --tp-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --tp-dur-quick: .35s;
  --tp-dur-smooth: .6s;
  --tp-dur-slow: .9s;
  --tp-lift: 0 18px 48px -12px rgba(12,18,32,.22);
  --tp-lift-gold: 0 18px 48px -12px rgba(201,168,76,.28);
}

/* --- Scroll Reveal System --- */
.tp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--tp-dur-slow) var(--tp-ease-out),
              transform var(--tp-dur-slow) var(--tp-ease-out);
  will-change: opacity, transform;
}
.tp-reveal.tp-in { opacity: 1; transform: translateY(0); }

.tp-reveal-left { opacity: 0; transform: translateX(-36px); transition: opacity var(--tp-dur-slow) var(--tp-ease-out), transform var(--tp-dur-slow) var(--tp-ease-out); }
.tp-reveal-left.tp-in { opacity: 1; transform: translateX(0); }

.tp-reveal-right { opacity: 0; transform: translateX(36px); transition: opacity var(--tp-dur-slow) var(--tp-ease-out), transform var(--tp-dur-slow) var(--tp-ease-out); }
.tp-reveal-right.tp-in { opacity: 1; transform: translateX(0); }

.tp-reveal-scale { opacity: 0; transform: scale(.94); transition: opacity var(--tp-dur-slow) var(--tp-ease-out), transform var(--tp-dur-slow) var(--tp-ease-out); }
.tp-reveal-scale.tp-in { opacity: 1; transform: scale(1); }

/* Stagger delays */
.tp-d1 { transition-delay: .08s }
.tp-d2 { transition-delay: .16s }
.tp-d3 { transition-delay: .24s }
.tp-d4 { transition-delay: .32s }
.tp-d5 { transition-delay: .40s }
.tp-d6 { transition-delay: .48s }

/* --- Universal Card Lift --- */
/* Auto-applies to anything that looks like a card. Safe because the selectors
   are specific to classes that already exist in the design system. */
.pricing-card,
.service-card,
.case-study-card,
.result-card,
.case-card,
.position-card,
.certification-card,
.city-card,
.brand-card,
.testimonial-card,
.info-card,
.step-card,
.benefit-card,
.blog-card,
.event-card,
.venue-card,
.tier-card {
  transition: transform .45s var(--tp-ease-out),
              box-shadow .45s var(--tp-ease-out),
              border-color .35s var(--tp-ease-out) !important;
  will-change: transform;
}
.pricing-card:hover,
.service-card:hover,
.case-study-card:hover,
.result-card:hover,
.case-card:hover,
.position-card:hover,
.certification-card:hover,
.city-card:hover,
.brand-card:hover,
.testimonial-card:hover,
.info-card:hover,
.step-card:hover,
.benefit-card:hover,
.blog-card:hover,
.event-card:hover,
.venue-card:hover,
.tier-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--tp-lift);
}

/* Gold-shield emphasis for highlighted/featured cards */
.pricing-card.featured:hover,
.pricing-card.recommended:hover,
.tier-card.featured:hover {
  box-shadow: var(--tp-lift-gold);
  border-color: var(--gold) !important;
}

/* --- CTA Button Micro-Interactions --- */
/* Extend existing button styles with a gold shimmer on hover */
.btn,
.cta,
.cta-primary,
.cta-gold,
.nav-cta,
.hero-cta-primary,
.btn-gold,
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn::after,
.cta::after,
.cta-primary::after,
.cta-gold::after,
.hero-cta-primary::after,
.btn-gold::after,
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transition: left .7s var(--tp-ease-out);
  pointer-events: none;
}
.btn:hover::after,
.cta:hover::after,
.cta-primary:hover::after,
.cta-gold:hover::after,
.hero-cta-primary:hover::after,
.btn-gold:hover::after,
.btn-primary:hover::after {
  left: 100%;
}

/* --- Gold Underline Hover on Text Links --- */
/* Applied to inline text links inside article/prose contexts only */
article a:not(.btn):not(.cta):not(.nav-link),
.prose a:not(.btn):not(.cta):not(.nav-link),
.blog-content a:not(.btn):not(.cta):not(.nav-link) {
  position: relative;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .35s var(--tp-ease-out);
}
article a:not(.btn):not(.cta):not(.nav-link):hover,
.prose a:not(.btn):not(.cta):not(.nav-link):hover,
.blog-content a:not(.btn):not(.cta):not(.nav-link):hover {
  background-size: 100% 2px;
}

/* --- Stat Counter Visual Polish --- */
[data-tp-counter] {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  transition: color .4s var(--tp-ease);
}

/* --- Smooth anchor scrolling refinement --- */
html { scroll-padding-top: 120px; }

/* --- Gold shimmer for stat numbers --- */
.stat-number,
.result-number,
.metric-number {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light, #E4D5A0) 50%, var(--gold) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tp-shine 3.5s var(--tp-ease) infinite;
}
@keyframes tp-shine {
  0%, 100% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
}

/* --- Nav scroll elevation --- */
.nav.scrolled,
.nav.nav-scrolled {
  box-shadow: 0 10px 40px -12px rgba(12,18,32,.35), 0 1px 0 rgba(201,168,76,.12);
}

/* --- Accessibility: respect reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .tp-reveal,
  .tp-reveal-left,
  .tp-reveal-right,
  .tp-reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .stat-number,
  .result-number,
  .metric-number {
    animation: none !important;
  }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* --- Focus states for keyboard accessibility --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =======================================================================
   PER-PAGE SIGNATURES
   Each flagship gets a unique subtle-premium flourish that sets it apart
   without breaking the design system. Scoped by body[data-page].
   ======================================================================= */

/* --- INDEX: hero gradient drift + ambient gold glow --- */
body[data-page="index"] .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(201,168,76,.08) 0%, transparent 60%);
  animation: tp-hero-drift 16s var(--tp-ease) infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes tp-hero-drift {
  0%   { transform: translate(-3%, -2%) scale(1) }
  100% { transform: translate(3%, 2%) scale(1.06) }
}
body[data-page="index"] .hero-content { position: relative; z-index: 2; }

/* --- ABOUT: founder story section gold accent line --- */
body[data-page="about"] section:nth-of-type(odd) {
  position: relative;
}
body[data-page="about"] .founder-story::before,
body[data-page="about"] .story-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
}

/* --- CASE-STUDIES: result card gold-edge accent on hover --- */
body[data-page="case-studies"] .case-study-card,
body[data-page="case-studies"] .case-card,
body[data-page="case-studies"] .result-card {
  position: relative;
  overflow: hidden;
}
body[data-page="case-studies"] .case-study-card::before,
body[data-page="case-studies"] .case-card::before,
body[data-page="case-studies"] .result-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light, #E4D5A0) 50%, var(--gold) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--tp-ease-out);
}
body[data-page="case-studies"] .case-study-card:hover::before,
body[data-page="case-studies"] .case-card:hover::before,
body[data-page="case-studies"] .result-card:hover::before {
  transform: scaleX(1);
}

/* --- PRICING: featured tier perpetual gold border shimmer --- */
body[data-page="pricing"] .pricing-card.featured,
body[data-page="pricing"] .pricing-card.recommended,
body[data-page="pricing"] .tier-card.featured,
body[data-page="pricing"] .tier-card.recommended {
  position: relative;
  border: 2px solid var(--gold) !important;
}
body[data-page="pricing"] .pricing-card.featured::after,
body[data-page="pricing"] .pricing-card.recommended::after,
body[data-page="pricing"] .tier-card.featured::after,
body[data-page="pricing"] .tier-card.recommended::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(120deg, var(--gold), var(--gold-light, #E4D5A0), var(--gold));
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: tp-border-shimmer 4.5s var(--tp-ease) infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes tp-border-shimmer {
  0%, 100% { background-position: 0% 50% }
  50%      { background-position: 100% 50% }
}

/* --- OUR-SYSTEM: sequential step reveal with connecting line draw --- */
body[data-page="our-system"] .step-card,
body[data-page="our-system"] .system-step,
body[data-page="our-system"] .step-item {
  position: relative;
}
body[data-page="our-system"] .step-card::before,
body[data-page="our-system"] .system-step::before,
body[data-page="our-system"] .step-item::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 50%;
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .7s var(--tp-ease-out) .2s;
}
body[data-page="our-system"] .step-card.tp-in::before,
body[data-page="our-system"] .system-step.tp-in::before,
body[data-page="our-system"] .step-item.tp-in::before {
  transform: scaleX(1);
}
body[data-page="our-system"] .step-card:first-child::before,
body[data-page="our-system"] .system-step:first-child::before,
body[data-page="our-system"] .step-item:first-child::before {
  display: none;
}

/* --- SERVICE PAGES: icon tilt + benefit stagger --- */
body[data-page^="service-"] .service-icon,
body[data-page^="service-"] .benefit-icon,
body[data-page^="service-"] .feature-icon {
  display: inline-block;
  transition: transform .5s var(--tp-ease-spring);
}
body[data-page^="service-"] .service-card:hover .service-icon,
body[data-page^="service-"] .benefit-card:hover .benefit-icon,
body[data-page^="service-"] .feature-card:hover .feature-icon {
  transform: rotate(-6deg) scale(1.08);
}

/* Service-specific accent underline on section titles */
body[data-page^="service-"] h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 16px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .7s var(--tp-ease-out);
}
body[data-page^="service-"] h2.tp-in::after,
body[data-page^="service-"] .tp-reveal.tp-in h2::after {
  transform: scaleX(1);
}

/* --- EMERGENCY: urgent pulsing badge --- */
body[data-page="emergency"] .emergency-badge,
body[data-page="emergency"] .urgent-badge,
body[data-page="emergency"] .hero-eyebrow {
  position: relative;
}
body[data-page="emergency"] .emergency-badge::before,
body[data-page="emergency"] .urgent-badge::before,
body[data-page="emergency"] .hero-eyebrow::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E74C3C;
  box-shadow: 0 0 0 0 rgba(231, 76, 60, .55);
  animation: tp-pulse 1.8s var(--tp-ease) infinite;
}
@keyframes tp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(231, 76, 60, .55) }
  70%  { box-shadow: 0 0 0 14px rgba(231, 76, 60, 0) }
  100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0) }
}
body[data-page="emergency"] .hero-cta-primary {
  background: linear-gradient(135deg, #E74C3C, #C0392B) !important;
  color: #fff !important;
}

/* --- BLOG: article content flourishes --- */
body[data-page^="blog"] article h2,
body[data-page^="blog"] .blog-content h2,
body[data-page^="blog"] .article-content h2 {
  position: relative;
  padding-left: 18px;
}
body[data-page^="blog"] article h2::before,
body[data-page^="blog"] .blog-content h2::before,
body[data-page^="blog"] .article-content h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: .2em;
  bottom: .2em;
  width: 4px;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark, #A38A3A));
  border-radius: 2px;
}

/* --- FAQ: accordion polish --- */
body[data-page^="faq"] details,
body[data-page^="faq"] .faq-item {
  transition: background .35s var(--tp-ease);
}
body[data-page^="faq"] details[open],
body[data-page^="faq"] .faq-item.open {
  background: rgba(201, 168, 76, .04);
}

/* --- POSITIONS / CERTIFICATIONS: card grid reveal --- */
body[data-page="positions"] .position-card,
body[data-page="certifications"] .certification-card {
  transition: transform .5s var(--tp-ease-out), box-shadow .5s var(--tp-ease-out), border-color .4s ease;
}
body[data-page="positions"] .position-card:hover {
  border-color: var(--gold) !important;
}

/* --- CITY PAGES: venue card gold top stripe on hover --- */
body[data-page^="city-"] .venue-card,
body[data-page^="city-"] .city-card {
  position: relative;
  overflow: hidden;
  transition: transform .45s var(--tp-ease-out), box-shadow .45s var(--tp-ease-out);
}
body[data-page^="city-"] .venue-card::before,
body[data-page^="city-"] .city-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .5s var(--tp-ease-out);
}
body[data-page^="city-"] .venue-card:hover::before,
body[data-page^="city-"] .city-card:hover::before {
  transform: scaleX(1);
}