/*
 * A World of Smiles - Master Stylesheet (Refined Premium Motion Edition)
 * Principal UI/UX, Glassmorphism, Advanced Motion System & WCAG 2.2 AA
 */

:root {
  --color-primary: #00514D;
  --color-primary-teal: #0B6B66;
  --color-secondary-emerald: #17A889;
  --color-accent-yellow: #F9B233;
  --color-accent-gold: #FFBA43;
  --color-warm-cream: #FFF7E6;
  --color-light-blue: #E6F5F4;
  --color-charcoal: #1F2937;
  --color-surface: #F8F9FF;
  --color-surface-card: #FFFFFF;
  --color-text-main: #121C2A;
  --color-text-muted: #3E4947;
  --max-content-width: 1280px;

  /* Premium Motion Design Tokens (Apple / Luxury Editorial Standard) */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.45, 0.64, 1);
  --ease-in-out-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  
  --duration-fast: 0.2s;
  --duration-base: 0.35s;
  --duration-slow: 0.65s;
  --duration-cinematic: 1.1s;
}

/* Base Accessibility & Smooth Scrolling */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--color-surface);
  color: var(--color-text-main);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Accessibility Skip Link */
.skip-link {
  position: absolute;
  top: -120px;
  left: 1.5rem;
  background: var(--color-primary-teal);
  color: #ffffff;
  padding: 0.85rem 1.75rem;
  z-index: 99999;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
  transition: top 0.25s var(--ease-out-expo);
  box-shadow: 0 8px 24px rgba(11, 107, 102, 0.25);
}

.skip-link:focus {
  top: 1.25rem;
  outline: 3px solid var(--color-accent-gold);
}

/* Focus Visibility for WCAG 2.2 AA */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent-gold) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(249, 178, 51, 0.25) !important;
}

/* Typography Headings (Cormorant Garamond Elegant Serif matching Brand Mark) */
h1, h2, h3, h4,
.font-serif,
.font-display,
.font-headline-xl,
.font-headline-lg,
.font-headline-md {
  font-family: 'Cormorant Garamond', Georgia, serif;
  letter-spacing: -0.01em;
  font-weight: 600;
}

h5, h6,
.font-headline-sm {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.01em;
}

/* Material Symbols Outlined */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}

/* ==========================================================================
   1. CUSTOM SCROLL READING PROGRESS INDICATOR
   ========================================================================== */
#scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3.5px;
  width: 0%;
  background: linear-gradient(90deg, #0B6B66 0%, #17A889 55%, #F9B233 100%);
  z-index: 999999;
  pointer-events: none;
  transition: width 0.1s linear;
  box-shadow: 0 1px 8px rgba(23, 168, 137, 0.45);
}

/* ==========================================================================
   2. CINEMATIC SPLASH SCREEN (White Branded Experience)
   ========================================================================== */
.cinematic-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  /* Self-dismiss fallback: even without JS, splash will auto fade out smoothly */
  animation: autoDismissSplash 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.5s var(--ease-out-expo), visibility 0.5s, transform 0.55s var(--ease-out-expo);
  will-change: opacity, transform;
}

