/* Bulut Ninnisi intro (#414, Mina). Two cloud banks cover the screen and drift apart, the moon rises,
   the stars on their strings light one group after another, then the name appears.
   Timeline = ms since tap (§4.1 (6)); total 2600, climax = 1820: the name is fully visible by then.
   Layers (§4.1 (5)): --1 moon, --2 (+ ::before) first two star groups, --3 last star group. Reduced motion: opacity only. */

[data-theme="cloud-lullaby"] .inv-intro {
  display: grid;
  align-content: center;
  justify-items: center;
  overflow: hidden;
  padding: 22svh var(--space-8) 24svh; /* #1269: same box as the cover, so the names do not jump on handover */
  background: var(--inv-bg);
}
[data-theme="cloud-lullaby"] .inv-intro__scene {
  position: absolute;
  inset: 0;
  background: image-set(var(--inv-art-scene-1x) 1x, var(--inv-art-scene) 2x) 50% 50% / cover no-repeat, var(--inv-bg);
}
/* cloud curtain halves (460 of 780 px each: they overlap in the middle) */
[data-theme="cloud-lullaby"] .inv-intro__scene::before,
[data-theme="cloud-lullaby"] .inv-intro__scene::after {
  content: "";
  position: absolute;
  top: -1%;
  bottom: -1%;
  width: 59%;
  background: url("art/cloud-left-2x.webp") 100% 50% / cover no-repeat;
}
[data-theme="cloud-lullaby"] .inv-intro__scene::before { left: 0; }
[data-theme="cloud-lullaby"] .inv-intro__scene::after { right: 0; background-image: url("art/cloud-right-2x.webp"); background-position: 0 50%; }
/* #432 D-058: from 600 px the halves are ~850 CSS px wide; the 1760x1900 banks keep css ratio >= 2 */
@media (min-width: 600px) {
  [data-theme="cloud-lullaby"] .inv-intro__scene::before { background-image: url("art/cloud-left-wide-2x.webp"); }
  [data-theme="cloud-lullaby"] .inv-intro__scene::after { background-image: url("art/cloud-right-wide-2x.webp"); }
}
[data-theme="cloud-lullaby"] .inv-intro__layer { background: 50% 50% / cover no-repeat; opacity: 0; }
[data-theme="cloud-lullaby"] .inv-intro__layer--1 { background-image: url("art/moon.svg"); transform: translateY(18%); }
[data-theme="cloud-lullaby"] .inv-intro__layer--2 { background-image: url("art/stars-1.svg"); }
[data-theme="cloud-lullaby"] .inv-intro__layer--2::before { content: ""; position: absolute; inset: 0; background: url("art/stars-2.svg") 50% 50% / cover no-repeat; opacity: 0; }
[data-theme="cloud-lullaby"] .inv-intro__layer--3 { background-image: url("art/stars-3.svg"); }
[data-theme="cloud-lullaby"] .inv-intro__names {
  position: relative;
  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);
  overflow-wrap: normal; /* #1269: the base rule broke "Tolga" mid-word; same row layout as the cover */
  color: var(--inv-primary);
  text-align: center;
  opacity: 0;
}
[data-theme="cloud-lullaby"] .inv-intro__name { font: inherit; white-space: nowrap; }
[data-theme="cloud-lullaby"] .inv-intro__amp { font-size: .7em; }
/* #1269: the cover also holds time + venue rows; reserve them so the names do not jump when the intro hands over */
[data-theme="cloud-lullaby"] .inv-intro__stage::after { content: ""; height: calc(.8125rem * 1.65 + 1.0625rem * 1.5); }
[data-theme="cloud-lullaby"] .inv-intro__eyebrow { margin: 0; padding: var(--space-1) var(--space-3); font: 600 1rem/1.3 var(--inv-font-display); letter-spacing: var(--inv-display-tracking); text-transform: none; }
[data-theme="cloud-lullaby"] .inv-intro__date {
  position: relative;
  margin: var(--space-1) 0 0;
  font: 600 .9375rem/1.4 var(--inv-font-display);
  font-variant-numeric: lining-nums;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inv-text);
  opacity: 0;
}

