/* ==========================================================================
   ANIMATIONS — keyframes and initial (pre-reveal) states.
   Initial hidden states only apply when JS is on (html.js) and are removed
   by .no-gsap if the animation library fails to load.
   ========================================================================== */
@keyframes fadeup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ring { 0% { transform: scale(.55); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes scrollcue { 0% { top: -40%; } 100% { top: 100%; } }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1.06); } to { transform: translate3d(-1.2%, -1%, 0) scale(1.12); } }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(236,202,124,.45); } 60% { box-shadow: 0 0 0 10px rgba(236,202,124,0); } }

/* Hero entrance */
.js [data-hero-in] { opacity: 0; transform: translateY(26px); }
.js .hl { transform: translateY(112%); }
.no-gsap [data-hero-in], .no-gsap .hl { opacity: 1 !important; transform: none !important; }
.hero__bg { animation: drift 24s var(--ease-io) infinite alternate; }
.js .hero__bg { animation: none; }
.hero__loc .dot { animation: pulse-dot 2.6s ease-out infinite; }

/* Hotspot beacons (space explorer) */
.hot__pt button { animation: pulse-dot 3s ease-out infinite; }
.hot__pt:nth-child(2n) button { animation-delay: .9s; }
.hot__pt:nth-child(3n) button { animation-delay: 1.8s; }

/* Line-draw graphics: initial state (JS animates dashoffset to 0) */
.js .bp-elev path[pathLength], .js .sun path[pathLength], .js .sun circle[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.no-gsap .bp-elev path, .no-gsap .sun path, .no-gsap .sun circle { stroke-dashoffset: 0 !important; }
.js .tl__line { transform: translateX(-50%) scaleY(0); }
.no-gsap .tl__line { transform: translateX(-50%) !important; }

/* Distance bars grow when in view */
.js .dist__bar i { transform: scaleX(0); }
.no-gsap .dist__bar i { transform: scaleX(var(--p, 1)) !important; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 9990; display: grid; grid-template-rows: auto 1fr auto; background: rgba(9, 8, 7, .96); color: #efe8d8; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; touch-action: none; }
.lb.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s; }
.lb__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: max(14px, env(safe-area-inset-top)) clamp(14px, 3vw, 40px) 10px; }
.lb__count { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--champagne); }
.lb__tools { display: flex; gap: 8px; }
.lb__btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--line); color: #efe8d8; transition: background-color .3s, color .3s; }
.lb__btn:hover, .lb__btn:focus-visible { background: var(--gold); color: var(--black); }
.lb__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lb__stage { position: relative; overflow: hidden; cursor: grab; }
.lb__stage.is-dragging { cursor: grabbing; }
.lb__stage.is-zoomed { cursor: grab; }
.lb__img { position: absolute; left: 50%; top: 50%; translate: -50% -50%; max-width: 92%; max-height: 92%; width: auto; height: auto; transform-origin: 50% 50%; will-change: transform; -webkit-user-drag: none; user-select: none; opacity: 0; transition: opacity .4s; background: transparent; }
.lb__img.is-paper { background: #fff; }
.lb__img.is-ready { opacity: 1; }
.lb__nav { position: absolute; top: 50%; z-index: 2; width: 54px; height: 54px; margin-top: -27px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(13,12,10,.6); color: #efe8d8; transition: background-color .3s, color .3s; }
.lb__nav:hover, .lb__nav:focus-visible { background: var(--gold); color: var(--black); }
.lb__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lb__nav--prev { left: clamp(10px, 2.4vw, 32px); } .lb__nav--next { right: clamp(10px, 2.4vw, 32px); }
.lb__cap { padding: 12px clamp(14px, 3vw, 40px) max(18px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.lb__title { font-family: var(--font-display); font-size: clamp(1.05rem, 1.6vw, 1.5rem); }
.lb__note { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--champagne); }
.lb-open { overflow: hidden; }

/* Gallery filter transition */
.gi { transition: opacity .45s var(--ease), transform .6s var(--ease); }
.gi.is-fading { opacity: 0; transform: scale(.96); }

/* Form success flourish */
.form.is-sent .form__submit { pointer-events: none; opacity: .6; }

/* Horizontal amenities: media reveals are driven by the track itself */
.js .amen .reveal-img { clip-path: none; }
.js .amen .reveal-img > img { transform: none; }