/* ================================================================
   MICHAEL & OLIVER — WEDDING INVITATION
   All the styling for the site lives in this one file.
   ================================================================

   NAMING SYSTEM — "Client-First" (same system Webflow uses)
   ----------------------------------------------------------
   Coming from Webflow, you already know this — here's how it looks
   written by hand instead of clicked together in the Designer:

     .section_hero          -> the outer wrapper for a whole section
     .hero_heading           -> an element that BELONGS to the hero
                                section (blockname_element)
     .rsvp_tile.is-selected   -> a "combo class". ".rsvp_tile" is the
                                base look, ".is-selected" is added on
                                top by JavaScript to show a different
                                state (selected, open, hidden, etc.)

   Reading a class name tells you exactly where in the page it lives
   and what it does — no guessing, no digging through the CSS file.

   TABLE OF CONTENTS (search for these ALL CAPS labels to jump around)
   1. RESET
   2. DESIGN TOKENS (colours, fonts — change the site's look from here)
   3. BASE / PAGE WRAPPER
   4. GLOBAL REUSABLE CLASSES (eyebrow, button, headings)
   5. INTRO ENVELOPE
   6. HERO
   7. COUNTDOWN
   8. STORY ("Why Thailand")
   9. WAT ARUN
   10. THE DAY
   11. INCLUDED
   12. BOAT JOURNEY
   13. RSVP FORM
   14. WEDDING REGISTRY
   15. FAQ ACCORDION
   16. TRAVEL
   17. WAVE DIVIDER
   18. SAVE TO HOME SCREEN
   19. FOOTER
   ================================================================ */


/* ---------------------------------------------------------------
   1. RESET
   Every browser adds its own default spacing to headings, lists,
   paragraphs etc. This wipes that so we start from a blank page
   and every bit of spacing you see was put there on purpose.
---------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 500;
}

img {
  max-width: 100%;
  display: block;
}


/* ---------------------------------------------------------------
   2. DESIGN TOKENS
   "Tokens" are named values you re-use everywhere instead of
   typing the same hex code or font name over and over. This is
   the FIRST place to look if you ever want to change a colour or
   font across the whole site — edit it here once, it updates
   everywhere it's used.
---------------------------------------------------------------- */
:root {
  /* Colours */
  --color-paper: #F5EEE2;        /* main light background */
  --color-paper-light: #FBF6EC;  /* lighter panels, form fields */
  --color-sand: #D8C7B4;         /* soft dividers */
  --color-wine: #6A1B2D;         /* primary accent — buttons, headings */
  --color-oxblood: #45121F;      /* dark section backgrounds */
  --color-plum: #9B6B72;         /* secondary accent */
  --color-gold: #B58F4A;         /* borders, small labels, rules */
  --color-champagne: #D8C08A;    /* light accent text on dark backgrounds */
  --color-ink: #241A16;          /* main body text */
  --color-mute: #7A6A5C;         /* secondary / quiet text */

  /* Fonts — the actual font files are loaded via Google Fonts in
     the <head> of index.html. These variables just point to them. */
  --font-display: "Cormorant Garamond", Georgia, serif; /* headings */
  --font-script: "Pinyon Script", cursive;               /* the couple's names */
  --font-body: "Jost", Arial, sans-serif;                /* everything else */

  /* Layout */
  --page-max-width: 480px; /* keeps things comfortable if opened on a laptop */
}


/* ---------------------------------------------------------------
   3. BASE / PAGE WRAPPER
   This site is built mobile-only: one column, no desktop layout.
   ".page-wrapper" just keeps the content from stretching edge to
   edge on a wide screen — on an actual phone it fills the width
   naturally, so nothing here is "responsive" in the desktop sense.
---------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden; /* safety net: stops fixed-position elements (like the intro envelope) from ever causing side-to-side scroll */
  scroll-behavior: smooth; /* makes the RSVP/Details buttons (and any other href="#section" link) glide to their target instead of snapping there instantly */
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

