:root {
  --night: #1d1918;
  --wine: #600e1c;
  --cream: #fdf3dc;
  --ink: #6b1322;

  --sc: "Cormorant SC", Georgia, serif;
}

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

html, body { background: var(--night); }

body {
  font-family: var(--sc);
  font-weight: 600;
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.on-main { background: var(--wine); }

button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }

img, svg { display: block; }

h1, h2 { font-weight: inherit; }

/* ---------- Intro: pudełko ---------- */

.intro {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--night);
  transition: opacity .7s ease;
}

.intro.leaving { opacity: 0; pointer-events: none; }

.stage {
  position: relative;
  width: min(100vw, 56.25svh);
  aspect-ratio: 540 / 960;
  container-type: inline-size;
}

.l { position: absolute; height: auto; }

.box-base     { left: 17.222%; top: 2.188%;  width: 64.444%; }
.drawer       { left: 19.722%; top: 2.227%;  width: 61.528%; }
.window-photo { left: 58.681%; top: 14.961%; width: 13.889%; }
.lid          { left: 17.083%; top: 3.438%;  width: 64.792%; }
.t-date       { left: 37.63%;  top: 24.04%;  width: 32.63%; }
.t-date g[fill] { fill: #fcd4c4; }
.t-headline   { left: 17.3%;   top: 5.5%;    width: 65.4%; }
.t-names      { left: 13.15%;  top: 73%;     width: 81.39%; }
.hit          { left: 17%;     top: 2%;      width: 65%; height: 40%; }
.enter        { left: 24.028%; top: 88.438%; width: 50.764%; height: 5.742%; }

.enter-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.9cqw;
  color: var(--cream);
  text-shadow: 0 .2cqw .6cqw rgba(0, 0, 0, .45);
}

.box-group {
  position: absolute;
  inset: 0;
  transform: translateY(27.5%);
  transition: transform 1.6s cubic-bezier(.5, 0, .2, 1) .35s;
}

.open .box-group { transform: none; }

.drawer-clip {
  position: absolute;
  inset: 0;
  clip-path: inset(3.438% 0 0 0);
  pointer-events: none;
}

.drawer-move {
  position: absolute;
  inset: 0;
  transition: transform 1.6s cubic-bezier(.5, 0, .2, 1) .35s;
}

.t-date,
.enter {
  opacity: 0;
  visibility: hidden;
}

.enter { transition: opacity .6s ease 1.5s, visibility 0s linear 1.5s; }
.t-date { transition: opacity .5s ease .15s, visibility 0s linear .15s; }

.t-headline, .t-names { transition: opacity .35s ease; }
.window-photo { transition: opacity .3s ease .3s; }


.play .window-photo { animation: blurIn .6s ease-out backwards; }
.play .drawer { animation: blurIn .6s ease-out .1s backwards; }

@keyframes blurIn {
  from { opacity: 0; filter: blur(10px); }
  to   { opacity: 1; filter: blur(0); }
}

.open .drawer-move { transform: translateY(33.2%); }
.open .t-headline,
.open .t-names,
.open .window-photo { opacity: 0; }
.open .t-date,
.open .enter { opacity: 1; visibility: visible; }
.open .hit { display: none; }

/* ---------- Strona główna ---------- */

.main {
  --w: min(100vw, 560px);
  --p: calc(var(--w) / 1350);
  background: var(--wine);
  min-height: 100vh;
}

.page {
  position: relative;
  width: var(--w);
  height: calc(var(--p) * 5180);
  margin: 0 auto;
  overflow: hidden;
}

.a {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 1.15;
  text-shadow: 0 calc(var(--p) * 3) calc(var(--p) * 8) rgba(40, 0, 8, .55);
}


.hero {
  position: absolute;
  left: 2%;
  top: calc(var(--p) * 77);
  width: 98%;
}

.hero-img { width: 100%; height: auto; }

