/* Küçük Şehzade intro (#397, Mina). The tiled palace doors swing open, the hall settles (star dust
   drifts out with it), the prince and then the name appear in the arch.
   Timeline = ms since tap (all animations start when the phase leaves idle), total 2600.
   Reduced motion: .inv-intro--reduce or the media query — opacity only, ≤ 800 ms. */

[data-theme="little-sultan"] .inv-intro {
  display: grid;
  align-content: start;
  justify-items: center;
  /* = cover padding-top + eyebrow line + gap, so the name lands where .inv-cover__names sits */
  padding-top: calc(15svh + 1.9rem);
  overflow: hidden;
  background: var(--inv-bg);
}
[data-theme="little-sultan"] .inv-intro__scene {
  position: absolute;
  inset: 0;
  perspective: 1400px;
  background: var(--inv-art-scene) 50% 100% / auto 100% no-repeat, var(--ls-art-tile) 0 0 / 40px 40px repeat;
  transform: scale(1.12);
  transform-origin: 50% 70%;
}
/* palace doors */
[data-theme="little-sultan"] .inv-intro__scene::before,
[data-theme="little-sultan"] .inv-intro__scene::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  backface-visibility: hidden;
  background: url("art/door-left.svg") 100% 50% / cover no-repeat;
}
[data-theme="little-sultan"] .inv-intro__scene::before { left: 0; transform-origin: 0 50%; }
[data-theme="little-sultan"] .inv-intro__scene::after {
  right: 0;
  transform-origin: 100% 50%;
  background-image: url("art/door-right.svg");
  background-position: 0 50%;
}
[data-theme="little-sultan"] .inv-intro__names {
  position: relative;
  margin: 0;
  padding-inline: var(--space-8);
  font: 700 clamp(3.5rem, 3.4rem + .4vw, 3.75rem)/1.05 var(--inv-font-script);
  color: var(--inv-primary);
  text-align: center;
  opacity: 0;
}
[data-theme="little-sultan"] .inv-intro__date {
  position: relative;
  margin: var(--space-4) 0 0;
  font: 700 1.0625rem/1.4 var(--inv-font-numeric); /* §4.1/12 */
  font-variant-numeric: lining-nums;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--inv-text);
  opacity: 0;
}

/* #777 (K-B05/06): the default teal button had the same fill as the teal doors (1.0:1). Gold fill with a dark teal
   label. The scene under the button is white tile, teal star tile and the teal door strip, so no single ring colour
   separates from all three: a white ring (against the door) inside a near-black ring (#04181B, >= 3:1 against
   the door strip, far more against the white tile). */
[data-theme="little-sultan"] .inv-intro__tap {
  background: var(--inv-accent);
  color: #0B3F46;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #04181B, var(--shadow-md);
}
[data-theme="little-sultan"] .inv-intro__tap-ring { background: #0B3F46; }

[data-theme="little-sultan"]:not([data-intro-phase="idle"]) .inv-intro__scene {
  animation: ls-settle var(--inv-motion-intro-total) var(--ease-out) both;
}
[data-theme="little-sultan"]:not([data-intro-phase="idle"]) .inv-intro__scene::before {
  animation: ls-door-left 1500ms var(--inv-motion-ease-open) 150ms both;
}
[data-theme="little-sultan"]:not([data-intro-phase="idle"]) .inv-intro__scene::after {
  animation: ls-door-right 1500ms var(--inv-motion-ease-open) 150ms both;
}
[data-theme="little-sultan"]:not([data-intro-phase="idle"]) .inv-intro__names {
  animation: ls-name-in var(--inv-motion-name-in) var(--ease-out) 1000ms both; /* ends 1800 < climax 1820 (§4.1 (6)) */
}
[data-theme="little-sultan"]:not([data-intro-phase="idle"]) .inv-intro__date {
  animation: ls-name-in 600ms var(--ease-out) 1200ms both;
}
[data-theme="little-sultan"]:not([data-intro-phase="idle"]) .inv-intro__tap {
  animation: ls-fade-out 250ms linear both;
}

@keyframes ls-settle { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes ls-door-left {
  from { transform: rotateY(0); opacity: 1; }
  85% { opacity: 1; }
  to { transform: rotateY(-100deg); opacity: 0; }
}
@keyframes ls-door-right {
  from { transform: rotateY(0); opacity: 1; }
  85% { opacity: 1; }
  to { transform: rotateY(100deg); opacity: 0; }
}
@keyframes ls-name-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ls-fade-out { to { opacity: 0; } }
@keyframes ls-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- reduced motion: doors fade → name → page ---- */
[data-theme="little-sultan"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__scene { animation: none; transform: none; }
[data-theme="little-sultan"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__scene::before,
[data-theme="little-sultan"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__scene::after { animation: ls-fade-out 200ms linear both; }
[data-theme="little-sultan"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__names { animation: ls-fade-in 200ms linear 50ms both; }
[data-theme="little-sultan"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__date { animation: ls-fade-in 200ms linear 50ms both; }
@media (prefers-reduced-motion: reduce) {
  [data-theme="little-sultan"] .inv-intro__scene { transform: none; }
  [data-theme="little-sultan"]:not([data-intro-phase="idle"]) .inv-intro__scene { animation: none; }
  [data-theme="little-sultan"]:not([data-intro-phase="idle"]) .inv-intro__scene::before,
  [data-theme="little-sultan"]:not([data-intro-phase="idle"]) .inv-intro__scene::after { animation: ls-fade-out 300ms linear both; }
  [data-theme="little-sultan"]:not([data-intro-phase="idle"]) .inv-intro__names { animation: ls-fade-in 300ms linear 250ms both; }
  [data-theme="little-sultan"]:not([data-intro-phase="idle"]) .inv-intro__date { animation: ls-fade-in 250ms linear 400ms both; }
}