@keyframes autoDismissSplash {
  0%, 75% { opacity: 1; visibility: visible; }
  98% { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

.cinematic-splash.fade-out {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(1.02);
  pointer-events: none !important;
}

.splash-teal-aura {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(23, 168, 137, 0.25) 0%, rgba(11, 107, 102, 0.08) 50%, transparent 72%);
  filter: blur(32px);
  animation: splashAuraPulse 1.4s ease-out forwards;
  pointer-events: none;
}

.splash-logo-wrapper {
  animation: splashLogoEntrance 0.75s var(--ease-out-expo) forwards;
  opacity: 0;
  will-change: transform, opacity;
}

.splash-badge-wrap {
  animation: splashFadeUp 0.6s 0.22s var(--ease-out-expo) forwards;
  opacity: 0;
}

.splash-divider-line {
  width: 0px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #F9B233, transparent);
  animation: splashLineExpand 0.6s 0.38s var(--ease-out-expo) forwards;
}

.splash-tagline {
  animation: splashFadeUp 0.65s 0.5s var(--ease-out-expo) forwards;
  opacity: 0;
}

.splash-subtext {
  animation: splashFadeUp 0.55s 0.65s var(--ease-out-expo) forwards;
  opacity: 0;
}

@keyframes splashAuraPulse {
  0% { transform: scale(0.4); opacity: 0; }
  50% { transform: scale(1.15); opacity: 0.9; }
  100% { transform: scale(1); opacity: 0.7; }
}

@keyframes splashLogoEntrance {
  0% { transform: scale(0.86) translateY(14px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes splashFadeUp {
  0% { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes splashLineExpand {
  0% { width: 0px; opacity: 0; }
  100% { width: 80px; opacity: 1; }
}

/* ==========================================================================
   3. GLASSMORPHISM & HEADER SYSTEM
   ========================================================================== */
.glass-panel {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 12px 36px -4px rgba(11, 107, 102, 0.08);
}

.glass-panel-subtle {
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 24px -2px rgba(11, 107, 102, 0.05);
}

.glass-header {
  background: rgba(248, 249, 255, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  transition: background-color 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), border-color 0.35s;
}

.glass-header.header-scrolled {
  background: rgba(248, 249, 255, 0.98);
  box-shadow: 0 8px 28px -4px rgba(11, 107, 102, 0.12);
  border-bottom-color: rgba(11, 107, 102, 0.10);
}

/* Animated Nav Indicator */
.nav-link-animated {
  position: relative;
  transition: color 0.25s ease;
}

.nav-link-animated::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0%;
  height: 2px;
  background-color: var(--color-secondary-emerald);
  border-radius: 9999px;
  transform: translateX(-50%);
  transition: width 0.25s var(--ease-out-expo);
}

.nav-link-animated:hover::after {
  width: 60%;
}

/* Services Mega Menu Motion */
.mega-menu-container {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 760px;
  max-width: 92vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo), visibility 0.3s;
  z-index: 100;
  pointer-events: none;
}

.nav-item-services:hover .mega-menu-container,
.nav-item-services:focus-within .mega-menu-container,
.mega-menu-container.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.mega-menu-card {
  transition: transform 0.25s var(--ease-out-expo), background-color 0.2s, box-shadow 0.25s;
}

.mega-menu-card:hover {
  background-color: rgba(230, 245, 244, 0.7);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11, 107, 102, 0.08);
}

/* ==========================================================================
   4. ADVANCED SCROLL ANIMATION SYSTEM (IntersectionObserver Driven)
   ========================================================================== */

/* A. Fade Up */
.motion-fade-up,
.reveal-fade-up,
[data-motion="fade-up"] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s var(--ease-out-expo), transform 0.75s var(--ease-out-expo);
  will-change: opacity, transform;
}

.motion-fade-up.is-revealed,
.reveal-fade-up.is-revealed,
[data-motion="fade-up"].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* B. Fade Down */
.motion-fade-down,
[data-motion="fade-down"] {
  opacity: 0;
  transform: translateY(-24px);
  transition: opacity 0.75s var(--ease-out-expo), transform 0.75s var(--ease-out-expo);
  will-change: opacity, transform;
}

.motion-fade-down.is-revealed,
[data-motion="fade-down"].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* C. Slide Left & Right */
.motion-slide-left,
.reveal-slide-left,
[data-motion="slide-left"] {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.75s var(--ease-out-expo), transform 0.75s var(--ease-out-expo);
  will-change: opacity, transform;
}

.motion-slide-left.is-revealed,
.reveal-slide-left.is-revealed,
[data-motion="slide-left"].is-revealed {
  opacity: 1;
  transform: translateX(0);
}

.motion-slide-right,
.reveal-slide-right,
[data-motion="slide-right"] {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.75s var(--ease-out-expo), transform 0.75s var(--ease-out-expo);
  will-change: opacity, transform;
}

.motion-slide-right.is-revealed,
.reveal-slide-right.is-revealed,
[data-motion="slide-right"].is-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* D. Scale Reveal */
.motion-scale,
[data-motion="scale"] {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.75s var(--ease-out-expo), transform 0.75s var(--ease-out-expo);
  will-change: opacity, transform;
}

.motion-scale.is-revealed,
[data-motion="scale"].is-revealed {
  opacity: 1;
  transform: scale(1);
}

/* E. Rounded Clip Reveal (For Photography & Cards) */
.motion-clip,
[data-motion="clip"] {
  opacity: 0;
  clip-path: inset(0 0 45px 0 round 24px);
  transition: opacity 0.85s var(--ease-out-expo), clip-path 0.85s var(--ease-out-expo);
  will-change: opacity, clip-path;
}

.motion-clip.is-revealed,
[data-motion="clip"].is-revealed {
  opacity: 1;
  clip-path: inset(0 0 0% 0 round 24px);
}

/* F. Stagger Reveal Cascading Delays */
.motion-stagger,
[data-motion="stagger"] {
  /* Parent container holds stagger context */
}

.motion-stagger .stagger-animated-item,
[data-motion="stagger"] .stagger-animated-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease-out-expo), transform 0.65s var(--ease-out-expo);
  transition-delay: calc(var(--stagger-idx, 0) * 0.08s);
  will-change: opacity, transform;
}

