/* Gül Bahçesi intro (#397, Mina). The rose hedge (two halves) parts to the sides, the garden
   behind settles, then the names appear in the paper oval. Phases: idle → opening → climax → done.
   Every animation starts when the phase leaves idle, so its timeline is "ms since tap"
   (intro.js may switch opening→climax→done without restarting anything).
   Reduced motion: .inv-intro--reduce (set by intro.js for ?intro=reduce) or the media query. */

[data-theme="rose-garden"] .inv-intro {
  display: grid;
  align-content: center;
  justify-items: center;
  overflow: hidden;
  background: var(--inv-bg);
}
[data-theme="rose-garden"] .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;
  transform: scale(1.08);
}
/* hedge halves */
[data-theme="rose-garden"] .inv-intro__scene::before,
[data-theme="rose-garden"] .inv-intro__scene::after {
  content: "";
  position: absolute;
  top: -2%;
  bottom: -2%;
  width: 54%;
  background: url("art/hedge-left-2x.webp") 100% 50% / cover no-repeat; /* #414: own hedge halves (dense, ragged inner edge) */
}
[data-theme="rose-garden"] .inv-intro__scene::before { left: -2%; transform-origin: 0 50%; }
/* #642: the right half is the left hedge mirrored (scaleX(-1)); the separate hedge-right art had a hard vertical
   seam at ~48 % of the screen. Mirror origin is the centre so the box stays put. */
[data-theme="rose-garden"] .inv-intro__scene::after {
  right: -2%;
  transform-origin: 50% 50%;
  transform: scaleX(-1);
}
/* #432 D-058: from 600 px the halves are ~780 CSS px wide; the 1600x1920 hedges keep css ratio >= 2 */
@media (min-width: 600px) {
  [data-theme="rose-garden"] .inv-intro__scene::before,
  [data-theme="rose-garden"] .inv-intro__scene::after { background-image: url("art/hedge-left-wide-2x.webp"); }
}
[data-theme="rose-garden"] .inv-intro__names {
  position: relative;
  margin: 0;
  max-width: 17rem; /* same box as .inv-cover__names */
  margin-top: 2.25rem; /* = cover eyebrow + gap: names land where .inv-cover__names sits */
  font: 400 clamp(3.5rem, 2.6rem + 3.4vw, 5.75rem)/1.12 var(--inv-font-script);
  color: var(--inv-primary);
  text-align: center;
  opacity: 0;
}
[data-theme="rose-garden"] .inv-intro__date {
  position: relative;
  margin: var(--space-3) 0 0;
  font: var(--inv-display-weight) 1rem/1.4 var(--inv-font-display);
  font-variant-numeric: lining-nums;
  letter-spacing: clamp(.1em, .05em + .6vw, .16em);
  text-transform: var(--inv-display-transform);
  color: var(--inv-text);
  opacity: 0;
}

/* ---- falling petals: three depth layers (§4.1 (5) .inv-intro__layer--1..3), 4 petals each = 12 ---- */
[data-theme="rose-garden"] .inv-intro__layer {
  opacity: 0;
  background: url("art/petal.svg") no-repeat;
}
[data-theme="rose-garden"] .inv-intro__layer--1 { /* far: small, soft */
  background-size: 14px, 12px, 16px, 13px;
  background-position: 12% 8%, 46% 2%, 71% 12%, 90% 4%;
  background-image: url("art/petal.svg"), url("art/petal.svg"), url("art/petal.svg"), url("art/petal.svg");
}
[data-theme="rose-garden"] .inv-intro__layer--2 {
  background-size: 20px, 18px, 22px, 19px;
  background-position: 24% 0, 58% 10%, 83% 3%, 6% 14%;
  background-image: url("art/petal.svg"), url("art/petal.svg"), url("art/petal.svg"), url("art/petal.svg");
}
[data-theme="rose-garden"] .inv-intro__layer--3 { /* near: large, fast */
  background-size: 28px, 26px, 30px, 24px;
  background-position: 36% 6%, 68% 0, 15% 2%, 94% 9%;
  background-image: url("art/petal.svg"), url("art/petal.svg"), url("art/petal.svg"), url("art/petal.svg");
}
[data-theme="rose-garden"]:not([data-intro-phase="idle"]) .inv-intro__layer--1 { animation: rg-petals 2600ms linear 200ms both; }
[data-theme="rose-garden"]:not([data-intro-phase="idle"]) .inv-intro__layer--2 { animation: rg-petals 2200ms linear 450ms both; }
[data-theme="rose-garden"]:not([data-intro-phase="idle"]) .inv-intro__layer--3 { animation: rg-petals 1800ms linear 700ms both; }
@keyframes rg-petals {
  0% { opacity: 0; transform: translate(0, -12%) rotate(0deg); }
  12% { opacity: 1; }
  50% { transform: translate(-3%, 40%) rotate(4deg); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(2%, 92%) rotate(-3deg); }
}

