:root {
  --bg: #f3efe3;
  --ink: #4b0404;
  --serif: "Cormorant Garamond", Georgia, serif;
  /* Elegant, men lettere at læse end New Icon Script fra designet */
  --script: "Parisienne", cursive;
  --paper: #fdfcf9;
}

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

html, body { background: var(--bg); color: var(--ink); }

body {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  -webkit-font-smoothing: antialiased;
}

/* Forsiden for besøgende uden personligt link */
.landing {
  padding: 0 6vw;
  text-align: center;
  font-family: var(--serif);
  font-weight: 500;
}

.landing h1 {
  font-weight: 500;
  font-size: clamp(1.8rem, 7vw, 3.2rem);
  line-height: 1.2;
  animation: rise 1.4s ease-out both;
}

.loading .landing { visibility: hidden; }

[hidden] { display: none !important; }

/* ---------- Menu ---------- */

.nav {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 14px;
  z-index: 10;
  font-family: var(--serif);
  font-weight: 500;
}

.nav-toggle {
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .45em .6em;
  border: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 1.25rem;
  cursor: pointer;
}

/* Tre streger (burger) tegnet med baggrunde */
.nav-icon {
  width: 18px;
  height: 12px;
  background:
    linear-gradient(currentColor 0 0) top / 100% 1.5px no-repeat,
    linear-gradient(currentColor 0 0) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor 0 0) bottom / 100% 1.5px no-repeat;
}

/* På save the date-kortet vises kun ikonet, så det ikke rammer "Til …" */
.nav[data-view="save-the-date"] .nav-label { display: none; }

.nav-menu {
  list-style: none;
  margin-top: 4px;
  padding: 6px 0;
  min-width: 190px;
  background: var(--paper);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(75, 4, 4, .12), 0 1px 3px rgba(0, 0, 0, .06);
  animation: menu-in .15s ease-out;
}

.nav-menu a {
  display: block;
  padding: .55em 1.1em;
  color: var(--ink);
  font-size: 1.2rem;
  text-decoration: none;
}

.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--bg); }

.nav[data-view="home"] [data-view="home"],
.nav[data-view="save-the-date"] [data-view="save-the-date"] { text-decoration: underline; text-underline-offset: 4px; }

@keyframes menu-in {
  from { opacity: 0; translate: 0 -4px; }
}

/* Sprogknap øverst til højre, kun for gæster der også har spansk.
   Den dukker op lidt efter siden, så den ikke stjæler opmærksomheden. */
.lang {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  z-index: 10;
  padding: .5em .8em;
  border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  animation: rise 1s ease-out 2.2s both;
}

.lang:hover { background: var(--paper); }

/* ---------- Velkomstsiden med brevet ---------- */

.home {
  align-self: start;
  width: min(100%, 560px);
  padding: clamp(64px, 9svh, 96px) 24px 32px;
  text-align: center;
  font-family: var(--serif);
  font-weight: 500;
  transition: opacity .5s ease;
}

.home.leaving { opacity: 0; }

.post.fade { animation: fade-out .4s ease forwards; }

@keyframes fade-out { to { opacity: 0; } }

.greeting {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.1rem, min(10.5vw, 7.5svh), 3.6rem);
  text-wrap: balance;
  line-height: 1.25;
  animation: rise 1.4s ease-out both;
}

.welcome {
  margin: .9em auto 0;
  max-width: 22em;
  font-size: clamp(1.1rem, min(4.6vw, 3.1svh), 1.45rem);
  line-height: 1.35;
  animation: rise 1.4s ease-out .4s both;
}

.post {
  margin-top: 1.2em;
  font-weight: 500;
  font-size: clamp(1.1rem, min(4.6vw, 3.1svh), 1.45rem);
  animation: rise 1.4s ease-out .8s both;
}

.hint {
  margin-top: 1em;
  font-size: 1rem;
  opacity: .7;
  animation: rise 1.4s ease-out 1.4s both;
}

/* Kuverten: bagside, brev, forside (lommen) og flap med blondekant.
   Lagene: bagside < flap (når åben) < brev < forside < flap (når lukket) */
.envelope {
  position: relative;
  display: block;
  /* Følger også skærmhøjden, så hele kuverten kan ses uden at scrolle */
  --w: min(68vw, 300px, 36svh);
  width: var(--w);
  aspect-ratio: 8 / 5;
  margin: calc(var(--w) * .16) auto 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 900px;
  -webkit-tap-highlight-color: transparent;
  animation: rise 1.4s ease-out 1s both;
}

.envelope > * { position: absolute; display: block; }

.env-back {
  inset: 0;
  background: #ebe6dc;
  border-radius: 3px;
  box-shadow: 0 14px 28px rgba(75, 4, 4, .10), 0 2px 6px rgba(0, 0, 0, .07);
}

.letter {
  z-index: 1;
  left: 6%;
  right: 6%;
  top: 5%;
  height: 90%;
  padding-top: 7%;
  background: var(--bg);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  transition: transform .9s cubic-bezier(.3, .7, .3, 1) .45s;
}

.letter img { display: block; width: 72%; height: auto; margin: 0 auto; }

.env-front { z-index: 2; inset: 0; width: 100%; height: 100%; }