/* ---- opening (timeline = ms since tap, total 2600) ---- */
[data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro__scene::before { animation: cl-drift-left 1800ms var(--inv-motion-ease-open) both; }
[data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro__scene::after { animation: cl-drift-right 1800ms var(--inv-motion-ease-open) both; }
[data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro__layer--1 { animation: cl-moon 1300ms var(--ease-out) 300ms both; }
[data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro__layer--2 { animation: cl-twinkle 700ms linear 800ms both; }
[data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro__layer--2::before { animation: cl-twinkle 700ms linear 1050ms both; }
[data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro__layer--3 { animation: cl-twinkle 700ms linear 1300ms both; }
[data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro__names { animation: cl-name-in var(--inv-motion-name-in) var(--ease-out) 900ms both; } /* ends 1800 < 1820 */
[data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro__date { animation: cl-rise 700ms var(--ease-out) 1100ms both; }
[data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro__tap { animation: cl-fade-out 300ms linear both; }

@keyframes cl-drift-left { from { transform: none; } to { transform: translateX(-102%) scale(1.04); } }
@keyframes cl-drift-right { from { transform: none; } to { transform: translateX(102%) scale(1.04); } }
@keyframes cl-moon { from { opacity: 0; transform: translateY(18%); } to { opacity: 1; transform: none; } }
@keyframes cl-twinkle {
  0% { opacity: 0; }
  35% { opacity: 1; }
  55% { opacity: .55; }
  100% { opacity: 1; }
}
@keyframes cl-name-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes cl-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cl-fade-out { to { opacity: 0; } }
@keyframes cl-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- reduced motion: ≤ 800 ms opacity only — clouds → moon, stars + name → page ---- */
[data-theme="cloud-lullaby"] .inv-intro--reduce .inv-intro__layer--1 { transform: none; }
[data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__scene::before,
[data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__scene::after { animation: cl-fade-out 200ms linear both; }
[data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__layer,
[data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__layer--2::before { animation: cl-fade-in 200ms linear both; }
[data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__names { animation: cl-fade-in 200ms linear 50ms both; }
[data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__date { animation: cl-fade-in 200ms linear 50ms both; }
@media (prefers-reduced-motion: reduce) {
  [data-theme="cloud-lullaby"] .inv-intro__layer--1 { transform: none; }
  [data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro__scene::before,
  [data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro__scene::after { animation: cl-fade-out 300ms linear both; }
  [data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro__layer,
  [data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro__layer--2::before { animation: cl-fade-in 300ms linear 100ms both; }
  [data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro__names { animation: cl-fade-in 300ms linear 250ms both; }
  [data-theme="cloud-lullaby"]:not([data-intro-phase="idle"]) .inv-intro__date { animation: cl-fade-in 250ms linear 400ms both; }
}

/* #432 D-058: from 1024 px the 780 px phone scene would be stretched over the whole screen (css ratio 0.54 at 1440).
   The intro backdrop copies the page layout instead: 880x1800 flanks + 1120x1800 column scene, each drawn at
   100 % height (ratio 2 at 900 px high). */
@media (min-width: 1024px) {
  [data-theme="cloud-lullaby"] .inv-intro { padding-top: 20svh; }
  [data-theme="cloud-lullaby"] .inv-intro__scene {
    background:
      var(--inv-art-flank-left) 0 50% / auto 100% no-repeat,
      var(--inv-art-flank-right) 100% 50% / auto 100% no-repeat,
      url("art/sky-wide-2x.webp") 50% 50% / auto 100% no-repeat,
      var(--inv-bg);
  }
}

/* task 1439: same box as the cover at >= 1024 px (padding-top 20svh), so the names do not jump on handover */
@media (min-width: 1024px) {
  [data-theme="cloud-lullaby"] .inv-intro { padding-top: 20svh; }
}
/* task 1439: the base intro rule tracks names at -.02em; the cover does not, so the names wrapped into fewer rows and jumped on handover */
[data-theme="cloud-lullaby"] .inv-intro__names { letter-spacing: normal; }

/* #1492: mirrors the cover rule in theme.css (long surname fits 390 px, same box on handover) */
@media (max-width: 480px) {
  [data-theme="cloud-lullaby"] .inv-intro__names { font-size: clamp(3rem, 14vw, 4.5rem); max-width: 100%; }
}

/* Görev 1527: açılış tarihi kapak günüyle aynı ölçüde (devir sırasında isim yerinden oynamaz). */
[data-theme="cloud-lullaby"] .inv-intro__date { font-size: var(--inv-text-date); line-height: var(--inv-lh-date); letter-spacing: .03em; }
@media (min-width: 64rem) { [data-theme="cloud-lullaby"] .inv-intro__date { white-space: nowrap; } } /* 1440'ta kapak günü tek satır; açılış da tek satır, devirde isim kaymaz */

/* Task 1536: long name (>= 22 characters): the intro names follow the cover rule in theme.css (26 px floor, full width), so the handover keeps their place. */
@media (max-width: 47.99rem) {
  [data-theme="cloud-lullaby"] .inv-intro__names[data-name-long] { max-width: 100%; width: calc(100vw - 2 * var(--space-6)); font-size: max(26px, calc((100vw - 2 * var(--space-6)) / (var(--inv-name-chars, 17) * .5))); }
}