/* ===== Common page paddings/backgrounds ===== */
.atlas, .coastlines, .reel{
  position:relative; padding: clamp(34px, 5vw, 64px) 0;
}

/* ============ SECTION 1: Blue Atlas ============ */
.atlas{
  background:
    radial-gradient(1000px 520px at 70% -10%, rgba(73,193,231,.18), transparent 60%),
    radial-gradient(700px 420px at 0% 100%, rgba(10,120,150,.14), transparent 60%);
}
.atlas-grid{
  margin-top:12px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;
}
.atlas-card{
  position:relative;
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
}
.atlas-card figure, .atlas-card img{ margin:0; display:block }
.atlas-card figcaption{ margin-top:8px; color:var(--ink-dim) }
.pin{
  --s: 12px;
  position:absolute; width:var(--s); height:var(--s); border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #c6f5ff, #61d1e8);
  transform: translate(-50%, -50%);
  animation: pingPulse 2.4s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(97,209,232,.5);
}
.atlas-chips{
  display:flex; gap:8px; flex-wrap:wrap; list-style:none; padding:0; margin:12px 0 0;
}
.atlas-chips li{
  padding:6px 10px; border-radius:999px; border:1px solid var(--border);
  background: var(--glass); color:var(--ink-dim); font-size:.95rem;
}

@media (max-width: 992px){
  .atlas-grid{ grid-template-columns: 1fr }
}

/* ============ SECTION 2: Coast Lines ============ */
.coastlines{
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(60,170,190,.12), transparent 60%);
}
.coast-grid{
  display:grid; grid-template-columns: 1fr; gap:16px; margin-top:12px;
}
.coast{
  display:grid; grid-template-columns: auto 1fr 1.2fr; gap:14px;
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
}
.coast-fig{ margin:0 }
.coast-copy h3{ margin:.1rem 0 .25rem }
.coast-copy p{ color:var(--ink-dim) }
.coast .tags{ display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:.4rem 0 0; list-style:none }
.coast .tags li{
  font-size:.9rem; color:var(--ink-dim);
  padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:var(--glass);
}
.coast .line{ align-self:center }
.coast-svg{ width:220px; height:auto; }
.curve{
  stroke-dasharray: 340; stroke-dashoffset: 340;
  filter: drop-shadow(0 2px 8px rgba(72,193,231,.35));
  transition: stroke-dashoffset 1.4s ease;
}
.coast.run .curve{ stroke-dashoffset: 0; }
.only-text{ grid-column: 2 / -1 }

@media (max-width: 992px){
  .coast{ grid-template-columns: 1fr }
  .coast-svg{ width:100% }
  .only-text{ grid-column: auto }
}

/* ============ SECTION 3: Backwater Reel (horizontal snap) ============ */
.reel{
  background:
    radial-gradient(900px 420px at 0% 100%, rgba(20,110,140,.14), transparent 60%);
}
.reel-track{
  margin-top:12px;
  display:flex; gap:14px; padding:10px 16px 26px;
  overflow-x:auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  /* align with container gutters */
  --container-max: 1120px; --container-pad: 16px;
  padding-inline:
    clamp(var(--container-pad),
      calc((100vw - var(--container-max))/2 + var(--container-pad)), 10vw);
  scroll-padding-inline:
    clamp(var(--container-pad),
      calc((100vw - var(--container-max))/2 + var(--container-pad)), 10vw);
}
.reel-card{
  min-width: clamp(260px, 70vw, 360px);
  scroll-snap-align: start;
  background: var(--glass); border:1px solid var(--border);
  border-radius:22px; padding:12px; transition: transform .25s ease, background .25s ease;
}
.reel-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.reel-card figure{ margin:0 }
.reel-card.text-only{
  display:grid; align-content:center; gap:10px;
}
.big-quote{
  font-family: PlayfairLocal, serif;
  font-size: clamp(20px, 3.2vw, 28px);
}
.reel-fade{
  content:""; position:relative; height:18px; margin-top:-18px;
  background: linear-gradient(180deg, rgba(5,25,35,0), rgba(5,25,35,.55));
}

/* safety: prevent horizontal overflow */
.atlas-grid, .coast-grid, .reel-track{ min-width:0 }
/* ============ SECTION 4: Goa Coves Lab ============ */
.coves{
  position:relative; padding: clamp(34px, 5vw, 64px) 0;
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(73,193,231,.14), transparent 60%),
    radial-gradient(900px 420px at 0% 100%, rgba(20,110,140,.12), transparent 60%);
}
.cove-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:12px;
}
.cove-card{
  position:relative;
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
  overflow:hidden;
}
.cove-card figure{ margin:0 }
.cove-card .pulse{
  position:absolute; inset:auto -20% 0 -20%; height:0;
  background: radial-gradient(70% 70% at 50% 100%, rgba(122,227,255,.25), transparent 70%);
  transform: translateY(10px);
  opacity:0; transition: opacity .35s ease, height .35s ease, transform .35s ease;
}
.coves.run .cove-card .pulse{ height:44%; opacity:1; transform:none }
.cove-chips{
  display:flex; gap:8px; flex-wrap:wrap; list-style:none; padding:0; margin:12px 0 0;
}
.cove-chips li{
  padding:6px 10px; border-radius:999px; border:1px solid var(--border);
  background: var(--glass); color:var(--ink-dim); font-size:.95rem;
}
@media (max-width: 992px){
  .cove-grid{ grid-template-columns: 1fr; }
}

