/* ❤️ HIKKADUWA HIKKA SURF SCHOOL - MASTER LUXURY STYLES (Inspired by thesurferweligama.com/en) */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,700;1,800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

:root {
  /* Brand Palette (WCAG 2.1 AA Compliant - 4.5:1 text, 3:1 UI components) */
  --color-primary-navy: #0A2540;       /* Deep Coastal Navy (14.2:1 against white) */
  --color-primary-navy-deep: #061726;  /* Midnight Black/Navy */
  --color-cta-coral: #E85D04;          /* Warm Sunset Coral / Primary CTA (4.62:1 against white) */
  --color-cta-coral-hover: #D04F00;    /* Darkened for Hover state */
  --color-surf-teal: #0E7490;          /* Deep Tropical Ocean Teal (4.54:1 against white) */
  --color-surf-teal-light: #38BDF8;    /* Lighter Teal for dark background accents */
  --color-whatsapp: #128C7E;           /* Accessible WhatsApp Brand Green (4.64:1 on white) */
  --color-whatsapp-bright: #25D366;    /* Bright WhatsApp Green for floating badges */

  /* Surfacing & Neutrals */
  --bg-primary: #FFFFFF;              /* Pure white base */
  --bg-subtle: #F8F9FA;               /* Soft sand off-white for alternating sections */
  --bg-dark: #12161A;                 /* Deep charcoal/midnight black for footer & dark cards */
  --accent-ocean: #0E7490;            /* Accessible marine teal */
  --accent-navy: #0A2540;             /* Coastal navy for headings and primary buttons */
  --accent-border: #E2E8F0;           /* Subtle card borders and dividers */
  --accent-amber: #D97706;            /* High-contrast amber for star ratings */
  --accent-whatsapp: #128C7E;         /* Accessible WhatsApp action green */
  --text-heading: #0A2540;            /* Ultra-dark slate for titles */
  --text-body: #334155;               /* Slate gray for readable body text (8.63:1 contrast) */
  --text-muted: #64748B;              /* Muted text for micro-labels and metadata */
  
  --font-heading: 'Montserrat', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Montserrat', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

html, body {
  overflow-x: hidden !important;
  width: 100%;
  max-width: 100vw;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-body);
  letter-spacing: -0.01em;
  line-height: 1.6;
}

/* Prevent iOS Safari 16px auto-zoom on input focus */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* iOS Safe Area Inset Utility */
.pb-safe {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
}

h1, h2, h3, h4, h5, h6, .font-heading, .font-serif-heading {
  font-family: var(--font-heading);
  color: inherit;
  letter-spacing: -0.02em;
}

/* Ensure headings inside dark sections, headers, and banners are always crisp high-contrast white */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.text-white .font-heading, .text-white .font-serif-heading,
[class*="bg-ocean"] h1, [class*="bg-ocean"] h2, [class*="bg-ocean"] h3, [class*="bg-ocean"] h4,
[class*="bg-ocean"] .font-heading, [class*="bg-ocean"] .font-serif-heading,
[class*="bg-slate-900"] h1, [class*="bg-slate-900"] h2, [class*="bg-slate-900"] h3,
[class*="bg-slate-900"] .font-heading, [class*="bg-slate-900"] .font-serif-heading,
[class*="from-ocean"] h1, [class*="from-ocean"] h2, [class*="from-ocean"] h3,
[class*="from-ocean"] .font-heading, [class*="from-ocean"] .font-serif-heading,
[class*="bg-gray-900"] h1, [class*="bg-gray-900"] h2, [class*="bg-gray-900"] h3,
[class*="bg-gray-900"] .font-heading, [class*="bg-gray-900"] .font-serif-heading,
[class*="from-black"] h1, [class*="from-black"] h2, [class*="from-black"] h3,
[class*="from-black"] .font-heading, [class*="from-black"] .font-serif-heading {
  color: #FFFFFF !important;
}

/* Ensure headings inside light cards retain crisp dark navy text even within dark sections */
.bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4, .bg-white h5, .bg-white h6,
.bg-slate-50 h1, .bg-slate-50 h2, .bg-slate-50 h3, .bg-slate-50 h4,
.bg-gray-50 h1, .bg-gray-50 h2, .bg-gray-50 h3, .bg-gray-50 h4 {
  color: #0A2540;
}

