/* ===================== RESET & BASE ===================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #EFF6FF; }   /* blue-50 — whole page is light-blue tinted */

/* ===================== FONTS ===================== */
body { font-family: 'Plus Jakarta Sans', 'Poppins', 'Inter', system-ui, sans-serif; }
.font-display { font-family: 'Plus Jakarta Sans', 'Poppins', system-ui, sans-serif; }

/* ===================== DESIGN TOKENS ===================== */
:root {
  --accent:      37 99 235;       /* #2563EB  — blue-600 */
  --accent-hex:  #2563EB;
  --navy:        #0D2151;         /* deep navy blue for dark sections */
  --navy-dark:   #071232;         /* darkest navy — footer, header bg */
}

/* ===================== GLASS MORPHISM ===================== */
.glass {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.10);
}
.glass-strong {
  background: rgba(13,33,81,0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.14);
}

/* ===================== BUTTONS ===================== */
.btn-primary {
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  color: #fff;
  font-weight: 600;
  transition: opacity .2s ease, transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 4px 16px -4px rgba(37,99,235,.5);
}
.btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -4px rgba(37,99,235,.55);
}

.btn-ghost {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  transition: background .2s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,0.20); }

/* ===================== STRIPES PATTERN ===================== */
.ph-stripes {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(255,255,255,0.015) 10px,
    rgba(255,255,255,0.015) 20px
  );
}

/* ===================== SHINE TEXT ===================== */
.shine {
  background: linear-gradient(135deg, #93C5FD 0%, #FFFFFF 50%, #93C5FD 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shineSweep 4s linear infinite;
}
@keyframes shineSweep {
  to { background-position: 200% center; }
}

/* ===================== SQUIGGLE UNDERLINE ===================== */
.squiggle { position: relative; display: inline-block; }
.squiggle::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10'%3E%3Cpath d='M0 5 Q15 0 30 5 Q45 10 60 5 Q75 0 90 5 Q105 10 120 5' stroke='%233B82F6' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center;
  background-size: auto 5px;
}

/* ===================== GLOW EFFECTS ===================== */
.shadow-glow         { box-shadow: 0 8px 40px -8px rgba(37,99,235,.45); }
.hover\:shadow-glow:hover { box-shadow: 0 8px 40px -8px rgba(37,99,235,.55); }
.glow-edge {
  box-shadow: 0 0 0 1px rgba(37,99,235,.25),
              0 24px 80px -16px rgba(29,78,216,.50);
}

/* ===================== DOTTED LINE DIVIDER ===================== */
.dotted-line {
  border: none;
  border-top: 2px dashed currentColor;
  margin: 0;
}

/* ===================== FLOAT ANIMATIONS ===================== */
@keyframes floatSlow   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes floatSlower { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.float-slow   { animation: floatSlow   3s ease-in-out infinite; }
.float-slower { animation: floatSlower 4.5s ease-in-out infinite; }

/* ===================== SHAKE ===================== */
@keyframes shake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.shake { animation: shake .5s ease-out; }

/* ===================== SCREEN ENTER ===================== */
@keyframes screenEnter {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
.screen-enter { animation: screenEnter .45s ease-out; }

/* ===================== TABULAR NUMS ===================== */
.tabular { font-variant-numeric: tabular-nums; }

/* ===================== SCROLLBAR ===================== */
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }
::-webkit-scrollbar       { width:6px; }
::-webkit-scrollbar-track { background:#0D2151; }
::-webkit-scrollbar-thumb { background:#3B82F6; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:#2563EB; }
.scrollbar-hide::-webkit-scrollbar { display:none; }
.scrollbar-hide { -ms-overflow-style:none; scrollbar-width:none; }

/* ===================== iOS SAFE AREA ===================== */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0); }

/* ===================== LEGACY BUBBLES ===================== */
.bubble { position:absolute; border-radius:50%; background:rgba(255,255,255,.08); animation:floatBubble linear infinite; }
.bubble-1 { width:80px;  height:80px;  left:10%; animation-duration:8s; }
.bubble-2 { width:120px; height:120px; left:30%; animation-duration:12s; animation-delay:2s; }
.bubble-3 { width:60px;  height:60px;  left:60%; animation-duration:10s; animation-delay:1s; }
.bubble-4 { width:100px; height:100px; left:80%; animation-duration:9s;  animation-delay:3s; }
@keyframes floatBubble {
  0%{bottom:-120px;opacity:0} 10%{opacity:.8} 90%{opacity:.3} 100%{bottom:110%;opacity:0}
}

/* ===================== WAVE UNDERLINE ===================== */
@keyframes waveDraw {
  from{stroke-dashoffset:600;opacity:0} 20%{opacity:1} to{stroke-dashoffset:0;opacity:1}
}
.wave-underline path { stroke-dasharray:600; stroke-dashoffset:600; animation:waveDraw 1.8s ease-out forwards .4s; }

/* ===================== PARK CARD ===================== */
.park-card { transition:transform .35s cubic-bezier(.34,1.2,.64,1),box-shadow .35s ease; }
.park-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(59,130,246,.12);
}