/* ============ SECTION 5: Mumbai Harbor Frames ============ */
.harbor{
  position:relative; padding: clamp(34px, 5vw, 64px) 0;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(60,170,190,.12), transparent 60%);
}
.harbor-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:12px;
}
.frame-card{
  position:relative;
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
  transition: transform .25s ease, background .25s ease;
}
.frame-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.frame-card figure{ margin:0 }
.frame-card.text-only .note{ color:var(--ink-dim) }
.frame{
  position:absolute; inset:8px; border-radius:18px; pointer-events:none;
  border:2px dashed rgba(122,227,255,.45);
  transform: rotate(-0.8deg);
}
@media (max-width: 992px){
  .harbor-grid{ grid-template-columns: 1fr; }
}

/* ============ SECTION 6: Andaman Blues ============ */
.andaman{
  position:relative; padding: clamp(34px, 5vw, 64px) 0;
  background:
    radial-gradient(900px 420px at 0% 100%, rgba(10,120,150,.14), transparent 60%);
}
.andaman-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:12px;
}
.blue-card{
  position:relative;
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
}
.blue-card figure{ margin:0 }
.blue-card .note{ color:var(--ink-dim) }
.bubbles{
  position:absolute; left:10px; bottom:10px; width:40px; height:70px; pointer-events:none;
}
.bubbles span{
  position:absolute; bottom:0; left:50%; width:8px; height:8px; border-radius:999px;
  background: linear-gradient(180deg, #7ae3ff, #2fb9d9);
  transform: translateX(-50%) translateY(0);
  opacity:.0; filter: drop-shadow(0 2px 6px rgba(72,193,231,.35));
}
.andaman.run .bubbles span:nth-child(1){ animation: bubbleUp 2.6s ease-out .1s infinite }
.andaman.run .bubbles span:nth-child(2){ animation: bubbleUp 2.6s ease-out .7s infinite }
.andaman.run .bubbles span:nth-child(3){ animation: bubbleUp 2.6s ease-out 1.3s infinite }

@keyframes bubbleUp{
  0%{ transform: translateX(-50%) translateY(0) scale(.8); opacity:.0 }
  40%{ opacity:.85 }
  100%{ transform: translateX(-50%) translateY(-60px) scale(1.05); opacity:0 }
}

@media (max-width: 992px){
  .andaman-grid{ grid-template-columns: 1fr; }
}
/* ============ SECTION 7: Kochi Quiet Map ============ */
.quietmap{
  position:relative; padding: clamp(34px, 5vw, 64px) 0;
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(60,170,190,.12), transparent 60%),
    radial-gradient(900px 420px at 100% 100%, rgba(20,110,140,.12), transparent 60%);
}
.qm-layout{ display:grid; grid-template-columns: 1fr 1.3fr; gap:16px; align-items:start; margin-top:12px }
.qm-photos{ display:grid; grid-template-columns: 1fr; gap:16px }
.qm-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
  transition: transform .25s ease, background .25s ease;
}
.qm-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.qm-map{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
}
.river{ width:100%; height:auto; display:block }
.r-path{
  stroke-dasharray: 640; stroke-dashoffset: 640;
  filter: drop-shadow(0 2px 8px rgba(72,193,231,.35));
  transition: stroke-dashoffset 2s ease;
}
.quietmap.run .r-path{ stroke-dashoffset: 0; }
.r-mark{ fill:#7ae3ff; stroke:#0b4565; stroke-width:2; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)) }
.qm-legend, .quietmap .tags{
  display:flex; gap:12px; flex-wrap:wrap; list-style:none; padding:0; margin:10px 0 0; color:var(--ink-dim);
}
.qm-legend .dot{
  inline-size:10px; block-size:10px; border-radius:999px; display:inline-block; margin-right:6px;
  background: linear-gradient(180deg, #7ae3ff, #2fb9d9);
}

@media (max-width: 992px){
  .qm-layout{ grid-template-columns: 1fr }
}

/* ============ SECTION 8: Goa Snack Stops ============ */
.snacks{
  position:relative; padding: clamp(34px, 5vw, 64px) 0;
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(73,193,231,.14), transparent 60%);
}
.snack-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:12px;
}
.snack-card{
  position:relative; overflow:hidden;
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
  transition: transform .25s ease, background .25s ease;
}
.snack-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.snack-card figure{ margin:0 }
/* little meter sparkles */
.snack-meter{
  display:flex; gap:8px; margin-top:12px;
}
.snack-meter i{
  display:block; height:8px; width:0; border-radius:999px; flex:1;
  background: linear-gradient(90deg, #7ae3ff, #2fb9d9);
  box-shadow: 0 2px 8px rgba(72,193,231,.35) inset;
  transition: width 1.1s ease;
}
.snacks.run .snack-meter .m1{ width:30% }
.snacks.run .snack-meter .m2{ width:60% }
.snacks.run .snack-meter .m3{ width:90% }

@media (max-width: 992px){
  .snack-grid{ grid-template-columns: 1fr }
}

/* ============ SECTION 9: Reef Code ============ */
.reefcode{
  position:relative; padding: clamp(34px, 5vw, 64px) 0;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(60,170,190,.12), transparent 60%);
}
.reef-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:12px;
}
.code-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
  transition: transform .25s ease, background .25s ease;
}
.code-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.code-card figure{ margin:0 }
.code-card .ticks{ margin:.5rem 0 0 1.1rem; color:var(--ink-dim) }
.reef-note{ color:var(--ink-dim); margin-top:10px }

