/* Cruise.co.uk Trade brand palette (Brand Guidelines) */
:root {
  --big-blue: #283583;
  --harbour: #137bc1;
  --shimmer: #00c0ff;
  --shimmer-lighter: #bff0ff;
  --shimmer-lightest: #e5f8ff;
  --coral: #e51549;
  --gold: #fcd07a;
  --cruise-stay: #283c4c;

  /* Names used across the pages */
  --navy: var(--big-blue);
  --navy-deep: #1b2563;
  --blue: var(--harbour);
  --sky: var(--shimmer-lightest);
  --yellow: var(--gold);
  --white: #ffffff;
  --ink: #232c33;
  --muted: #5f6a73;
  --good: #1e9e5a;
  --danger: var(--coral);
  --radius: 18px;
  --display: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --body: "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--body);
  color: var(--ink);
  background: var(--big-blue);
  -webkit-tap-highlight-color: transparent;
}

button, input { font: inherit; }

/* Official white logo for dark backgrounds (vector, from the brand's EPS artwork) */
.logo { display: block; height: 44px; width: auto; filter: drop-shadow(0 3px 8px rgba(10, 18, 70, 0.35)); }

/* Headline: Have you been Cruise.co.uk'ed? */
.tagline {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.5px;
  color: var(--white);
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 4px 0 rgba(10, 18, 70, 0.35);
}
.tagline .brand-word { display: block; color: var(--gold); }

.ribbon {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--gold);
  color: var(--big-blue);
  padding: 8px 18px;
  border-radius: 8px;
  transform: rotate(-2deg);
  box-shadow: 0 6px 0 rgba(10, 18, 70, 0.3);
}

/* Sea, sun and gulls */
.scene { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sun {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff3c9 0%, var(--gold) 55%, #f7b94a 100%);
  box-shadow: 0 0 60px 20px rgba(252, 208, 122, 0.35);
}
/* Flock of gulls: each glides on its own path at its own pace */
.gulls { position: absolute; }
.gulls img { position: absolute; display: block; filter: drop-shadow(0 5px 5px rgba(10, 18, 70, 0.3)); animation: glide 11s ease-in-out infinite alternate; }
.gulls img:nth-child(1) { width: 50%; left: 0; top: 34%; }
.gulls img:nth-child(2) { width: 36%; left: 52%; top: 0; animation-duration: 8s; animation-delay: -3s; }
.gulls img:nth-child(3) { width: 26%; left: 72%; top: 58%; animation-duration: 13s; animation-delay: -6s; opacity: 0.9; }
@keyframes glide { 0% { transform: translate(0, 0) rotate(-3deg); } 50% { transform: translate(10%, -14%) rotate(2deg); } 100% { transform: translate(22%, 6%) rotate(-2deg); } }
.waves { position: absolute; left: 0; right: 0; bottom: 0; }
.wave { position: absolute; left: 0; right: 0; bottom: 0; background-repeat: repeat-x; background-size: 1200px 100%; }
.wave.back { background-image: url(/img/wave-back.svg); height: 100%; animation: sea 22s linear infinite; opacity: 0.9; }
.wave.mid { background-image: url(/img/wave-mid.svg); height: 85%; animation: sea 15s linear infinite reverse; }
.wave.front { background-image: url(/img/wave-front.svg); height: 70%; animation: sea 10s linear infinite; }
@keyframes sea { from { background-position-x: 0; } to { background-position-x: 1200px; } }
.ship { display: block; animation: bob 4s ease-in-out infinite; transform-origin: 50% 80%; }

/* Ship sitting in its own patch of sea: back swell behind the hull, foam wave in front of the waterline */
.ship-sea { position: relative; display: block; isolation: isolate; }
/* Optional sun that sets behind the sea: clipped at the horizon so it can never sit in front of the water */
.ship-sea .horizon { position: absolute; left: 30%; right: -10%; top: -14%; bottom: 30%; overflow: hidden; z-index: -1; pointer-events: none; }
.ship-sea .horizon .sun { position: absolute; width: 58%; aspect-ratio: 1; right: 0; bottom: -20%; box-shadow: none; }
.ship-sea .horizon::before { content: ""; position: absolute; width: 80%; aspect-ratio: 1; right: -1%; bottom: -38%; border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 208, 122, 0.4) 0%, rgba(252, 208, 122, 0.12) 45%, rgba(252, 208, 122, 0) 70%); }
.ship-sea .ship { position: relative; z-index: 1; width: 100%; height: auto; }
.ship-sea .sea { position: absolute; left: -18%; right: -18%; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%), linear-gradient(180deg, #000 45%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%), linear-gradient(180deg, #000 45%, transparent 100%);
          mask-composite: intersect; }
.ship-sea .sea.behind { z-index: 0; bottom: 10%; height: 26%; }
.ship-sea .sea.infront { z-index: 2; bottom: -10%; height: 30%; }
.ship-sea .sea div { position: absolute; inset: 0; background-repeat: repeat-x; background-size: 240px 100%; }
.ship-sea .sea.behind div { background-image: url(/img/wave-foam-back.svg); animation: sea 9s linear infinite reverse; }
.ship-sea .sea.infront div { background-image: url(/img/wave-foam.svg); animation: sea 6s linear infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }

@media (prefers-reduced-motion: reduce) {
  .wave, .ship, .gulls img, .ship-sea .sea div { animation: none !important; }
}

/* Buttons */
.btn {
  display: inline-block;
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 16px 20px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  background: var(--gold);
  color: var(--big-blue);
  box-shadow: 0 6px 0 #d9a94f, 0 12px 24px rgba(10, 18, 70, 0.3);
  transition: transform 0.08s ease, box-shadow 0.08s ease, opacity 0.2s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #d9a94f, 0 6px 12px rgba(10, 18, 70, 0.3); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn.secondary { background: rgba(255, 255, 255, 0.08); color: var(--white); border: 2px solid rgba(191, 240, 255, 0.6); box-shadow: none; }
.btn.small { width: auto; padding: 8px 14px; font-size: 14px; box-shadow: none; }

.error { color: #ffe1e8; background: rgba(229, 21, 73, 0.3); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 10px 0 0; }
.error:empty { display: none; }

.hidden { display: none !important; }

.fmt-time { font-variant-numeric: tabular-nums; }

.confetti { position: fixed; top: -20px; width: 10px; height: 16px; z-index: 30; border-radius: 2px; animation: fall linear forwards; pointer-events: none; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }