:root {
  --rose: #d8a9a3;
  --rose-deep: #b98780;
  --ribbon: #cda8a2;
  --sage: #8d9a70;
  --olive: #66744c;
  --ink: #55584a;
  --line: #e7d9d5;
  --paper: #ffffff;
  --script: 'Great Vibes', 'Segoe Script', cursive;
  --serif: 'Cormorant Garamond', Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.script { font-family: var(--script); font-weight: 400; line-height: 1.25; }
.rose { color: var(--rose); }
.sage { color: var(--sage); }
.olive { color: var(--olive); }
.ink { color: var(--ink); }

#demo-banner {
  background: #f6efe6; color: #7a6a4f; text-align: center;
  font-size: 15px; padding: 6px 16px;
}

/* ---------- Hero ---------- */
.hero {
  padding: clamp(104px, 30vw, 170px) 16px 28px;
  text-align: center;
}
.corner {
  position: absolute; pointer-events: none; mix-blend-mode: multiply;
  /* telefonon 27vw + 40vw csokor + 27vw: nem érnek össze */
  width: clamp(78px, 27vw, 270px);
}
.corner.tl { top: 0; left: 0; }
.corner.tr { top: 0; right: 0; }

.frame {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(74px, 17vw, 104px) clamp(26px, 7vw, 54px) clamp(30px, 7vw, 46px);
}
.frame-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.frame-svg path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ribbon { stroke: var(--ribbon); stroke-width: 5; }
.ribbon-shade { stroke: #a97d77; stroke-width: 1; opacity: .45; }
.frame-bouquet {
  position: absolute; top: 0; left: 50%;
  width: clamp(118px, 38vw, 210px);
  transform: translate(-50%, -44%);
}
.invite-line { position: relative; margin: 0 0 6px; font-size: clamp(25px, 6.6vw, 38px); }
.names { position: relative; margin: 10px 0 22px; }
.names span {
  display: block; font-family: var(--script); color: var(--rose);
  font-size: clamp(46px, 13vw, 76px); line-height: 1.28;
}
.names.many span { font-size: clamp(40px, 11vw, 62px); line-height: 1.22; }
.frame-venue { position: relative; border-radius: 18px; width: 100%; }
.date { font-size: clamp(38px, 10vw, 56px); margin: 30px 0 0; }
.scroll-hint {
  display: inline-block; margin-top: 4px; color: var(--sage); text-decoration: none;
  font-size: 34px; line-height: 1; animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(6px); } }

/* ---------- Sections ---------- */
main { position: relative; }
section { position: relative; padding: 44px 20px; text-align: center; max-width: 760px; margin: 0 auto; }
.desk-date, .side-deco { display: none; }
h2 { font-size: clamp(46px, 12vw, 64px); margin: 0 0 18px; }
.lead { max-width: 520px; margin: 0 auto 22px; }

/* Couple */
.dragonfly { width: 110px; margin: 0 auto 18px; }
.couple-row { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 4vw, 34px); }
.couple-row figure { margin: 0; flex: 0 1 210px; }
.couple-row figcaption { font-size: clamp(40px, 10vw, 58px); margin-bottom: 6px; }
.couple-row img { width: 100%; }
.amp { font-size: 48px; align-self: center; }
blockquote { margin: 34px auto 0; max-width: 560px; font-size: clamp(25px, 6.4vw, 32px); }
blockquote cite { display: block; font-style: normal; font-size: .85em; margin-top: 8px; }