/* Persistent Luxury Coastal Navy Navbar - Never turns transparent or white */
#main-navbar {
  background-color: #083344 !important;
  background: rgba(8, 51, 68, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#main-navbar a.text-white,
#main-navbar button.text-white,
#main-navbar span.text-white {
  color: #FFFFFF !important;
}

/* Glassmorphism & Surface Styles */
.glass-panel {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--accent-border);
}

.glass-dark {
  background: rgba(10, 37, 64, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Brand Navbar Logo Styles - Sleek, Crisp & Responsive */
.brand-logo-container {
  flex-shrink: 0 !important;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  z-index: 50;
}

.brand-logo-img {
  height: 38px !important;
  min-height: 34px !important;
  max-height: 52px !important;
  width: auto !important;
  object-fit: contain;
  display: block;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease;
}

@media (min-width: 640px) {
  .brand-logo-img {
    height: 42px !important;
    min-height: 38px !important;
  }
}

@media (min-width: 1024px) {
  .brand-logo-img {
    height: 46px !important;
    min-height: 42px !important;
  }
}

@media (min-width: 1280px) {
  .brand-logo-img {
    height: 50px !important;
    min-height: 46px !important;
  }
}

.brand-logo-container:hover .brand-logo-img {
  transform: scale(1.03);
}

/* Google Translate Frame & Banner Styling - Keep Layout Clean */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}

body {
  top: 0px !important;
}

.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#google_translate_element {
  display: none !important;
}

/* Card Transitions & Hover Effects */
.surfer-card {
  border-radius: 1rem; /* 16px */
  border: 1px solid var(--accent-border);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.06);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.surfer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -10px rgba(0, 132, 180, 0.15), 0 10px 15px -5px rgba(0, 0, 0, 0.04);
}

/* The Surfer Weligama Accent Underline Bar */
.our-home-base-bar {
  width: 50px;
  height: 3px;
  background: var(--accent-ocean);
  border-radius: 9999px;
  margin: 0.5rem auto;
}

.gold-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-amber), var(--accent-ocean));
  border-radius: 9999px;
}

/* Auto-Swapping Hero Slideshow */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out, transform 6s cubic-bezier(0.25, 1, 0.5, 1);
  transform: scale(1.05);
  z-index: 1;
}

.hero-slide.active {
  opacity: 0.75;
  transform: scale(1);
  z-index: 2;
}

/* Hero Slide Dots Indicator */
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.45);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0;
}

.hero-dot:hover {
  background-color: rgba(255, 255, 255, 0.85);
  transform: scale(1.15);
}

.hero-dot.active {
  width: 24px;
  background-color: #fde047;
  border-color: #fde047;
  box-shadow: 0 0 10px rgba(253, 224, 71, 0.5);
}


/* Middle Cinematic Slideshow */
.middle-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out, transform 5s ease;
  transform: scale(1.04);
  z-index: 1;
}

.middle-slide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* Auto-Swapping Activity Card Slider */
.card-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease;
}

.card-slide-img.active {
  opacity: 1;
}

/* Pulse Glow WhatsApp Button */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-glow {
  animation: pulseGlow 2.2s infinite;
}

/* Sticky Mobile Conversion Bar & Viewport Clearance */
@media (max-width: 1023px) {
  body {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  /* Prevent duplicate round floating WhatsApp button from covering mobile content or sticky bar */
  .whatsapp-glow,
  .fixed.bottom-6.right-6 {
    display: none !important;
  }
}

#sticky-mobile-bar {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease-in-out;
  padding-bottom: max(0.625rem, env(safe-area-inset-bottom, 0px));
  z-index: 45;
}

/* Mobile Menu Open State: Background Scroll Lock & Bottom Bar Clearance */
body.mobile-menu-open {
  overflow: hidden !important;
  touch-action: none;
}

body.mobile-menu-open #sticky-mobile-bar {
  transform: translateY(115%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Mobile Menu Container: Strict clearance above fixed bottom action bar */
#mobile-menu {
  max-height: calc(100vh - 13.5rem) !important;
  max-height: calc(100dvh - 13.5rem) !important;
  max-height: calc(100svh - 13.5rem) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding-bottom: 7rem !important; /* 112px bottom padding clearance */
  box-sizing: border-box !important;
}

