/* Self-hosted display font for the heading (no CDN, works offline at the
   venue). Fredoka, weight 600, SIL Open Font License. Latin subset only, which
   covers the German umlauts used here. Rounded, friendly and modern for a
   clean but whimsical heading. */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fredoka-600-latin.woff2') format('woff2');
}

:root {
  /* Wedding palette (exact codes from the colour concept) */
  --lavender: #cdb5f1;
  --lavender-soft: #ece2fb;
  --blush: #ffcab8;
  --blush-soft: #ffe7de;
  --orange: #fe8127;
  --berry: #892758;
  --wine: #6d1f45;
  --cream: #fcf4e9;
  --lime: #e8e999;
  --indigo: #2f328f;
  --gold: #b28d58;

  --ink: #3a2a4d;
  --ink-soft: #8a7d78;

  /* Slightly deeper heading-gradient tones (more contrast on cream than the
     pale palette lavender/blush, while staying in the same family). */
  --h-lavender: #b394ec;
  --h-apricot: #ff9d6e;

  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 18px 45px -22px rgba(58, 42, 109, 0.55);

  --serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

.page {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 20px calc(32px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Hero */
.hero {
  position: relative;
  text-align: center;
  padding: 26px 0 6px;
}

/* Whimsical bling: an intentional little cluster of three sparkles anchored to
   the hero's top-right corner. Corner-anchored (not scattered) so it stays
   clear of the centered title on any phone width. */
.sparkles {
  display: contents;
}
.sparkle {
  position: absolute;
  pointer-events: none;
  line-height: 1;
  animation: twinkle 3.2s ease-in-out infinite;
}
.sparkle.s1 { top: 8px; right: 6%; font-size: 27px; color: var(--orange); animation-delay: 0s; }
.sparkle.s2 { top: 2px; right: 20%; font-size: 14px; color: var(--indigo); animation-delay: 0.9s; }
.sparkle.s3 { top: 42px; right: 15%; font-size: 17px; color: var(--h-lavender); animation-delay: 1.7s; }

@keyframes twinkle {
  0%, 100% { transform: scale(0.85) rotate(-6deg); opacity: 0.45; }
  50% { transform: scale(1.15) rotate(6deg); opacity: 1; }
}

.title {
  /* Fredoka: rounded, friendly and modern. Falls back to the system sans if it
     fails to load. */
  font-family: 'Fredoka', var(--sans);
  font-weight: 600;
  /* Sized so the longest word ("Schlüchtern") fits on narrow phones (~360px). */
  font-size: clamp(42px, 14vw, 66px);
  line-height: 1.05;
  margin: 6px 0 18px;
  letter-spacing: -0.5px;
  overflow-wrap: break-word;
  /* One shimmering gradient that travels across the whole block. The stops are
     symmetric (lavender at both ends) and the background is exactly twice the
     box, so shifting the position by one full image width (200%) lands on an
     identical frame: the loop is seamless, no visible reset. */
  background: linear-gradient(
    100deg,
    var(--h-lavender) 0%,
    var(--h-apricot) 25%,
    var(--orange) 50%,
    var(--h-apricot) 75%,
    var(--h-lavender) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 3px rgba(137, 39, 88, 0.35))
    drop-shadow(0 0 12px rgba(179, 148, 236, 0.4));
  animation: shimmer 5s linear infinite;
}

@keyframes shimmer {
  from {
    background-position: 0% 0;
  }
  to {
    background-position: 200% 0;
  }
}

.date {
  margin: 0;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
}

/* Cards */
.card {
  background: #ffffff;
  border: 1px solid rgba(137, 39, 88, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 22px;
  text-align: center;
}

.invite {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}

.hint {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  padding: 16px 30px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn-primary {
  color: #fdf7f0;
  background: var(--indigo);
  box-shadow: 0 14px 28px -14px rgba(47, 50, 143, 0.7);
  width: 100%;
  max-width: 340px;
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-icon {
  width: 22px;
  height: 22px;
}

.btn-ghost {
  margin-top: 18px;
  color: var(--berry);
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid rgba(142, 42, 82, 0.3);
  font-size: 15px;
  padding: 12px 24px;
}

/* Queue */
.grid-card {
  text-align: left;
}

.queue-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.queue-title {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--berry);
}

.queue-count {
  font-size: 14px;
  color: var(--ink-soft);
}

.thumbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--lavender-soft);
  box-shadow: 0 8px 18px -12px rgba(58, 42, 109, 0.5);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dim overlay carrying per-item status */
.thumb .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  background: linear-gradient(to top, rgba(58, 42, 77, 0.55) 0%, transparent 55%);
  transition: background 0.2s ease;
}

.thumb .bar {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  overflow: hidden;
}

.thumb .bar > i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--orange);
  transition: width 0.2s ease;
}

.thumb .label {
  align-self: flex-start;
}

.thumb .badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.thumb .badge svg {
  width: 16px;
  height: 16px;
}

/* Per-status styling */
.thumb[data-status="done"] .overlay {
  background: linear-gradient(to top, rgba(58, 42, 77, 0.25) 0%, transparent 45%);
}
.thumb[data-status="done"] .bar {
  display: none;
}
.thumb[data-status="done"] .badge {
  display: flex;
  background: var(--berry);
}
.thumb[data-status="done"] .label {
  display: none;
}

.thumb[data-status="failed"] {
  cursor: pointer;
}
.thumb[data-status="failed"] .overlay {
  background: linear-gradient(to top, rgba(109, 31, 69, 0.78) 0%, rgba(109, 31, 69, 0.35) 100%);
  justify-content: center;
  text-align: center;
}
.thumb[data-status="failed"] .bar {
  display: none;
}

.thumb[data-status="retrying"] .label,
.thumb[data-status="uploading"] .label,
.thumb[data-status="queued"] .label {
  opacity: 0.95;
}

/* Confirmation */
.confirmation .check {
  color: var(--berry);
  width: 76px;
  height: 76px;
  margin: 2px auto 14px;
}

.confirmation .check svg {
  width: 100%;
  height: 100%;
}

.confirmation .check path {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: draw 0.6s ease 0.15s forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.thanks {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 27px;
  color: var(--berry);
  margin: 0 0 8px;
}

.confirm-text {
  margin: 0 0 20px;
  color: var(--ink-soft);
  font-size: 15.5px;
}

.thumbs-done {
  margin-bottom: 22px;
}

.foot {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  padding-top: 4px;
}

@media (max-width: 360px) {
  .thumbs {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .confirmation .check path {
    animation: none;
    stroke-dashoffset: 0;
  }
  .btn {
    transition: none;
  }
  .title,
  .sparkle {
    animation: none;
  }
}