.motion-stagger.is-revealed .stagger-animated-item,
[data-motion="stagger"].is-revealed .stagger-animated-item {
  opacity: 1;
  transform: translateY(0);
}

/* Manual Stagger Helper Classes */
.stagger-1 { transition-delay: 0.07s !important; }
.stagger-2 { transition-delay: 0.14s !important; }
.stagger-3 { transition-delay: 0.21s !important; }
.stagger-4 { transition-delay: 0.28s !important; }
.stagger-5 { transition-delay: 0.35s !important; }
.stagger-6 { transition-delay: 0.42s !important; }

/* G. Text Line-by-Line Reveal */
.motion-text-reveal {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.motion-text-reveal > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.75s var(--ease-out-expo);
}

.is-revealed .motion-text-reveal > span,
.motion-text-reveal.is-revealed > span {
  transform: translateY(0);
}

/* ==========================================================================
   5. PARALLAX & DEPTH DYNAMICS
   ========================================================================== */
.parallax-float-slow,
[data-parallax="slow"] {
  will-change: transform;
  transition: transform 0.12s linear;
}

.parallax-float-fast,
[data-parallax="fast"] {
  will-change: transform;
  transition: transform 0.12s linear;
}

.hero-parallax-img,
[data-parallax="hero"] {
  will-change: transform;
  transition: transform 0.12s linear;
}

/* ==========================================================================
   6. INTERACTIVE CARDS & UNIVERSAL HOVER SYSTEM
   ========================================================================== */
.interactive-card,
.service-card,
.service-card-interactive,
.glass-panel.rounded-3xl,
.mega-menu-card,
[data-card="interactive"],
.grid > div[class*="rounded-3xl"][class*="p-"]:not(form),
.grid > div[class*="rounded-2xl"][class*="p-"]:not(form),
.grid > article[class*="rounded-3xl"],
.grid > article[class*="rounded-2xl"] {
  position: relative;
  transition: transform 0.4s var(--ease-out-expo),
              box-shadow 0.4s var(--ease-out-expo),
              border-color 0.3s ease,
              background-color 0.35s ease;
  will-change: transform, box-shadow;
  isolation: isolate;
}

/* Subtle Top Luxury Gradient Accent Line */
.interactive-card::before,
.service-card::before,
.service-card-interactive::before,
.glass-panel.rounded-3xl::before,
.mega-menu-card::before,
[data-card="interactive"]::before,
.grid > div[class*="rounded-3xl"][class*="p-"]:not(form)::before,
.grid > div[class*="rounded-2xl"][class*="p-"]:not(form)::before,
.grid > article[class*="rounded-3xl"]::before,
.grid > article[class*="rounded-2xl"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 3px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #0B6B66 0%, #17A889 50%, #F9B233 100%);
  opacity: 0;
  transform: scaleX(0.3);
  transform-origin: center;
  transition: opacity 0.35s ease, transform 0.45s var(--ease-out-expo);
  pointer-events: none;
  z-index: 10;
}