html,
body {
  background: var(--color-oxblood); /* shows as a thin margin on wide screens; also backstops the safe-area strip behind the iPhone status bar so nothing "fades" to white up there */
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-ink);
  line-height: 1.6;
  overflow-x: hidden;
}

.page-wrapper {
  max-width: var(--page-max-width);
  margin: 0 auto;
  background: var(--color-paper);
  overflow-x: hidden; /* the intro envelope animates off-screen; this keeps it tidy */
}


/* ---------------------------------------------------------------
   4. GLOBAL REUSABLE CLASSES
   These classes show up in more than one section, so they live
   here instead of being repeated inside every section's styles.
---------------------------------------------------------------- */

/* Small uppercase label used above most headings, e.g. "Why Thailand" */
.eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Thin gold line used to separate content */
.divider {
  height: 1px;
  width: 70%;
  margin: 20px auto;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

/* Buttons. Add "is-secondary" for the outlined / "ghost" version. */
.button {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 11px;
  padding: 15px 20px;
  border: 1px solid var(--color-gold);
  border-radius: 2px;
  background: var(--color-wine);
  color: var(--color-paper);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.button:hover {
  background: var(--color-oxblood);
}

.button.is-secondary {
  background: transparent;
  color: var(--color-ink);
}

.button.is-secondary:hover {
  background: rgba(181, 143, 74, 0.12);
}

/* Utility state class — JavaScript adds/removes this to show or
   hide something, instead of us writing a new CSS rule every time. */
.is-hidden {
  display: none;
}


/* ---------------------------------------------------------------
   5. INTRO ENVELOPE
   A short welcome screen guests see for a couple of seconds before
   the invitation itself appears. Skippable, and only shown once —
   see script.js for the logic.
---------------------------------------------------------------- */
.section_intro {
  position: fixed;
  inset: 0;
  z-index: 60;
  max-width: var(--page-max-width);
  margin: 0 auto;
  background: linear-gradient(160deg, #F7F1E6, #EADFCE);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, transform 0.7s ease;
}

/* Added by JS once the intro should disappear. Scales DOWN (not up) —
   this box is pinned edge-to-edge on the screen, so scaling past 1
   would push it past the screen's edges and could cause side-to-side
   scrolling on some phones, even while invisible. */
.section_intro.is-hidden {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
  display: flex; /* override the .is-hidden default so the fade can play */
}

.intro_skip {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top));
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-mute);
}

.intro_seal {
  width: 150px;
  height: 150px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro_seal svg {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.intro_initials {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--color-wine);
}

.intro_caption {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  text-align: center;
}


/* ---------------------------------------------------------------
   6. HERO
   The very first thing a guest sees: names, date, two buttons.
---------------------------------------------------------------- */
.section_hero {
  background: var(--color-oxblood);
  color: var(--color-paper);
  text-align: center;
  /* env(safe-area-inset-top) is how much space the iPhone's status bar/
     notch takes up — on phones without one it's just 0. Adding it to the
     top padding pushes "Michael & Oliver are getting married" down below
     the status bar icons, while the background above still fills that
     space instead of leaving it faded/uncovered (see viewport-fit=cover
     in index.html, which is what makes that background reach up there). */
  padding: calc(56px + env(safe-area-inset-top)) 26px 46px;
}

.section_hero .eyebrow {
  color: var(--color-champagne);
}

.hero_heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  color: var(--color-paper);
  margin: 10px 0 4px;
}

.hero_names {
  font-family: var(--font-script);
  font-size: clamp(32px, 11vw, 50px);
  color: var(--color-champagne);
  white-space: nowrap;
}

.hero_subtext {
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 1px;
  color: #EFE6D6;
  margin: 12px 0 24px;
}

.hero_button-row {
  display: flex;
  gap: 10px;
}

.hero_button-row .button.is-secondary {
  color: #F3E9D8;
  border-color: var(--color-champagne);
}