/* ===================== LINE CLAMP ===================== */
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-4 { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

/* ===================== CALENDAR ===================== */
#calGrid button { min-height:48px; }

/* ===================== DETAIL TABS ===================== */
.detail-tab { border-bottom:2px solid transparent; }
.detail-tab.active { background-color:#1E40AF; color:white; }

/* ===================== PROSE (Blog) ===================== */
.prose h2  { font-size:1.5rem;  font-weight:700; margin:1.5em 0 .5em; color:#111827; }
.prose h3  { font-size:1.25rem; font-weight:600; margin:1.2em 0 .4em; }
.prose p   { margin-bottom:1em; line-height:1.75; }
.prose ul  { list-style:disc; padding-left:1.5em; margin-bottom:1em; }
.prose li  { margin-bottom:.25em; }
.prose a   { color:#2563EB; text-decoration:underline; }
.prose img { border-radius:12px; margin:1.5em auto; max-width:100%; }

/* ===================== PRINT ===================== */
@media print {
  header, footer, nav, .no-print { display:none !important; }
  body { background:white !important; }
}

/* ===================== FADE IN ===================== */
.fade-in { opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ===================== SMOOTH TRANSITIONS ===================== */
a, button {
  transition-property: color,background-color,border-color,box-shadow,transform,opacity;
  transition-timing-function: ease;
  transition-duration: 150ms;
}

/* ===================== INPUTS ===================== */
input[type="date"]::-webkit-calendar-picker-indicator { opacity:.6; cursor:pointer; }
input[type="range"] { accent-color:#2563EB; }

/* ===================== UNDERWATER BUBBLES ===================== */
.uw-bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* All animation background layers stay behind content */
.uw-caustics,
.hero-bubbles,
.hero-rings,
.wave-divider { z-index: 0; }
/* Any direct child of a section that holds real content must be above layers */
section > .relative,
section > div:not(.uw-bubbles):not(.uw-caustics):not([aria-hidden]) { position: relative; z-index: 1; }
.ub {
  position: absolute;
  bottom: -60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), rgba(147,197,253,.07) 60%, transparent);
  border: 1px solid rgba(255,255,255,.13);
  animation: uwRise linear infinite;
}
@keyframes uwRise {
  0%   { transform: translateY(0) translateX(0)  scale(1);   opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translateY(-50vh) translateX(12px)  scale(1.04); }
  92%  { opacity: .5; }
  100% { transform: translateY(-115vh) translateX(-8px) scale(1.1); opacity: 0; }
}

/* Dark-section bubbles (navy/blue backgrounds) */
.ub-dark { border-color: rgba(255,255,255,.12); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.16), rgba(96,165,250,.06) 60%, transparent); }

/* Light-section bubbles (white/blue-50 backgrounds) */
.ub-light { border-color: rgba(37,99,235,.18); background: radial-gradient(circle at 35% 30%, rgba(37,99,235,.1), rgba(147,197,253,.05) 60%, transparent); }

/* ===================== UNDERWATER CAUSTICS ===================== */
.uw-caustics {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.uw-caustics::before,
.uw-caustics::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: causticDrift ease-in-out infinite alternate;
}
.uw-caustics::before {
  width: 500px; height: 300px;
  top: 10%; left: -10%;
  background: radial-gradient(ellipse, rgba(59,130,246,.13) 0%, transparent 70%);
  animation-duration: 9s;
  animation-delay: 0s;
}
.uw-caustics::after {
  width: 400px; height: 250px;
  bottom: 10%; right: -8%;
  background: radial-gradient(ellipse, rgba(147,197,253,.12) 0%, transparent 70%);
  animation-duration: 11s;
  animation-delay: -4s;
}
@keyframes causticDrift {
  0%   { transform: translate(0, 0)   scale(1); }
  33%  { transform: translate(60px, -30px) scale(1.1); }
  66%  { transform: translate(-40px, 20px) scale(.95); }
  100% { transform: translate(30px, 40px)  scale(1.05); }
}

/* Light-section caustics */
.uw-caustics-light::before { background: radial-gradient(ellipse, rgba(37,99,235,.07) 0%, transparent 70%); }
.uw-caustics-light::after  { background: radial-gradient(ellipse, rgba(59,130,246,.06) 0%, transparent 70%); }

/* ===================== WAVE DIVIDERS ===================== */
.wave-divider {
  position: relative;
  line-height: 0;
  overflow: hidden;
  z-index: 1;
}
.wave-divider svg { display: block; width: 100%; }

/* Animated wave path */
.wave-path-anim {
  animation: waveShift 4s ease-in-out infinite alternate;
  transform-origin: center;
}
.wave-path-anim-2 {
  animation: waveShift2 5s ease-in-out infinite alternate;
  transform-origin: center;
  opacity: .55;
}
.wave-path-anim-3 {
  animation: waveShift3 6s ease-in-out infinite alternate;
  transform-origin: center;
  opacity: .3;
}
@keyframes waveShift  { 0% { d: path("M0,32 C180,64 360,0 540,32 C720,64 900,0 1080,32 C1260,64 1440,0 1440,32 L1440,80 L0,80 Z"); } 100% { d: path("M0,48 C180,16 360,64 540,40 C720,16 900,56 1080,40 C1260,16 1440,56 1440,40 L1440,80 L0,80 Z"); } }
@keyframes waveShift2 { 0% { d: path("M0,48 C200,16 400,64 600,40 C800,16 1000,56 1200,40 C1300,24 1400,48 1440,48 L1440,80 L0,80 Z"); } 100% { d: path("M0,32 C200,56 400,20 600,44 C800,64 1000,24 1200,48 C1320,60 1400,32 1440,32 L1440,80 L0,80 Z"); } }
@keyframes waveShift3 { 0% { d: path("M0,60 C240,40 480,72 720,56 C960,40 1200,68 1440,56 L1440,80 L0,80 Z"); } 100% { d: path("M0,56 C240,72 480,44 720,60 C960,76 1200,48 1440,64 L1440,80 L0,80 Z"); } }

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion:reduce) {
  .bubble,.float-slow,.float-slower { animation:none !important; }
  .wave-underline path { animation:none; stroke-dashoffset:0; opacity:1; }
  .shine { animation:none; }
  .screen-enter { animation:none; }
  .park-card { transition:none; }
  .park-card:hover { transform:none; }
  .ub, .uw-caustics::before, .uw-caustics::after,
  .wave-path-anim, .wave-path-anim-2, .wave-path-anim-3,
  .hb, .hr { animation: none !important; }
  * { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}