/* Guaranteed scroll spacer for WebKit/iOS devices */
#mobile-menu::after {
  content: "";
  display: block;
  height: 5.5rem; /* 88px physical buffer at the end of the menu */
  width: 100%;
  pointer-events: none;
}

#mobile-menu::-webkit-scrollbar {
  width: 4px;
}

#mobile-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
}


/* Scroll Reveal Animations (Progressive Enhancement - Fail-Safe) */
.reveal-on-scroll {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Only hide if JS is confirmed active */
.js-ready .reveal-on-scroll:not(.is-visible) {
  opacity: 0;
  transform: translateY(24px);
}

.reveal-on-scroll.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Smooth Accordions */
.faq-content {
  transition: max-height 0.3s ease-out;
}

/* ===== HIGH-CONVERTING LUXURY HERO BUTTONS ===== */
.btn-hero-emerald {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #0d9488 100%);
  box-shadow: 0 10px 25px -3px rgba(16, 185, 129, 0.45), 0 4px 6px -2px rgba(16, 185, 129, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.btn-hero-emerald:hover {
  background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #14b8a6 100%);
  box-shadow: 0 18px 35px -5px rgba(16, 185, 129, 0.65), 0 8px 12px -3px rgba(16, 185, 129, 0.35);
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.6);
}

.btn-hero-emerald:active {
  transform: translateY(1px) scale(0.98);
}

.btn-hero-glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-glass:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(103, 232, 249, 0.8); /* cyan-300 */
  box-shadow: 0 15px 30px -5px rgba(6, 182, 212, 0.3), 0 0 20px rgba(103, 232, 249, 0.2);
  transform: translateY(-2px) scale(1.02);
  color: #cffafe !important; /* cyan-100 */
}

.btn-hero-glass:active {
  transform: translateY(1px) scale(0.98);
}

/* Button Shimmer Sweep Effect */
.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: none;
  pointer-events: none;
}

.btn-shimmer:hover::after {
  left: 200%;
  transition: all 0.85s ease-in-out;
}

/* ===== ANIMATED SURFER LOGO ===== */

/* Main surfer wave-ride animation: smooth bobbing + tilting like riding a wave */
@keyframes surferRide {
  0%   { transform: translateY(0px) rotate(0deg); }
  15%  { transform: translateY(-6px) rotate(-4deg); }
  30%  { transform: translateY(-2px) rotate(2deg); }
  50%  { transform: translateY(-8px) rotate(-3deg) scale(1.05); }
  70%  { transform: translateY(-3px) rotate(3deg); }
  85%  { transform: translateY(-7px) rotate(-2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* Gentle side-to-side glide */
@keyframes surferGlide {
  0%   { transform: translateX(0px) translateY(0px); }
  25%  { transform: translateX(3px) translateY(-5px) rotate(-3deg); }
  50%  { transform: translateX(-2px) translateY(-8px) rotate(2deg) scale(1.06); }
  75%  { transform: translateX(4px) translateY(-4px) rotate(-2deg); }
  100% { transform: translateX(0px) translateY(0px); }
}

/* Water splash / ripple pulse */
@keyframes splashPulse {
  0%   { text-shadow: 0 0 0 rgba(2, 132, 199, 0); }
  50%  { text-shadow: 0 0 18px rgba(2, 132, 199, 0.35), 0 0 40px rgba(2, 132, 199, 0.15); }
  100% { text-shadow: 0 0 0 rgba(2, 132, 199, 0); }
}

.surfer-animated {
  display: inline-block;
  animation: surferRide 3s ease-in-out infinite, splashPulse 3s ease-in-out infinite;
  transform-origin: center bottom;
  cursor: default;
  transition: transform 0.3s ease;
}

.surfer-animated:hover {
  animation: surferGlide 1.5s ease-in-out infinite, splashPulse 1.5s ease-in-out infinite;
  transform: scale(1.15) rotate(-5deg);
}

/* Gentle floating animation for other activity icons (🐢🎣🚤🐋🌴🚕🤿) */
@keyframes gentleFloat {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-4px); }
  100% { transform: translateY(0px); }
}

.icon-float {
  display: inline-block;
  animation: gentleFloat 2.5s ease-in-out infinite;
}

.icon-float:nth-child(2) { animation-delay: 0.3s; }
.icon-float:nth-child(3) { animation-delay: 0.6s; }
.icon-float:nth-child(4) { animation-delay: 0.9s; }

/* ===== SURF INTRO SHOWCASE SLIDES ===== */
.surf-intro-slide {
  transform: scale(1.03);
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 6s ease-out;
}

.surf-intro-slide.active {
  transform: scale(1.08);
}

/* ===== ANIMATED SNORKELER & WATER BUBBLES ===== */
@keyframes diverSwimGlide {
  0% {
    transform: translate(0px, 0px) rotate(3deg);
  }
  25% {
    transform: translate(12px, -8px) rotate(-2deg);
  }
  50% {
    transform: translate(25px, 2px) rotate(4deg);
  }
  75% {
    transform: translate(14px, -6px) rotate(-1deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(3deg);
  }
}

@keyframes finKick {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-18deg);
  }
}