/* ---------------------------------------------------------------
   7. COUNTDOWN
---------------------------------------------------------------- */
.section_countdown {
  background: var(--color-paper-light);
  text-align: center;
  padding: 30px 26px;
  border-bottom: 1px solid rgba(181, 143, 74, 0.25);
}

.countdown_grid {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
}

.countdown_unit {
  min-width: 62px;
}

.countdown_number {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1;
  color: var(--color-wine);
}

.countdown_label {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-mute);
  margin-top: 4px;
}

.countdown_note {
  font-size: 11px;
  color: var(--color-mute);
  margin-top: 16px;
}


/* ---------------------------------------------------------------
   Shared section spacing — most sections below follow the same
   padding + a bottom border, so we set it once here.
---------------------------------------------------------------- */
.section_story,
.section_wat-arun,
.section_day,
.section_included,
.section_journey,
.section_rsvp,
.section_faq,
.section_travel,
.section_save {
  padding: 40px 26px;
}

.section_story h2,
.section_wat-arun h2,
.section_day h2,
.section_included h2,
.section_journey h2,
.section_rsvp h2,
.section_faq h2,
.section_travel h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  margin: 8px 0 12px;
}

.section_story p,
.section_wat-arun p,
.section_day p,
.section_included p,
.section_journey p,
.section_rsvp p,
.section_travel p {
  font-weight: 300;
  color: #3D302A;
  line-height: 1.65;
  font-size: 14.5px;
}


/* ---------------------------------------------------------------
   8. STORY ("Why Thailand")
---------------------------------------------------------------- */
.section_story {
  text-align: center;
}

.story_icon {
  stroke: var(--color-gold);
  fill: none;
  stroke-width: 1.4;
  margin: 0 auto;
}


/* ---------------------------------------------------------------
   9. WAT ARUN
---------------------------------------------------------------- */
.section_wat-arun {
  text-align: center;
  /* Removes the shared rule's bottom padding (see the "Shared section
     spacing" block above) so the video below sits flush against the
     next section, with no cream gap under it. Top padding is also
     trimmed down from the shared 40px since this section has no
     heading anymore — just the video. */
  padding-top: 16px;
  padding-bottom: 0;
}

.wat-arun_video {
  display: block;
  /* Breaks out of the section's own left/right padding (26px, set by
     the shared rule above) so the video runs edge-to-edge across the
     full width of the page instead of stopping short like the text
     above it. The negative margins cancel that padding out exactly;
     the width calc adds it back so the video still fills the space. */
  width: calc(100% + 52px);
  margin: 14px -26px 0;
}


/* ---------------------------------------------------------------
   10. THE DAY
   This section uses the dark colour scheme, same as the hero.
---------------------------------------------------------------- */
.section_day {
  background: var(--color-oxblood);
  color: var(--color-paper);
  /* Taller than the shared 40px top/bottom padding other sections use
     (set above), so the section has more breathing room around the
     bigger gallery images below. */
  padding: 60px 26px;
}

.section_day .eyebrow {
  color: var(--color-champagne);
}

.section_day h2 {
  color: var(--color-paper);
}

.section_day p {
  color: #EFE6D6;
}

.day_gallery {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 14px 0 4px;
  scroll-snap-type: x mandatory;
  /* Cancels just the LEFT half of the section's own 26px padding (set
     above), so the first photo starts flush at the true edge of the
     screen instead of sitting in an inset gap — matching how photos
     already run off the right edge as you scroll through the gallery.
     The right side is left alone; with width left on "auto", a
     negative left margin alone is enough to stretch the gallery back
     out to fill that reclaimed space. */
  margin-left: -26px;
  margin-right: -26px;
}

.gallery_image {
  object-fit: cover;
  flex: 0 0 84%;
  scroll-snap-align: center;
  height: 200px;
}

.cruise_link {
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-underline-offset: 3px;
  color: rgb(239, 230, 214);
  font-size: 1rem;
  font-weight: 300;
}