@media (hover: hover) {
  /* Lift & Depth Bloom */
  .interactive-card:hover,
  .service-card:hover,
  .service-card-interactive:hover,
  .glass-panel.rounded-3xl:hover,
  .mega-menu-card:hover,
  [data-card="interactive"]:hover,
  .grid > div[class*="rounded-3xl"][class*="p-"]:not(form):hover,
  .grid > div[class*="rounded-2xl"][class*="p-"]:not(form):hover,
  .grid > article[class*="rounded-3xl"]:hover,
  .grid > article[class*="rounded-2xl"]:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 44px -12px rgba(11, 107, 102, 0.16),
                0 8px 18px -4px rgba(11, 107, 102, 0.08),
                0 0 0 1px rgba(23, 168, 137, 0.3);
    border-color: rgba(23, 168, 137, 0.45) !important;
  }

  /* Reveal Top Accent Line on Hover */
  .interactive-card:hover::before,
  .service-card:hover::before,
  .service-card-interactive:hover::before,
  .glass-panel.rounded-3xl:hover::before,
  .mega-menu-card:hover::before,
  [data-card="interactive"]:hover::before,
  .grid > div[class*="rounded-3xl"][class*="p-"]:not(form):hover::before,
  .grid > div[class*="rounded-2xl"][class*="p-"]:not(form):hover::before,
  .grid > article[class*="rounded-3xl"]:hover::before,
  .grid > article[class*="rounded-2xl"]:hover::before {
    opacity: 1;
    transform: scaleX(1);
  }

  /* Icon Micro-Interaction (Gentle Spring Scale & Lift) */
  .interactive-card:hover .card-icon-bubble,
  .interactive-card:hover .w-12,
  .interactive-card:hover .w-14,
  .service-card:hover .card-icon-bubble,
  .service-card:hover .w-12,
  .service-card:hover .w-14,
  .grid > div[class*="rounded-3xl"][class*="p-"]:hover .w-12,
  .grid > div[class*="rounded-3xl"][class*="p-"]:hover .w-14,
  .grid > div[class*="rounded-2xl"][class*="p-"]:hover .w-12,
  .grid > div[class*="rounded-2xl"][class*="p-"]:hover .w-14 {
    transform: scale(1.12) translateY(-2px);
    box-shadow: 0 8px 20px -3px rgba(11, 107, 102, 0.22);
  }

  .interactive-card:hover .material-symbols-outlined,
  .service-card:hover .material-symbols-outlined,
  .grid > div[class*="rounded-3xl"][class*="p-"]:hover .material-symbols-outlined,
  .grid > div[class*="rounded-2xl"][class*="p-"]:hover .material-symbols-outlined {
    transform: scale(1.06);
    transition: transform 0.3s var(--ease-out-back);
  }

  /* Title Subtle Color Accent Shift */
  .interactive-card:hover h3,
  .interactive-card:hover h4,
  .service-card:hover h3,
  .service-card:hover h4,
  .grid > div[class*="rounded-3xl"][class*="p-"]:hover h3,
  .grid > div[class*="rounded-3xl"][class*="p-"]:hover h4,
  .grid > div[class*="rounded-2xl"][class*="p-"]:hover h3,
  .grid > div[class*="rounded-2xl"][class*="p-"]:hover h4 {
    color: #0B6B66 !important;
  }

  /* Photo Smooth Zoom */
  .interactive-card:hover img,
  .service-card:hover img,
  .glass-panel.rounded-3xl:hover img,
  .grid > div[class*="rounded-3xl"][class*="p-"]:hover img,
  .grid > article[class*="rounded-3xl"]:hover img {
    transform: scale(1.05);
  }

  /* Arrow Link Slide */
  .interactive-card:hover a .material-symbols-outlined,
  .service-card:hover a .material-symbols-outlined,
  .service-card-interactive:hover .card-arrow-icon,
  .grid > div[class*="rounded-3xl"][class*="p-"]:hover a .material-symbols-outlined,
  .grid > article[class*="rounded-3xl"]:hover a .material-symbols-outlined {
    transform: translateX(6px);
    color: #17A889 !important;
  }

  .interactive-card:hover a,
  .service-card:hover a,
  .grid > div[class*="rounded-3xl"][class*="p-"]:hover a,
  .grid > article[class*="rounded-3xl"]:hover a {
    color: #17A889 !important;
  }
}

/* Icon Bubble Transition Base */
.card-icon-bubble,
.interactive-card .w-12,
.interactive-card .w-14,
.service-card .w-12,
.service-card .w-14,
.grid > div[class*="rounded-3xl"][class*="p-"] .w-12,
.grid > div[class*="rounded-3xl"][class*="p-"] .w-14,
.grid > div[class*="rounded-2xl"][class*="p-"] .w-12,
.grid > div[class*="rounded-2xl"][class*="p-"] .w-14 {
  transition: transform 0.4s var(--ease-out-back),
              box-shadow 0.35s ease,
              background-color 0.3s ease,
              color 0.3s ease;
  will-change: transform;
}

/* Arrow Icon Base */
.card-arrow-icon,
.interactive-card a .material-symbols-outlined,
.service-card a .material-symbols-outlined,
.grid > div[class*="rounded-3xl"][class*="p-"] a .material-symbols-outlined,
.grid > article[class*="rounded-3xl"] a .material-symbols-outlined {
  transition: transform 0.3s var(--ease-out-expo), color 0.25s ease;
  display: inline-block;
  will-change: transform;
}

/* Card Images Smooth Zoom Base */
.interactive-card img,
.service-card img,
.glass-panel.rounded-3xl img,
.card-img-zoom,
.grid > div[class*="rounded-3xl"][class*="p-"] img,
.grid > article[class*="rounded-3xl"] img {
  transition: transform 0.65s var(--ease-out-expo);
  will-change: transform;
}

.img-zoom-wrapper {
  overflow: hidden;
}

.img-zoom-wrapper img {
  transition: transform 0.7s var(--ease-out-expo);
  will-change: transform;
}

.group:hover .img-zoom-wrapper img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .interactive-card,
  .service-card,
  .service-card-interactive,
  .glass-panel.rounded-3xl,
  .mega-menu-card,
  [data-card="interactive"],
  .grid > div[class*="rounded-3xl"][class*="p-"],
  .grid > div[class*="rounded-2xl"][class*="p-"],
  .grid > article[class*="rounded-3xl"],
  .grid > article[class*="rounded-2xl"] {
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
  }
  .interactive-card:hover,
  .service-card:hover,
  .service-card-interactive:hover,
  .glass-panel.rounded-3xl:hover,
  .mega-menu-card:hover,
  [data-card="interactive"]:hover,
  .grid > div[class*="rounded-3xl"][class*="p-"]:hover,
  .grid > div[class*="rounded-2xl"][class*="p-"]:hover,
  .grid > article[class*="rounded-3xl"]:hover,
  .grid > article[class*="rounded-2xl"]:hover {
    transform: none !important;
    box-shadow: 0 10px 25px -5px rgba(11, 107, 102, 0.15) !important;
  }
  .interactive-card:hover img,
  .service-card:hover img {
    transform: none !important;
  }
  .interactive-card:hover .card-icon-bubble,
  .interactive-card:hover .w-12,
  .interactive-card:hover .w-14 {
    transform: none !important;
  }
}

/* ==========================================================================
   7. INTERACTIVE BUTTON SYSTEM
   ========================================================================== */
.btn-motion {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s var(--ease-out-expo), background-color 0.25s, box-shadow 0.25s;
  will-change: transform;
}

@media (hover: hover) {
  .btn-motion:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -2px rgba(11, 107, 102, 0.28);
  }

  .btn-motion:hover .btn-icon-slide {
    transform: translateX(4px);
  }
}

.btn-motion:active {
  transform: scale(0.97) translateY(0);
  transition-duration: 0.1s;
}

