/* Wedding countdown — wedding.yotty.co.uk
   Sister page to cruise.yotty.co.uk, same bones: one page, no build step,
   the scene is a stack of absolutely positioned layers. */

:root {
  --sky-top: #7fb7d9;
  --sky-mid: #bfe0ef;
  --sky-low: #ffe1cc;
  --water-top: #6fb2d6;
  --water-deep: #2f6f99;
  --gold: #f7d774;
  --gold-deep: #e8b84a;
  --blush: #f4a6b8;
  --blush-deep: #d9738d;
  --sage: #3fae6a;
  --ink: #4a2f37;
  --paper: #fffaf4;
  --night: #3b2a33;
}

* { 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(--night);
  -webkit-text-size-adjust: 100%;
}

h2 {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  margin: 0 0 1.4rem;
  color: var(--paper);
  text-shadow: 0 3px 0 rgba(0, 0, 0, .2);
}

.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) 40%, var(--sky-low) 62%, #fff0e2 70%);
}

.sun {
  position: absolute;
  top: 9%;
  right: 11%;
  width: clamp(76px, 10vw, 140px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fffbe0 0 38%, var(--gold) 62%, var(--gold-deep) 100%);
  box-shadow: 0 0 70px 30px rgba(255, 220, 140, .45);
}
.sun-rays {
  position: absolute;
  inset: -55%;
  background: conic-gradient(from 0deg, rgba(255, 240, 190, .35) 0 6deg, transparent 6deg 30deg);
  border-radius: 50%;
  animation: spin 90s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.cloud {
  position: absolute;
  height: 34px;
  width: 130px;
  background: #fff;
  border-radius: 40px;
  opacity: .9;
  filter: drop-shadow(0 6px 0 rgba(200, 160, 170, .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: 15%; left: -20%; transform: scale(1.1); animation: drift 68s linear infinite; }
.c2 { top: 28%; left: -25%; transform: scale(.75); animation: drift 96s linear infinite 9s; }
.c3 { top: 8%;  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; }

.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); }
}

/* Hills sit just above the water line */
.hills {
  position: absolute;
  left: 0;
  bottom: 41%;
  width: 100%;
  height: 13%;
  display: block;
}

/* The marina */
.marina {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(180deg, var(--water-top) 0%, #4f93bd 40%, var(--water-deep) 100%);
  border-top: 4px solid rgba(255, 255, 255, .35);
}
.ripples {
  position: absolute;
  inset: 0 0 30% 0;
  background:
    linear-gradient(90deg, transparent 0 20px, rgba(255, 255, 255, .28) 20px 46px, transparent 46px) 0 14px / 120px 22px,
    linear-gradient(90deg, transparent 0 60px, rgba(255, 255, 255, .16) 60px 80px, transparent 80px) 40px 3px / 150px 31px;
  background-repeat: repeat;
  -webkit-mask: linear-gradient(180deg, #000 0 2px, transparent 2px) 0 0 / 100% 11px;
  mask: linear-gradient(180deg, #000 0 2px, transparent 2px) 0 0 / 100% 11px;
  animation: shimmer 6s ease-in-out infinite alternate;
}
@keyframes shimmer { to { transform: translateX(24px); opacity: .6; } }

.boat {
  position: absolute;
  filter: drop-shadow(0 6px 6px rgba(20, 50, 80, .3));
}
.boat svg { display: block; width: 100%; height: auto; }
.boat-a {
  top: -5%;
  left: 3%;
  width: clamp(200px, 30vw, 400px);
  animation: bob-boat 6s ease-in-out infinite;
}
.boat-b {
  top: 4%;
  right: 2%;
  width: clamp(180px, 26vw, 360px);
  transform: scaleX(-1);
  animation: bob-boat-r 7.5s ease-in-out infinite;
}
@keyframes bob-boat   { 50% { transform: translateY(-4px) rotate(.5deg); } }
@keyframes bob-boat-r { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateY(-4px) rotate(.5deg); } }

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

.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(.6rem, 1.5vw, .85rem);
  color: #fff;
  text-shadow: 0 2px 6px rgba(80, 40, 60, .55);
}

.days {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .9;
}

.days strong {
  font-family: Fredoka, Nunito, sans-serif;
  font-weight: 700;
  /* Both axes, not just vw, so a short laptop window doesn't push the number
     down into the heads below. Same lesson as the cruise page. */
  font-size: clamp(4.5rem, calc(19vh + 5vw), 17rem);
  color: var(--blush);
  letter-spacing: 2px;
  text-shadow:
    3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff,
    3px 3px 0 #fff, -3px 3px 0 #fff, 3px -3px 0 #fff, -3px -3px 0 #fff,
    6px 0 0 var(--ink), -6px 0 0 var(--ink), 0 6px 0 var(--ink), 0 -6px 0 var(--ink),
    5px 5px 0 var(--ink), -5px 5px 0 var(--ink), 5px -5px 0 var(--ink), -5px -5px 0 var(--ink),
    0 14px 0 rgba(74, 47, 55, .25);
  margin-top: .1em;
  animation: pop .5s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes pop { from { transform: scale(.86); opacity: 0; } }

.days-label {
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  margin-top: .3rem;
  color: #fff;
  text-shadow: 0 2px 0 rgba(74, 47, 55, .45), 0 0 14px rgba(74, 47, 55, .35);
}

.date {
  margin: .6rem 0 0;
  font-weight: 900;
  font-size: clamp(.9rem, 2vw, 1.1rem);
  text-shadow: 0 2px 5px rgba(80, 40, 60, .55);
}
.date span {
  display: block;
  font-weight: 700;
  opacity: .9;
}

.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(74, 47, 55, .55);
  border: 2px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(3px);
  border-radius: 14px;
  padding: .45rem .9rem .35rem;
  min-width: clamp(66px, 12vw, 92px);
}
.clock b {
  display: block;
  font-family: Fredoka, Nunito, sans-serif;
  font-weight: 700;
  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: .9;
}

/* ------------------------- Lawn and the party ------------------------- */

.party-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}