/* ---------------------------------------------------------------
   11. INCLUDED
---------------------------------------------------------------- */
.included_icon {
  stroke: var(--color-wine);
  fill: none;
  stroke-width: 1.4;
  /* "display: block" (unlike .story_icon, which relies on its section
     already being text-align: center) is what centers the icon here —
     .section_included itself is left-aligned by default so the
     "Included" list and its heading read left to right normally;
     only the icon needs centering. */
  display: block;
  margin: 0 auto;
}

.included_grid {
  /* Used to be a 2-column grid (Included / Not included side by
     side) — now there's only the one list, so it just needs to run
     the full width of the section. */
  display: block;
  margin-top: 10px;
}

.included_column-title {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 8px;
}

.included_list {
  list-style: none;
}

.included_list-item {
  font-weight: 300;
  font-size: 13px;
  padding: 5px 0;
  border-top: 1px solid rgba(181, 143, 74, 0.25);
}


/* ---------------------------------------------------------------
   12. BOAT JOURNEY
---------------------------------------------------------------- */
.section_journey {
  /* Same dark treatment as "The Day Itself" (.section_day above) —
     breaks up the page with a solid colour block instead of running
     straight from one cream section into the next. */
  background: var(--color-oxblood);
  color: var(--color-paper);
  text-align: center;
}

.section_journey .eyebrow {
  color: var(--color-champagne);
  text-align: left;
}

.section_journey h2 {
  color: var(--color-paper);
  text-align: left;
}

.section_journey p {
  color: #EFE6D6;
}

.journey_intro {
  text-align: left;
  margin-top: 8px;
}

.journey_caption {
  margin-top: 14px;
  text-align: left;
}

.journey_video {
  display: block;
  /* Breaks out of the section's own left/right padding (26px, set by
     the shared rule above) so the video runs edge-to-edge across the
     full width of the page instead of stopping short like the text
     above it. The negative margins cancel that padding out exactly;
     the width calc adds it back so the video still fills the space. */
  width: calc(100% + 52px);
  margin: 14px -26px 0;
}


/* ---------------------------------------------------------------
   13. RSVP FORM
   This is a "multi-step" form: four steps, one shown at a time.
   Each step is a <div class="rsvp_step">. JavaScript toggles the
   ".is-hidden" class to move between them — see script.js.
---------------------------------------------------------------- */
.section_rsvp {
  background: linear-gradient(180deg, var(--color-paper), #EFE6D5);
  text-align: center;
}

.rsvp_icon {
  stroke: var(--color-wine);
  fill: none;
  stroke-width: 1.4;
  margin: 0 auto;
}

.section_rsvp .rsvp_step {
  text-align: left;
}

.rsvp_intro {
  margin-bottom: 18px;
}

/* The four little progress dots at the top of the form */
.rsvp_step-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 18px;
}

.rsvp_step-dot {
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-sand);
}

.rsvp_step-dot.is-active {
  background: var(--color-wine);
}

.rsvp_field {
  margin: 12px 0;
}

.rsvp_label {
  display: block;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-mute);
  margin-bottom: 6px;
}

.rsvp_input,
.rsvp_textarea {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  color: var(--color-ink);
  background: var(--color-paper-light);
  border: 1px solid rgba(181, 143, 74, 0.5);
  border-radius: 3px;
  padding: 13px 14px;
  outline: none;
}

.rsvp_input:focus,
.rsvp_textarea:focus {
  border-color: var(--color-wine);
  box-shadow: 0 0 0 3px rgba(106, 27, 45, 0.12);
}

/* "Yes / Sadly no" tiles on step 2 */
.rsvp_tile-prompt {
  font-family: var(--font-display);
  font-size: 20px;
  text-align: center;
  margin-bottom: 6px;
}

.rsvp_tile-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 8px 0 4px;
}