@keyframes bubbleFloatUp {
  0% {
    transform: translateY(100%) translateX(0px) scale(0.6);
    opacity: 0;
  }
  15% {
    opacity: 0.85;
  }
  50% {
    transform: translateY(40%) translateX(12px) scale(0.9);
    opacity: 0.75;
  }
  85% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(-120%) translateX(-10px) scale(1.15);
    opacity: 0;
  }
}

@keyframes bubbleShimmer {
  0%, 100% {
    box-shadow: 0 0 4px rgba(56, 189, 248, 0.4), inset 0 0 4px rgba(255, 255, 255, 0.8);
  }
  50% {
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.8), inset 0 0 8px rgba(255, 255, 255, 0.95);
  }
}

.snorkeler-swim-container {
  animation: diverSwimGlide 6s ease-in-out infinite;
  transform-origin: center center;
  filter: drop-shadow(0 10px 20px rgba(0, 132, 180, 0.35));
  transition: all 0.5s ease;
}

.diver-fin {
  animation: finKick 1.4s ease-in-out infinite;
  transform-origin: 15% 50%;
}

.water-bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85), rgba(56, 189, 248, 0.4) 60%, rgba(14, 116, 144, 0.2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  pointer-events: none;
  animation: bubbleFloatUp var(--bubble-duration, 5s) linear infinite, bubbleShimmer 3s ease-in-out infinite;
  animation-delay: var(--bubble-delay, 0s);
  left: var(--bubble-left, 50%);
  bottom: 0;
  width: var(--bubble-size, 16px);
  height: var(--bubble-size, 16px);
}

/* ===== ANIMATED AIRPORT TAXI & EXPRESSWAY ROAD ===== */
@keyframes taxiDriveTrack {
  0% {
    left: -70px;
    transform: translateY(-50%) scaleX(1);
  }
  48% {
    transform: translateY(calc(-50% - 1.5px)) scaleX(1);
  }
  50% {
    left: calc(100% + 20px);
    transform: translateY(-50%) scaleX(1);
  }
  50.1% {
    left: calc(100% + 20px);
    transform: translateY(-50%) scaleX(-1);
  }
  98% {
    transform: translateY(calc(-50% - 1.5px)) scaleX(-1);
  }
  100% {
    left: -70px;
    transform: translateY(-50%) scaleX(-1);
  }
}

@keyframes wheelSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes roadDashes {
  0% { background-position: 0px 0; }
  100% { background-position: -40px 0; }
}

@keyframes taxiMascotBounce {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-3px) rotate(-2deg);
  }
  75% {
    transform: translateY(2px) rotate(2deg);
  }
}

.expressway-road-strip {
  position: relative;
  height: 42px;
  background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}

.expressway-dashed-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, #38bdf8 0, #38bdf8 16px, transparent 16px, transparent 32px);
  animation: roadDashes 0.7s linear infinite;
  opacity: 0.75;
}

.animated-taxi-vehicle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  animation: taxiDriveTrack 9s ease-in-out infinite;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
  z-index: 10;
}

