/* Bulut Ninnisi · cloud-lullaby — Atölye #6 (#414, Mina).
   Contract: docs/tasarim/v2/yon.md §2 row 6, §3 (soft, slowest), §4 + §4.1. Selectors: [data-theme] + .inv-cover only.
   --inv-art-* URLs are root-absolute (§4.1 (4)); url() in this file's own rules stays relative. */

[data-theme="cloud-lullaby"] {
  /* yon.md §4.1 (1): this theme owns the whole cover composition; page.js sets <body data-cover="theme"> */
  --inv-cover-owned: 1;

  /* colour — contrast measured in README.md */
  --inv-bg: #F4F1FA;
  --inv-surface: #FFFFFF;
  --inv-text: #2F2A45;
  --inv-text-muted: #625D78;
  --inv-primary: #6B5CA5;
  --inv-on-primary: #FFFFFF;
  --inv-accent: #F2C6D0;
  --inv-ornament: #A9C4E8;
  --inv-border: #DDD6EE;
  --inv-backdrop: #ECE7F6;
  --inv-danger: #B3261E;
  --inv-focus: var(--inv-text);

  /* type: name / heading / body */
  --inv-font-script: 'Pinyon Script', cursive;
  --inv-font-display: 'Quicksand', 'Nunito', system-ui, sans-serif; /* yon.md said Fredoka: it misses Turkish letters (README) */
  --inv-font-body: 'Nunito', system-ui, sans-serif;
  --inv-display-weight: 600;
  --inv-display-transform: none;
  --inv-display-tracking: .02em;
  --inv-body-size: 1.0625rem;
  --inv-radius: 20px;

  /* motion: lullaby tempo, the slowest (yon.md §3 column "Yumuşak" 1, 3, 6) */
  --inv-motion-intro-total: 2600ms;
  --inv-motion-ease-open: var(--ease-in-out);
  --inv-motion-name-in: 900ms;
  --inv-motion-reveal: 700ms;
  --inv-motion-reveal-distance: 16px;
  --inv-motion-stagger: 90ms;
  --inv-motion-micro: 180ms;
  --inv-motion-ambient: stars;

  /* art slots */
  --inv-art-backdrop: image-set(url("/themes/cloud-lullaby/art/backdrop.webp") 1x, url("/themes/cloud-lullaby/art/backdrop-2x.webp") 2x); /* #432 D-058: 256 CSS px tile, 512 px at dpr 2 */
  --inv-art-scene: url("/themes/cloud-lullaby/art/sky-2x.webp");
  --inv-art-scene-1x: url("/themes/cloud-lullaby/art/sky-1x.webp");
  --inv-art-flank-left: url("/themes/cloud-lullaby/art/flank-left-2x.webp");
  --inv-art-flank-right: url("/themes/cloud-lullaby/art/flank-right-2x.webp");
  --inv-art-divider: url("/themes/cloud-lullaby/art/divider.svg");
  --inv-art-corner: url("/themes/cloud-lullaby/art/corner.svg");
  --inv-art-icon-schedule: url("/themes/cloud-lullaby/art/icon-schedule.svg");
  --inv-art-icon-rsvp: url("/themes/cloud-lullaby/art/icon-rsvp.svg");
  --inv-art-icon-gift: url("/themes/cloud-lullaby/art/icon-gift.svg");
  --inv-art-icon-gallery: url("/themes/cloud-lullaby/art/icon-gallery.svg");
  --inv-art-icon-guestbook: url("/themes/cloud-lullaby/art/icon-guestbook.svg");
  --inv-art-icon-share: url("/themes/cloud-lullaby/art/icon-share.svg");
}

