/* ═══════════════════════════════════════════════════════════
   lisa-roman.com — Startseite nach der Hochzeit (Link-Hub)
   Inhalt: 1 Basis · 2 Sprachen · 3 Deko · 4 Kopf · 5 Knöpfe
           6 Hinweise · 7 Fuß · 8 Einstieg (Animation)
   ═══════════════════════════════════════════════════════════ */

/* ── 1 · Basis ───────────────────────────────────────────── */
:root {
  --cream: #fbf3ec;
  --cream-deep: #f4e5d8;
  --paper: #fffaf5;
  --blush: #f6d3c3;
  --terracotta: #d1634b;
  --terracotta-soft: #dd8a78;
  --ink: #8f4432;
  --font-script: "Caveat", "Comic Sans MS", cursive;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-over: cubic-bezier(.34, 1.56, .64, 1);
  --lift: 0 1px 2px rgba(143, 68, 50, .08), 0 18px 34px -24px rgba(143, 68, 50, .6);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  position: relative; margin: 0; min-height: 100svh;
  background-color: var(--cream); color: var(--ink);
  /* Papier: hauchfeines Korn wie auf den anderen Seiten */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(209, 99, 75, .03) 0 1.5px, transparent 2px),
    radial-gradient(circle at 80% 70%, rgba(143, 68, 50, .025) 0 1px, transparent 1.5px);
  background-size: 240px 240px, 180px 180px;
  font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.5;
  overflow-x: hidden; -webkit-tap-highlight-color: transparent;
}
.script { font-family: var(--font-script); color: var(--terracotta); font-weight: 400; }
:focus-visible { outline: 2.5px solid var(--terracotta); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(209, 99, 75, .22); color: var(--ink); }
h1, h2, p { margin: 0; }

/* ── 2 · Sprachen ────────────────────────────────────────── */
.langs { position: absolute; top: max(.8rem, env(safe-area-inset-top)); right: max(.8rem, env(safe-area-inset-right)); display: flex; gap: .1rem; z-index: 5; }
.langs button { font: inherit; font-size: .95rem; min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--ink); opacity: .8; cursor: pointer; border-radius: 999px; }
.langs button:hover { opacity: 1; }
.langs button[aria-pressed="true"] { opacity: 1; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }

/* ── 3 · Deko ────────────────────────────────────────────── */
.decos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.deco { position: absolute; height: auto; display: none; }
.deco-lemons { display: block; width: 46vw; max-width: 300px; top: -3vw; left: -12vw; opacity: .85; transform: rotate(8deg); }

@media (min-width: 960px) {
  .portrait-wrap { width: 268px; }
  .deco { display: block; }
  .deco-lemons { width: 300px; top: 1.5rem; left: calc(50% - 600px); opacity: .9; }
  .deco-rings { width: 190px; top: 7rem; right: calc(50% - 540px); opacity: .9; }
  .deco-champagne { width: 170px; top: 1040px; left: calc(50% - 470px); opacity: .85; }
  .deco-yacht { width: 290px; top: 860px; right: calc(50% - 620px); opacity: .8; }
}

/* ── 4 · Kopf ────────────────────────────────────────────── */
.hub { position: relative; z-index: 1; max-width: 440px; margin: 0 auto; padding: max(3.2rem, calc(env(safe-area-inset-top) + 2.4rem)) 1.25rem 0; }
.hello { display: flex; flex-direction: column; align-items: center; text-align: center; }

.portrait-wrap { width: min(50vw, 268px); }
.portrait { display: block; width: 100%; height: auto; }

/* Namen sitzen wie eine Signatur unten auf der Zeichnung */
.names { position: relative; z-index: 2; margin-top: -.62em; font-size: clamp(3.1rem, 12.5vw, 4.4rem); line-height: 1.05; white-space: nowrap; }
.names span { display: inline-block; }
.swash { width: min(52vw, 230px); height: auto; margin-top: -.3rem; overflow: visible; }
.swash path { stroke: var(--terracotta); stroke-width: 2.4; stroke-linecap: round; }

.date { margin-top: .8rem; font-size: 1rem; font-weight: 600; letter-spacing: .24em; font-variant-numeric: lining-nums; }
.date .dot { color: var(--terracotta); letter-spacing: 0; margin: 0 .25em 0 .1em; }

.thanks { margin-top: 1.4rem; font-size: clamp(1.9rem, 7.4vw, 2.3rem); line-height: 1.08; text-wrap: balance; max-width: 15em; }
.thanks2 { margin-top: .55rem; font-size: 1.22rem; line-height: 1.4; font-style: italic; text-wrap: balance; max-width: 22em; }

/* ── 5 · Knöpfe ──────────────────────────────────────────── */
.links { display: flex; flex-direction: column; gap: 2.3rem; margin-top: 4.2rem; }