.btn-icon-slide {
  transition: transform 0.25s var(--ease-out-expo);
}

.btn-primary-shine {
  position: relative;
  overflow: hidden;
  transition: all 0.25s var(--ease-out-expo);
}

.btn-primary-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: rotate(30deg) translateX(-100%);
  transition: transform 0.75s ease;
}

.btn-primary-shine:hover::after {
  transform: rotate(30deg) translateX(100%);
}

.btn-primary-shine:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -2px rgba(11, 107, 102, 0.28);
}

.btn-primary-shine:active {
  transform: translateY(0);
}

/* ==========================================================================
   8. MODERN FAQ ACCORDIONS (Smooth CSS Grid Rows Transition)
   ========================================================================== */
.faq-accordion-item,
.faq-item {
  border-bottom: 1px solid #D9E3F6;
  transition: background-color 0.25s ease;
}

.faq-toggle,
.faq-header {
  transition: color 0.2s ease;
  cursor: pointer;
}

.faq-icon,
.faq-icon-chevron {
  transition: transform 0.35s var(--ease-out-expo);
}

.faq-accordion-item.is-open .faq-icon,
.faq-accordion-item.is-open .faq-icon-chevron,
.faq-item.is-open .faq-icon {
  transform: rotate(180deg);
  color: var(--color-secondary-emerald);
}

/* ==========================================================================
   9. FLOATING ACTION CONTROLS (WhatsApp & Back-to-Top)
   ========================================================================== */
.whatsapp-floating-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 90;
  width: 60px;
  height: 60px;
  border-radius: 9999px;
  background-color: #25D366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
  text-decoration: none;
}

.whatsapp-floating-btn:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.55);
}

.whatsapp-pulse {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background-color: #25D366;
  opacity: 0.6;
  animation: pulseRipple 2.2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  z-index: -1;
}

@keyframes pulseRipple {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}

.whatsapp-tooltip {
  position: absolute;
  right: calc(100% + 14px);
  white-space: nowrap;
  background: rgba(18, 28, 42, 0.92);
  color: #ffffff;
  font-size: 0.825rem;
  font-weight: 600;
  padding: 0.5rem 0.85rem;
  border-radius: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: all 0.2s var(--ease-out-expo);
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.whatsapp-floating-btn:hover .whatsapp-tooltip,
.whatsapp-floating-btn:focus-visible .whatsapp-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Floating Back-to-Top Button */
.back-to-top-btn {
  position: fixed;
  bottom: 6.5rem;
  right: 2rem;
  z-index: 85;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: #FFFFFF;
  color: var(--color-primary-teal);
  border: 1px solid rgba(11, 107, 102, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(11, 107, 102, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo), visibility 0.3s, background-color 0.2s, color 0.2s;
  cursor: pointer;
}

.back-to-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top-btn:hover {
  background-color: var(--color-primary-teal);
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(11, 107, 102, 0.25);
}

.back-to-top-btn:active {
  transform: scale(0.95);
}

@media (max-width: 639px) {
  .whatsapp-floating-btn {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 54px;
    height: 54px;
  }
  .back-to-top-btn {
    bottom: 5.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
  }
}

/* ==========================================================================
   10. PAGE-TO-PAGE VIEW TRANSITIONS (Native API & Fallback)
   ========================================================================== */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 0.25s cubic-bezier(0.4, 0, 1, 1) both pageFadeOut;
}

::view-transition-new(root) {
  animation: 0.35s cubic-bezier(0, 0, 0.2, 1) both pageFadeIn;
}

@keyframes pageFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   11. LUXURY LIQUID WATER FOOTER ANIMATION SYSTEM
   ========================================================================== */
.luxury-water-wrapper {
  position: relative;
  width: 100%;
  height: 125px; /* Desktop default: 100-140px requirement */
  margin-bottom: -1px; /* seamless sub-pixel connection with solid footer body */
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 10;
}

@media (max-width: 1023px) {
  .luxury-water-wrapper {
    height: 95px; /* Tablet: 80-100px requirement */
  }
}

@media (max-width: 639px) {
  .luxury-water-wrapper {
    height: 65px; /* Mobile: 55-75px requirement */
  }
}

.luxury-water-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%; /* Double width for seamless 100% horizontal translation */
  height: 100%;
  display: block;
  will-change: transform;
}