/* ---- Cover: watercolour night-to-dawn sky, moon, stars on strings, cloud bank below the name ---- */
[data-theme="cloud-lullaby"] .inv-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-3);
  padding: 22svh var(--space-8) 24svh;
  text-align: center;
  color: var(--inv-text);
  background: var(--inv-bg);
}
[data-theme="cloud-lullaby"] .inv-cover__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    url("art/stars-1.svg") 50% 50% / cover no-repeat,
    url("art/stars-2.svg") 50% 50% / cover no-repeat,
    url("art/stars-3.svg") 50% 50% / cover no-repeat,
    url("art/moon.svg") 50% 50% / cover no-repeat,
    image-set(var(--inv-art-scene-1x) 1x, var(--inv-art-scene) 2x) 50% 50% / cover no-repeat,
    var(--inv-bg);
}
[data-theme="cloud-lullaby"] .inv-cover__content { display: contents; }
[data-theme="cloud-lullaby"] .inv-cover__eyebrow {
  margin: 0;
  background: color-mix(in srgb, var(--inv-bg) 84%, transparent); padding: var(--space-1) var(--space-3); /* görev 678: görsel üstünde AA */
  font: 600 1rem/1.3 var(--inv-font-display);
  letter-spacing: var(--inv-display-tracking);
  color: var(--inv-primary);
}
[data-theme="cloud-lullaby"] .inv-cover__names {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: .25em;
  max-width: 18rem;
  margin: 0;
  font: 400 clamp(4.5rem, 3.6rem + 3.6vw, 6.75rem)/1 var(--inv-font-script); /* 72 → 108; Pinyon Script has a small x-height */
  color: var(--inv-primary);
}
[data-theme="cloud-lullaby"] .inv-cover__name { font: inherit; }
[data-theme="cloud-lullaby"] .inv-cover__amp { font-size: .7em; }
[data-theme="cloud-lullaby"] .inv-cover__date { margin: var(--space-1) 0 0; }
[data-theme="cloud-lullaby"] .inv-cover__date time,
[data-theme="cloud-lullaby"] .inv-cover__day { display: block; }
[data-theme="cloud-lullaby"] .inv-cover__day {
  font: 600 .9375rem/1.4 var(--inv-font-display); /* 15 px ≤ 18, lining */
  font-variant-numeric: lining-nums;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inv-text);
}
[data-theme="cloud-lullaby"] .inv-cover__time {
  display: block;
  margin-top: .25em;
  font: 600 .875rem/1.4 var(--inv-font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inv-text-muted);
}
[data-theme="cloud-lullaby"] .inv-cover__venue { margin: 0; font: 400 1.0625rem/1.5 var(--inv-font-body); color: var(--inv-text-muted); }
[data-theme="cloud-lullaby"] .inv-cover__guest,
[data-theme="cloud-lullaby"] .inv-cover__badge { margin: 0; font: 400 1rem/1.4 var(--inv-font-body); color: var(--inv-text-muted); }
[data-theme="cloud-lullaby"] .inv-cover__scroll {
  position: absolute;
  left: 50%;
  bottom: 3svh;
  translate: -50% 0;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--inv-surface);
  font: 600 .875rem/1 var(--inv-font-display);
  color: var(--inv-text);
}
@media (min-width: 1024px) {
  [data-theme="cloud-lullaby"] .inv-cover { width: auto; margin-inline: 0; padding-top: 20svh; }
  [data-theme="cloud-lullaby"] .inv-cover__art {
    background: url("art/stars-wide.svg") 50% 50% / cover no-repeat, url("art/moon-wide.svg") 50% 50% / cover no-repeat,
      url("art/sky-wide-2x.webp") 50% 50% / cover no-repeat, var(--inv-bg);
  }
}

/* #1492: a long surname ("Karaosmanoğlu") is wider than the 390 px cover at 72 px; the name size follows the viewport below 480 px.
   Same rule in intro-scene.css so the names keep their place when the intro hands over (e2e-cloud-monogram-design). */
@media (max-width: 480px) {
  [data-theme="cloud-lullaby"] .inv-cover__names { font-size: clamp(3rem, 14vw, 4.5rem); max-width: 100%; }
}

/* Görev 1527: tarih ve saat paylaşılan ölçü token'larında (390'da 28 / 16 px); kapak ile açılış aynı ölçüyü kullanır. */
[data-theme="cloud-lullaby"] .inv-cover__day { font-size: var(--inv-text-date); line-height: var(--inv-lh-date); letter-spacing: .03em; white-space: normal; }
[data-theme="cloud-lullaby"] .inv-cover__time { font-size: var(--inv-text-time-min); }
[data-theme="cloud-lullaby"] .inv-cover__date { font-size: var(--inv-text-date); line-height: var(--inv-lh-date); }