.link {
  position: relative; display: flex; text-decoration: none; color: inherit;
  border-radius: 22px; box-shadow: var(--lift);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.link:active { transform: scale(.985); }
.link-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.link-title { font-size: 2.6rem; line-height: 1; white-space: nowrap; }
.link-text { margin-top: .3rem; font-size: 1.06rem; line-height: 1.35; text-wrap: pretty; font-variant-numeric: lining-nums; }
.arrow { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--terracotta); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease-out); }

/* Galerie: drei Polaroids rutschen oben aus der Karte */
.link-gallery { flex-direction: column; background: var(--paper); padding: 0 1.3rem 1.2rem; }
.fan { position: relative; display: block; height: 128px; margin: -3.1rem 0 .7rem; }
.pol {
  position: absolute; left: 50%; top: 0; width: 104px; padding: 6px 6px 20px; background: #fff; border-radius: 2px;
  box-shadow: 0 1px 1px rgba(143, 68, 50, .12), 0 10px 18px -10px rgba(143, 68, 50, .55);
  transform: translateX(calc(-50% + var(--x, 0px))) translateY(var(--y, 0px)) rotate(var(--r, 0deg));
  transition: transform .5s var(--ease-out);
}
.pic { display: block; aspect-ratio: 1; overflow: hidden; background: var(--cream-deep); }
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.pic img.ok { opacity: 1; }
/* Der Fotobox-Print bringt Rand, Datum und Namenszeile mit: nur das Foto zeigen */
.pic img.print { transform: scale(1.4); transform-origin: 50% 42%; }
/* Rechtes Polaroid liegt halb unter dem mittleren: Ausschnitt nach links, damit beide zu sehen bleiben */
.pic img.shift { object-position: 12% 50%; }
.pol-l { --x: -66px; --y: 14px; --r: -9deg; }
.pol-r { --x: 66px; --y: 12px; --r: 8deg; }
.pol-c { --x: 0px; --y: 0px; --r: 2deg; width: 114px; z-index: 2; }
.link-row { display: flex; align-items: center; gap: 1rem; }