.strip-cap {
  position: absolute;
  left: calc(var(--p) * 806);
  top: calc(var(--p) * 1070);
  width: calc(var(--p) * 327);
  text-align: center;
  font-size: calc(var(--p) * 40);
  line-height: 1.3;
  color: #2b2b2b;
  transform: rotate(1.2deg);
}

.strip-cap span {
  font-size: 1.3em;
  letter-spacing: .04em;
}

.t-meet  { top: calc(var(--p) * 1330); font-size: calc(var(--p) * 80); }
.t-title { left: 6%; right: auto; top: calc(var(--p) * 1520); width: 88%; }
.t-title svg { width: 100%; height: auto; filter: drop-shadow(0 calc(var(--p) * 3) calc(var(--p) * 8) rgba(40, 0, 8, .55)); }
.t-title g[fill] { fill: var(--cream); }
.t-when  { top: calc(var(--p) * 1860); font-size: calc(var(--p) * 74); }
.t-join  { top: calc(var(--p) * 2094); font-size: calc(var(--p) * 66); }

.t-count {
  top: calc(var(--p) * 2330);
  font-size: calc(var(--p) * 130);
  font-variant-numeric: lining-nums tabular-nums;
}

.t-count small {
  font-size: .46em;
  margin: 0 .5em 0 .15em;
}

.t-count small:last-child { margin-right: 0; }

.story {
  left: 12.074%;
  right: auto;
  top: calc(var(--p) * 2635);
  width: 76.148%;
  color: var(--ink);
  text-shadow: none;
}

.story img { width: 100%; height: auto; }

.story-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 17%;
  font-size: calc(var(--p) * 100);
  line-height: 1;
}

.story-text {
  position: absolute;
  left: 9.4%;
  right: 9.4%;
  top: 33%;
  font-size: calc(var(--p) * 52);
  line-height: 1.22;
  text-align: justify;
  text-align-last: left;
}

.faq {
  top: calc(var(--p) * 2650);
  left: 10%;
  right: 10%;
}

.faq-title {
  font-size: calc(var(--p) * 68);
  display: inline-block;
  padding-bottom: calc(var(--p) * 12);
  border-bottom: 1px solid rgba(253, 243, 220, .6);
}

.faq-item { margin-top: calc(var(--p) * 70); }

.faq-item h3 {
  font-size: calc(var(--p) * 54);
  line-height: 1.2;
}

.faq-item p {
  margin-top: calc(var(--p) * 12);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: calc(var(--p) * 52);
  line-height: 1.4;
  opacity: .85;
}

.t-formal {
  top: calc(var(--p) * 4170);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: calc(var(--p) * 60);
  line-height: 1.5;
}

.t-love { top: calc(var(--p) * 4560); font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: calc(var(--p) * 58); opacity: .85; }

.names-glow {
  left: 13.63%;
  right: auto;
  top: calc(var(--p) * 4630);
  width: 78.148%;
  height: auto;
}

.names-glow img {
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 1s ease 1.2s;
}

.names-glow.in img { opacity: 1; }

.names-glow svg {
  position: absolute;
  left: 3.49%;
  top: 11.5%;
  width: 93.49%;
  height: auto;
}

.rv { opacity: 0; transform: translateY(calc(var(--p) * 30)); transition: opacity 1s ease, transform 1s ease; }
.rv.in { opacity: 1; transform: none; }

.split .word { display: inline-block; opacity: 0; transform: translateY(.15em); }
.split.in .word {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--i) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}


/* pisanie litera po literze */

.write .g { clip-path: inset(-30% 100% -30% -30%); }

.write.writing .g {
  animation: write var(--d, .38s) cubic-bezier(.45, 0, .55, 1) forwards;
  animation-delay: var(--t, 0s);
}

@keyframes write {
  to { clip-path: inset(-30% -30% -30% -30%); }
}

.t-headline .line1 {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scale(.72);
}