.env-flap {
  z-index: 3;
  top: -4%;
  left: 0;
  width: 100%;
  height: auto;
  overflow: visible;
  transform-origin: 50% 5.7%;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .06));
  transition: transform .6s ease-in-out, z-index 0s .3s;
}

.lace-outline, .lace, .lace-holes, .lace-stitch { fill: none; stroke-linecap: round; }
.lace-outline { stroke: #e2dacb; stroke-width: 13.5; stroke-dasharray: 0 10; }
.lace         { stroke: var(--paper); stroke-width: 12; stroke-dasharray: 0 10; }
.lace-holes   { stroke: #e2dacb; stroke-width: 3; stroke-dasharray: 0 10; }
.lace-stitch  { stroke: #ddd4c4; stroke-width: 1; stroke-dasharray: 1.5 3.5; }

/* Et åbnet brev skal have plads over sig til flappen og brevet, der stikker op */
.post[hidden] + .envelope { margin-top: calc(var(--w) * .55); }

/* Mens brevet åbnes, glider kuverten lidt ned og gør plads til flappen */
.envelope { transition: margin-top .6s ease-in-out; }
.envelope.opening { margin-top: calc(var(--w) * .34); }

/* Lukket brev svæver blidt, så det er tydeligt, at det kan trykkes på */
.envelope:not(.open) { animation: rise 1.4s ease-out 1s both, float 3.2s ease-in-out 2.4s infinite; }
.envelope:not(.open):hover .env-flap { transform: rotateX(18deg); }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-6px) rotate(1.2deg); }
}

/* Åbent brev: flappen folder op, og brevet stikker op af kuverten */
.envelope.open .env-flap { z-index: 0; transform: rotateX(180deg); }
.envelope.open .letter { transform: translateY(-42%); }
.envelope.open:hover .letter { transform: translateY(-50%); }
.envelope.opening .letter { transform: translateY(-62%); }

/* Ved genbesøg folder brevet op uden at vente */
.envelope.open:not(.opening) .env-flap,
.envelope.open:not(.opening) .letter { transition-delay: 0s; }

/* Kortet har samme proportioner som designet (1080 × 1920) og skaleres
   til skærmen. Alle mål er angivet i cqw, hvor 100cqw = kortets bredde.
   På høje skærme bliver kortet højere, og blomsten følger bunden. */
.card {
  position: relative;
  width: min(100vw, 100svh * 9 / 16);
  aspect-ratio: 9 / 16;
  min-height: 100vh;
  min-height: 100svh;
  container-type: inline-size;
  overflow: hidden;
  text-align: center;
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.25;
}

.card > *, .text > * { position: absolute; left: 0; right: 0; }

/* Ekstra højde (ud over 9:16) fordeles, så teksten rykker halvdelen ned */
.text { top: calc((100% - 177.78cqw) / 2); }

.to {
  top: 4.2cqw;
  font-size: 4.1cqw;
  padding: 0 6cqw;
}

/* "Save the date" er skåret ud af designet som billede, da skriften
   (New Icon Script) ikke er en fri webfont */
.title {
  top: 20.5cqw;
  left: 17.9cqw;
  right: auto;
  width: 64.7cqw;
}

.title img { display: block; width: 100%; height: auto; }

.couple {
  top: 45.5cqw;
  font-size: 4.3cqw;
}

.when {
  top: 66cqw;
  font-size: 4.3cqw;
}

.flower {
  top: auto;
  bottom: 0;
  left: 27.8cqw;
  width: 47.2cqw;
  height: auto;
}

.note {
  left: auto;
  right: 10cqw;
  bottom: 2.6cqw;
  font-size: max(2.1cqw, 9px);
  text-align: right;
  max-width: 52cqw; /* længere tekster (fx spansk) brydes i stedet for at ramme stilkene */
}

/* ---------- Animation ved åbning ---------- */

/* Liljen vokser op fra bunden og svajer derefter blidt i vinden.
   Svajet drejer om stilkenes fod (ca. 8 % inde fra venstre). */
.flower {
  transform-origin: 8% 100%;
  animation:
    grow 2.6s cubic-bezier(.25, .8, .3, 1) both,
    sway 7s ease-in-out 2.6s infinite alternate;
}

@keyframes grow {
  from { clip-path: inset(100% 0 0 0); transform: rotate(-3deg); }
  to   { clip-path: inset(0 0 0 0);    transform: rotate(-.8deg); }
}

@keyframes sway {
  from { transform: rotate(-.8deg); }
  to   { transform: rotate(.8deg); }
}

/* Teksten toner frem linje for linje, mens liljen vokser */
.to, .title, .couple, .when, .note {
  animation: rise 1.4s ease-out both;
}
.to     { animation-delay: .6s; }
.title  { animation-delay: 1s; }
.couple { animation-delay: 1.6s; }
.when   { animation-delay: 2s; }
.note   { animation-delay: 2.6s; }

@keyframes rise {
  from { opacity: 0; translate: 0 1.5cqw; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .flower, .to, .title, .couple, .when, .note, .landing h1,
  .greeting, .welcome, .post, .hint, .lang, .envelope, .envelope * { animation: none !important; transition: none !important; }
}