/* Cruise countdown — cruise.yotty.co.uk
   One page, no build step. Everything below the scene is plain flow layout;
   the scene itself is a stack of absolutely positioned layers. */

:root {
  --sky-top: #1273b8;
  --sky-mid: #63b8e0;
  --sky-low: #ffd9a0;
  --sea-top: #2a9ad4;
  --sea-deep: #063a5c;
  --gold: #ffc233;
  --gold-deep: #e8890c;
  --ink: #12222e;
  --deck-a: #c98a4b;
  --deck-b: #b0713a;
  --paper: #fff8ec;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--sea-deep);
  -webkit-text-size-adjust: 100%;
}

h2 {
  font-family: "Luckiest Guy", Nunito, cursive;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: 1px;
  margin: 0 0 1.6rem;
  color: var(--paper);
  text-shadow: 0 4px 0 rgba(0, 0, 0, .28);
}

.wrap { width: min(1080px, 92vw); margin: 0 auto; }

/* ============================ THE SCENE ============================ */

.scene {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
}

.sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 46%, var(--sky-low) 72%, #ffe9c4 78%);
}

/* Sun */
.sun {
  position: absolute;
  top: 8%;
  right: 12%;
  width: clamp(80px, 11vw, 150px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fff6c9 0 38%, var(--gold) 60%, var(--gold-deep) 100%);
  box-shadow: 0 0 70px 30px rgba(255, 205, 90, .45);
}
.sun-rays {
  position: absolute;
  inset: -55%;
  background: conic-gradient(from 0deg, rgba(255, 236, 170, .38) 0 6deg, transparent 6deg 30deg);
  border-radius: 50%;
  animation: spin 90s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Clouds: three rounded lumps each, drifting at different speeds */
.cloud {
  position: absolute;
  height: 34px;
  width: 130px;
  background: #fff;
  border-radius: 40px;
  opacity: .88;
  filter: drop-shadow(0 6px 0 rgba(120, 160, 190, .18));
}
.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.cloud::before { width: 58px; height: 58px; left: 18px; top: -26px; }
.cloud::after  { width: 42px; height: 42px; right: 20px; top: -18px; }
.c1 { top: 14%; left: -20%; transform: scale(1.1); animation: drift 68s linear infinite; }
.c2 { top: 27%; left: -25%; transform: scale(.75); animation: drift 96s linear infinite 9s; }
.c3 { top: 7%;  left: -30%; transform: scale(1.35); opacity: .6; animation: drift 128s linear infinite 22s; }
@keyframes drift { to { transform: translateX(150vw) scale(var(--s, 1)); } }
.c1 { --s: 1.1; } .c2 { --s: .75; } .c3 { --s: 1.35; }

/* Gulls: two strokes of a wing, flapping */
.gull {
  position: absolute;
  width: 26px;
  height: 12px;
  background:
    radial-gradient(circle at 0 100%, transparent 60%, #2c3e4a 61% 68%, transparent 69%) 0 0 / 14px 12px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 60%, #2c3e4a 61% 68%, transparent 69%) 12px 0 / 14px 12px no-repeat;
  opacity: .65;
}
.g1 { top: 22%; left: 18%; animation: flap 2.6s ease-in-out infinite, glide 44s linear infinite; }
.g2 { top: 29%; left: 26%; transform: scale(.7); animation: flap 2.1s ease-in-out infinite .4s, glide 58s linear infinite 6s; }
.g3 { top: 17%; left: 34%; transform: scale(.55); animation: flap 3s ease-in-out infinite .9s, glide 72s linear infinite 14s; }
@keyframes flap { 50% { height: 6px; } }
@keyframes glide { to { transform: translate(60vw, -6vh) scale(var(--gs, 1)); } }
.g2 { --gs: .7; } .g3 { --gs: .55; }

/* Bunting */
.bunting {
  position: absolute;
  top: 0;
  left: -2%;
  width: 104%;
  height: clamp(58px, 8.5vh, 96px);
  z-index: 1;
  transform-origin: 50% 0;
  animation: sway 6s ease-in-out infinite;
}
@keyframes sway {
  0%, 100% { transform: rotate(-.35deg); }
  50%      { transform: rotate(.35deg); }
}

/* Ship on the horizon, riding the swell */
.horizon-ship {
  position: absolute;
  left: 6%;
  bottom: 43%;
  width: clamp(180px, 26vw, 340px);
  animation: bobship 7s ease-in-out infinite;
  filter: drop-shadow(0 8px 10px rgba(0, 40, 70, .3));
}
.horizon-ship svg { display: block; width: 100%; height: auto; }
@keyframes bobship {
  0%, 100% { transform: translateY(0) rotate(-.8deg); }
  50%      { transform: translateY(-8px) rotate(.8deg); }
}

/* Sea */
.sea {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Horizon sits high on purpose. Any lower and a laptop window leaves a wide
     empty band of sky between the countdown and the deck. */
  height: 44%;
  background: linear-gradient(180deg, var(--sea-top) 0%, #0d6899 45%, var(--sea-deep) 100%);
}
.glitter {
  position: absolute;
  inset: 0 0 40% 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .3) 0 1.2px, transparent 1.8px) 0 0 / 71px 39px,
    radial-gradient(circle, rgba(255, 255, 255, .18) 0 1px, transparent 1.6px) 37px 21px / 53px 47px;
  animation: shimmer 5s ease-in-out infinite alternate;
}
@keyframes shimmer { to { opacity: .35; transform: translateX(10px); } }

.wave {
  position: absolute;
  left: 0;
  width: 200%;
  height: 60px;
  display: block;
}
.wave path { fill: currentColor; }
.wave-back  { top: -26px; color: #2a9ad4; opacity: .75; animation: roll 14s linear infinite; }
.wave-mid   { top: -14px; color: #1a83bd; opacity: .85; animation: roll 10s linear infinite reverse; }
.wave-front { top: -4px;  color: #0d6899; animation: roll 7s linear infinite; }
@keyframes roll { to { transform: translateX(-50%); } }

/* ---------------------------- Countdown ---------------------------- */

/* The headline owns the top half of the scene. Centring the block inside a
   fixed-height band beats stacking magic top offsets: the number can grow as
   large as the window allows and the block still sits between the bunting
   above and the deck below. */
.counter {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(58px, 10.5vh, 92px) 4vw 0;
  text-align: center;
  color: #fff;
}

.kicker {
  margin: 0;
  font-weight: 900;
  letter-spacing: clamp(.12em, .8vw, .22em);
  text-transform: uppercase;
  font-size: clamp(.58rem, 1.5vw, .85rem);
  color: #fffaf0;
  text-shadow: 0 2px 6px rgba(0, 40, 70, .5);
}

.days {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Tight on purpose, to close the gap down to the label. The trade is that
     the glyphs overflow their line box, so the number needs the margin below
     to keep its ascenders off the kicker. */
  line-height: .82;
}

.days strong {
  font-family: "Luckiest Guy", Nunito, cursive;
  font-weight: 400;
  /* Both axes, not just vw: a wide-but-short laptop window sized this off the
     width alone and drove the number down through everyone's heads. */
  font-size: clamp(4.5rem, calc(20vh + 5vw), 18rem);
  color: var(--gold);
  letter-spacing: 2px;
  /* Chunky comic outline. Six shadows beats -webkit-text-stroke, which thins
     the glyph from the inside and eats the counters at this size. */
  text-shadow:
    3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink),
    0 12px 0 rgba(0, 0, 0, .22);
  margin-top: .16em;
  animation: pop .5s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes pop { from { transform: scale(.86); opacity: 0; } }

.days-label {
  font-family: "Luckiest Guy", Nunito, cursive;
  font-size: clamp(1.1rem, 3.4vw, 2rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: .5rem;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .3);
}

/* Ticking clock: its own strip along the bottom of the scene, clear of the
   headline above and of everyone standing on the deck. */
.clock {
  position: absolute;
  left: 50%;
  bottom: clamp(10px, 2vh, 22px);
  transform: translateX(-50%);
  z-index: 6;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: clamp(.4rem, 1.6vw, 1rem);
  margin: 0;
  padding: 0;
  color: #fff;
}
.clock li {
  text-align: center;
  background: rgba(6, 44, 70, .6);
  border: 2px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(3px);
  border-radius: 14px;
  padding: .45rem .9rem .35rem;
  min-width: clamp(66px, 12vw, 92px);
}
.clock b {
  display: block;
  font-family: "Luckiest Guy", Nunito, cursive;
  font-weight: 400;
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.clock span {
  display: block;
  font-size: clamp(.55rem, 1.4vw, .72rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .85;
}

.date span {
  display: block;
  font-weight: 400;
  opacity: .82;
}

.date {
  margin: .9rem 0 0;
  font-weight: 700;
  font-size: clamp(.85rem, 2vw, 1.05rem);
  text-shadow: 0 2px 5px rgba(0, 40, 70, .55);
}

/* ------------------------- Deck and the crew ------------------------- */

.deck-roll {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  transform-origin: 50% 120%;
  animation: rollship 11s ease-in-out infinite;
}
@keyframes rollship {
  0%, 100% { transform: rotate(-.45deg) translateY(0); }
  50%      { transform: rotate(.45deg) translateY(-6px); }
}

.deck { position: relative; }

.railing {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: clamp(70px, 11vh, 110px);
  height: clamp(80px, 15vh, 160px);
  /* Top rail, bottom rail, then evenly spaced stanchions. */
  background:
    linear-gradient(#f4f7fa, #dbe3ea) 0 0 / 100% 9px no-repeat,
    linear-gradient(#f4f7fa, #dbe3ea) 0 100% / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, rgba(244, 247, 250, .95) 0 6px, transparent 6px 62px);
  filter: drop-shadow(0 3px 4px rgba(0, 30, 60, .25));
}

.crew {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(-10px, 1vw, 26px);
  /* Feet land a few pixels into the planking. An earlier version padded this
     by the full board height, which left all four hovering above the deck. */
  margin-bottom: -14px;
}

.person {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  transition: transform .18s ease;
}
.person img {
  height: clamp(180px, 35vh, 400px);
  width: auto;
  display: block;
  filter: drop-shadow(0 14px 12px rgba(0, 40, 70, .35));
}
.person:hover, .person:focus-visible { transform: translateY(-10px) scale(1.03); }
.person:focus-visible { outline: 3px dashed var(--gold); outline-offset: 6px; }

/* Idle bob. Each one gets its own tempo so they never march in step. */
.p1 { animation: bob 3.4s ease-in-out infinite; }
.p2 { animation: bob 3.9s ease-in-out infinite .6s; }
.p3 { animation: bob 4.4s ease-in-out infinite .25s; }
.p4 { animation: bob 3.1s ease-in-out infinite .9s; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50%      { transform: translateY(-9px) rotate(.6deg); }
}

/* One-shot jump, added by the script on click. */
.person.jump { animation: jump .62s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes jump {
  0%   { transform: translateY(0) rotate(0); }
  35%  { transform: translateY(-46px) rotate(-6deg) scale(1.04); }
  65%  { transform: translateY(-12px) rotate(4deg); }
  100% { transform: translateY(0) rotate(0); }
}

.boards {
  position: relative;
  z-index: 3;
  height: clamp(70px, 11vh, 110px);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .18), transparent 30%),
    repeating-linear-gradient(90deg, var(--deck-a) 0 44px, var(--deck-b) 44px 46px);
  border-top: 5px solid #8d5a2c;
  box-shadow: 0 -3px 14px rgba(0, 30, 60, .3);
}

/* ---------------------------- The drinks ---------------------------- */

.drinks {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.drinks svg {
  position: absolute;
  bottom: -90px;
  width: clamp(30px, 4vw, 52px);
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 3px 4px rgba(0, 30, 60, .3));
  animation: floatup linear infinite;
}
@keyframes floatup {
  0%   { transform: translateY(0) rotate(-12deg); opacity: 0; }
  8%   { opacity: .95; }
  85%  { opacity: .95; }
  100% { transform: translateY(-118svh) rotate(14deg); opacity: 0; }
}

/* ---------------------------- Scroll cue ---------------------------- */

.scroll-cue {
  position: absolute;
  bottom: 18px;
  right: clamp(14px, 3vw, 40px);
  z-index: 6;
  width: 30px;
  height: 46px;
  border: 3px solid rgba(255, 255, 255, .8);
  border-radius: 16px;
}
.scroll-cue span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 5px;
  height: 9px;
  margin-left: -2.5px;
  border-radius: 3px;
  background: #fff;
  animation: cue 1.9s ease-in-out infinite;
}
@keyframes cue { 50% { transform: translateY(16px); opacity: .3; } }

/* ============================ THE SHIP ============================ */

.voyage {
  background: linear-gradient(180deg, var(--sea-deep), #052c46);
  padding: clamp(3rem, 8vh, 6rem) 0;
}

.ship-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  background: rgba(255, 255, 255, .06);
  border: 2px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  padding: clamp(1.2rem, 3vw, 2.4rem);
}
.ship-art svg { display: block; width: 100%; height: auto; border-radius: 14px; }

.ship-copy h3 {
  font-family: "Luckiest Guy", Nunito, cursive;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  margin: 0 0 .6rem;
  color: var(--gold);
}
.ship-copy p {
  margin: 0 0 1.4rem;
  color: #dceaf3;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.65;
}

.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin: 0; }
.facts dt {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7fb4d2;
  margin-bottom: .15rem;
}
.facts dd { margin: 0; font-weight: 900; color: #fff; font-size: 1.02rem; }

/* ============================ THE ROUTE ============================ */

.route {
  background: #052c46;
  padding: 0 0 clamp(3rem, 8vh, 6rem);
}

.ports {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  counter-reset: port;
}
.ports li {
  position: relative;
  background: var(--paper);
  border-radius: 16px;
  padding: 1.5rem 1.2rem 1.2rem;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .22);
  transition: transform .16s ease;
}
.ports li:hover { transform: translateY(-5px); }
.ports .pin {
  position: absolute;
  top: -14px;
  left: 1.2rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--ink);
  font-family: "Luckiest Guy", Nunito, cursive;
  font-size: 1.05rem;
  color: var(--ink);
}
.ports b { display: block; font-size: 1.35rem; margin-top: .5rem; }
.ports em { display: block; font-style: normal; color: #6a7c88; font-weight: 700; font-size: .9rem; }
.ports i { display: block; font-style: normal; margin-top: .7rem; color: #365464; font-size: .92rem; }

/* ============================== Footer ============================== */

footer {
  background: #03202f;
  color: #6f97ad;
  text-align: center;
  padding: 1.6rem;
  font-weight: 700;
  letter-spacing: .05em;
}
footer p { margin: 0; }

/* ============================ Responsive ============================ */

@media (max-width: 780px) {
  .ship-card { grid-template-columns: 1fr; }
  /* The four of them side by side get too small to see on a phone, so shrink
     the gap and let them overlap slightly rather than scaling them down. */
  .crew { gap: 0; margin: 0 -6vw; }
  .person img { height: clamp(150px, 27vh, 300px); }
  .scroll-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
}