html { scroll-behavior: smooth; }
:root {
  --night: #161b33;
  --dusk: #3d2c54;
  --coral: #e2603f;
  --coral-deep: #b8431f;
  --gold: #e8a33d;
  --gold-deep: #b9761c;
  --teal: #0f6a67;
  --teal-deep: #0a4d4a;
  --ink: #241f1a;
  --ink-soft: #5b5142;
  --parchment: #f7ecda;
  --parchment-alt: #efe0bd;
  --line: #e4d3ab;
  --max: 1080px;
  font-size: 17px;
}

* { box-sizing: border-box; }

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: rgba(10, 16, 26, 0.25);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-nav-brand {
  font-family: 'Fraunces', 'Georgia', serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff8ea;
  text-decoration: none;
}
.site-nav-links { display: flex; align-items: center; gap: 24px; }
.site-nav-links a {
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #f3dfc0;
  text-decoration: none;
}
.site-nav-links a:hover { color: var(--gold); }
.site-nav-cta {
  background: var(--gold);
  color: #211603 !important;
  padding: 8px 18px;
  border-radius: 100px;
}
.site-nav-cta:hover { color: #211603 !important; }
@media (max-width: 640px) {
  .site-nav { padding: 10px 16px; }
  .site-nav-brand { font-size: 0.78rem; }
  .site-nav-links { gap: 12px; }
  .site-nav-links a:not(.site-nav-cta) { display: none; }
}

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', 'Georgia', serif;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
}

a { color: var(--coral-deep); }
img { max-width: 100%; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--gold-deep);
}

