/* Tengerpart: a wedding by the water. Sky turning to sea with a sun and gulls, the cover as a
   postcard stamped with the wedding's date, waves rolling into sand, a wavy program line, the
   answer form out at sea, footprints at the end, and the invitation as a message in a bottle. */

:root {
  --sky: #cfe9e6;
  --sand: #f4ecdc;
  --sand-deep: #e9dcc2;
  --aqua: #8fd1cf;
  --teal: #1f6f78;
  --deep: #0f4c5c;
  --foam: #fbfdfc;
  --coral: #e9785b;
  --sun: #f6c453;
  --wed-bg: var(--sand);
  --wed-ink: #1d3a42;
  --wed-muted: #5d7a7f;
  --wed-accent: var(--teal);
  --wed-accent-ink: #fff;
  --wed-surface: var(--foam);
  --wed-line: rgba(15, 76, 92, .16);
  --wed-font: "Manrope", "Segoe UI", system-ui, sans-serif;
  --wed-font-display: "DM Serif", Georgia, serif;
  --wed-radius: 14px;
  --display: "DM Serif", Georgia, serif;
  --hand: "Dancing", "Brush Script MT", cursive;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --lb-bg: rgba(8, 40, 50, .95);
  --lb-font: var(--wed-font);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--sand); }

body {
  margin: 0;
  color: var(--wed-ink);
  font: 400 1.05rem/1.65 var(--wed-font);
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-font-smoothing: antialiased;
  background: var(--grain), var(--sand);
}

.muted { color: var(--wed-muted); }

.btn {
  font: 700 .95rem/1 var(--wed-font);
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  padding: 15px 26px;
  border: 2px solid var(--teal);
  border-radius: 999px;
  background: transparent;
  color: var(--deep);
  text-decoration: none;
  cursor: pointer;
}