.rsvp_tile {
  border: 1px solid rgba(181, 143, 74, 0.55);
  border-radius: 6px;
  background: var(--color-paper-light);
  padding: 22px 10px;
  text-align: center;
  cursor: pointer;
  transition: 0.2s ease;
}

.rsvp_tile-heading {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-ink);
}

.rsvp_tile-subtext {
  font-size: 11px;
  color: var(--color-mute);
  margin-top: 4px;
}

.rsvp_tile.is-selected {
  background: var(--color-wine);
  border-color: var(--color-gold);
}

.rsvp_tile.is-selected .rsvp_tile-heading,
.rsvp_tile.is-selected .rsvp_tile-subtext {
  color: var(--color-paper);
}

/* Dietary requirement "chips" on step 3 */
.rsvp_chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0;
}

.rsvp_chip {
  border: 1px solid rgba(181, 143, 74, 0.55);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 300;
  cursor: pointer;
  background: var(--color-paper-light);
}

.rsvp_chip.is-selected {
  background: var(--color-plum);
  color: #fff;
  border-color: var(--color-plum);
}

.rsvp_nav-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.rsvp_nav-row .button {
  flex: 1;
}

.rsvp_confirm {
  text-align: center;
  padding: 12px 0;
}

.rsvp_confirm-icon {
  margin: 0 auto 10px;
  stroke: var(--color-gold);
  fill: none;
  stroke-width: 1.4;
}

.rsvp_confirm-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  margin-bottom: 8px;
}


/* ---------------------------------------------------------------
   14. WEDDING REGISTRY
   Same rounded, bordered "callout box" style the old Bookmark Us
   section used — reused here (renamed bookmark_box -> registry_box)
   for the registry link and info instead.
---------------------------------------------------------------- */
.section_registry {
  padding: 40px 26px;
}

.registry_box {
  background: var(--color-paper-light);
  border: 1px solid rgba(181, 143, 74, 0.5);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
}

.registry_box h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  margin: 8px 0;
}

.registry_box p {
  font-weight: 300;
  font-size: 13.5px;
  color: #3D302A;
  margin-bottom: 16px;
}


/* ---------------------------------------------------------------
   15. FAQ ACCORDION
   Each question starts closed. Clicking it adds ".is-open", which
   is what makes the answer slide into view — see script.js.
---------------------------------------------------------------- */
.faq_item {
  border-top: 1px solid rgba(181, 143, 74, 0.3);
}

.faq_item:last-child {
  border-bottom: 1px solid rgba(181, 143, 74, 0.3);
}

.faq_question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 16px 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.faq_icon {
  color: var(--color-gold);
  font-size: 20px;
  transition: transform 0.25s ease;
  flex: 0 0 auto;
}

.faq_item.is-open .faq_icon {
  transform: rotate(45deg);
}

.faq_answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq_answer p {
  font-weight: 300;
  font-size: 13.5px;
  color: #4A3B33;
  line-height: 1.6;
  padding: 0 0 16px;
}


/* ---------------------------------------------------------------
   16. TRAVEL
---------------------------------------------------------------- */
.section_travel {
  background: var(--color-oxblood);
  color: var(--color-paper);
}

.section_travel .eyebrow {
  color: var(--color-champagne);
}

.section_travel h2 {
  color: var(--color-paper);
}

.section_travel p {
  color: #EFE6D6;
}

.travel_list {
  list-style: none;
  margin-top: 10px;
  font-weight: 300;
  font-size: 13px;
}

.travel_list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid rgba(216, 192, 138, 0.25);
}

/* A gold bullet in place of the emoji that used to start each line.
   "align-items: center" above (rather than a fixed "top" offset) is
   what keeps it vertically centered next to the text even if a tip
   ever wraps onto two lines. */
.travel_list-item::before {
  content: "•";
  flex: 0 0 auto;
  font-size: 40px;
  line-height: 1;
  color: var(--color-gold);
}