@media (max-width: 992px){
  .reef-grid{ grid-template-columns: 1fr }
}
/* ============ SECTION 10: Tide Windows ============ */
.tides{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(73,193,231,.14), transparent 60%),
    radial-gradient(900px 420px at 0% 100%, rgba(20,110,140,.12), transparent 60%);
}
.tide-top{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:12px;
}
.tide-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
  transition: transform .25s ease, background .25s ease;
}
.tide-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.tide-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 }
.t-tab{
  border:1px solid var(--border); background:var(--glass); color:var(--ink);
  padding:8px 12px; border-radius:12px; cursor:pointer; transition: background .2s, transform .2s;
}
.t-tab:hover{ background:var(--glass-2); transform: translateY(-2px) }
.t-tab.is-active{ box-shadow: 0 6px 16px rgba(72,193,231,.35) inset }

.tide-gauge{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
}
.tide-svg{ width:100%; height:auto; display:block }
.t-needle{ transform-origin: 230px 160px; transition: transform .6s ease }
.tides[data-mode="low"]  .t-needle{ transform: rotate(-22deg) }
.tides[data-mode="mid"]  .t-needle{ transform: rotate(0deg) }
.tides[data-mode="high"] .t-needle{ transform: rotate(18deg) }
/* water height via clip rect */
.wave-clip{ transition: y .8s ease, height .8s ease }
.tides[data-mode="low"]  .wave-clip{ y: 140px; height: 20px }
.tides[data-mode="mid"]  .wave-clip{ y: 110px; height: 50px }
.tides[data-mode="high"] .wave-clip{ y: 80px;  height: 80px }
.tide-note{ color:var(--ink-dim); margin-top:6px }

@media (max-width: 992px){
  .tide-top{ grid-template-columns: 1fr }
}

