/* Balon Geçidi intro (#414, Mina). Three balloon layers spring up from below (far → near), one big balloon
   floats to the middle and pops into confetti, the age numeral and the name bounce in.
   Timeline = ms since tap (§4.1 (6)); total 2000, climax = 1400: age and name are fully visible by then.
   Layers (§4.1 (5)): --1 far balloons, --2 top clusters, --3 bottom clusters. Scene ::before = the popping balloon,
   ::after = confetti burst. Reduced motion: opacity only, no pop. */

[data-theme="balloon-parade"] .inv-intro {
  display: grid;
  align-content: center;
  justify-items: center;
  overflow: hidden;
  background: var(--inv-bg);
}
[data-theme="balloon-parade"] .inv-intro__scene {
  position: absolute;
  inset: 0;
  background: url("art/scene-bg.svg") 50% 50% / cover no-repeat, var(--inv-bg);
}
[data-theme="balloon-parade"] .inv-intro__scene::before,
[data-theme="balloon-parade"] .inv-intro__scene::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 420px;
  margin: -150px 0 0 -100px;
  background: url("art/pop.svg") 50% 0 / contain no-repeat;
  transform: translateY(70vh);
}
[data-theme="balloon-parade"] .inv-intro__scene::after {
  width: 400px;
  height: 400px;
  margin: -220px 0 0 -200px;
  background-image: url("art/burst.svg");
  opacity: 0;
  transform: scale(.3);
}
[data-theme="balloon-parade"] .inv-intro__layer { background: 50% 50% / cover no-repeat; transform: translateY(105%); }
[data-theme="balloon-parade"] .inv-intro__layer--1 { background-image: url("art/balloons-1.svg"); }
[data-theme="balloon-parade"] .inv-intro__layer--2 { background-image: url("art/balloons-2.svg"); }
[data-theme="balloon-parade"] .inv-intro__layer--3 { background-image: url("art/balloons-3.svg"); }
[data-theme="balloon-parade"] .inv-intro__age[data-age] { display: block; } /* yon.md §4.1/10 */
[data-theme="balloon-parade"] .inv-intro__age {
  position: relative;
  margin: 0 0 -.12em;
  font: 800 clamp(7rem, 6rem + 4vw, 9.5rem)/.9 var(--inv-font-script);
  font-variant-numeric: lining-nums;
  background: linear-gradient(160deg, #F28CA0 0%, var(--inv-primary) 45%, #8E2A12 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
}
[data-theme="balloon-parade"] .inv-intro__names {
  position: relative;
  max-width: 18rem;
  margin: 0;
  font: 800 clamp(3.5rem, 2.9rem + 2.4vw, 5rem)/1.05 var(--inv-font-script);
  color: var(--inv-text);
  text-align: center;
  opacity: 0;
}
[data-theme="balloon-parade"] .inv-intro__date {
  position: relative;
  margin: var(--space-3) 0 0;
  font: 700 1.0625rem/1.3 var(--inv-font-display);
  font-variant-numeric: lining-nums;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--inv-text);
  opacity: 0;
}
[data-theme="balloon-parade"] .inv-intro__tap { z-index: 4; }

/* ---- opening (timeline = ms since tap, total 2000) ---- */
[data-theme="balloon-parade"]:not([data-intro-phase="idle"]) .inv-intro__layer--1 { animation: bp-rise 800ms var(--inv-motion-ease-open) 0ms both; }
[data-theme="balloon-parade"]:not([data-intro-phase="idle"]) .inv-intro__layer--2 { animation: bp-rise 800ms var(--inv-motion-ease-open) 120ms both; }
[data-theme="balloon-parade"]:not([data-intro-phase="idle"]) .inv-intro__layer--3 { animation: bp-rise 700ms var(--inv-motion-ease-open) 260ms both; }
[data-theme="balloon-parade"]:not([data-intro-phase="idle"]) .inv-intro__scene::before { animation: bp-float-pop 950ms var(--ease-out) 0ms both; }
[data-theme="balloon-parade"]:not([data-intro-phase="idle"]) .inv-intro__scene::after { animation: bp-burst 700ms var(--ease-out) 860ms both; }
[data-theme="balloon-parade"]:not([data-intro-phase="idle"]) .inv-intro__age { animation: bp-bounce var(--inv-motion-name-in) var(--ease-spring) 880ms both; } /* ends 1380 < 1400 */
[data-theme="balloon-parade"]:not([data-intro-phase="idle"]) .inv-intro__names { animation: bp-bounce var(--inv-motion-name-in) var(--ease-spring) 900ms both; } /* ends 1400 */
[data-theme="balloon-parade"]:not([data-intro-phase="idle"]) .inv-intro__date { animation: bp-fade-in 300ms var(--ease-out) 1050ms both; }
[data-theme="balloon-parade"]:not([data-intro-phase="idle"]) .inv-intro__tap { animation: bp-fade-out 200ms linear both; }

@keyframes bp-rise { from { transform: translateY(105%); } to { transform: none; } }
/* the big balloon floats up to the centre, swells, and pops (gone in 60 ms) */
@keyframes bp-float-pop {
  0% { transform: translateY(70vh) scale(1); opacity: 1; }
  80% { transform: translateY(0) scale(1); opacity: 1; }
  92% { transform: translateY(0) scale(1.14); opacity: 1; }
  100% { transform: translateY(0) scale(1.3); opacity: 0; }
}
@keyframes bp-burst {
  0% { opacity: 1; transform: scale(.3) rotate(0deg); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.25) rotate(12deg); }
}
@keyframes bp-bounce { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes bp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bp-fade-out { to { opacity: 0; } }

/* ---- reduced motion: ≤ 800 ms opacity only — balloons → age + name → page; no pop ---- */
[data-theme="balloon-parade"] .inv-intro--reduce .inv-intro__layer { transform: none; opacity: 0; }
[data-theme="balloon-parade"] .inv-intro--reduce .inv-intro__scene::before,
[data-theme="balloon-parade"] .inv-intro--reduce .inv-intro__scene::after { display: none; }
[data-theme="balloon-parade"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__layer { animation: bp-fade-in 200ms linear both; }
[data-theme="balloon-parade"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__age,
[data-theme="balloon-parade"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__names { animation: bp-fade-in 200ms linear 50ms both; }
[data-theme="balloon-parade"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__date { animation: bp-fade-in 200ms linear 50ms both; }
@media (prefers-reduced-motion: reduce) {
  [data-theme="balloon-parade"] .inv-intro__layer { transform: none; opacity: 0; }
  [data-theme="balloon-parade"] .inv-intro__scene::before,
  [data-theme="balloon-parade"] .inv-intro__scene::after { display: none; }
  [data-theme="balloon-parade"]:not([data-intro-phase="idle"]) .inv-intro__layer { animation: bp-fade-in 300ms linear both; }
  [data-theme="balloon-parade"]:not([data-intro-phase="idle"]) .inv-intro__age,
  [data-theme="balloon-parade"]:not([data-intro-phase="idle"]) .inv-intro__names { animation: bp-fade-in 300ms linear 250ms both; }
  [data-theme="balloon-parade"]:not([data-intro-phase="idle"]) .inv-intro__date { animation: bp-fade-in 250ms linear 400ms both; }
}

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