/* Final layer — select micro-interactions */
@media (prefers-reduced-motion: no-preference) {

/* one gold underline glides between the booking tabs */
.anim-final .module-tablist { position: relative; }
.anim-final .module-tab[aria-selected="true"] { border-bottom-color: transparent; }
.f-tab-ind {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: var(--gold);
  transition: left .45s var(--ease-out), width .45s var(--ease-out);
  pointer-events: none;
}

/* golden hour: a sun slowly rises behind the globe, then sets rosier */
.anim-final .hero { position: relative; }
.anim-final .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(10% 7% at 76% 86%, rgba(255, 195, 125, .18), rgba(255, 195, 125, 0) 100%),
    radial-gradient(44% 38% at 76% 90%,
      rgba(226, 150, 84, .16),
      rgba(203, 116, 70, .06) 46%,
      rgba(203, 116, 70, 0) 68%);
  mix-blend-mode: screen;
  animation: fDawn 24s ease-in-out infinite;
}
@keyframes fDawn {
  0%   { opacity: .12; transform: translateY(6%); }
  38%  { opacity: .36; transform: translateY(-2%); }
  62%  { opacity: .36; transform: translateY(-2%); }
  100% { opacity: .12; transform: translateY(6%); }
}

/* sunset wash breathing across the closing CTA */
.anim-final .final-cta { position: relative; overflow: hidden; }
.anim-final .final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(8deg,
    rgba(219, 128, 66, .12),
    rgba(219, 128, 66, .04) 32%,
    rgba(219, 128, 66, 0) 55%);
  mix-blend-mode: screen;
  animation: fDusk 14s ease-in-out infinite alternate;
}
@keyframes fDusk {
  from { opacity: .2; transform: translateY(4%); }
  to   { opacity: .45; transform: translateY(0); }
}
.anim-final .final-cta .wrap { position: relative; }

/* the compass needle sways at anchor */
.anim-final .compass-visual path[fill="#B89B5E"] {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: fSway 7s ease-in-out infinite;
}
@keyframes fSway {
  0%, 100% { rotate: -6deg; }
  50% { rotate: 6deg; }
}

}

/* ---- spin-the-compass (interactive; works with reduced motion too) ---- */
.compass-visual.f-spinnable { cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.compass-visual.f-spinnable:hover { border-color: var(--gold); box-shadow: 0 18px 50px -22px rgba(184, 155, 94, .55); }
.compass-visual.f-spinnable:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.f-spin { padding: 0 1.2rem 1.4rem; text-align: center; }
.f-spin-prompt {
  margin: .2rem 0 .5rem;
  font-size: .85rem;
  letter-spacing: .05em;
  color: rgba(246, 241, 232, .78);
}
.f-spin-prompt em { font-family: var(--serif); font-style: italic; color: var(--gold-bright); }
.f-spin-result { margin: 0; min-height: 3.4rem; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.f-spin-name { font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.2; color: var(--gold-bright); }
.f-spin-go {
  visibility: hidden;
  opacity: 0;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 155, 94, .5);
  padding-bottom: 2px;
  transition: opacity .5s ease, color .2s;
}
.f-spin-go:hover { color: var(--ivory); }
.f-spin.landed .f-spin-go { visibility: visible; opacity: 1; }

/* phones: hold the ember still (blend-mode animation costs battery) and
   let the tabs keep their own gold border - the gliding underline can't
   follow a two-row tab grid */
@media (max-width: 760px) {
  .anim-final .hero::before { animation: none; opacity: .16; }
  .anim-final .final-cta::before { animation: none; opacity: .22; }
  .f-tab-ind { display: none; }
  .anim-final .module-tab[aria-selected="true"] { border-bottom-color: var(--gold); }
}

/* the compass letters are svg text - without this, clicks start a text
   selection and a caret blinks over the dial */
.compass-visual.f-spinnable,
.compass-visual.f-spinnable * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* landed state: legible name, curated photo, caption */
.f-spin-name {
  font-style: normal;
  font-weight: 650;
  font-variation-settings: "opsz" 11;
  font-size: 1.55rem;
  letter-spacing: .01em;
  color: var(--ivory);
}
.f-spin-photo-wrap {
  display: none;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(184, 155, 94, .35);
  margin-bottom: .55rem;
}
.f-spin-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-spin-caption {
  display: none;
  font-family: var(--sans);
  font-weight: 450;
  font-size: .9rem;
  line-height: 1.55;
  color: rgba(246, 241, 232, .85);
  max-width: 40ch;
}
.f-spin.landed .f-spin-photo-wrap { display: block; animation: fPhotoIn .8s var(--ease-out); }
.f-spin.landed .f-spin-caption { display: block; animation: fPhotoIn .9s ease .08s both; }
@keyframes fPhotoIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* landed: the compass hands its spot to the photo, in normal flow, inside the
   same card (a JS min-height lock keeps the box from shrinking) */
.compass-visual.f-landed > svg { display: none; }
.f-spin.landed .f-spin-caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.f-spin.landed .f-spin-photo-wrap { aspect-ratio: 16 / 9; }
.compass-visual.f-landed { padding-top: 1.6rem; }
.f-spin.landed { padding-bottom: 1rem; }