.countdown { display: flex; justify-content: center; gap: clamp(14px, 5vw, 34px); margin-top: 36px; }
.countdown div { min-width: 58px; }
.countdown b {
  display: block; font-family: var(--script); font-weight: 400; color: var(--olive);
  font-size: clamp(40px, 10vw, 54px); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.countdown span { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }

/* Timeline */
.timeline {
  list-style: none; margin: 0 auto 30px; padding: 6px 0 6px 26px;
  display: inline-block; text-align: left; border-left: 5px solid var(--sage);
  font-size: clamp(30px, 8vw, 40px);
}
.timeline li { display: flex; gap: 16px; justify-content: space-between; padding: 7px 0; }
.timeline span::after { content: ':'; }

/* Buttons */
.btn {
  display: inline-block; cursor: pointer; text-decoration: none;
  font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: .02em;
  color: #fff; background: var(--sage); border: 2px solid var(--sage);
  border-radius: 999px; padding: 11px 26px; margin: 6px; white-space: nowrap;
  transition: background .2s, color .2s, transform .1s;
}
.btn:hover { background: var(--olive); border-color: var(--olive); }
.btn:active { transform: scale(.98); }
.btn.ghost { background: transparent; color: var(--olive); }
.btn.ghost:hover { background: #f2f4ec; }
.btn[disabled] { opacity: .6; cursor: wait; }
:focus-visible { outline: 3px solid var(--rose-deep); outline-offset: 3px; }

/* Venue */
.venue-logo { width: min(300px, 74%); margin: 0 auto 20px; }
.venue-grid { display: grid; grid-template-columns: 3fr 4fr; gap: 14px; align-items: center; }
.venue-map { border-radius: 90px; }
.venue-hall { border-radius: 18px; }
.address { font-size: clamp(27px, 7vw, 34px); margin: 22px 0 12px; }

/* RSVP */
.divider {
  width: min(330px, 80%); margin: 0 auto 10px;
  /* a csokor alja egyenesre van vágva – finoman elhalványítjuk */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
}
form { text-align: left; max-width: 520px; margin: 0 auto; }
.person { border-bottom: 1px solid var(--line); padding: 14px 0; }
.person-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.person-name { font-family: var(--script); color: var(--rose-deep); font-size: 36px; line-height: 1.1; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pills label { cursor: pointer; }
.pills input { position: absolute; opacity: 0; pointer-events: none; }
.pills span {
  display: inline-block; border: 2px solid var(--sage); color: var(--olive);
  border-radius: 999px; padding: 6px 16px; font-weight: 600; font-size: 17px;
  transition: background .15s, color .15s;
}
.pills input:checked + span { background: var(--sage); color: #fff; }
.pills input.no:checked + span { background: var(--rose-deep); border-color: var(--rose-deep); }
.pills input:focus-visible + span { outline: 3px solid var(--rose-deep); outline-offset: 2px; }
.diet { margin-top: 10px; }
.field { display: block; border: 0; padding: 0; margin: 20px 0 0; }
.field > span, .field legend { display: block; font-weight: 600; color: var(--olive); margin-bottom: 8px; padding: 0; }
input[type=text], textarea {
  width: 100%; font: inherit; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px; background: #fffdfc;
}
input[type=text]:focus, textarea:focus { border-color: var(--sage); outline: none; }
::placeholder { color: #b3ad9f; }
form .btn { display: block; width: 100%; margin: 26px 0 0; }
.form-error { color: #a4483f; font-weight: 600; margin: 16px 0 0; }

.done { max-width: 520px; margin: 0 auto; }
.done-title { font-size: 46px; margin: 0 0 8px; }
.done ul { list-style: none; padding: 0; margin: 0 0 16px; }
.done li { padding: 3px 0; }

/* Photos */
.rings { width: min(420px, 90%); margin: 0 auto 6px; border-radius: 18px; }
.upload-status { min-height: 1.5em; margin: 12px 0; color: var(--olive); font-weight: 600; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.gallery figure { margin: 0; position: relative; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; cursor: zoom-in; }
.gallery figcaption {
  position: absolute; left: 6px; bottom: 6px; background: rgba(255,255,255,.88);
  border-radius: 999px; font-size: 13px; padding: 1px 9px; color: var(--olive);
}
.gallery-empty { color: var(--sage); font-style: italic; }

#lightbox {
  position: fixed; inset: 0; background: rgba(40, 38, 34, .9); z-index: 10;
  display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out;
}
#lightbox img { max-height: 100%; border-radius: 8px; }

/* Footer */
footer {
  position: relative; text-align: center; margin: 30px 0 0;
  padding: 40px 16px clamp(150px, 40vw, 230px);
}
footer .corner.bl { bottom: 0; left: 0; }
footer .corner.br { bottom: 0; right: 0; width: clamp(100px, 27vw, 210px); }
footer p { font-size: clamp(34px, 9vw, 48px); margin: 0; position: relative; }
.grape { width: 84px; margin: 0 auto 12px; }

#dev-links {
  max-width: 720px; margin: 0 auto; padding: 16px 20px 40px; font-size: 16px; text-align: center;
  border-top: 1px dashed var(--line);
}
#dev-links a { color: var(--olive); margin: 0 6px; white-space: nowrap; }

/* =====================================================================
   Széles képernyő: három hasáb, mint a papír meghívón
   (balra dátum + idővonal, középen a keret, jobbra a helyszín)
   ===================================================================== */
@media (min-width: 960px) {
  main {
    display: grid; align-items: center;
    grid-template-columns: minmax(210px, 1fr) minmax(400px, 560px) minmax(210px, 1fr);
    grid-template-areas: "ido hero hely" "mi mi mi" "rsvp rsvp rsvp" "kepek kepek kepek";
    column-gap: clamp(16px, 3vw, 56px);
    /* a tartalom legfeljebb 1560px széles, de a sarokvirágok a képernyő széléig érnek */
    padding: 0 max(clamp(16px, 3vw, 56px), calc((100vw / var(--z, 1) - 1560px) / 2));
  }
  .corner { width: clamp(215px, 21vw, 340px); }
  .hero { grid-area: hero; padding: 150px 0 50px; }
  .hero .date, .scroll-hint { display: none; }
  #idovonal { grid-area: ido; }
  #helyszin { grid-area: hely; }
  #idovonal, #helyszin { max-width: 420px; width: 100%; padding: 250px 0 40px; margin: 0 auto; }
  #mi { grid-area: mi; }
  #visszajelzes { grid-area: rsvp; }
  #kepek { grid-area: kepek; }
  #mi, #visszajelzes, #kepek { width: 100%; }

  .desk-date { display: block; margin-bottom: 26px; }
  .desk-date p { font-size: 46px; margin: 0; }
  #idovonal h2, #helyszin h2 { font-size: 54px; margin-bottom: 12px; }
  .timeline { font-size: 34px; margin-bottom: 20px; }
  .cal-buttons .btn { display: block; margin: 10px auto; max-width: 300px; }
  .venue-logo { width: 240px; }
  .venue-grid { grid-template-columns: 1fr; justify-items: center; }
  .venue-map { width: 250px; }
  .venue-hall { width: 300px; }
  .address { font-size: 28px; }

  .venue-logo, .venue-map, .venue-hall { max-width: 100%; }

  /* Mi ketten: Bence balra, Erika jobbra, középen az idézet és a visszaszámláló */
  #mi {
    display: grid; align-items: center; column-gap: clamp(24px, 4vw, 64px);
    grid-template-columns: 1fr minmax(320px, 460px) 1fr;
    max-width: 1180px; padding-top: 70px;
  }
  .couple-row { display: contents; }
  .couple-row figure { grid-row: 1 / 5; width: min(100%, 300px); }
  .couple-row figure:first-child { grid-column: 1; justify-self: end; }
  .couple-row figure:last-child { grid-column: 3; justify-self: start; }
  .dragonfly { grid-column: 2; grid-row: 1; }
  .amp { grid-column: 2; grid-row: 2; font-size: 64px; }
  blockquote { grid-column: 2; grid-row: 3; margin-top: 6px; }
  .countdown { grid-column: 2; grid-row: 4; gap: clamp(20px, 3vw, 44px); }
}
/* Keskenyebb laptop / fekvő tablet: kisebb betűk az oldalsó hasábokban */
@media (min-width: 960px) and (max-width: 1199px) {
  #idovonal h2, #helyszin h2 { font-size: 46px; }
  .desk-date p { font-size: 38px; }
  .timeline { font-size: 28px; padding-left: 18px; }
  .timeline li { gap: 10px; }
  .address { font-size: 25px; }
  .cal-buttons .btn { font-size: 17px; padding: 10px 14px; }
  .couple-row figcaption { font-size: 46px; }
}
/* Nagyon nagy monitor: az egész arányosan nagyobb */
@media (min-width: 2000px) { main, footer { --z: 1.25; zoom: 1.25; } main > .corner { width: 280px; } }
@media (min-width: 2500px) { main, footer { --z: 1.5; zoom: 1.5; } }
/* Nagy monitor: virágok a visszajelzés és a képek mellett */
@media (min-width: 1280px) {
  .side-deco {
    display: block; position: absolute; top: 50%; translate: 0 -50%;
    width: min(250px, calc((100vw / var(--z, 1) - 760px) / 2 - 70px));
    mix-blend-mode: multiply; pointer-events: none;
    /* a csokor egyik oldala egyenes vágású – azt az élt elhalványítjuk */
    -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 97%);
    mask-image: linear-gradient(to right, #000 62%, transparent 97%);
  }
  .side-deco.left { right: 100%; margin-right: 30px; }
  .side-deco.right { left: 100%; margin-left: 30px; scale: -1 1; }
}

/* =====================================================================
   Animációk
   ===================================================================== */

/* --- Nyitó: virágok kinyílnak, szalag megrajzolódik, nevek "íródnak" --- */
@keyframes bloom-l { from { opacity: 0; transform: scale(.5) rotate(-10deg); } to { opacity: 1; transform: none; } }
@keyframes bloom-r { from { opacity: 0; transform: scale(.5) rotate(10deg); } to { opacity: 1; transform: none; } }
@keyframes sway-l { to { rotate: 2.2deg; } }
@keyframes sway-r { to { rotate: -2.2deg; } }
.corner.tl { transform-origin: 0 0; animation: bloom-l 1.6s cubic-bezier(.2,.8,.2,1) both, sway-l 6s ease-in-out 1.6s infinite alternate; }
.corner.tr { transform-origin: 100% 0; animation: bloom-r 1.6s cubic-bezier(.2,.8,.2,1) .15s both, sway-r 7s ease-in-out 1.8s infinite alternate; }
.corner.bl { transform-origin: 0 100%; animation: sway-r 7s ease-in-out infinite alternate; }
.corner.br { transform-origin: 100% 100%; animation: sway-l 6s ease-in-out infinite alternate; }

@keyframes pop {
  from { opacity: 0; transform: translate(-50%, -44%) scale(.3) rotate(-12deg); }
  to { opacity: 1; transform: translate(-50%, -44%); }
}
.frame-bouquet { animation: pop 1s cubic-bezier(.3,1.5,.5,1) .7s both; }

@keyframes write {
  from { clip-path: inset(-30% 105% -30% -12%); opacity: .3; }
  to { clip-path: inset(-30% -12% -30% -12%); opacity: 1; }
}
.invite-line { animation: write 1.7s ease-out 1s both; }
.names span { animation: write 1.1s ease-out both; }

@keyframes fade-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.frame-venue { animation: fade-up 1.1s ease-out var(--after, 2.6s) both; }
.date { animation: write 1.4s ease-out calc(var(--after, 2.6s) + .4s) both; }
.scroll-hint { animation: fade-up 1s ease-out calc(var(--after, 2.6s) + 1.2s) both, bob 2.2s ease-in-out calc(var(--after, 2.6s) + 2.2s) infinite; }

/* --- Görgetésre megjelenő elemek --- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s ease-out, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal[data-reveal=left] { transform: translateX(-46px); }
.reveal[data-reveal=right] { transform: translateX(46px); }
.reveal[data-reveal=zoom] { transform: scale(.6); transition-timing-function: ease-out, cubic-bezier(.3,1.5,.5,1); }
.reveal[data-reveal=write] {
  /* nem vágjuk le teljesen, különben a megjelenés-figyelő nem veszi észre */
  opacity: 0; transform: none; clip-path: inset(-30% 94% -30% -12%);
  transition: clip-path 1.5s ease-out, opacity .5s ease-out;
}
.reveal[data-reveal=line] { opacity: 1; transform: none; }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-reveal=write].in { clip-path: inset(-30% -12% -30% -12%); }

/* Idővonal: a zöld vonal lefut, a pontok egymás után érkeznek */
.timeline { border-left: 0; position: relative; }
.timeline::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--sage); border-radius: 3px; transform-origin: top;
  transition: transform 1.6s ease-out;
}
.timeline.reveal:not(.in)::before { transform: scaleY(0); }