.btn.primary { background: var(--coral); border-color: var(--coral); color: #fff; box-shadow: 0 8px 20px -8px rgba(233, 120, 91, .7); }

/* ---------- Top: sky, sea, sand ---------- */

.hero {
  position: relative;
  overflow-x: clip;
  padding: clamp(60px, 14vw, 110px) 18px 0;
  display: grid;
  justify-items: center;
  text-align: center;
  background: linear-gradient(180deg, #e9f6f4 0%, var(--sky) 45%, #a9dcd8 100%);
}

.sky { position: absolute; inset: 0 0 auto; height: 260px; pointer-events: none; }

.sun { position: absolute; top: 28px; right: 12%; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle, #fff3c4, var(--sun) 60%); box-shadow: 0 0 0 14px rgba(246, 196, 83, .18), 0 0 60px 20px rgba(246, 196, 83, .25); }

.gulls { position: absolute; top: 14px; left: 5%; width: 90px; fill: none; stroke: var(--deep); stroke-width: 2.2; stroke-linecap: round; opacity: .55; }

.kicker { position: relative; margin: 0; font: 700 .76rem/1.4 var(--wed-font); letter-spacing: .4em; text-transform: uppercase; color: var(--teal); hyphens: manual; }

.names {
  position: relative;
  width: 100%;
  margin: 12px 0 0;
  font: 400 15vw/1 var(--display);
  color: var(--deep);
  letter-spacing: -.01em;
  hyphens: manual;
}

.names .amp { display: inline-block; font: italic 400 .8em/1 var(--display); color: var(--coral); padding: 0 .06em; }

.date { position: relative; margin: 16px 0 0; font: 700 .86rem/1.5 var(--wed-font); letter-spacing: .2em; text-transform: uppercase; color: var(--deep); }

.countdown { margin: 6px 0 0; font: 600 1.6rem/1.2 var(--hand); color: var(--teal); }

.greeting { margin: 16px 0 0; padding: 10px 24px; border-radius: 999px; background: rgba(255, 255, 255, .55); font: italic 400 clamp(1.4rem, 5vw, 1.8rem)/1.2 var(--display); color: var(--deep); }

/* The cover as a postcard, stamped and postmarked. */
.postcard {
  position: relative;
  z-index: 2;
  width: min(420px, 86vw);
  margin-top: clamp(30px, 6vw, 44px);
  padding: 12px 12px 46px;
  background: var(--foam);
  border-radius: 4px;
  box-shadow: 0 30px 50px -26px rgba(15, 76, 92, .6);
  rotate: -2deg;
}

.postcard img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 4.6; object-fit: cover; border-radius: 2px; }

.postcard::after { content: "Üdvözlet a nagy napról!"; position: absolute; left: 16px; bottom: 10px; font: 600 1.35rem/1 var(--hand); color: var(--teal); }

.stamp { position: absolute; top: 22px; right: 22px; width: 46px; height: 56px; padding: 4px; background: var(--foam); -webkit-mask: radial-gradient(circle 3px, transparent 98%, #000) -3px -3px / 8px 8px; mask: radial-gradient(circle 3px, transparent 98%, #000) -3px -3px / 8px 8px; rotate: 4deg; }

.stamp svg { display: block; width: 100%; height: 100%; }

.postmark {
  position: absolute;
  bottom: -8px;
  right: 22px;
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(15, 76, 92, .7);
  box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6.5px rgba(15, 76, 92, .55);
  color: rgba(15, 76, 92, .8);
  rotate: -14deg;
  mix-blend-mode: multiply;
}

.postmark::after { content: ""; position: absolute; right: 80px; top: 28px; width: 64px; height: 30px; background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(15, 76, 92, .55) 5px 7px); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 30'%3E%3Cpath d='M0 15q14-10 27 0t28 0t27 0t28 0V30H0Z M0 0h110v8q-14 10-27 0t-28 0t-27 0T0 8Z'/%3E%3C/svg%3E"); }

.postmark-date { display: grid; justify-items: center; line-height: 1.05; font: 800 .74rem/1.1 var(--wed-font); letter-spacing: .06em; }

.postmark-date b { font-size: 1.05rem; letter-spacing: .1em; }

.actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }

.waves { display: block; width: calc(100% + 36px); height: clamp(70px, 12vw, 120px); margin: clamp(30px, 6vw, 50px) -18px 0; }

.waves .w1 { fill: #7cc8c4; }
.waves .w2 { fill: #c6e7e1; }
.waves .w3 { fill: var(--sand); }

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 20px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--sand) 90%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--wed-line);
}

.wedding-nav-link { color: var(--deep); text-decoration: none; font: 700 .8rem/2 var(--wed-font); letter-spacing: .06em; hyphens: manual; }

.wedding-nav-link:hover { color: var(--coral); }

/* ---------- Sections ---------- */

main, .after { display: block; width: min(880px, 100% - 36px); margin: 0 auto; }

.block { padding-top: clamp(50px, 9vw, 84px); text-align: center; scroll-margin-top: 60px; }

.block > p { max-width: 34em; margin: 0 auto; }

h2 { margin: 0 0 22px; font: 400 clamp(2.1rem, 7.5vw, 3rem)/1.05 var(--display); color: var(--deep); }

h2::after { content: ""; display: block; width: 70px; height: 10px; margin: 10px auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 10' fill='none' stroke='%23e9785b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 5q5.5-5 11 0t11 0t11 0t11 0t11 0t11 0'/%3E%3C/svg%3E") center / contain no-repeat; }

.story { font-size: 1.1rem; line-height: 1.8; }

.venues { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }

.venue {
  position: relative;
  padding: 44px 22px 28px;
  border-radius: 22px;
  background: var(--foam);
  box-shadow: 0 20px 40px -28px rgba(15, 76, 92, .6);
  overflow: hidden;
}

.venue::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0h80v12q-10 10-20 0t-20 0t-20 0t-20 0Z' fill='%238fd1cf'/%3E%3C/svg%3E") 0 0 / 80px 22px repeat-x; }

.venue-b::before { filter: hue-rotate(150deg) saturate(1.4); }

.wedding-venue-label { color: var(--coral); font-weight: 800; letter-spacing: .24em; font-size: .74rem; }

.wedding-venue-place { font: 400 1.8rem/1.1 var(--display); color: var(--deep); }

.wedding-venue-time { color: var(--teal); font: 600 1.6rem/1.2 var(--hand); }

.wedding-venue-map { color: var(--teal); font-weight: 800; }

/* The program along a wavy line. */
.program {
  position: relative;
  width: min(520px, 100%);
  margin: 42px auto 0 !important;
  text-align: left;
}

.program::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(5.2em + 3px);
  width: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 40' fill='none' stroke='%238fd1cf' stroke-width='2.5'%3E%3Cpath d='M7 0q7 10 0 20t0 20'/%3E%3C/svg%3E") 0 0 / 14px 40px repeat-y;
}

.wedding-step { position: relative; grid-template-columns: 5.2em 1fr; gap: 0 2.6em; padding: 12px 0; border: 0; }

.wedding-step::before { content: ""; position: absolute; left: calc(5.2em + 3px); top: 50%; width: 14px; height: 14px; translate: 0 -50%; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px var(--sand); }

.wedding-step-time { text-align: right; font: 400 1.35rem/1 var(--display); color: var(--teal); }

.pebble { display: inline-block; padding: 18px 30px; border-radius: 48% 52% 50% 50% / 60% 55% 45% 40%; background: var(--sand-deep); }

.pair { display: grid; gap: 0 48px; }

@media (min-width: 760px) {
  .pair { grid-template-columns: 1fr 1fr; }
}

/* ---------- Photos ---------- */

.shore { gap: 12px !important; justify-content: center; }

.shore .wedding-photo { flex: 1 1 calc(var(--ratio, 1) * 190px); max-height: 360px; border-radius: 18px; background: var(--sand-deep); box-shadow: 0 16px 30px -20px rgba(15, 76, 92, .6); }

.shore.one { width: min(420px, 100%); margin: 0 auto; }

/* ---------- RSVP at sea ---------- */

.sea {
  position: relative;
  margin-top: clamp(70px, 12vw, 110px);
  padding: clamp(60px, 12vw, 100px) 18px clamp(60px, 10vw, 90px);
  background: linear-gradient(180deg, var(--teal), var(--deep));
  scroll-margin-top: 40px;
}

.sea-top { position: absolute; left: 0; top: -40px; width: 100%; height: 42px; fill: var(--teal); }

.sea-card {
  width: min(620px, 100%);
  margin: 0 auto;
  padding: clamp(36px, 8vw, 52px) clamp(18px, 6vw, 46px) clamp(30px, 6vw, 42px);
  border-radius: 28px;
  background: var(--foam);
  text-align: center;
  box-shadow: 0 30px 60px -30px rgba(0, 20, 30, .7);
}

.rsvp-menus { margin: 0 auto 20px; color: var(--wed-muted); }

.wedding-member { border-radius: 18px; background: #eef7f6; border: 0; }

.wedding-member-name { font: 400 1.35rem/1.2 var(--display); }

.wedding-choice { font-weight: 700; }

.wedding-member[data-attending='false'] .wedding-choice.is-on { background: var(--deep); border-color: var(--deep); }

.wedding-btn.primary { background: var(--coral); border-color: var(--coral); }

.wedding-btn { border-color: var(--teal); color: var(--deep); }

.wedding-answered-title { font: 700 2.4rem/1.1 var(--hand); color: var(--teal); }

/* ---------- Finale ---------- */

.finale { padding: clamp(60px, 11vw, 100px) 18px clamp(48px, 9vw, 80px); text-align: center; display: grid; justify-items: center; }

.steps { width: min(260px, 70vw); height: auto; color: rgba(160, 130, 90, .55); }

.finale-line { margin: 18px 0 0; font: 400 clamp(2.2rem, 9vw, 3.6rem)/1.05 var(--display); color: var(--deep); }

.finale-line em { color: var(--coral); }

.finale-names { margin: 14px 0 0; font: 600 clamp(1.5rem, 5vw, 2rem)/1.2 var(--hand); color: var(--teal); hyphens: manual; }

/* ---------- The message in a bottle ---------- */

.envelope-scene {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 30px;
  padding: 20px 20px 120px;
  overflow: hidden;
  background: linear-gradient(180deg, #e9f6f4, var(--sky) 60%, #a9dcd8);
  transition: opacity .5s 1s;
}

.scene-waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 140px; }

.scene-waves .w1 { fill: #7cc8c4; }
.scene-waves .w2 { fill: var(--teal); }

.bottle-wrap { position: relative; z-index: 2; width: min(300px, 76vw); height: min(330px, 46vh); display: grid; place-items: center; }

.bottle { width: auto; height: min(300px, 42vh); rotate: -14deg; overflow: visible; filter: drop-shadow(0 18px 18px rgba(15, 76, 92, .35)); }

.cork { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .5s; transform-box: fill-box; transform-origin: center; }

.scroll { transition: opacity .3s .3s; }

.tag {
  position: absolute;
  top: 14%;
  left: 54%;
  margin: 0;
  max-width: 64%;
  padding: 10px 16px 10px 26px;
  background: #fbf6ea;
  border-radius: 4px;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  box-shadow: 0 6px 12px rgba(15, 76, 92, .25);
  rotate: 8deg;
  transition: opacity .3s;
}

@media (min-width: 600px) {
  .tag { max-width: 250px; width: max-content; }
}

.tag span { font: 700 clamp(1.15rem, 4.6vw, 1.45rem)/1.1 var(--hand); color: var(--deep); hyphens: manual; }

.letter {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: min(320px, 82vw);
  margin-left: max(-160px, -41vw);
  translate: 0 -50%;
  padding: 26px 18px;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
  background: #fbf6ea;
  border-radius: 4px;
  box-shadow: 0 20px 40px -18px rgba(15, 76, 92, .55);
  transform: translateY(-20%) scale(.12, .04);
  opacity: 0;
  transition: transform .7s .35s cubic-bezier(.2, .9, .2, 1), opacity .2s .35s;
}

.letter-kicker { margin: 0; font: 800 .66rem/1.4 var(--wed-font); letter-spacing: .34em; text-transform: uppercase; color: var(--coral); }

.letter-names { margin: 0; font: 700 clamp(1.8rem, 7vw, 2.3rem)/1.1 var(--hand); color: var(--deep); hyphens: manual; }

.letter-date { margin: 0; font: 700 .72rem/1.3 var(--wed-font); letter-spacing: .12em; text-transform: uppercase; color: var(--wed-muted); }

.open { position: relative; z-index: 2; justify-content: center; }

.is-sealed body { overflow: hidden; }

.is-opening .cork { transform: translate(30px, -70px) rotate(70deg); opacity: 0; }

.is-opening .scroll, .is-opening .tag, .is-opening .open { opacity: 0; }

.is-opening .letter { transform: none; opacity: 1; }

.is-opening .envelope-scene { opacity: 0; }

/* ---------- Motion ---------- */

.reveal .rv { transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }

.reveal .rv:not(.in) { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: no-preference) {
  .waves .w1, .scene-waves .w1 { animation: swell 7s ease-in-out infinite alternate; }
  .waves .w2, .scene-waves .w2 { animation: swell 5.5s ease-in-out infinite alternate-reverse; }
  .gulls { animation: glide 14s ease-in-out infinite alternate; }
  .bottle { animation: bob 3.4s ease-in-out infinite alternate; }
  .is-opening .bottle { animation-play-state: paused; }
}

@keyframes swell { to { transform: translateX(-60px) scaleY(1.12); } }

@keyframes glide { to { transform: translate(40px, 10px); } }

@keyframes bob { from { transform: translateY(-6px) rotate(-3deg); } to { transform: translateY(8px) rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  .letter, .cork, .scroll, .tag, .envelope-scene { transition: none; }
}

/* ---------- Guests' photos ---------- */

.guest-photos .wedding-photos-item img { border-radius: 14px; background: var(--sand-deep); }

.guest-photos .wedding-photos-button { background: var(--coral); border-color: var(--coral); color: #fff; }