/* =====================================================================
   Shore-excursion port guides — atmosphere + theme layer (sx-atmos)
   ---------------------------------------------------------------------
   Adds a per-port visual identity on top of the shared sx-* components:
   a live animated hero scene, a themed accent that runs through the whole
   page, scroll-choreographed reveals and a progress-tracking section nav.

   Every colour here comes from --px-* custom properties set per page, so
   the same stylesheet renders Nassau's bright turquoise morning and Costa
   Maya's late amber afternoon without a single hard-coded hue.
   ===================================================================== */

/* ---------- 1. Cinematic hero ---------------------------------------- */

.ghero{
  /* the canvas supplies the colour now; this is the fallback beneath it */
  background:linear-gradient(170deg,var(--px-sky-1) 0%,var(--px-sky-2) 58%,var(--px-sky-3) 100%);
  padding-top:0;
  isolation:isolate;
  min-height:min(100vh,880px);
  display:flex;
  flex-direction:column;
}
.ghero > .wrap{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
/* the badge is a pill, not a bar — don't let the column stretch it */
.ghero .gbadge{align-self:flex-start}
/* the copy is left-weighted so the open water and the light stay visible */
.ghero .governing{max-width:46ch}
@media (max-width:860px){
  .ghero{min-height:auto}
  .ghero .governing{max-width:66ch}
}
/* the family's diagonal hatch + brass glow fight the scene — retire them */
.ghero::before{display:none}
.ghero::after{display:none}

.sx-scene{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.sx-scene canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  /* parallax: the scene drifts slower than the copy that sits over it */
  will-change:transform;
}
/* Keeps the headline legible without flattening the scene. The heavy
   shading is left-weighted, under the copy, so the open water and the
   light on the right stay fully saturated.
   Deliberately plain rgba rather than color-mix: this one is load-bearing
   for contrast, so it must never fail to parse. */
.sx-scene::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(96deg,
      var(--px-scrim-top) 0%,
      var(--px-scrim-top) 16%,
      var(--px-scrim-mid) 44%,
      var(--px-scrim-faint) 64%,
      rgba(0,0,0,0) 82%),
    linear-gradient(0deg,
      var(--px-scrim-foot) 0%,
      rgba(0,0,0,0) 30%);
}
@media (max-width:860px){
  /* no room to dodge the copy on a phone — shade the whole frame instead */
  .sx-scene::after{
    background:
      linear-gradient(185deg,
        var(--px-scrim-top) 0%,
        var(--px-scrim-mid) 46%,
        rgba(0,0,0,0) 74%),
      linear-gradient(0deg,
        var(--px-scrim-foot) 0%,
        rgba(0,0,0,0) 32%);
  }
}

.ghero .wrap{
  position:relative;
  z-index:2;
  padding-top:60px;
}
.ghero-foot{position:relative;z-index:2;color:var(--px-foot)}

/* hero copy, restyled for the new ground */
.ghero .eyebrow{color:var(--px-eyebrow)}
.gbadge{
  color:var(--px-accent-lt);
  border-color:color-mix(in srgb,var(--px-accent) 46%,transparent);
  background:color-mix(in srgb,var(--px-deep) 46%,transparent);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.gbadge .dot{
  background:var(--px-accent);
  box-shadow:0 0 14px var(--px-accent);
  animation:sx-pulse 3.4s ease-in-out infinite;
}
@keyframes sx-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.82)}
}
.ghero h1{
  text-shadow:0 2px 34px color-mix(in srgb,var(--px-deep) 72%,transparent);
}
.ghero h1 .sx-h1-sub{color:var(--px-sub)}
.ghero .governing{
  color:var(--px-govern);
  text-shadow:0 1px 20px color-mix(in srgb,var(--px-deep) 60%,transparent);
}

/* hero entrance — the copy arrives before the stats do */
.js .ghero .eyebrow,
.js .ghero .gbadge,
.js .ghero h1,
.js .ghero .governing{
  animation:sx-rise .9s cubic-bezier(.22,.68,.36,1) backwards;
}
.js .ghero .eyebrow{animation-delay:.05s}
.js .ghero .gbadge{animation-delay:.14s}
.js .ghero h1{animation-delay:.22s}
.js .ghero .governing{animation-delay:.34s}
@keyframes sx-rise{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}