.taxi-wheel {
  animation: wheelSpin 0.4s linear infinite;
  transform-origin: center center;
}

.taxi-bounce-icon {
  animation: taxiMascotBounce 2s ease-in-out infinite;
  display: inline-block;
}

/* ===== DYNAMIC AREA-BASED ENVIRONMENT STAGE & ANIMATIONS ===== */
.scenic-env-stage {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(251, 191, 36, 0.4);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.8), 0 10px 25px -5px rgba(0, 0, 0, 0.6);
  background: #090d16;
}

@media (max-width: 640px) {
  .scenic-env-stage {
    height: 105px;
  }
}

/* Individual Environment Scenes */
.env-scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.97);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.65s;
  pointer-events: none;
}

.env-scene.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}

/* Scene 1: HOME (Hikkaduwa Narigama Beach & Surf Base) */
.env-scene-home {
  background: linear-gradient(90deg, #072e4a 0%, #0369a1 28%, #0284c7 55%, #0d9488 80%, #15803d 100%);
}

/* Scene 2: SURF LESSONS (Narigama Surf Breaks & Barrel Waves) */
.env-scene-surfing {
  background: linear-gradient(90deg, #082f49 0%, #0284c7 30%, #38bdf8 65%, #06b6d4 85%, #0e7490 100%);
}

/* Scene 3: DESTINATIONS & DAY TRIPS (Galle Fort & Yala Safari) */
.env-scene-destinations {
  background: linear-gradient(90deg, #0f172a 0%, #1e1b4b 28%, #78350f 65%, #451a03 100%);
}

/* Scene 4: ACTIVITIES & OCEAN SAFARIS (Marine Sanctuary, Turtles & Mangroves) */
.env-scene-activities {
  background: linear-gradient(90deg, #022c22 0%, #065f46 30%, #0d9488 65%, #0284c7 100%);
}

/* Scene 5: AIRPORT TRANSFERS (24/7 Colombo CMB Expressway Highway) */
.env-scene-transfers {
  background: linear-gradient(90deg, #020617 0%, #0f172a 35%, #1e293b 70%, #0f766e 100%);
}

/* Surfer Riding Wave Micro-Animation */
.surfer-wave-rider {
  animation: surferRide 3.2s ease-in-out infinite alternate;
}
@keyframes surferRide {
  0% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-4px) rotate(4deg); }
  100% { transform: translateY(-1px) rotate(-2deg); }
}

/* Turtle Swimming Micro-Animation */
.turtle-swim-anim {
  animation: turtleSwim 4.5s ease-in-out infinite alternate;
}
@keyframes turtleSwim {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(6px, -3px) rotate(-3deg); }
  100% { transform: translate(12px, 1px) rotate(2deg); }
}

/* Scene Vector Graphics */
.env-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Scene Floating Elements & Micro-Animations */
.palm-sway-anim {
  transform-origin: bottom center;
  animation: palmSway 4s ease-in-out infinite alternate;
}
.palm-sway-anim-2 {
  transform-origin: bottom center;
  animation: palmSway 4.8s ease-in-out 1.2s infinite alternate;
}

.lighthouse-sweep-anim {
  transform-origin: 75px 22px;
  animation: lighthouseSweep 5s ease-in-out infinite;
}

.whale-fluke-anim {
  transform-origin: center bottom;
  animation: whaleDive 4.2s ease-in-out infinite;
}

.river-ripple-anim {
  animation: riverFlow 3s ease-in-out infinite alternate;
}

.elephant-tail-anim {
  transform-origin: center top;
  animation: elephantEarFlap 3s ease-in-out infinite;
}

/* Floating Atmosphere Fireflies / Sea Mist Particles */
.particle-glow {
  animation: particleFloat 4s ease-in-out infinite alternate;
}
@keyframes particleFloat {
  0% { transform: translateY(0) scale(0.8); opacity: 0.3; }
  50% { transform: translateY(-4px) scale(1.1); opacity: 0.9; }
  100% { transform: translateY(-8px) scale(0.8); opacity: 0.4; }
}

/* Ground Road / River Channel Base */
.env-ground-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(2, 6, 23, 0.98) 100%);
  border-top: 1.5px solid rgba(251, 191, 36, 0.4);
}