/* Szitakötő lebeg */
@keyframes hover-fly {
  0%, 100% { translate: 0 0; rotate: -2deg; }
  50% { translate: 0 -9px; rotate: 3deg; }
}
.dragonfly { animation: hover-fly 4.5s ease-in-out infinite; }
.grape { animation: hover-fly 6s ease-in-out infinite; }

/* Képek finom kiemelése */
.venue-grid img, .rings, .gallery img { transition: scale .5s ease, box-shadow .5s ease, opacity .9s ease-out, transform .9s cubic-bezier(.2,.8,.2,1); }
.venue-grid img:hover, .rings:hover, .gallery img:hover { scale: 1.03; box-shadow: 0 10px 30px rgba(120, 100, 90, .18); }

/* Gomb: átfutó fény */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); animation: shine 5s ease-in-out infinite;
}
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }

/* --- Hulló szirmok --- */
.petals { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.petal {
  position: absolute; top: -40px; left: var(--x);
  width: var(--s); height: calc(var(--s) * .78);
  background: radial-gradient(circle at 30% 30%, #fbeae7, #e7b8b1);
  border-radius: 80% 0 80% 0; opacity: .7;
  animation: fall var(--d) linear var(--delay) infinite, drift 4s ease-in-out var(--delay) infinite alternate;
}
.petal.leaf { background: radial-gradient(circle at 30% 30%, #dfe6cf, #a9b78d); }
@keyframes fall {
  from { transform: translate3d(0, 0, 0) rotate(0) rotateX(0); }
  to { transform: translate3d(var(--drift), 112vh, 0) rotate(520deg) rotateX(360deg); }
}
@keyframes drift { to { translate: 34px 0; } }
.petal.burst { animation: none; top: 0; left: 0; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .petals { display: none; }
}