/* Monogram intro (#414, Mina). The card lies on the linen desk, lifts (scale and a deepening shadow — no 3D),
   the ringed monogram is drawn by a pen stroke wiping left to right, then the names are set.
   Timeline = ms since tap (§4.1 (6)); total 2200, climax = 1540: the names are fully visible by then.
   Layer (§4.1 (5)): --1 the card. Monogram wipe = .inv-intro__monogram::after (transform only).
   Reduced motion: opacity only. */

[data-theme="editorial-monogram"] .inv-intro {
  display: grid;
  align-content: center;
  justify-items: center;
  overflow: hidden;
  background: var(--inv-backdrop);
}
[data-theme="editorial-monogram"] .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-backdrop);
}
[data-theme="editorial-monogram"] .inv-intro__layer--1 {
  background: url("art/card.svg") 50% 50% / cover no-repeat;
  transform: scale(.94);
  filter: drop-shadow(0 1px 1px rgba(60, 50, 40, .18));
}
/* #1269: the deepening shadow is a copy of the card with the final shadow that fades in (opacity only; the old keyframes animated filter) */
[data-theme="editorial-monogram"] .inv-intro__layer--1::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: drop-shadow(0 18px 22px rgba(60, 50, 40, .22));
  opacity: 0;
}
[data-theme="editorial-monogram"] .inv-intro__monogram:empty,
[data-theme="editorial-monogram"] .inv-intro__age:empty { display: none; } /* #1269: the empty age line still added a flex gap, pushing the names down */ /* yon.md §4.1/10: opened below */
[data-theme="editorial-monogram"] .inv-intro__monogram {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 9.5rem;
  height: 9.5rem;
  margin: 0 0 var(--space-2);
  overflow: hidden;
  background: url("art/monogram-ring.svg") 50% 50% / contain no-repeat;
  font: 500 4rem/1 var(--inv-font-display);
  font-variation-settings: "opsz" 144;
  letter-spacing: -.04em;
  color: var(--inv-primary);
  opacity: 0;
}
/* the pen: a card-white panel with a gold nib edge slides off to the right, revealing ring and letters */
[data-theme="editorial-monogram"] .inv-intro__monogram::after {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 2px solid var(--inv-accent);
  background: var(--inv-surface);
}
[data-theme="editorial-monogram"] .inv-intro__names {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: .22em;
  max-width: 17rem;
  margin: 0;
  overflow-wrap: normal; /* #1269: the base rule broke "Mimarlık" mid-word; same row layout as the cover */
  font: 500 clamp(3.25rem, 2.6rem + 2.4vw, 4.5rem)/1.04 var(--inv-font-script);
  font-variation-settings: "opsz" 144;
  letter-spacing: -.015em;
  color: var(--inv-text);
  text-align: center;
  opacity: 0;
}
[data-theme="editorial-monogram"] .inv-intro__name { font: inherit; letter-spacing: inherit; }
/* #1269: the cover also holds time + venue rows; reserve them so the names do not jump when the intro hands over */
[data-theme="editorial-monogram"] .inv-intro__stage::after { content: ""; height: calc(.8125rem * 1.65 + .9375rem * 1.5); }
[data-theme="editorial-monogram"] .inv-intro__eyebrow { margin: 0; font: 500 .875rem/1.4 var(--inv-font-body); letter-spacing: var(--inv-display-tracking); text-transform: var(--inv-display-transform); }
[data-theme="editorial-monogram"] .inv-intro__amp { font-style: italic; color: var(--inv-accent); }
[data-theme="editorial-monogram"] .inv-intro__date {
  position: relative;
  z-index: 1;
  margin: var(--space-2) 0 0;
  font: 500 .8125rem/1.4 var(--inv-font-display);
  font-variant-numeric: lining-nums;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--inv-primary);
  opacity: 0;
}

