/* Запрошення «Love» — макет з Figma (ширина 375px).
   Усі координати задані в одиницях макета і масштабуються під екран через --u. */

:root {
  --bg: #f0e9df;
  --ink: #4b4b4b;
  --black: #000;
  --wine: #7f0000;
  --wine-bright: #a30000;
  --brush: #8d3535;
  --paper: #f4f3eb;

  --u: calc(min(100vw, 430px) / 375);
  --ease: cubic-bezier(.22, .8, .24, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.page {
  position: relative;
  width: calc(375 * var(--u));
  height: calc(4065 * var(--u));
  margin: 0 auto;
  overflow: hidden;
}

/* На великих екранах — «аркуш» по центру */
@media (min-width: 600px) {
  body { padding: 40px 0; background: #e6ddd0; }
  html { background: #e6ddd0; }
  .page {
    background: var(--bg);
    box-shadow: 0 30px 80px rgba(80, 40, 20, .15);
    border-radius: 6px;
  }
}

.abs {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
}
.abs[style*="--h"] { height: calc(var(--h) * var(--u)); }

/* ---------- Типографіка ---------- */

.t, .title {
  font-family: "Cormorant Unicase", serif;
  font-weight: 400;
  color: var(--ink);
  text-align: center;
}

.names {
  font-size: calc(34.13 * var(--u));
  line-height: calc(34.13 * var(--u));
  letter-spacing: calc(1.02 * var(--u));
  text-transform: uppercase;
}

.date-text {
  font-size: calc(40 * var(--u));
  line-height: calc(40 * var(--u));
  letter-spacing: calc(1.2 * var(--u));
  text-transform: uppercase;
}

.title {
  font-size: calc(45 * var(--u));
  line-height: calc(45 * var(--u));
  letter-spacing: calc(1.35 * var(--u));
  text-transform: uppercase;
}

.script {
  font-family: "Comforter", cursive;
  font-size: calc(60 * var(--u));
  line-height: calc(60 * var(--u));
  letter-spacing: calc(1.8 * var(--u));
  color: var(--wine);
  text-align: center;
  text-transform: lowercase;
}

.greeting {
  font-size: calc(29 * var(--u));
  line-height: calc(29 * var(--u));
  letter-spacing: calc(.87 * var(--u));
  text-transform: uppercase;
}
.greeting .gap { display: block; height: calc(22 * var(--u)); }

.time {
  font-family: "Dynalight", cursive;
  font-size: calc(60 * var(--u));
  line-height: calc(60 * var(--u));
  letter-spacing: calc(1.8 * var(--u));
  color: var(--wine);
  text-align: center;
}

.event {
  font-size: calc(20 * var(--u));
  line-height: calc(20 * var(--u));
  letter-spacing: calc(.6 * var(--u));
  color: var(--black);
  text-align: left;
  text-transform: lowercase;
}

.address {
  display: block;
  font-size: calc(35 * var(--u));
  line-height: calc(35 * var(--u));
  letter-spacing: calc(1.05 * var(--u));
  color: var(--black);
  text-decoration: none;
  text-transform: lowercase;
  z-index: 2;
}
.map-hint {
  display: block;
  margin-top: calc(14 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1.2;
  color: var(--wine);
  opacity: .75;
  transition: opacity .3s;
}
.address:hover .map-hint { opacity: 1; }

/* ---------- SVG-написи ---------- */

.love text, .big-date text { fill: #800000; white-space: pre; }
.loveits { opacity: .74; overflow: visible; }
.loveits .drift { animation: drift 14s ease-in-out infinite alternate; }

@keyframes drift {
  from { transform: translateX(-10px); }
  to   { transform: translateX(10px); }
}

/* LOVE — літери з'являються по черзі при відкритті */
.love text {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: letter 1.1s var(--ease) forwards;
}
.love text:nth-child(1) { animation-delay: .25s; }
.love text:nth-child(2) { animation-delay: .5s; }
.love text:nth-child(3) { animation-delay: .75s; }
.love text:nth-child(4) { animation-delay: 1s; }

@keyframes letter {
  from { opacity: 0; transform: translateY(-30px) scale(1.08); }
  to   { opacity: 1; transform: none; }
}

.names { animation: fade 1.2s .1s var(--ease) both; }
.loveits:first-of-type { animation: fade 2s .9s ease both; }

@keyframes fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Поява при прокрутці ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transform-box: fill-box;
}
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .18s; }
.d2 { transition-delay: .36s; }

/* ---------- Полароїди ---------- */

.polaroid {
  background: var(--paper);
  padding: calc(17 * var(--u)) calc(9 * var(--u)) calc(38 * var(--u));
  box-shadow: calc(-7 * var(--u)) calc(7 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, .25);
  transform: rotate(var(--r));
  z-index: 1;
  opacity: 0;
  translate: 0 40px;
  rotate: calc(var(--r) * -1.6);
  transition: opacity 1s var(--ease), translate 1.2s var(--ease), rotate 1.4s var(--ease);
}
.polaroid.in { opacity: 1; translate: 0 0; rotate: 0deg; }
.polaroid.p2 { transition-delay: .2s; }
.polaroid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

/* ---------- Таймінг: лінії малюються ---------- */

.line { overflow: visible; }
.line path {
  fill: none;
  stroke: var(--wine-bright);
  stroke-width: 2;
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  transition: stroke-dashoffset 1.8s var(--ease);
}
.line.in path { stroke-dashoffset: 0; }

/* ---------- Декор ---------- */

.champagne { object-fit: contain; z-index: 1; }

.hearts {
  object-fit: contain;
  animation: beat 2.4s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes beat {
  0%, 60%, 100% { transform: scale(1); }
  20% { transform: scale(1.08); }
  40% { transform: scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .polaroid, .love text { opacity: 1 !important; transform: none !important; translate: none !important; rotate: 0deg !important; }
  .line path { stroke-dashoffset: 0 !important; }
}