/* hero stat strip — glassy over the scene rather than flat slate */
.gstats{
  background:color-mix(in srgb,var(--px-accent) 22%,transparent);
  border-color:color-mix(in srgb,var(--px-accent-lt) 26%,transparent);
}
.gstat{
  background:color-mix(in srgb,var(--px-deep) 74%,transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:opacity .7s cubic-bezier(.22,.68,.36,1),
             transform .7s cubic-bezier(.22,.68,.36,1),
             background .3s ease;
}
.gstat .v em{color:var(--px-accent-lt)}
.gstat .k{color:var(--px-eyebrow)}
.sx-meter i.on{background:var(--px-accent-lt);box-shadow:0 0 10px color-mix(in srgb,var(--px-accent) 60%,transparent)}
@media(hover:hover){
  .gstat:hover{background:color-mix(in srgb,var(--px-deep) 58%,transparent)}
}

/* ---------- 2. Section nav: progress + where-you-are ------------------ */

.navbar{
  background:color-mix(in srgb,var(--paper,#EFF1EC) 92%,transparent);
}
.navbar a{color:var(--px-nav)}
.navbar a:hover,.navbar a:focus{background:var(--px-nav);color:#fff}
.navbar a.active{
  background:var(--px-nav);
  color:#fff;
  box-shadow:0 4px 14px -6px var(--px-nav);
}
.sx-prog{
  position:absolute;
  left:0;
  bottom:-1px;
  height:2px;
  width:0;
  background:linear-gradient(90deg,var(--px-nav),var(--px-accent));
  transition:width .12s linear;
  z-index:1;
}

/* ---------- 3. Themed accents through the body ----------------------- */

.section-head .num{
  color:var(--px-accent-ink);
  position:relative;
  padding-left:20px;
}
.section-head .num::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:13px;
  height:2px;
  background:var(--px-accent-ink);
  transform:translateY(-50%) scaleX(0);
  transform-origin:left;
  transition:transform .6s cubic-bezier(.22,.68,.36,1);
}
.js .section-head.in .num::before{transform:translateY(-50%) scaleX(1)}

.sx-answer>div{border-top-color:var(--px-nav)}
.sx-answer>div:last-child{
  background:linear-gradient(150deg,var(--px-deep) 0%,var(--px-sky-2) 130%);
  border-color:var(--px-deep);
  border-top-color:var(--px-accent);
}
.sx-answer>div:last-child dt{color:var(--px-accent-lt)}
.sx-answer dt{color:var(--px-accent-ink)}

.sx-pick{border-left-color:var(--px-accent)}
.sx-pick .sx-pick-k{color:var(--px-accent-ink)}
@media(hover:hover){
  .sx-pick{transition:border-color .22s,box-shadow .22s,transform .22s cubic-bezier(.22,.68,.36,1)}
  .sx-pick:hover{
    border-left-color:var(--px-nav);
    box-shadow:0 14px 30px -18px var(--px-nav);
    transform:translateY(-3px);
  }
  .sx-pick:hover strong{color:var(--px-nav)}
}

.sx-rec{border-left-color:var(--px-nav);transition:box-shadow .3s ease,transform .3s cubic-bezier(.22,.68,.36,1)}
.sx-rec-head::after{color:color-mix(in srgb,var(--px-nav) 18%,transparent)}
.sx-rec-kicker{color:var(--px-accent-ink) !important}
.sx-rec h4::before{background:var(--px-accent)}
.sx-rec:target{box-shadow:0 0 0 3px var(--px-accent)}
@media(hover:hover){
  .sx-rec:hover{box-shadow:0 18px 44px -28px color-mix(in srgb,var(--px-deep) 80%,transparent)}
  .sx-rec:hover .sx-rec-head::after{color:color-mix(in srgb,var(--px-accent) 42%,transparent)}
}

.sx-verdict{background:linear-gradient(150deg,var(--px-deep) 0%,var(--px-sky-2) 135%)}
.sx-verdict::before{background:linear-gradient(90deg,var(--px-accent),transparent)}
.sx-verdict .sx-verdict-k{color:var(--px-accent-lt)}

.sx-table thead th{background:var(--px-nav)}
.sx-verify{border-left-color:var(--px-accent)}
.sx-verify .sx-verify-k{color:var(--px-accent-ink)}
.sx-list li::before{background:var(--px-accent)}
.sx-fit-card{border-top-color:var(--px-accent)}
.sx-fit-card .sx-fit-go a{color:var(--px-nav)}
.sx-fit-card .sx-fit-go a:hover{color:var(--px-accent-ink)}
.sx-sec a{color:var(--px-nav);text-decoration-color:color-mix(in srgb,var(--px-nav) 35%,transparent)}
.sx-sec a:hover{color:var(--px-deep);text-decoration-color:var(--px-accent)}

.sxp-head{background:linear-gradient(150deg,var(--px-deep) 0%,var(--px-sky-2) 130%)}
.sxp-k{color:var(--px-accent-lt) !important}
.sxp-ctl input[type=range]{accent-color:var(--px-nav)}
.sxp-bar{background:var(--px-nav)}
.sxp-ext{background:color-mix(in srgb,var(--px-nav) 40%,transparent)}

/* ---------- 4. The horizon break ------------------------------------- */
/* A slim full-bleed band of the same living water, dropped once mid-page
   to re-establish the place after the longest reading stretch. */

.sx-break{
  position:relative;
  height:190px;
  margin:52px 0 40px;
  overflow:hidden;
  border-radius:16px;
  background:linear-gradient(170deg,var(--px-sky-2),var(--px-sky-3));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--px-deep) 30%,transparent);
}
.sx-break canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sx-break::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(58% 100% at 50% 50%,
    var(--px-scrim-foot) 0%,
    var(--px-scrim-faint) 62%,
    rgba(0,0,0,0) 100%);
}
.sx-break-q{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 28px;
  font-family:"Newsreader",Georgia,serif;
  font-style:italic;
  font-size:clamp(18px,2.6vw,27px);
  line-height:1.4;
  color:#fff;
  text-shadow:0 2px 26px color-mix(in srgb,var(--px-deep) 85%,transparent);
  max-width:24ch;
  margin:0 auto;
}
@media (max-width:640px){.sx-break{height:150px;margin:38px 0 30px}}

