/* ------------------------------------------------------------
   Page sections, top (surface) to bottom (sea floor)
   ------------------------------------------------------------ */
section { position: relative; padding: clamp(100px, 16vh, 180px) 0; }

/* ---------- Hero ---------- */
.hero { min-height: max(100svh, 640px); padding: 0; overflow: hidden; z-index: 1; display: grid; place-items: center; }
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky-top) 0%, #5b4f8a 34%, var(--sky-mid) 50%, var(--sky-low) 64%, var(--horizon) 74%); }
.sun {
  position: absolute; left: 70%; top: 74%; width: 30vmin; aspect-ratio: 1; margin: -15vmin 0 0 -15vmin; border-radius: 50%;
  background: radial-gradient(circle, #fff6df 0 28%, rgba(255, 215, 150, .85) 34%, rgba(255, 180, 120, .25) 55%, transparent 70%);
  animation: breathe 9s ease-in-out infinite alternate;
}
@keyframes breathe { to { scale: 1.08; opacity: .9; } }
.layer { position: absolute; left: 0; width: 100%; bottom: 25%; height: 18vh; }
.layer.far path { fill: #8a6b97; opacity: .55; }
.layer.near { height: 12vh; }
.layer.near path { fill: #43396a; }
.sea { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, #f3b08a 0%, #b9878f 10%, #4e8aa3 38%, var(--sea-top) 60%, var(--shallow) 100%); }
.glint { position: absolute; left: 70%; top: 4%; width: 22vmin; translate: -50% 0; display: grid; gap: 1.4vh; }
.glint i { display: block; height: 2px; border-radius: 2px; background: #fff3d6; opacity: .7; animation: glint 4s ease-in-out infinite alternate; }
.glint i:nth-child(2n) { width: 70%; margin-left: 18%; animation-delay: -1.3s; }
.glint i:nth-child(3n) { width: 45%; margin-left: 30%; animation-delay: -2.6s; }
@keyframes glint { from { opacity: .15; transform: scaleX(.6); } to { opacity: .8; transform: scaleX(1.05); } }
.banca { position: absolute; left: 12%; top: 16%; width: clamp(110px, 12vw, 190px); fill: #2c2648; stroke: #2c2648; stroke-linecap: round; animation: bob 6s ease-in-out infinite; }
.banca path:not(:first-child) { fill: none; }
.banca path:last-child { fill: #f6d8b8; fill-opacity: .9; }
@keyframes bob { 0%, 100% { rotate: -1.5deg; translate: 0 0; } 50% { rotate: 1.5deg; translate: 0 6px; } }

.hero-copy { position: relative; z-index: 3; align-self: start; text-align: center; padding: clamp(96px, 13vh, 130px) 16px 0; max-width: 900px; text-shadow: 0 2px 30px rgba(30, 20, 60, .45); }
.hero-logo { margin: 0 auto 22px; width: clamp(84px, 9vw, 112px); border-radius: 50%; background: #fff; padding: 4px; box-shadow: 0 20px 60px -20px rgba(20, 10, 50, .6); animation: float 8s ease-in-out infinite; }
@keyframes float { 50% { translate: 0 -10px; } }
.hero h1 { margin-bottom: .25em; font-size: clamp(3rem, 8vw, 6.2rem); }
.hero .lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 44ch; margin: 0 auto 2em; color: rgba(255, 255, 255, .9); }
.hero .eyebrow { color: #ffe3bd; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.scroll-cue { position: absolute; z-index: 3; bottom: 30px; left: 50%; translate: -50% 0; display: grid; justify-items: center; gap: 10px; font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; text-decoration: none; color: rgba(255, 255, 255, .85); }
.scroll-cue i { width: 1px; height: 46px; background: linear-gradient(#fff, transparent); animation: drip 2.6s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { scale: 1 0; } 50% { scale: 1 1; } 100% { scale: 1 1; opacity: 0; } }

.waves { position: absolute; left: 0; right: 0; bottom: -1px; height: 130px; z-index: 2; pointer-events: none; }
.wave { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; animation: roll linear infinite; }
.w1 { fill: rgba(43, 127, 153, .55); animation-duration: 28s; bottom: 24px; }
.w2 { fill: rgba(17, 100, 128, .8); animation-duration: 20s; animation-direction: reverse; bottom: 10px; }
.w3 { fill: var(--shallow); animation-duration: 34s; }
@keyframes roll { to { transform: translateX(-50%); } }

/* ---------- Fish schools & jellyfish ---------- */
.school { position: absolute; z-index: 1; width: 260px; height: 140px; pointer-events: none; animation: swim 80s linear infinite; }
.school.s1 { top: 8%; animation-delay: -18s; }
.school.s2 { bottom: 4%; animation-duration: 110s; animation-delay: -60s; scale: .8; }
.fish { position: absolute; width: 46px; height: 20px; fill: rgba(190, 240, 255, .32); animation: wiggle 3s ease-in-out infinite; }
.fish:nth-child(1) { left: 0; top: 40px; }
.fish:nth-child(2) { left: 56px; top: 10px; width: 38px; animation-delay: -.6s; }
.fish:nth-child(3) { left: 70px; top: 70px; animation-delay: -1.2s; }
.fish:nth-child(4) { left: 130px; top: 34px; width: 34px; animation-delay: -1.8s; }
.fish:nth-child(5) { left: 170px; top: 90px; animation-delay: -.9s; }
.fish:nth-child(6) { left: 200px; top: 4px; width: 30px; animation-delay: -2.2s; }
.fish:nth-child(7) { left: 110px; top: 110px; width: 28px; animation-delay: -1.5s; }
@keyframes swim { from { translate: 110vw 0; } to { translate: -40vw 0; } }
@keyframes wiggle { 50% { transform: translateY(-7px) rotate(-3deg); } }

.jelly { position: absolute; width: 80px; height: 160px; color: rgba(255, 170, 225, .3); filter: drop-shadow(0 0 18px rgba(255, 160, 220, .45)); pointer-events: none; z-index: 1; animation: pulse 5s ease-in-out infinite; }
.jelly.j1 { left: 4%; top: 18%; }
.jelly.j2 { right: 7%; top: 58%; width: 56px; height: 112px; color: rgba(160, 220, 255, .28); animation-delay: -2s; }
.jelly .tent { animation: tent 5s ease-in-out infinite; transform-origin: top; }
@keyframes pulse { 0%, 100% { scale: 1 1; } 40% { scale: .92 1.06; } }
@keyframes tent { 50% { transform: skewX(6deg); } }

/* ---------- Stay ---------- */
.stay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.ticks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; font-size: .95rem; }
.ticks li { display: flex; gap: 10px; align-items: baseline; }
.ticks li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); translate: 0 -2px; }
.stay-photos { position: relative; min-height: 560px; }
.ph { margin: 0; position: absolute; border-radius: var(--radius); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 10, 25, .7); border: 1px solid var(--glass-line); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph-a { top: 0; right: 0; width: 82%; aspect-ratio: 606 / 578; }
.ph-b { bottom: 0; left: 0; width: 52%; aspect-ratio: 446 / 408; }

/* ---------- Anilao cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; }
.card { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius); padding: 14px 14px 26px; backdrop-filter: blur(10px); transition: transform .8s var(--ease), background .8s, opacity 1.4s var(--ease), filter 1.4s var(--ease); }
.card img { width: 100%; height: 230px; object-position: center 35%; object-fit: cover; border-radius: 14px; margin-bottom: 22px; transition: transform 1.2s var(--ease); }
.card h3, .card p { padding: 0 10px; }
.card p { margin: 0; font-size: .95rem; }
.card.in:hover { transform: translateY(-8px); background: rgba(255, 255, 255, .1); }
.card:hover img { transform: scale(1.04); }

/* ---------- Courses path ---------- */
.path { list-style: none; padding: 0; margin: 80px 0 60px; position: relative; display: grid; gap: 34px; }
.path-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; translate: -50% 0; background: rgba(255, 255, 255, .1); border-radius: 2px; }
.path-line b { display: block; width: 100%; height: var(--p, 0%); background: linear-gradient(var(--gold), var(--coral)); box-shadow: 0 0 16px var(--coral); border-radius: 2px; }
.step { position: relative; width: calc(50% - 56px); padding: 28px 30px; background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius); backdrop-filter: blur(10px); }
.step:nth-child(odd) { margin-left: auto; }
.step::before { content: ""; position: absolute; top: 36px; width: 14px; height: 14px; border-radius: 50%; background: var(--deep); border: 2px solid var(--gold); }
.step:nth-child(even)::before { right: -64px; }
.step:nth-child(odd)::before { left: -64px; }
.step h3 { margin-bottom: .4em; }
.step p { margin: 0; font-size: .95rem; }
.tag { display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); background: rgba(255, 201, 130, .1); border: 1px solid rgba(255, 201, 130, .25); }
.chips { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 14px; border-radius: 999px; font-size: .85rem; background: rgba(255, 255, 255, .08); border: 1px solid var(--glass-line); }

/* ---------- Floating gallery ---------- */
.float-gallery { position: relative; width: min(1240px, 100% - 32px); height: 980px; margin: 40px auto 0; }
.fg { position: absolute; margin: 0; }
.fg img { width: 100%; border-radius: 18px; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .7); border: 1px solid var(--glass-line); transition: transform 1.2s var(--ease); }
.fg:hover img { transform: scale(1.03) rotate(-.5deg); }
.fg figcaption { margin-top: 12px; font-family: var(--font-display); font-style: italic; color: var(--ink-dim); }
.g1 { left: 2%; top: 4%; width: 30%; }
.g2 { left: 38%; top: 0; width: 26%; }
.g3 { right: 6%; top: 8%; width: 13%; }
.g4 { left: 12%; top: 50%; width: 28%; }
.g5 { left: 46%; top: 42%; width: 25%; }
.g6 { right: 1%; top: 56%; width: 24%; }

/* ---------- Booking ---------- */
.book-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.facts { margin: 30px 0 0; display: grid; gap: 14px; }
.facts div { display: flex; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--glass-line); }
.facts dt { width: 90px; color: var(--gold); font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; padding-top: 3px; }
.facts dd { margin: 0; }
.book-form { display: grid; gap: 18px; padding: clamp(24px, 4vw, 40px); background: rgba(255, 255, 255, .07); border: 1px solid var(--glass-line); border-radius: 28px; backdrop-filter: blur(14px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.book-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.book-form label { display: grid; gap: 8px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.book-form input, .book-form select, .book-form textarea {
  width: 100%; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--glass-line);
  background: rgba(2, 20, 36, .45); color: var(--ink); font: 400 1rem/1.4 var(--font-body); letter-spacing: 0; text-transform: none;
  transition: border-color .4s, background .4s;
}
.book-form input:focus, .book-form select:focus, .book-form textarea:focus { outline: none; border-color: var(--gold); background: rgba(2, 20, 36, .7); }
/* iOS Safari renders date inputs natively: taller, centred text, own min-width. Align them with the other fields. */
.book-form input, .book-form select { height: 50px; }
.book-form input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; text-align: left; }
.book-form input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.book-form input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.6); }
.book-form [aria-invalid="true"] { border-color: var(--coral); }
.book-form .btn { justify-self: start; }
.form-status { margin: 0; min-height: 1.5em; font-size: .95rem; color: var(--gold); }

/* ---------- Sea floor footer ---------- */
.floor { position: relative; margin-top: -60px; }
.seabed { position: relative; height: 200px; }
.sand { position: absolute; bottom: 0; width: 100%; height: 120px; fill: #1a3242; }
.grass { position: absolute; inset: 0; display: flex; justify-content: space-around; align-items: flex-end; padding: 0 4%; }
.grass i { width: 6px; height: calc(70px + var(--h, 0px)); margin-bottom: 50px; border-radius: 6px 6px 0 0; background: linear-gradient(#2f6b5a, #1b4a44); transform-origin: bottom; animation: grass 6s ease-in-out infinite alternate; }
.grass i:nth-child(3n) { --h: 50px; animation-delay: -2s; }
.grass i:nth-child(4n) { --h: 24px; animation-delay: -3.5s; background: linear-gradient(#a0465c, #6b2b44); width: 10px; }
.grass i:nth-child(5n) { --h: 70px; animation-delay: -1s; }
@keyframes grass { from { rotate: -7deg; } to { rotate: 7deg; } }
.floor-inner { padding: 30px 0 50px; display: grid; justify-items: center; gap: 18px; text-align: center; }
.floor { background: linear-gradient(transparent 200px, #1a3242 200px); }
.floor-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.floor-links a { text-decoration: none; color: var(--ink-soft); }
.floor-links a:hover { color: var(--gold); }
.floor .small { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .stay-grid, .book-grid { grid-template-columns: 1fr; }
  .stay-photos { min-height: 0; aspect-ratio: 1 / .95; }
  .cards { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .path-line { left: 7px; translate: none; }
  .step { width: auto; margin-left: 36px !important; padding: 22px; }
  .step::before { left: -36px !important; right: auto !important; top: 30px; }
  .float-gallery { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .fg { position: static; width: auto; transform: none !important; }
  .fg img { aspect-ratio: 1; object-fit: cover; }
  .jelly.j1 { top: 4%; }
}
@media (max-width: 560px) {
  .ticks, .book-form .row { grid-template-columns: 1fr; }
}