/* JML 3D — the page floats over a living O'ahu */

:root {
  --glass: rgba(14, 12, 14, 0.58);
  --glass-strong: rgba(14, 12, 14, 0.74);
  --glass-line: rgba(255, 240, 225, 0.12);
}
html { background: #0b0b0a; }
body { background: transparent; }
body::before { background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 120px; opacity: .35; }

#world { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -3; display: block; }
.world-veil {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 7, 9, .72) 0%, rgba(8, 7, 9, .25) 42%, transparent 65%),
    linear-gradient(180deg, rgba(8, 7, 9, .35) 0%, transparent 18%, transparent 78%, rgba(8, 7, 9, .55) 100%);
}

/* loader */
.loader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: #0b0b0a; transition: opacity 1s var(--ease) .2s, visibility 1s .2s;
}
.loader img { width: 180px; height: auto; animation: breathe 2.4s ease-in-out infinite; }
.loader p { color: var(--ink-3); margin: 0; }
.loader__dots::after { content: ""; animation: dots 1.4s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@keyframes breathe { 50% { opacity: .55; transform: scale(.97); } }
.world-ready .loader { opacity: 0; visibility: hidden; }
html:not(.world-ready) .reveal { animation-play-state: paused; }

/* scroll progress */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), #ffb27a); box-shadow: 0 0 12px var(--accent); }

/* cursor aura */
.cursor {
  position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; z-index: 90; pointer-events: none;
  border-radius: 50%; border: 1px solid rgba(255, 180, 140, .55); mix-blend-mode: screen; opacity: 0;
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .3s, opacity .3s;
}
.cursor.is-on { opacity: 1; }
.cursor.is-hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(255, 106, 43, .14); border-color: var(--accent); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* hero over the island */
.hero { min-height: calc(100svh - 70px); position: relative; }
.hero__copy { text-shadow: 0 2px 30px rgba(0, 0, 0, .45); }
.hero__media { min-height: 62vh; margin: 0; }
.chip--flight { top: 18%; left: 8%; }
.chip--quote { bottom: 10%; left: auto; right: 4%; }
.scrollcue {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px;
  text-decoration: none; color: var(--ink-3);
}
.scrollcue i { width: 22px; height: 36px; border: 1px solid var(--line-2); border-radius: 12px; position: relative; }
.scrollcue i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--accent); animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

.ticker { background: var(--glass); backdrop-filter: blur(10px); transform: skewY(var(--skew, 0deg)); transition: transform .3s var(--ease); }

/* glass everywhere content sits on the world */
.svc, .route, .steps, .rate, .review, .faq__list, .form, .book__intro, .small-party, .section__head--glass {
  backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25);
}
.svc { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r); padding: 0 clamp(16px, 2.6vw, 34px); }
.svc__row:last-child { border-bottom: 0; }
.route { background: var(--glass-strong); }
.steps { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r); padding: 0 clamp(18px, 2.4vw, 30px); }
.steps li:first-child { border-top: 0; }
.steps li:last-child { border-bottom: 0; }
.rate { background: var(--glass); border-color: var(--glass-line); }
.rate--feature { background: radial-gradient(120% 80% at 100% 0%, rgba(255, 106, 43, .22), transparent 60%), var(--glass-strong); }
.small-party { background: radial-gradient(80% 140% at 0% 100%, rgba(63, 210, 199, .14), transparent 70%), var(--glass); }
.review { background: var(--glass); border-color: var(--glass-line); }
.review--big { background: var(--accent); }
.faq__list { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r); padding: 0 clamp(18px, 2.4vw, 30px); }
.faq__list details:first-child { border-top: 0; }
.faq__list details:last-child { border-bottom: 0; }
.form { background: linear-gradient(180deg, rgba(30, 26, 26, .78), rgba(14, 12, 14, .72)); }
.book__intro { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r); padding: clamp(22px, 3vw, 36px); }
.section__head .h2, .section__head .lede { text-shadow: 0 2px 24px rgba(0, 0, 0, .55); }
.foot { position: relative; }