/* ---------- 5. Reveal choreography ----------------------------------- */
/* Richer than a flat fade: content lifts, settles and un-blurs, and
   siblings arrive in sequence rather than all at once. */

body.js .sx-rev{
  opacity:0;
  transform:translateY(26px) scale(.985);
  filter:blur(6px);
  transition:opacity .7s cubic-bezier(.22,.68,.36,1),
             transform .7s cubic-bezier(.22,.68,.36,1),
             filter .7s cubic-bezier(.22,.68,.36,1);
}
body.js .sx-rev.in{opacity:1;transform:none;filter:none}

/* section heads and body copy get a quieter version of the same move */
body.js .sx-rev-t{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .65s cubic-bezier(.22,.68,.36,1),
             transform .65s cubic-bezier(.22,.68,.36,1);
}
body.js .sx-rev-t.in{opacity:1;transform:none}

/* the excursion cards alternate their entry direction down the column */
body.js .sx-rec.sx-rev{transform:translateY(30px) scale(.985)}
body.js #excursions .sx-rec:nth-child(odd).sx-rev{transform:translateY(30px) translateX(-14px) scale(.985)}
body.js #excursions .sx-rec:nth-child(even).sx-rev{transform:translateY(30px) translateX(14px) scale(.985)}
body.js #excursions .sx-rec.sx-rev.in{transform:none}

@media (prefers-reduced-motion: reduce){
  body.js .sx-rev,
  body.js .sx-rev-t{opacity:1 !important;transform:none !important;filter:none !important;transition:none}
  .js .ghero .eyebrow,.js .ghero .gbadge,.js .ghero h1,.js .ghero .governing{animation:none}
  .gbadge .dot,.sx-cue i{animation:none}
  .sx-pick,.sx-rec,.sxp-bar,.sxp-ext{transition:none}
}

/* ---------- 6. Dark-scheme hardening (matches the family) ------------- */
@media (prefers-color-scheme: dark){
  .sx-answer>div:last-child{background:linear-gradient(150deg,var(--px-deep) 0%,var(--px-sky-2) 130%) !important}
  .sx-break-q{color:#fff !important}
  .navbar a{color:var(--px-nav) !important}
  .navbar a.active{color:#fff !important}
}