/* ---------------------------------------------------------------
   17. WAVE DIVIDER
   Purely decorative — a boat bobbing on an animated wave, breaking
   up the page here. The wave and boat shapes themselves are real
   artwork (see the hidden sprite near the top of index.html), so
   there's no fill/stroke styling here — just layout and animation.

   The wave scrolls left forever by exactly one tile-width (108
   units — the artwork scaled down to about 0.6x, matching the
   smaller "wave-tile" <use> instances in index.html), then jumps
   back to the start — since the artwork repeats seamlessly at that
   width, the jump is invisible and it reads as one smooth, endless
   scroll.

   The wave artwork's crests sit near the TOP of its own tile (troughs
   near the bottom) — that's why the boat is positioned with "bottom",
   not "top": it lets its hull rest right at the crest line, instead
   of floating disconnected above the whole scene.
---------------------------------------------------------------- */
.section_wave {
  padding-top: 18px;
}

.wave_scene {
  position: relative;
  width: 100%;
  height: 40px;
}

.wave_svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Needs its own position for z-index to take effect — this is what
     lets the wave paint in front of the boat below, instead of a
     positioned element (the boat) automatically winning regardless
     of order in the code. */
  position: relative;
  z-index: 2;
}

.wave_track {
  animation: wave-scroll 5.6s linear infinite; /* scaled down with the tile size (was 9s at 173 units) to keep the same scrolling speed */
}

.wave_boat {
  position: absolute;
  z-index: 1;
  bottom: 26px;
  right: 6%;
  width: 22%;
  max-width: 95px;
  height: auto;
  animation: boat-bob 3.6s ease-in-out infinite;
  transform-origin: center;
}

@keyframes wave-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-108px); }
}

@keyframes boat-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(-1.5deg); }
}

/* Some guests set their device to reduce motion — respect that by
   freezing the animation instead of forcing it on them. */
@media (prefers-reduced-motion: reduce) {
  .wave_track,
  .wave_boat {
    animation: none;
  }
}


/* ---------------------------------------------------------------
   18. SAVE TO HOME SCREEN
   One "Install" button. On Android/Chrome it triggers the real
   one-tap install prompt; everywhere else (mainly iPhone) tapping
   it opens the install_popup below instead, since there's no way
   for a website to trigger iPhone's version itself.
---------------------------------------------------------------- */
.section_save {
  text-align: center;
}

.save_install-button {
  margin-top: 16px;
}

.save_caption {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 300;
  color: var(--color-mute);
}

/* Popup with manual steps — shown on tap when the real install
   prompt isn't available. Hidden by default; script.js toggles it. */
.install_popup {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
}

.install_popup.is-hidden {
  display: none;
}

.install_popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(36, 26, 22, 0.55);
}

.install_popup-card {
  position: relative;
  max-width: 320px;
  width: 100%;
  background: var(--color-paper-light);
  border: 1px solid var(--color-gold);
  border-radius: 4px;
  padding: 32px 24px 26px;
  text-align: center;
}

.install_popup-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--color-mute);
  cursor: pointer;
}

.install_popup-icon {
  width: 34px;
  height: 34px;
  stroke: var(--color-gold);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin: 0 auto 12px;
  display: block;
}

.install_popup-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 10px;
}

.install_popup-card p {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: #3D302A;
}


/* ---------------------------------------------------------------
   19. FOOTER
---------------------------------------------------------------- */
.section_footer {
  background: var(--color-oxblood);
  color: var(--color-champagne);
  text-align: center;
  padding: 34px 26px;
}

.footer_note {
  font-weight: 300;
  font-size: 13px;
  margin: 8px 0 18px;
  color: #EFE0C8;
}

.footer_names {
  font-family: var(--font-script);
  font-size: 30px;
  color: var(--color-champagne);
}

.footer_meta {
  font-size: 11px;
  letter-spacing: 1px;
  color: #E6D6BF;
  margin-top: 6px;
  font-weight: 300;
}

.cruise_link-wrapper {
  text-align: center;
  margin-top: 2rem;
}