/* ---- opening (timeline = ms since tap, total 2600) ---- */
[data-theme="rose-garden"]:not([data-intro-phase="idle"]) .inv-intro__scene {
  animation: rg-settle var(--inv-motion-intro-total) var(--ease-out) both;
}
[data-theme="rose-garden"]:not([data-intro-phase="idle"]) .inv-intro__scene::before {
  animation: rg-part-left 1700ms var(--inv-motion-ease-open) both;
}
[data-theme="rose-garden"]:not([data-intro-phase="idle"]) .inv-intro__scene::after {
  animation: rg-part-right 1700ms var(--inv-motion-ease-open) both;
}
[data-theme="rose-garden"]:not([data-intro-phase="idle"]) .inv-intro__names {
  animation: rg-name-in var(--inv-motion-name-in) var(--ease-out) 900ms both; /* ends 1800 < climax 1820 (§4.1 (6)) */
}
[data-theme="rose-garden"]:not([data-intro-phase="idle"]) .inv-intro__date {
  animation: rg-rise 700ms var(--ease-out) 1100ms both;
}
[data-theme="rose-garden"]:not([data-intro-phase="idle"]) .inv-intro__tap {
  animation: rg-fade-out 250ms linear both;
}

@keyframes rg-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes rg-part-left {
  from { transform: translateX(0) scale(1); }
  to { transform: translateX(-104%) scale(1.06); }
}
@keyframes rg-part-right {
  from { transform: translateX(0) scale(-1, 1); }
  to { transform: translateX(104%) scale(-1.06, 1.06); }
}
@keyframes rg-name-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes rg-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rg-fade-out { to { opacity: 0; } }
@keyframes rg-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- reduced motion: ≤ 800 ms opacity only — hedge → names → page ---- */
[data-theme="rose-garden"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__scene { animation: none; transform: none; }
[data-theme="rose-garden"] .inv-intro--reduce .inv-intro__layer { animation: none; display: none; }
[data-theme="rose-garden"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__scene::before,
[data-theme="rose-garden"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__scene::after { animation: rg-fade-out 200ms linear both; }
[data-theme="rose-garden"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__names { animation: rg-fade-in 200ms linear 50ms both; }
[data-theme="rose-garden"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__date { animation: rg-fade-in 200ms linear 50ms both; }
@media (prefers-reduced-motion: reduce) {
  [data-theme="rose-garden"] .inv-intro__layer { animation: none; display: none; }
  [data-theme="rose-garden"] .inv-intro__scene { transform: none; }
  [data-theme="rose-garden"]:not([data-intro-phase="idle"]) .inv-intro__scene { animation: none; }
  [data-theme="rose-garden"]:not([data-intro-phase="idle"]) .inv-intro__scene::before,
  [data-theme="rose-garden"]:not([data-intro-phase="idle"]) .inv-intro__scene::after { animation: rg-fade-out 300ms linear both; }
  [data-theme="rose-garden"]:not([data-intro-phase="idle"]) .inv-intro__names { animation: rg-fade-in 300ms linear 250ms both; }
  [data-theme="rose-garden"]:not([data-intro-phase="idle"]) .inv-intro__date { animation: rg-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="rose-garden"] .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/scene-wide-2x.webp") 50% 50% / auto 100% no-repeat,
      var(--inv-bg);
  }
}