/* ============ SECTION 11: Mumbai Night Return ============ */
.nightframes{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(60,170,190,.12), transparent 60%);
}
.night-grid{
  display:grid; grid-template-columns: 1fr 1fr .9fr; gap:16px; align-items:start; margin-top:12px;
}
.n-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
  transition: transform .25s ease, background .25s ease;
}
.n-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.n-card figure{ margin:0 }
.lane{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
}
.lane-svg{ width:100%; height:auto; display:block }
.lane-path{ filter: drop-shadow(0 2px 8px rgba(72,193,231,.35)) }
.b-dot{ fill:#7ae3ff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); opacity:.25 }
.nightframes.run .b-dot.d1{ animation: blink 1.6s linear .0s infinite }
.nightframes.run .b-dot.d2{ animation: blink 1.6s linear .4s infinite }
.nightframes.run .b-dot.d3{ animation: blink 1.6s linear .8s infinite }
@keyframes blink{
  0%,60%{ opacity:.25 } 70%{ opacity:.95 } 100%{ opacity:.25 }
}
.lane-note{ color:var(--ink-dim); margin-top:6px }

@media (max-width: 992px){
  .night-grid{ grid-template-columns: 1fr }
}

/* ============ SECTION 12: Local Guides ============ */
.local{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 420px at 0% 100%, rgba(10,120,150,.14), transparent 60%);
}
.local-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-top:12px;
}
.loc-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
  transition: transform .25s ease, background .25s ease;
}
.loc-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.loc-card figure{ margin:0 }
.loc-card .note{ color:var(--ink-dim) }
.mono-only .mono{
  inline-size:48px; block-size:48px; border-radius:999px; display:grid; place-items:center;
  background: radial-gradient(100% 100% at 30% 20%, #77e3ff 0%, #28afd3 45%, #0b4565 100%);
  color:#041c27; font-weight:800; margin-bottom:8px; box-shadow: var(--shadow-soft);
}

@media (max-width: 992px){
  .local-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 576px){
  .local-grid{ grid-template-columns: 1fr }
}
/* ============ SECTION 13: Andaman Windows ============ */
.andwindows{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(60,170,190,.12), transparent 60%);
}
.aw-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; margin-top:12px;
}
.aw-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
  transition: transform .25s ease, background .25s ease;
}
.aw-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.aw-card figure{ margin:0 }
.sunlane{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px; margin-top:12px;
}
.sun-svg{ width:100%; height:auto; display:block }
.sun-line{
  stroke-dasharray: 520; stroke-dashoffset: 520;
  filter: drop-shadow(0 2px 8px rgba(72,193,231,.35));
  transition: stroke-dashoffset 1.6s ease;
}
.andwindows.run .sun-line{ stroke-dashoffset: 0; }
.sun-dot{ fill:#7ae3ff; stroke:#0b4565; stroke-width:2; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)) }
.sun-legend{
  display:flex; gap:12px; flex-wrap:wrap; list-style:none; padding:0; margin:10px 0 0; color:var(--ink-dim);
}
.sun-legend .dot{
  inline-size:10px; block-size:10px; border-radius:999px; display:inline-block; margin-right:6px;
  background: linear-gradient(180deg, #7ae3ff, #2fb9d9);
}
@media (max-width: 992px){
  .aw-grid{ grid-template-columns: 1fr }
}

/* ============ SECTION 14: Ports Mini Index ============ */
.ports{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 420px at 0% 100%, rgba(20,110,140,.14), transparent 60%);
}
.ports-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; margin-top:12px;
}
.port-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
  transition: transform .25s ease, background .25s ease;
}
.port-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.port-card figure{ margin:0 }
.port-tags{
  display:flex; gap:8px; flex-wrap:wrap; list-style:none; padding:0; margin:12px 0 0; color:var(--ink-dim);
}
.port-tags li{
  padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:var(--glass);
}
.ports-line{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px; margin-top:12px;
}
.ports-svg{ width:100%; height:auto; display:block }
.p-line{
  stroke-dasharray: 520; stroke-dashoffset: 520;
  filter: drop-shadow(0 2px 8px rgba(72,193,231,.35));
  transition: stroke-dashoffset 1.6s ease;
}
.ports.run .p-line{ stroke-dashoffset: 0; }
.p-dot{ fill:#7ae3ff; stroke:#0b4565; stroke-width:2; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)) }

@media (max-width: 992px){
  .ports-grid{ grid-template-columns: 1fr }
}
/* ============ SECTION 15: Water Etiquette & Local Notes ============ */
.guide{
  position:relative; padding: clamp(34px,5vw,64px) 0;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(60,170,190,.12), transparent 60%),
    radial-gradient(900px 420px at 0% 100%, rgba(20,110,140,.10), transparent 60%);
}
.guide-grid{
  display:grid; grid-template-columns: 1.6fr .9fr; gap:16px; align-items:start; margin-top:12px;
}
.guide-body{
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:16px;
}
.guide-body p{ margin:.65rem 0; color:var(--ink) }
.guide-body p:first-of-type::first-letter{
  font-family: PlayfairLocal, serif;
  font-size: clamp(34px,4vw,44px);
  line-height: .9; padding-right:6px; float:left; color:#7ae3ff;
  text-shadow: 0 2px 10px rgba(72,193,231,.25);
}
.guide-quote{
  margin: .9rem 0; padding:10px 12px; border-left:3px solid #7ae3ff;
  background: rgba(12,60,80,.25); border-radius:12px; color:var(--ink);
  font-style: italic;
}
.guide-wave{
  height:12px; border-radius:999px; margin:2px 0 10px;
  background: repeating-linear-gradient(90deg, rgba(122,227,255,.85) 0 16px, rgba(47,185,217,.85) 16px 32px);
  transform-origin: left; transform: scaleX(0); transition: transform 1.2s ease;
}
.guide.run .guide-wave{ transform: scaleX(1) }

.guide-side{ display:grid; gap:12px }
.callout{
  background: var(--glass); border:1px solid var(--border); border-radius:18px; padding:12px;
}
.callout.soft{ background: rgba(12,60,80,.28) }
.callout h3{ margin:.2rem 0 .35rem }
.callout p{ color:var(--ink-dim) }
.callout .ticks{ margin:.35rem 0 0 1.1rem; color:var(--ink-dim) }

@media (max-width: 992px){
  .guide-grid{ grid-template-columns: 1fr }
}