.crew {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(-10px, 1vw, 26px);
  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(40, 40, 60, .3));
}
.person.bride img { height: clamp(190px, 37vh, 420px); }
.person:hover, .person:focus-visible { transform: translateY(-10px) scale(1.03); }
.person:focus-visible { outline: 3px dashed var(--blush); outline-offset: 6px; }

.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); }
}

.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); }
}

/* Lawn along the water's edge, dotted with flowers */
.lawn {
  position: relative;
  z-index: 3;
  height: clamp(70px, 11vh, 110px);
  background:
    radial-gradient(circle, #ff8fab 0 4px, transparent 5px) 12px 18px / 86px 40px,
    radial-gradient(circle, #fff6e6 0 3.5px, transparent 4.5px) 52px 34px / 110px 46px,
    radial-gradient(circle, #f7d774 0 3px, transparent 4px) 30px 8px / 130px 52px,
    linear-gradient(180deg, #8ccb6e, #5f9f4c);
  border-top: 5px solid #4f8a3e;
  box-shadow: 0 -3px 14px rgba(30, 60, 30, .25);
}

/* ---------------------------- The floaters ---------------------------- */

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

.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, .85);
  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 DAY ============================ */

.day {
  background: linear-gradient(180deg, #1f6a45, #17553a);
  padding: clamp(3rem, 8vh, 6rem) 0;
}

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

.day-copy h3 {
  font-family: Fredoka, Nunito, sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin: 0 0 1rem;
  color: var(--gold);
}

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

.map-link {
  display: inline-block;
  background: var(--blush);
  color: var(--ink);
  font-weight: 900;
  text-decoration: none;
  padding: .7rem 1.3rem;
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--blush-deep);
  transition: transform .15s ease, box-shadow .15s ease;
}
.map-link:hover, .map-link:focus-visible { transform: translateY(2px); box-shadow: 0 3px 0 var(--blush-deep); }

/* ======================== THE BRIDAL PARTY ======================== */

.party {
  background: #17553a;
  padding: 0 0 clamp(3rem, 8vh, 6rem);
}

.party-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.party-cards 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, .18);
  transition: transform .16s ease;
}
.party-cards li:hover { transform: translateY(-5px); }
.party-cards .badge {
  position: absolute;
  top: -14px;
  left: 1.2rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sage);
  border: 3px solid var(--ink);
  font-family: Fredoka, Nunito, sans-serif;
  font-weight: 700;
  color: var(--ink);
}
.party-cards .is-bride .badge { background: var(--blush); }
.party-cards b { display: block; font-size: 1.3rem; margin-top: .5rem; }
.party-cards i { display: block; font-style: normal; margin-top: .4rem; color: #7a6168; font-size: .95rem; }

footer {
  background: var(--night);
  color: #c9a9b4;
  text-align: center;
  padding: 1.6rem;
  font-family: "Great Vibes", cursive;
  font-size: 1.6rem;
}
footer p { margin: 0; }

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

@media (max-width: 780px) {
  .day-card { grid-template-columns: 1fr; }
  .crew { gap: 0; margin: 0 -6vw -14px; }
  .person img { height: clamp(150px, 27vh, 300px); }
  .person.bride img { height: clamp(160px, 29vh, 320px); }
  .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; }
}