/* ---- opening (timeline = ms since tap, total 2200) ---- */
[data-theme="editorial-monogram"]:not([data-intro-phase="idle"]) .inv-intro__layer--1 { animation: em-lift 900ms var(--inv-motion-ease-open) both; }
[data-theme="editorial-monogram"]:not([data-intro-phase="idle"]) .inv-intro__layer--1::before { animation: em-show 900ms var(--inv-motion-ease-open) both; }
[data-theme="editorial-monogram"]:not([data-intro-phase="idle"]) .inv-intro__monogram { animation: em-show 1ms linear 450ms both; }
[data-theme="editorial-monogram"]:not([data-intro-phase="idle"]) .inv-intro__monogram::after { animation: em-draw 750ms cubic-bezier(.45, 0, .25, 1) 450ms both; }
[data-theme="editorial-monogram"]:not([data-intro-phase="idle"]) .inv-intro__names { animation: em-set var(--inv-motion-name-in) var(--inv-motion-ease-open) 800ms both; } /* ends 1500 < 1540 */
[data-theme="editorial-monogram"]:not([data-intro-phase="idle"]) .inv-intro__date { animation: em-set 500ms var(--inv-motion-ease-open) 1000ms both; }
[data-theme="editorial-monogram"]:not([data-intro-phase="idle"]) .inv-intro__tap { animation: em-fade-out 200ms linear both; }

@keyframes em-lift {
  from { transform: scale(.94); }
  to { transform: none; }
}
@keyframes em-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes em-draw { from { transform: translateX(0); } to { transform: translateX(101%); } }
@keyframes em-set { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes em-fade-out { to { opacity: 0; } }
@keyframes em-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- reduced motion: ≤ 800 ms opacity only — card → monogram + names → page ---- */
[data-theme="editorial-monogram"] .inv-intro--reduce .inv-intro__layer--1 { transform: none; filter: none; opacity: 0; }
[data-theme="editorial-monogram"] .inv-intro--reduce .inv-intro__monogram::after { display: none; }
[data-theme="editorial-monogram"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__layer--1 { animation: em-fade-in 200ms linear both; }
[data-theme="editorial-monogram"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__monogram,
[data-theme="editorial-monogram"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__names { animation: em-fade-in 200ms linear 50ms both; }
[data-theme="editorial-monogram"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__date { animation: em-fade-in 200ms linear 50ms both; }
@media (prefers-reduced-motion: reduce) {
  [data-theme="editorial-monogram"] .inv-intro__layer--1 { transform: none; filter: none; opacity: 0; }
  [data-theme="editorial-monogram"] .inv-intro__monogram::after { display: none; }
  [data-theme="editorial-monogram"]:not([data-intro-phase="idle"]) .inv-intro__layer--1 { animation: em-fade-in 300ms linear both; }
  [data-theme="editorial-monogram"]:not([data-intro-phase="idle"]) .inv-intro__monogram,
  [data-theme="editorial-monogram"]:not([data-intro-phase="idle"]) .inv-intro__names { animation: em-fade-in 300ms linear 250ms both; }
  [data-theme="editorial-monogram"]:not([data-intro-phase="idle"]) .inv-intro__date { animation: em-fade-in 250ms linear 400ms both; }
}
@media (min-width: 1024px) {
  [data-theme="editorial-monogram"] .inv-intro__layer--1 { background-image: url("art/card-wide.svg"); background-size: auto 100%; }
}

/* #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="editorial-monogram"] .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/desk-wide-2x.webp") 50% 50% / auto 100% no-repeat,
      var(--inv-bg);
  }
}

/* task 1439: the cover lifts its group at >= 1024 px (padding-bottom 21svh vs 15svh); mirror it so the names do not jump on handover */
@media (min-width: 1024px) {
  [data-theme="editorial-monogram"] .inv-intro { padding-top: 2.7svh; padding-bottom: 10svh; } /* #1629: kapak üst 13 / alt 15 svh (görev 1527'de 22 / 14); intro aynı oranda yukarı kayar */
}

/* #1492: mirrors the cover rule in theme.css (same name size on handover) */
@media (min-width: 1024px) {
  [data-theme="editorial-monogram"] .inv-intro__names { font-size: 3.25rem; }
}

/* Görev 1527: açılış tarihi kapak günüyle aynı ölçüde (devir sırasında isim yerinden oynamaz). */
[data-theme="editorial-monogram"] .inv-intro__date { font-size: var(--inv-text-date); line-height: var(--inv-lh-date); letter-spacing: .03em; }
@media (min-width: 64rem) { [data-theme="editorial-monogram"] .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="editorial-monogram"] .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))); }
}