/* tours: the right side is a window onto the live map */
.tours { align-items: stretch; }
.tours__copy { order: -1; }
.tours__map {
  position: sticky; top: 90px; min-height: min(82vh, 760px); border-radius: var(--r); border: 1px dashed rgba(255, 240, 225, .16);
  background: radial-gradient(60% 50% at 50% 50%, transparent 55%, rgba(8, 7, 9, .35)); pointer-events: none;
}
.tours__badge { pointer-events: auto; }
.tours__legend {
  position: absolute; right: 18px; top: 16px; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: var(--ink-2); font-size: .62rem; padding: 8px 12px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--glass-line);
}
.lg { display: inline-block; width: 16px; height: 3px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.lg--stop { width: 8px; height: 8px; border-radius: 50%; margin-left: 8px; }

/* labels projected from the 3D markers */
.maplabels { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .3s; }
.maplabels.is-live .maplabel:not(.maplabel--static) { pointer-events: auto; }
.maplabel {
  position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform;
  font: 500 .66rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 9px; border-radius: 999px; border: 1px solid rgba(244, 220, 180, .35);
  background: rgba(14, 12, 14, .7); color: #f4dcb4; cursor: pointer; backdrop-filter: blur(6px);
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.maplabel:hover { border-color: var(--accent); color: #fff; }
.maplabel.is-sel { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 0 22px rgba(255, 106, 43, .6); }
.maplabel--static { cursor: default; color: var(--sea); border-color: rgba(63, 210, 199, .45); }

/* split-word headline reveals */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.wi { display: inline-block; transform: translateY(105%) rotate(4deg); transform-origin: left bottom; transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 55ms + 80ms); }
.split.is-in .wi { transform: none; }
.hero .split .wi { transition-delay: calc(var(--i, 0) * 70ms + 450ms); }

/* 3D tilt + glare */
[data-tilt] { position: relative; transform-style: preserve-3d; will-change: transform; }
[data-tilt]:not(.sr), .js [data-tilt].sr.in {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform .5s var(--ease), opacity .9s var(--ease), border-color .3s;
}
[data-tilt].is-tilting { transition: transform .08s linear, opacity .9s var(--ease); }
[data-tilt]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 245, 235, .16), transparent 45%);
  opacity: var(--go, 0); transition: opacity .4s;
}
[data-depth] { translate: 0 var(--py, 0px); }
.rate:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.btn { translate: var(--mx, 0px) var(--my, 0px); transition: transform .35s var(--ease), translate .4s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .35s; }

/* no-WebGL fallback: a still, layered postcard */
.no-webgl #world { display: none; }
.no-webgl body {
  background:
    linear-gradient(180deg, rgba(11, 11, 10, .2), #0b0b0a 70%),
    url("img/sprinter.jpg") center top / cover no-repeat fixed;
}
.no-webgl .tours__map { background: url("img/tour.jpg") center / cover; border-style: solid; }
.no-webgl .maplabels { display: none; }

@media (max-width: 900px) {
  .world-veil { background: linear-gradient(180deg, rgba(8, 7, 9, .2) 0%, rgba(8, 7, 9, .55) 55%, rgba(8, 7, 9, .7) 100%); }
  .hero { min-height: auto; padding-top: 30vh; }
  .hero__media { order: 0; min-height: 0; margin: 0; position: absolute; inset: 0; pointer-events: none; }
  .chip--flight { top: 6%; right: 16px; left: auto; }
  .scrollcue { display: none; }
  .tours__map { position: relative; top: 0; min-height: 62vh; order: -1; }
  .tours__copy { order: 0; }
  .maplabel { font-size: .58rem; padding: 5px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .wi { transform: none !important; }
  .loader img { animation: none; }
}
@media (max-width: 900px), (pointer: coarse) { .maplabels.is-live .maplabel:not(.maplabel--static) { pointer-events: none; } }
@media (max-width: 900px) {
  .maplabel:not(.is-sel):not(.maplabel--static) { display: none; }
  .tours__badge { left: 12px; bottom: 12px; padding: 12px 14px; }
  .tours__badge strong { font-size: 2.2rem; }
}
/* ===== real-world upgrade: explore mode, traffic HUD, place cards ===== */
.btn--glass { background: rgba(255, 248, 236, .08); border-color: rgba(255, 240, 225, .28); backdrop-filter: blur(10px); color: var(--ink); }
.btn--glass:hover { background: rgba(255, 248, 236, .16); border-color: var(--ink); }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sea); box-shadow: 0 0 0 0 var(--sea); animation: ping 2s infinite; display: inline-block; }
.nav__explore { color: var(--sea) !important; }
.airport__cta { margin: 18px 0 0; }