/* NAV */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 236, 218, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--line);
}
nav .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px;
  flex-wrap: wrap;
  gap: 10px;
}
.nav-brand {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.nav-brand .dot { color: var(--coral); }
nav ul {
  list-style: none;
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
  font-weight: 600;
  flex-wrap: wrap;
  align-items: center;
}
nav ul a { color: var(--ink); text-decoration: none; }
nav ul a:hover { color: var(--coral-deep); }
nav ul a.active { color: var(--coral-deep); }
.nav-cta {
  background: var(--coral);
  color: #fff !important;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 0.85rem !important;
}
.nav-cta:hover { background: var(--coral-deep); }

@media (max-width: 820px) {
  nav ul li:not(.nav-cta-item) { display: none; }
  nav ul { gap: 0; }
}

/* HERO */
header.hero {
  position: relative;
  padding: 76px 0 90px;
  overflow: hidden;
  color: #fdf6e8;
  background: transparent;
}
header.hero .wrap { position: relative; text-align: center; }

/* on deep-dive pages (mythology/oceanography/mysteries) the hero carries its own photo */
header.hero.sub {
  background:
    radial-gradient(circle at 20% 15%, rgba(232, 163, 61, 0.3), transparent 45%),
    radial-gradient(circle at 82% 25%, rgba(226, 96, 63, 0.25), transparent 50%),
    linear-gradient(180deg, rgba(22, 27, 51, 0.82) 0%, rgba(61, 44, 84, 0.55) 45%, rgba(90, 58, 63, 0.72) 100%),
    url('images/funchal-sunset.jpg');
  background-size: cover;
  background-position: center 62%;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fdf6e8;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 22px;
}

h1.hero-title {
  font-size: clamp(2.4rem, 6.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: #fff8ea;
}
h1.hero-title em {
  font-style: italic;
  background: linear-gradient(100deg, var(--gold) 10%, var(--coral) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-title .with {
  display: block;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.36em;
  color: #f3dfc0;
  margin-top: 10px;
}

.hero-sub {
  max-width: 640px;
  margin: 22px auto 6px;
  font-size: 1.1rem;
  font-weight: 400;
  color: #ecdcc4;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 30px 0 44px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 100px;
  padding: 15px 30px;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary {
  background: var(--coral);
  color: #fff;
  box-shadow: 0 8px 0 0 var(--coral-deep);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 11px 0 0 var(--coral-deep); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 4px 0 0 var(--coral-deep); }
.btn-secondary {
  background: rgba(255,255,255,0.08);
  color: #fff8ea;
  box-shadow: 0 8px 0 0 rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,0.4);
}
.btn-secondary:hover { transform: translateY(-3px); box-shadow: 0 11px 0 0 rgba(255,255,255,0.18); }
.btn-secondary:active { transform: translateY(2px); box-shadow: 0 4px 0 0 rgba(255,255,255,0.18); }
.btn-light {
  background: var(--parchment);
  color: var(--ink);
  box-shadow: 0 8px 0 0 var(--line);
}
.btn-light:hover { transform: translateY(-3px); box-shadow: 0 11px 0 0 var(--line); }

.hero-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 780px;
  margin: 0 auto;
}
.fact {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  padding: 16px 10px;
  transition: transform 0.25s ease;
}
.fact:hover { transform: translateY(-4px); }
.fact-icon { font-size: 1.5rem; display: block; margin-bottom: 6px; }
.fact-label { font-size: 0.7rem; font-weight: 600; color: #e2cba3; text-transform: uppercase; letter-spacing: 0.04em; }
.fact-value { font-weight: 700; font-size: 0.92rem; color: #fff8ea; }

@media (max-width: 620px) {
  .hero-facts { grid-template-columns: repeat(2, 1fr); }
}

/* smaller sub-page hero */
header.hero.sub { padding: 56px 0 64px; }
header.hero.sub h1.hero-title { font-size: clamp(2.1rem, 5.4vw, 3.4rem); }

/* SECTIONS */
section { padding: 78px 0; position: relative; background: var(--parchment); }
.section-tag {
  display: inline-block;
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--coral-deep);
  background: #f6dcc7;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.section-title { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: 16px; }
.section-intro { max-width: 680px; color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 40px; }

section.alt { background: var(--parchment-alt); }

/* CARD GRID (deep dive links) */
.dive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.dive-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 22px;
  padding: 30px 26px;
  box-shadow: 0 6px 0 0 var(--line);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-top: 5px solid var(--coral);
}
.dive-card.teal { border-top-color: var(--teal); }
.dive-card.gold { border-top-color: var(--gold); }
.dive-card:hover { transform: translateY(-6px); box-shadow: 0 12px 0 0 var(--line); }
.dive-card .dive-icon { font-size: 2.2rem; display: block; margin-bottom: 14px; }
.dive-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.dive-card p { color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 14px; }
.dive-card .go { font-weight: 700; font-size: 0.85rem; color: var(--coral-deep); }

@media (max-width: 820px) {
  .dive-grid { grid-template-columns: 1fr; }
}

/* STOPS TIMELINE */
.stops {
  display: grid;
  gap: 0;
  border-left: 3px solid var(--line);
  margin-left: 10px;
  padding-left: 32px;
}
.stop {
  position: relative;
  padding-bottom: 40px;
}
.stop:last-child { padding-bottom: 0; }
.stop::before {
  content: attr(data-n);
  position: absolute;
  left: -49px;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px var(--parchment);
}
section.alt .stop::before { box-shadow: 0 0 0 6px var(--parchment-alt); }
.stop.sunset::before { background: var(--gold); }
.stop h3 { font-size: 1.15rem; margin-bottom: 6px; }
.stop .stop-tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--teal-deep); display: block; margin-bottom: 4px; }
.stop p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* GUIDE */
.guide-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 46px;
  align-items: center;
}
.guide-photo {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 12px 0 0 var(--coral-deep);
}
.guide-photo img { width: 100%; display: block; aspect-ratio: 4/5; object-fit: cover; }
.guide-photo::after {
  content: '🌇';
  position: absolute;
  bottom: -14px;
  right: -14px;
  font-size: 2.4rem;
  background: var(--gold);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 0 0 var(--gold-deep);
}
.guide-copy h3 { font-size: 1.7rem; margin-bottom: 4px; }
.guide-copy .role { color: var(--teal-deep); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 14px; display: block; }
.guide-copy p { color: var(--ink-soft); }

/* AVAILABILITY / CALENDAR */
.cal-wrap {
  background: #fff;
  border-radius: 28px;
  padding: 30px;
  box-shadow: 0 10px 0 0 var(--line);
}
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cal-header h3 { font-size: 1.3rem; }
.cal-nav { display: flex; gap: 10px; }
.cal-nav button {
  background: var(--parchment-alt);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  transition: background 0.2s ease;
}
.cal-nav button:hover { background: var(--gold); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.cal-grid .dow { font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; padding-bottom: 6px; }
.cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  position: relative;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.cal-day.empty { visibility: hidden; }
.cal-day .dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 3px; }
.cal-day.available { background: #e3f2ee; color: var(--teal-deep); cursor: pointer; }
.cal-day.available .dot { background: var(--teal); }
.cal-day.available:hover { background: var(--teal); color: #fff; transform: scale(1.08); }
.cal-day.available:hover .dot { background: #fff; }
.cal-day.limited { background: #fbeed7; color: var(--gold-deep); cursor: pointer; }
.cal-day.limited .dot { background: var(--gold); }
.cal-day.limited:hover { background: var(--gold); color: #fff; transform: scale(1.08); }
.cal-day.full { background: #f6e1da; color: var(--coral-deep); opacity: 0.75; }
.cal-day.full .dot { background: var(--coral); }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--coral); }

.cal-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 20px; font-size: 0.82rem; color: var(--ink-soft); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-available { background: var(--teal); }
.dot-limited { background: var(--gold); }
.dot-full { background: var(--coral); }

.upcoming-list { margin-top: 26px; display: grid; gap: 10px; }
.upcoming-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--parchment-alt);
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 0.9rem;
  flex-wrap: wrap;
}
.upcoming-item .when { font-weight: 700; }
.upcoming-item .status-pill { font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 100px; text-transform: uppercase; }
.status-pill.available { background: #e3f2ee; color: var(--teal-deep); }
.status-pill.limited { background: #fbeed7; color: var(--gold-deep); }
.status-pill.full { background: #f6e1da; color: var(--coral-deep); }
.upcoming-item button {
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 7px 16px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
}
.upcoming-item button:disabled { background: #ddd; cursor: not-allowed; }
.upcoming-item button:not(:disabled):hover { background: var(--coral-deep); }

/* CONTACT / BOOKING */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.contact-info { display: grid; gap: 20px; align-content: start; }
.info-card {
  background: #fff;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 4px 0 0 var(--line);
}
.info-card strong { display: block; margin-bottom: 4px; }
.info-card span { color: var(--ink-soft); font-size: 0.9rem; }
.info-card a { color: var(--coral-deep); font-weight: 600; text-decoration: none; }

form.booking { display: grid; gap: 18px; background: #fff; padding: 30px; border-radius: 24px; box-shadow: 0 10px 0 0 var(--line); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
form.booking label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
form.booking input, form.booking select, form.booking textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--parchment);
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
}
form.booking input:focus, form.booking select:focus, form.booking textarea:focus {
  outline: none;
  border-color: var(--teal);
}
form.booking button[type="submit"] {
  justify-self: start;
  background: var(--coral);
  color: #fff;
  border: none;
  padding: 14px 32px;
  border-radius: 100px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 7px 0 0 var(--coral-deep);
  transition: transform 0.2s ease;
}
form.booking button[type="submit"]:hover { transform: translateY(-2px); }
form.booking button[type="submit"]:active { transform: translateY(2px); box-shadow: 0 3px 0 0 var(--coral-deep); }
.form-note { font-size: 0.82rem; color: var(--ink-soft); margin-top: -6px; }
.form-success {
  display: none;
  background: #e3f2ee;
  color: var(--teal-deep);
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.9rem;
}
.form-success.show { display: block; }

@media (max-width: 760px) {
  .about-grid, .guide-grid, .contact-grid { grid-template-columns: 1fr; }
  .guide-photo { max-width: 280px; margin: 0 auto; }
  .field-row { grid-template-columns: 1fr; }
  .hero-facts { grid-template-columns: 1fr 1fr; }
}

/* LONG-FORM CONTENT (mythology / oceanography / mysteries pages) */
.entry {
  background: #fff;
  border-radius: 22px;
  padding: 30px 32px;
  box-shadow: 0 5px 0 0 var(--line);
  margin-bottom: 24px;
}
.entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.entry-head h3 { font-size: 1.35rem; }
.entry-date {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--coral-deep);
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}
.entry-who { font-size: 0.82rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; margin-bottom: 12px; }
.entry p { color: var(--ink-soft); margin: 0 0 12px; }
.entry p:last-child { margin-bottom: 0; }
.entry ul { color: var(--ink-soft); margin: 0 0 12px; padding-left: 20px; }
.entry ul:last-child { margin-bottom: 0; }
.entry li { margin-bottom: 6px; }

blockquote.ancient {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--parchment-alt);
  border-left: 4px solid var(--gold);
  margin: 16px 0;
  padding: 18px 24px;
  border-radius: 0 14px 14px 0;
}
blockquote.ancient cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--teal-deep);
}

.callout {
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  color: #eafaf6;
  border-radius: 22px;
  padding: 30px 32px;
  margin-bottom: 24px;
}
.callout h3 { color: #fff; font-size: 1.2rem; margin-bottom: 10px; }
.callout p { color: #d7ede8; margin: 0 0 10px; }
.callout p:last-child { margin-bottom: 0; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 20px 0 8px;
}
.stat {
  background: var(--parchment-alt);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}
.stat .num { display: block; font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.4rem; color: var(--teal-deep); }
.stat .lbl { font-size: 0.72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }
@media (max-width: 700px) { .stat-row { grid-template-columns: 1fr 1fr; } }

.bios-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.bio-card {
  background: #fff;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 4px 0 0 var(--line);
  border-left: 4px solid var(--teal);
}
.bio-card h4 { font-size: 1.02rem; margin-bottom: 4px; }
.bio-card .dates { font-size: 0.78rem; color: var(--gold-deep); font-weight: 700; margin-bottom: 8px; display: block; }
.bio-card p { color: var(--ink-soft); font-size: 0.88rem; margin: 0; }
@media (max-width: 760px) { .bios-grid { grid-template-columns: 1fr; } }

.crumb-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 44px;
}
.crumb-link {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 16px;
  padding: 16px 20px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 4px 0 0 var(--line);
  font-weight: 600;
  transition: transform 0.2s ease;
}
.crumb-link:hover { transform: translateY(-3px); }
.crumb-link .arrow { color: var(--coral-deep); }

/* FOOTER */
footer { background: var(--night); color: #cfd3e6; padding: 46px 0 30px; text-align: center; }
footer .nav-brand { color: #fff; justify-content: center; margin-bottom: 10px; }
footer p { font-size: 0.85rem; margin: 6px 0; }
footer a { color: #fff; }
footer .foot-links { margin-top: 14px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; font-size: 0.85rem; }

/* REVEAL ANIMATION */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===================================================================== */
/* THE DIVE — illustrated scroll from sunset sky, past Madeira's         */
/* silhouette, down through the water column to the abyssal floor.       */
/* One continuous CSS gradient carries the colour; the island, surf and  */
/* creatures are independently-scaled SVGs laid over it by percentage,   */
/* so nothing distorts at any viewport size.                             */
/* ===================================================================== */
body.depth-page { background: #000; }

.page-end-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 480px;
  max-width: 70%;
  text-align: center;
  color: #cfd3e6;
}
.closing-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 640px;
  max-width: 80%;
  text-align: center;
  font-family: 'Fraunces', 'Georgia', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  color: #f3dfc0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.page-end-info .footer-brand {
  font-family: 'Fraunces', 'Georgia', serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff8ea;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.page-end-info .footer-line {
  font-family: 'Manrope', sans-serif;
  font-size: 0.88rem;
  margin: 4px 0;
}
.page-end-info .footer-line a {
  color: #cfe4ec;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-end-info .footer-line a:hover { color: #fff; }
.page-end-info .footer-copy {
  font-family: 'Manrope', sans-serif;
  font-size: 0.76rem;
  color: #8fa0aa;
  margin: 16px 0 0;
}

.dive {
  position: relative;
  height: 499vh;
  overflow: hidden;
  background: #000;
}

/* Deep water: teal fading through navy to black. Starts at exactly the
   same boundary .dive-photo's box ends at (54% desktop / 33% mobile,
   matched below) — the .dive-photo-fill gradient (JS-computed further
   down) is already holding that identical teal flat all the way to that
   same edge, so both sides of the join are the literal same hex colour.
   That's what makes this seam-proof: not careful tuning, just two things
   guaranteed to already agree. */
.dive-abyss {
  position: absolute;
  left: 0; right: 0;
  top: 54%;
  height: 46%;
  background: linear-gradient(180deg,
    #28696d 0%, #1a5570 35%, #0d2c47 65%, #000000 100%);
}
@media (max-width: 760px) {
  .dive-abyss { top: 33%; height: 67%; }
}

/* ---- the real photo: Madeira at sunset, dissolving into the illustrated water ---- */
.dive-photo {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 54%;
  z-index: 1;
}
@media (max-width: 760px) {
  .dive-photo { height: 33%; }
}

/* water-toned fill behind the photo — deliberately just blue/teal
   throughout (never sky-coloured), so wherever the photo's own bottom
   edge happens to land, it always hands off to "more water" */
.dive-photo-fill {
  position: absolute;
  inset: 0;
  /* #a07b90 is sampled directly from the photo's own bottom-edge pixels
     (dusty mauve-pink, not blue) so the handoff matches exactly regardless
     of screen size. Stops are in vw, not %, because the photo's own
     rendered height is fixed by its aspect-ratio and the viewport width —
     it has no relationship to this box's height (a % of the very tall
     .dive container).
     Deliberately NOT fading to transparent here: this box sits in front
     of .dive-layer-1, which is itself still mid-transition (warm sky
     tones) for a good portion of its own height. Fading this away at any
     vw-based point risked exposing whatever colour layer-1 happened to be
     at that pixel height — which, depending on viewport, could easily
     still be orange, not water. Instead this gradient ends on exactly
     the same teal (#28696d) that layer-1 settles into and layer-2 opens
     with, then simply holds that colour — guaranteed to match whatever's
     beneath it, at any height, without needing to time two independent
     dimensions (vw here vs. % of a vh-based ancestor) against each other. */
  background: linear-gradient(180deg,
    #a07b90 0vw, #8a6f88 18vw, #6b6b84 28vw, #4a6c81 36vw, #35697c 44vw, #2f6f80 54vw, #28696d 70vw,
    #1c5468 85%, #143f5a 100%);
}

/* the photo itself: full width, natural aspect (no side-cropping, so the
   island reads smaller). It fades out through an increasingly-blurred echo
   of itself (below) rather than cutting off sharp against a flat colour —
   like water going soft out of focus, not a hard edge. All percentages
   below are relative to .dive-photo itself (not nested/compounded), so the
   sharp layer, the blur layer, and the fill they hand off to all agree on
   exactly where the blend happens. */
.dive-photo-img,
.dive-photo-img-blur {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 680;
  background-image: url('images/funchal-sunset.jpg');
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.dive-photo-img {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 85%);
}
.dive-photo-img-blur {
  filter: blur(22px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 30%, #000 50%, #000 75%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 30%, #000 50%, #000 75%, transparent 100%);
}

/* ---- text overlays: semi-transparent frosted cards over the scene ---- */
.text-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 900px;
  max-width: 86%;
  text-align: center;
  background: rgba(10, 16, 26, 0.4);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  padding: 32px 40px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.hero-text {
  top: 6%;
  width: 900px;
  backdrop-filter: blur(5px) saturate(1.1);
  -webkit-backdrop-filter: blur(5px) saturate(1.1);
}
.mythology-box, .tour-box, .booking-box, .reviews-box, .your-booking-box, .reading-box, .guide-box { top: 0; }
.hero-tagline {
  font-family: 'Fraunces', 'Georgia', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.9rem, 1.9vw, 1.1rem);
  color: #f3dfc0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  margin: 10px 0 0;
}
.hero-tagline-cite {
  font-family: 'Fraunces', 'Georgia', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.75rem, 1.5vw, 0.9rem);
  color: #d8c3a0;
  text-align: right;
  margin: 6px 0 0;
}
.hero-text .hero-title {
  font-family: 'Fraunces', 'Georgia', serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 5.4vw, 2rem);
  color: #fff8ea;
  margin: 0 0 10px;
  letter-spacing: 0.01em;
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 641px) {
  .hero-text .hero-title { font-size: clamp(2.1rem, calc(7.2vw - 10px), 4rem); }
}
.hero-subtitle {
  font-family: 'Manrope', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(0.85rem, 1.8vw, 1.05rem);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #f3dfc0;
  margin: 0 0 18px;
}
.hero-subtitle-tour { color: var(--gold); }
@media (max-width: 640px) {
  .hero-subtitle-sep { display: none; }
  .hero-subtitle-tour { display: block; margin-top: 4px; }
}
.hero-subheading {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #cfe4ec;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.section-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin: 0 0 4px;
}

.section-body {
  font-family: 'Newsreader', Georgia, serif;
  font-optical-sizing: auto;
  font-size: 1.08rem;
  line-height: 1.65;
  color: #e3e9ee;
  margin: 14px 0 0;
  text-align: left;
}
.section-body a {
  color: #cfe4ec;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.section-body a:hover { color: #fff; }

.detail-list,
.reading-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 16px;
}
.detail-list {
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}
.tour-box .detail-list { margin-top: 28px; }
@media (max-width: 640px) {
  .detail-list { grid-template-columns: 1fr; }
}
.detail-list li {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.02rem;
  color: #e3e9ee;
}
.reading-list li {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.4;
}
.reading-list a {
  color: #cfe4ec;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.reading-list a:hover { color: #fff; }

.review-rating {
  display: inline-block;
  margin-top: 14px;
  color: var(--gold);
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.review-rating strong { color: #fff8ea; }
.review-rating:hover { color: #fff8ea; }
.review-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 760px) {
  .review-list { grid-template-columns: 1fr; }
}
.review-list li {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: #e3e9ee;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.review-list li span {
  display: block;
  margin-top: 6px;
  text-align: right;
  font-family: 'Fraunces', 'Georgia', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.85rem;
  color: #d8c3a0;
}
.reading-list-more {
  display: inline-block;
  margin-top: 20px;
  color: #cfe4ec;
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}
.reading-list-more:hover { color: #fff; }

.tagline {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 560px;
  max-width: 86%;
  text-align: center;
  font-family: 'Fraunces', 'Georgia', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  color: #f3dfc0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  margin: 0;
}

.section-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 13px 30px;
  border-radius: 100px;
  background: var(--gold);
  color: #211603;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 0 0 var(--gold-deep);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-meta-row {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero-pin {
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #f3dfc0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}
.hero-rating-row {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 5;
  white-space: nowrap;
}
.hero-review-rating { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
.hero-btn-float {
  margin: 0;
  padding: 11px 72px;
  font-size: 0.82rem;
  white-space: nowrap;
  box-shadow: 0 4px 0 0 var(--gold-deep);
}
.hero-btn-float:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--gold-deep); }
.section-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 0 var(--gold-deep); }
.section-btn:active { transform: translateY(2px); box-shadow: 0 3px 0 0 var(--gold-deep); }

/* ---- booking form ---- */
.booking-form { margin-top: 18px; display: grid; gap: 12px; text-align: left; }
.booking-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.booking-form label {
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #b9c6cf;
  display: block;
  margin-bottom: 5px;
}
.booking-form input,
.booking-form textarea {
  width: 100%;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  color: #fff8ea;
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem;
}
.booking-form input::placeholder,
.booking-form textarea::placeholder { color: #8fa0aa; }
.booking-form input:focus,
.booking-form textarea:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, 0.1); }
.booking-note {
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  color: #a9b7c1;
  margin: 10px 0 0;
}
.booking-success {
  display: none;
  font-family: 'Manrope', sans-serif;
  font-size: 0.88rem;
  color: #bdeedc;
  background: rgba(60, 160, 130, 0.18);
  border: 1px solid rgba(120, 220, 190, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 12px;
}
.booking-success.show { display: block; }

/* ---- custom date picker: Mondays & Fridays shown closed, not just rejected ---- */
.bf-date-field { position: relative; }
.bf-date-toggle {
  width: 100%;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  color: #fff8ea;
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
}
.bf-date-toggle:hover,
.bf-date-toggle:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, 0.1); }
.bf-date-toggle.error { border-color: var(--coral); background: rgba(226, 96, 63, 0.12); }
.bf-cal {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  width: 260px;
  max-width: 80vw;
  background: rgba(8, 16, 24, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  text-align: left;
}
.bf-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bf-cal-title {
  font-family: 'Fraunces', serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff8ea;
}
.bf-cal-nav {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #fff8ea;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.bf-cal-nav:hover { background: var(--gold); border-color: var(--gold); color: #241f1a; }
.bf-cal-dow,
.bf-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bf-cal-dow span {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #8fa0aa;
  text-align: center;
  padding-bottom: 4px;
}
.bf-cal-day {
  aspect-ratio: 1;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.07);
  color: #fff8ea;
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  cursor: pointer;
}
.bf-cal-day:hover:not(.blocked) { background: var(--gold); color: #241f1a; }
.bf-cal-day.selected { background: var(--gold); color: #241f1a; font-weight: 700; }
.bf-cal-day.blocked {
  background: transparent;
  color: #5a6b74;
  text-decoration: line-through;
  cursor: not-allowed;
}
.bf-cal-day-empty { visibility: hidden; cursor: default; }
.bf-cal-note {
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  color: #8fa0aa;
  text-align: center;
  margin: 10px 0 0;
}

@media (max-width: 640px) {
  .text-box { padding: 24px 26px; }
  .booking-box, .reviews-box, .your-booking-box { width: 100%; }
  .booking-form .row { grid-template-columns: 1fr; }
}

/* ---- marine snow ---- */
.snow {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(220, 232, 240, 0.5);
  z-index: 1;
}

/* ---- creatures ---- */
.creature { position: absolute; z-index: 1; }

.fish-school { width: 7%; max-width: 90px; }
.fish-school .fish-svg { width: 60%; display: block; }
.fish-svg { animation: fishSway 4.2s cubic-bezier(.42,0,.58,1) infinite; transform-origin: 70% 50%; }
.fish-1 { animation-delay: 0s; }
.fish-2 { width: 46%; margin-top: 10px; margin-left: 30px; animation-delay: 0.6s; animation-duration: 3.7s; }
.fish-3 { width: 38%; margin-top: -6px; margin-left: 60px; animation-delay: 1.2s; animation-duration: 4.6s; }
@keyframes fishSway {
  0%   { transform: translate(0,0) rotate(0deg) scaleX(1); }
  15%  { transform: translate(4px,-3px) rotate(-4deg) scaleX(0.96); }
  35%  { transform: translate(12px,-6px) rotate(3deg) scaleX(1.03); }
  55%  { transform: translate(17px,-3px) rotate(5deg) scaleX(0.97); }
  75%  { transform: translate(11px,2px) rotate(-2deg) scaleX(1.02); }
  100% { transform: translate(0,0) rotate(0deg) scaleX(1); }
}

.ray-wrap { width: 11%; max-width: 130px; animation: raySway 7s ease-in-out infinite; }
@keyframes raySway {
  0%   { transform: translate(0,0) rotate(0deg) scaleY(1); }
  20%  { transform: translate(-7px,-7px) rotate(-4deg) scaleY(0.92); }
  40%  { transform: translate(-15px,-2px) rotate(-1deg) scaleY(1.06); }
  60%  { transform: translate(-24px,5px) rotate(-3deg) scaleY(0.93); }
  80%  { transform: translate(-13px,3px) rotate(-1deg) scaleY(1.03); }
  100% { transform: translate(0,0) rotate(0deg) scaleY(1); }
}

.jellyfish { width: 6%; max-width: 74px; animation: jellyBob 6s ease-in-out infinite; }
@keyframes jellyBob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-16px) scale(1.04); }
}
.jelly-tentacle { animation: tentacleSway 3.5s ease-in-out infinite; transform-origin: top center; }
.jelly-tentacle:nth-child(3) { animation-delay: 0.3s; }
.jelly-tentacle:nth-child(4) { animation-delay: 0.6s; }
.jelly-tentacle:nth-child(5) { animation-delay: 0.9s; }
@keyframes tentacleSway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(4deg); }
}

.angler { width: 7%; max-width: 82px; animation: anglerDrift 8s ease-in-out infinite; }
@keyframes anglerDrift {
  0%   { transform: translate(0,0) rotate(0deg); }
  30%  { transform: translate(9px,-4px) rotate(2deg); }
  55%  { transform: translate(17px,-1px) rotate(-1.5deg); }
  80%  { transform: translate(8px,3px) rotate(1deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
.angler-lure { animation: lureGlow 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes lureGlow {
  0%, 100% { opacity: 0.55; filter: drop-shadow(0 0 1px #ffe9a8); }
  50% { opacity: 1; filter: drop-shadow(0 0 5px #ffe9a8); }
}

/* ---- bioluminescent fish drifting in the midnight/abyssal zone ---- */
.biofish { width: 5%; max-width: 60px; animation: biofishDrift 9s ease-in-out infinite; }
@keyframes biofishDrift {
  0%   { transform: translate(0,0) rotate(0deg); }
  25%  { transform: translate(-6px,5px) rotate(-2.5deg); }
  50%  { transform: translate(-15px,9px) rotate(1.5deg); }
  75%  { transform: translate(-9px,4px) rotate(-1deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
.photophore { animation: photophorePulse 2.6s ease-in-out infinite; transform-origin: center; }
.photophore:nth-child(3) { animation-delay: 0.15s; }
.photophore:nth-child(4) { animation-delay: 0.35s; }
.photophore:nth-child(5) { animation-delay: 0.55s; }
.photophore:nth-child(6) { animation-delay: 0.75s; }
.photophore:nth-child(7) { animation-delay: 0.95s; }
@keyframes photophorePulse {
  0%, 100% { opacity: 0.4; filter: drop-shadow(0 0 1px #6ff0e2); }
  50% { opacity: 1; filter: drop-shadow(0 0 4px #6ff0e2); }
}
.silver-shine { animation: silverShinePulse 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes silverShinePulse {
  0%, 100% { opacity: 0.35; filter: drop-shadow(0 0 1px #e8eef2); }
  50% { opacity: 1; filter: drop-shadow(0 0 4px #f4f8fb); }
}

.scabbardfish { width: 26%; max-width: 340px; animation: scabbardDrift 11s ease-in-out infinite; transform-origin: 40% 50%; }
@keyframes scabbardDrift {
  0%   { transform: translate(0,0) rotate(0deg); }
  20%  { transform: translate(-7px,4px) rotate(-2deg); }
  40%  { transform: translate(-15px,7px) rotate(2.5deg); }
  60%  { transform: translate(-21px,5px) rotate(-1.5deg); }
  80%  { transform: translate(-11px,1px) rotate(1deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
.scabbard-shimmer {
  mix-blend-mode: screen;
  animation: scabbardShimmer 4s linear infinite;
}
@keyframes scabbardShimmer {
  0%   { filter: hue-rotate(0deg) saturate(2.5); }
  50%  { filter: hue-rotate(180deg) saturate(3); }
  100% { filter: hue-rotate(360deg) saturate(2.5); }
}

/* ---- loggerhead turtle ---- */
.turtle { width: 9%; max-width: 100px; animation: turtleGlide 13s ease-in-out infinite; }
@keyframes turtleGlide {
  0%   { transform: translate(0,0) rotate(0deg); }
  30%  { transform: translate(-13px,-7px) rotate(-2deg); }
  55%  { transform: translate(-26px,-11px) rotate(1.5deg); }
  80%  { transform: translate(-16px,-4px) rotate(-1deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
.turtle-flipper { animation: flipperStroke 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes flipperStroke {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(10deg); }
}

/* ---- flying fish ---- */
.flyingfish { width: 6%; max-width: 74px; animation: flyingfishArc 7s ease-in-out infinite; }
@keyframes flyingfishArc {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  50% { transform: translateX(42px) translateY(-20px) rotate(-6deg); }
}
.flyfish-wing { animation: wingSpread 2s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes wingSpread {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.82); }
}

/* ---- devil ray (large) ---- */
.devilray { width: 10%; max-width: 128px; animation: raySway 11s ease-in-out infinite; }

/* ---- lanternfish ---- */
.lanternfish { width: 3.4%; max-width: 42px; animation: biofishDrift 9s ease-in-out infinite; }

/* ---- pilot whale ---- */
.pilotwhale { width: 20%; max-width: 260px; animation: whaleDrift 19s ease-in-out infinite; }
@keyframes whaleDrift {
  0%   { transform: translate(0,0) rotate(0deg); }
  35%  { transform: translate(-24px,7px) rotate(-1deg); }
  65%  { transform: translate(-42px,11px) rotate(-2deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

/* ---- viperfish ---- */
.viperfish { width: 6%; max-width: 78px; animation: anglerDrift 10s ease-in-out infinite; }

/* ---- dragonfish ---- */
.dragonfish { width: 9%; max-width: 110px; animation: scabbardDrift 13s ease-in-out infinite; }
.dragon-lure { animation: lureGlow 2.8s ease-in-out infinite; transform-origin: center; }

/* ---- hydrothermal vent ---- */
.seabed { position: absolute; left: 0; right: 0; z-index: 1; height: 4%; }
.seabed svg { width: 100%; height: 100%; display: block; }

.vent { position: absolute; z-index: 1; width: 9%; max-width: 110px; }
.vent-svg { width: 100%; display: block; }
.vent-glow {
  position: absolute;
  left: 50%; bottom: 6%;
  width: 220%;
  height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 150, 70, 0.4), rgba(255, 100, 40, 0.12) 55%, transparent 75%);
  filter: blur(6px);
  z-index: -1;
}
.vent-plume { position: absolute; left: 38%; bottom: 92%; width: 24%; height: 200%; }
.vent-plume span {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 140%;
  height: 30%;
  margin-left: -70%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(210, 190, 180, 0.32), transparent 70%);
  filter: blur(3px);
  animation: plumeRise 4.5s ease-out infinite;
}
.vent-plume span:nth-child(2) { animation-delay: 1.5s; }
.vent-plume span:nth-child(3) { animation-delay: 3s; }
@keyframes plumeRise {
  0% { transform: translateY(0) scaleX(1); opacity: 0; }
  15% { opacity: 0.7; }
  100% { transform: translateY(-160%) scaleX(1.8); opacity: 0; }
}

.tube-worm { transform-origin: bottom center; animation: wormSway 4s ease-in-out infinite; }
.tube-worm:nth-child(2) { animation-delay: 0.7s; }
.tube-worm:nth-child(3) { animation-delay: 1.4s; }
@keyframes wormSway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2.5deg); }
}

/* ---- vent shrimp, clustered around the vent base ---- */
.vent-shrimp { position: absolute; animation: shrimpTwitch 1.8s ease-in-out infinite; }
@keyframes shrimpTwitch {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

/* ---- dumbo octopus ---- */
.dumbo { width: 7%; max-width: 88px; animation: dumboFlap 5s ease-in-out infinite; }
@keyframes dumboFlap {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.03); }
}
.dumbo-ear { animation: earFlap 2.2s ease-in-out infinite; transform-origin: 50% 30%; }
.dumbo-ear.right { animation-delay: 1.1s; }
@keyframes earFlap {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(8deg); }
}

/* ---- sea cucumber, resting on the seafloor ---- */
.seacucumber { width: 5%; max-width: 60px; animation: cucumberSway 6s ease-in-out infinite; transform-origin: bottom center; }
@keyframes cucumberSway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

/* ---- bubbles ---- */
.bubble {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.85), rgba(255,255,255,0.08) 70%);
  z-index: 1;
  animation: bubbleRise linear infinite;
}
@keyframes bubbleRise {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: 0.75; }
  90% { opacity: 0.5; }
  100% { transform: translate(12px, -18vh); opacity: 0; }
}

@media (max-width: 760px) {
  .dive { height: 615vh; }
  .angler { width: 13%; max-width: 82px; }
  .vent { width: 15%; max-width: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  .fish-svg, .ray-wrap, .jellyfish, .jelly-tentacle, .angler, .angler-lure,
  .scabbardfish, .scabbard-shimmer, .silver-shine, .vent-plume span, .bubble, .tube-worm, .biofish, .photophore,
  .turtle, .turtle-flipper, .flyingfish, .flyfish-wing, .devilray, .lanternfish,
  .pilotwhale, .viperfish, .dragonfish, .dragon-lure, .vent-shrimp,
  .dumbo, .dumbo-ear, .seacucumber {
    animation: none !important;
  }
}