/* Shot-Polizei: Elias schaut oben über den Kartenrand */
.link-game { align-items: center; gap: .9rem; padding: .9rem 1.3rem .9rem .8rem; background: linear-gradient(135deg, #fff1e6 0%, var(--blush) 100%); }
/* Auf dem rosa Grund braucht die dünne Schreibschrift einen dunkleren Ton derselben Farbe */
.link-game .link-title { color: #b9503a; }
.elias { flex: none; width: 66px; height: auto; margin: -2.2rem 0 -.4rem; filter: drop-shadow(0 8px 10px rgba(31, 42, 68, .2)); transform-origin: 50% 100%; transition: transform .45s var(--ease-over); }

@media (hover: hover) {
  .link:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(143, 68, 50, .08), 0 26px 40px -26px rgba(143, 68, 50, .7); }
  .link:hover .arrow { transform: translateX(4px); }
  .link-gallery:hover .pol-l { --x: -84px; --y: 8px; --r: -13deg; }
  .link-gallery:hover .pol-r { --x: 84px; --y: 6px; --r: 12deg; }
  .link-gallery:hover .pol-c { --y: -8px; --r: -1deg; }
  .link-game:hover .elias { transform: rotate(-6deg) translateY(-3px); }
}
.link:focus-visible { outline-offset: 4px; border-radius: 22px; }
/* Am Handy fächern sich die Polaroids beim Antippen auf (statt Hover) */
.link-gallery:active .pol-l { --x: -84px; --y: 8px; --r: -13deg; }
.link-gallery:active .pol-r { --x: 84px; --y: 6px; --r: 12deg; }
.link-gallery:active .pol-c { --y: -8px; --r: -1deg; }

/* Sehr schmale Handys (320 px): Titel bleiben einzeilig */
@media (max-width: 359px) {
  .hub { padding-inline: 1rem; }
  .link-title { font-size: 2.15rem; }
  .link-game { gap: .7rem; padding-right: 1rem; }
  .elias { width: 54px; }
}

/* ── 6 · Hinweise ────────────────────────────────────────── */
/* Muschel-Bordüre als Trenner (Motiv der Einladungs-Rückseite) */
.notes { margin-top: 3.4rem; padding-top: 2.6rem; position: relative; display: flex; flex-direction: column; gap: 1.6rem; }
.notes::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(240px, 60%); height: 16px; opacity: .6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 18'%3E%3Cg fill='none' stroke='%23dd8a78' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M4 14a8 8 0 0 1 16 0z'/%3E%3Cpath d='M12 6v8M8.5 8.2 12 14M15.5 8.2 12 14'/%3E%3Cpath d='M26 12.5c2-4 8-4 10 0'/%3E%3Ccircle cx='31' cy='7' r='1'/%3E%3C/g%3E%3C/svg%3E") center / auto 100% repeat-x;
}
.note { display: flex; gap: 1rem; align-items: flex-start; padding: 0 .3rem; }
.note-ico { flex: none; width: 34px; height: 34px; margin-top: .1rem; fill: none; stroke: var(--terracotta); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.note h2 { font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.note p { margin-top: .2rem; font-size: 1.08rem; line-height: 1.42; }

/* ── 7 · Fuß ─────────────────────────────────────────────── */
.foot { position: relative; z-index: 1; overflow: hidden; text-align: center; padding: 3.2rem 0 calc(2.6rem + env(safe-area-inset-bottom)); }
/* Die Skyline hat viel leeren Himmel: Ausschnitt um die Stadt, am Handy breiter als der Bildschirm */
.skyline { position: relative; left: 50%; transform: translateX(-50%); display: block; width: min(150vw, 980px); max-width: none; height: auto; aspect-ratio: 2000 / 680; object-fit: cover; object-position: 50% 64%; opacity: .9; }
.sign { margin-top: 1.2rem; font-size: 1.6rem; }

/* ── 8 · Einstieg ────────────────────────────────────────── */
/* Ein Moment: die Zeichnung entsteht von oben nach unten, die Namen schreiben sich darauf,
   dann kommt der Rest, und die Polaroids fächern sich einmal kurz auf (zeigt, dass man tippen kann).
   Läuft bewusst auch bei "Bewegung reduzieren" (Entscheidung wie auf den anderen Seiten).
   fill-mode backwards: der Endzustand ist der normale Stil, damit Hover/Active danach greifen. */
.portrait {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 46%);
          mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 46%);
  -webkit-mask-size: 100% 400%; mask-size: 100% 400%;
  animation: sketch-in 1.5s cubic-bezier(.5, 0, .3, 1) backwards;
}
@keyframes sketch-in {
  from { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}

.names span { animation: letter-in .7s var(--ease-over) backwards; }
.names span:nth-child(1)  { animation-delay: .75s; } .names span:nth-child(2)  { animation-delay: .81s; }
.names span:nth-child(3)  { animation-delay: .87s; } .names span:nth-child(4)  { animation-delay: .93s; }
.names span:nth-child(5)  { animation-delay: .97s; } .names span:nth-child(6)  { animation-delay: 1.02s; }
.names span:nth-child(7)  { animation-delay: 1.06s; } .names span:nth-child(8)  { animation-delay: 1.11s; }
.names span:nth-child(9)  { animation-delay: 1.17s; } .names span:nth-child(10) { animation-delay: 1.23s; }
.names span:nth-child(11) { animation-delay: 1.29s; } .names span:nth-child(12) { animation-delay: 1.35s; }
@keyframes letter-in { from { opacity: 0; transform: translateY(24px) rotate(4deg); } }

.swash path { stroke-dasharray: 100; animation: draw 1s ease 1.35s backwards; }
@keyframes draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

.date, .thanks, .thanks2, .link, .notes { animation: rise .9s var(--ease-out) backwards; }
.date    { animation-delay: .95s; }
.thanks  { animation-delay: 1.05s; }
.thanks2 { animation-delay: 1.15s; }
.link-gallery { animation-delay: 1.2s; }
.link-game    { animation-delay: 1.3s; }
.notes        { animation-delay: 1.4s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* Polaroids werden nacheinander auf die Karte gelegt und fächern sich danach einmal auf */
.pol-l { animation: deal .8s var(--ease-out) 1.4s backwards, spread-l 1.3s ease-in-out 2.5s; }
.pol-r { animation: deal .8s var(--ease-out) 1.5s backwards, spread-r 1.3s ease-in-out 2.5s; }
.pol-c { animation: deal .8s var(--ease-out) 1.6s backwards, spread-c 1.3s ease-in-out 2.5s; }
@keyframes deal { from { opacity: 0; transform: translateX(-50%) translateY(46px) rotate(0deg) scale(.86); } }
@keyframes spread-l { 45% { transform: translateX(calc(-50% - 84px)) translateY(8px) rotate(-13deg); } }
@keyframes spread-r { 45% { transform: translateX(calc(-50% + 84px)) translateY(6px) rotate(12deg); } }
@keyframes spread-c { 45% { transform: translateX(-50%) translateY(-8px) rotate(-1deg); } }

.elias { animation: peek .8s var(--ease-over) 1.55s backwards, wiggle .9s ease-in-out 2.6s; }
@keyframes peek { from { opacity: 0; transform: translateY(22px); } }
@keyframes wiggle { 30% { transform: rotate(-7deg) translateY(-3px); } 65% { transform: rotate(4deg); } }

.deco-lemons { animation: fade 1.6s ease .2s backwards; }
@keyframes fade { from { opacity: 0; } }