/* explore mode: the world comes forward, the page steps back */
.exploring main, .exploring .foot, .exploring .world-veil, .exploring .callbar, .exploring .progress { opacity: 0; visibility: hidden; pointer-events: none; }
main, .foot { transition: opacity .6s var(--ease), visibility .6s; }
.exploring #world { z-index: 40; cursor: grab; }
.exploring #world:active { cursor: grabbing; }
.exploring .maplabels { z-index: 42; }
.exploring .cursor { display: none; }
.explore { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.explore[hidden] { display: none; }
.explore > * { pointer-events: auto; }
.explore__top {
  position: absolute; top: 84px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  pointer-events: none;
}
.explore__top > * { pointer-events: auto; }
.explore__kick { display: flex; align-items: center; gap: 10px; color: var(--ink); margin: 0 0 6px; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.explore__hint { margin: 0; color: var(--ink-2); font-size: .9rem; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.explore__places {
  position: absolute; left: 0; right: 0; bottom: 18px; display: flex; gap: 8px; overflow-x: auto; padding: 6px var(--gutter);
  scrollbar-width: none; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.explore__places::-webkit-scrollbar { display: none; }
.placechip {
  flex: 0 0 auto; font: 500 .86rem/1 var(--sans); color: var(--ink); padding: 11px 16px; border-radius: 999px; cursor: pointer;
  background: rgba(14, 12, 14, .62); border: 1px solid rgba(255, 240, 225, .2); backdrop-filter: blur(12px);
  transition: background .25s, border-color .25s, transform .3s var(--ease);
}
.placechip:hover { border-color: var(--ink); transform: translateY(-2px); }
.placechip.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.maplabel--place { color: #fff; border-color: rgba(255, 255, 255, .4); background: rgba(14, 12, 14, .55); }
.maplabel--place:hover { background: var(--accent); color: var(--accent-ink); }
.exploring .maplabels .maplabel--place { pointer-events: auto; }

.placecard {
  position: absolute; right: var(--gutter); top: 150px; width: min(380px, calc(100vw - 32px)); border-radius: 20px; overflow: hidden;
  background: rgba(14, 12, 14, .82); border: 1px solid rgba(255, 240, 225, .16); backdrop-filter: blur(18px); box-shadow: var(--shadow);
  animation: pop .5s var(--ease) both;
}
.placecard[hidden] { display: none; }
.placecard__img { margin: 0; position: relative; aspect-ratio: 3 / 2; background: #111; }
.placecard__img[hidden] { display: none; }
.placecard__img img { width: 100%; height: 100%; object-fit: cover; }
.placecard__img figcaption { position: absolute; left: 8px; bottom: 8px; right: 8px; font-size: .56rem; color: rgba(255,255,255,.8); text-shadow: 0 1px 6px #000; text-transform: none; letter-spacing: .02em; }
.placecard__body { padding: 20px 22px 22px; }
.placecard__kick { color: var(--accent); margin: 0 0 6px; }
.placecard h3 { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1; margin: 0 0 10px; }
.placecard p:not(.mono) { color: var(--ink-2); margin: 0 0 18px; font-size: .95rem; }
.placecard__cta { display: flex; align-items: center; gap: 16px; }

/* traffic HUD */
.hud {
  position: fixed; left: var(--gutter); bottom: 22px; z-index: 46; width: 240px; padding: 14px 16px; border-radius: 16px;
  background: rgba(14, 12, 14, .74); border: 1px solid rgba(255, 240, 225, .16); backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.show-traffic .hud { opacity: 1; transform: none; pointer-events: auto; }
.exploring .hud { bottom: 86px; }
.hud__row { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.hud__row b { color: var(--ink); font-weight: 500; }
.hud__dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3a2a; box-shadow: 0 0 10px #ff3a2a; }
.hud__state { font-family: var(--serif); font-size: 1.35rem; margin: 6px 0 8px; line-height: 1.1; }
.hud__bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.hud__bar span { display: block; height: 100%; background: linear-gradient(90deg, #3fd2c7, #ffb27a, #ff3a2a); transform-origin: left; transition: transform 1s var(--ease); }
.hud__btn { margin-top: 12px; width: 100%; font: 500 .8rem/1 var(--sans); padding: 9px; border-radius: 999px; border: 1px solid rgba(255,240,225,.28); background: transparent; color: var(--ink); cursor: pointer; }
.hud__btn[aria-pressed="true"] { background: #ff3a2a; border-color: #ff3a2a; }
.hud__note { margin: 8px 0 0; font-size: .68rem; color: var(--ink-3); }

/* credits */
.credits { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 18px; color: var(--ink-3); }
.credits summary { cursor: pointer; color: var(--ink-3); }
.credits ul { margin: 12px 0 0; padding-left: 18px; font-size: .8rem; line-height: 1.6; }

@media (max-width: 900px) {
  .explore__top { top: 76px; flex-direction: column; }
  .explore__hint { font-size: .8rem; }
  .placecard { left: 12px; right: 12px; width: auto; top: auto; bottom: 74px; max-height: 52vh; overflow: auto; }
  .placecard__img { aspect-ratio: 16 / 8; }
  .hud { width: 200px; bottom: 90px; left: 12px; padding: 12px; }
  .exploring .hud { top: 150px; bottom: auto; }
  .hud__note { display: none; }
  .nav__explore { order: -1; }
}

/* slim live caption instead of a photo card */
.placecard { top: auto; bottom: 86px; right: var(--gutter); width: min(360px, calc(100vw - 32px)); }
.placecard__body { padding: 16px 18px 18px; }
.placecard h3 { font-size: 1.7rem; }
.placecard p:not(.mono) { margin-bottom: 14px; }
@media (max-width: 900px) { .placecard { left: 12px; right: 12px; width: auto; bottom: 74px; } }

.placecard [hidden], .explore [hidden] { display: none !important; }

/* ===== immersive: nothing between the guest and the island ===== */
.live { position: fixed; inset: 0; z-index: 41; opacity: 0; pointer-events: none; background: #000; transition: opacity 1.6s var(--ease); }
.live.is-on { opacity: 1; pointer-events: auto; }
.live video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); animation: drift 22s ease-in-out infinite alternate; }
@keyframes drift { to { transform: scale(1.1) translate(-1%, -0.6%); } }
.live__grain { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0,0,0,.35)); }

.immersive .nav, .immersive .explore__top, .immersive .explore__places, .immersive .hud,
.immersive .maplabels, .immersive .chat, .immersive .placecard, .immersive .callbar,
.ui-quiet .nav, .ui-quiet .explore__top, .ui-quiet .explore__places, .ui-quiet .hud, .ui-quiet .placecard, .ui-quiet .chat, .ui-quiet .maplabels {
  opacity: 0 !important; pointer-events: none !important; transition: opacity .7s var(--ease);
}
.nav, .explore__top, .explore__places, .hud, .placecard, .chat, .maplabels { transition: opacity .5s var(--ease); }
.immersive #world { cursor: grab; }

/* peek: a whisper of UI on mouse move / tap, then gone again */
.livebar {
  position: fixed; top: 20px; left: 20px; z-index: 47; display: none; align-items: center; gap: 8px;
  font: 500 .88rem/1 var(--sans); color: #fff; padding: 11px 16px; border-radius: 999px; cursor: pointer;
  background: rgba(10, 10, 12, .45); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .5s var(--ease);
}
.immersive .livebar { display: inline-flex; }
.immersive.ui-peek .livebar { opacity: 1; }
.immersive.ui-peek .placecard { opacity: 1 !important; pointer-events: auto !important; }
.immersive:not(.ui-peek) .livebar { pointer-events: none; }