/* Backward compatibility aliases */
.footer-wave-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
.footer-waves {
  width: 100%;
  height: 100%;
}

/* Layer 1: Deep Oceanic Swell - 22s slow horizontal flow */
.water-flow-layer-1 {
  will-change: transform;
  animation: waterFlowX 22s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* Layer 2: Emerald Flow - 16s counter-flow with organic swell */
.water-flow-layer-2 {
  will-change: transform;
  animation: waterFlowXReverse 16s cubic-bezier(0.42, 0, 0.58, 1) infinite,
             waterSwell 7s ease-in-out infinite alternate;
}

/* Layer 3: Caustic Highlight Ribbon - 13s gliding reflection with shimmer */
.water-flow-layer-3 {
  will-change: transform, opacity;
  animation: waterFlowX 13s cubic-bezier(0.4, 0, 0.6, 1) infinite,
             waterShimmer 6s ease-in-out infinite alternate;
}

/* Layer 4: Foreground Surge - 19s forward surge anchoring seamlessly into footer */
.water-flow-layer-4 {
  will-change: transform;
  animation: waterFlowX 19s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
             waterSwellFore 9s ease-in-out infinite alternate;
}

/* Moving Specular Reflection Sheen across the water surface */
.water-reflection-sheen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse 60% 80px at var(--sheen-x, 30%) 40px, rgba(255, 255, 255, 0.22), rgba(66, 198, 178, 0.10) 45%, transparent 70%);
  mix-blend-mode: overlay;
  animation: sheenPass 14s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 2;
}

/* Seamless Horizontal Translation (-50% is exactly 1 full cycle of 1440px) */
@keyframes waterFlowX {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes waterFlowXReverse {
  0% { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Vertical swell keyframes for organic water breathing */
@keyframes waterSwell {
  0% { transform: translateY(0px) scaleY(1); }
  50% { transform: translateY(-4px) scaleY(1.06); }
  100% { transform: translateY(2px) scaleY(0.96); }
}

@keyframes waterSwellFore {
  0% { transform: translateY(0px) scaleY(1); }
  50% { transform: translateY(3px) scaleY(0.97); }
  100% { transform: translateY(-3px) scaleY(1.04); }
}

@keyframes waterShimmer {
  0% { opacity: 0.65; }
  50% { opacity: 1.0; }
  100% { opacity: 0.75; }
}

@keyframes sheenPass {
  0% { transform: translateX(-35%); opacity: 0.3; }
  50% { opacity: 0.85; }
  100% { transform: translateX(35%); opacity: 0.4; }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #F8F9FF;
}
::-webkit-scrollbar-thumb {
  background: #bec9c7;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0B6B66;
}

/* ==========================================================================
   12. ACCESSIBILITY & REDUCED MOTION (WCAG 2.2 AA)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .cinematic-splash,
  #splash-screen {
    display: none !important;
  }

  .parallax-float-slow,
  .parallax-float-fast,
  .hero-parallax-img,
  [data-parallax] {
    transform: none !important;
  }

  .motion-fade-up,
  .motion-fade-down,
  .motion-slide-left,
  .motion-slide-right,
  .motion-scale,
  .motion-clip,
  .reveal-fade-up,
  .reveal-slide-left,
  .reveal-slide-right,
  [data-motion] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .motion-stagger .stagger-animated-item,
  [data-motion="stagger"] .stagger-animated-item {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
  }

  .luxury-water-svg,
  .water-flow-layer-1,
  .water-flow-layer-2,
  .water-flow-layer-3,
  .water-flow-layer-4,
  .water-reflection-sheen {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  animate {
    display: none !important;
  }
}


/* CodeKap Signature Styling */
.codekap-credit a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(249, 178, 51, 0.6);
  text-underline-offset: 4px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.codekap-credit a:hover {
  color: #F9B233;
  text-decoration-color: #F9B233;
}