.env-water-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: linear-gradient(180deg, rgba(4, 120, 87, 0.85) 0%, rgba(2, 44, 34, 0.95) 100%);
  border-top: 1.5px solid rgba(52, 211, 153, 0.5);
}

.env-dashes {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, #f59e0b 0, #f59e0b 14px, transparent 14px, transparent 28px);
  animation: trailDashes 0.75s linear infinite;
  opacity: 0.8;
}

/* Area-Specific Animated Vehicles */
.env-vehicle-wrap {
  position: absolute;
  bottom: 12px;
  z-index: 10;
  animation: vehicleCruising 11s linear infinite;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.9));
}

@keyframes vehicleCruising {
  0% { left: -100px; opacity: 0; }
  3% { opacity: 1; }
  97% { opacity: 1; }
  100% { left: calc(100% + 20px); opacity: 0; }
}

.boat-water-bob {
  animation: boatBob 1.6s ease-in-out infinite alternate;
}
@keyframes boatBob {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(1.2deg); }
  100% { transform: translateY(1px) rotate(-1deg); }
}

.jeep-chassis-bob {
  animation: jeepBobbing 0.45s ease-in-out infinite alternate;
}
@keyframes jeepBobbing {
  0% { transform: translateY(0); }
  100% { transform: translateY(-1.5px); }
}

/* Precise Wheel Hub Spinning Animations */
@keyframes wheelSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.wheel-front-spin {
  transform-origin: 28px 32px;
  animation: wheelSpin 0.35s linear infinite;
}

.wheel-rear-spin {
  transform-origin: 82px 32px;
  animation: wheelSpin 0.35s linear infinite;
}

/* Area Selector Interactive Tabs & Live Badge */
.area-tab-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.area-tab-btn.active {
  background: rgba(251, 191, 36, 0.2) !important;
  border-color: #fbbf24 !important;
  color: #fef08a !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
  transform: translateY(-1px);
}

.journey-progress-fill {
  transition: width 0.1s linear;
}

/* Interactive Destination Cards with Active Glowing State */
.dest-interactive-card {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.dest-interactive-card.card-active {
  border-color: #fbbf24 !important;
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.35), inset 0 0 8px rgba(251, 191, 36, 0.2);
  transform: translateY(-2px);
}
.dest-interactive-card:hover:not(.card-active) {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1.5px);
}





/* Robust Hero Gradient Overlay (WCAG Compliant - Guarantees 100% Text Legibility) */
.hero-gradient-overlay {
  background: linear-gradient(
    180deg,
    rgba(10, 37, 64, 0.90) 0%,
    rgba(10, 37, 64, 0.65) 50%,
    rgba(6, 23, 38, 0.96) 100%
  ) !important;
}

/* Primary CTA Button (Accessible Coral/Sunset Orange) */
.btn-primary-cta {
  background-color: var(--color-cta-coral);
  color: #FFFFFF !important;
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.85rem 1.75rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-transform: uppercase;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 20px -5px rgba(232, 93, 4, 0.4);
}

.btn-primary-cta:hover {
  background-color: var(--color-cta-coral-hover);
  transform: translateY(-2px);
  box-shadow: 0 15px 25px -5px rgba(232, 93, 4, 0.55);
}

.btn-primary-cta:active {
  transform: translateY(1px);
}

/* Secondary / Ghost Action Button */
.btn-secondary-ghost {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #FFFFFF !important;
  border: 2px solid rgba(255, 255, 255, 0.4);
  font-family: var(--font-heading);
  font-weight: 700;
  padding: 0.8rem 1.6rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-transform: uppercase;
  transition: all 0.25s ease;
}

.btn-secondary-ghost:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: #FFFFFF;
  transform: translateY(-2px);
}

.btn-secondary-ghost:active {
  transform: translateY(1px);
}

/* Responsive Header Action Isolation (Prevents FOUC / button stacking) */
@media (min-width: 1024px) {
  .header-mobile-action {
    display: none !important;
  }
  .header-desktop-action {
    display: flex !important;
  }
}

@media (max-width: 1023px) {
  .header-desktop-action {
    display: none !important;
  }
  .header-mobile-action {
    display: flex !important;
  }
}