/* Gece Varağı intro (#397, Mina). A lined envelope sits on the deco scene: the seal breaks, the flap
   turns, the envelope drops away and the foil names slide up with a single glint.
   Timeline = ms since tap (all animations start when the phase leaves idle), total 2200.
   Reduced motion: .inv-intro--reduce or the media query — opacity only, ≤ 800 ms.
   #432 D-061: lined envelope (liner, paper grain, edge shadows, two-tone embossed seal); the flap's inside
   (.inv-intro__layer--1, flap-back.svg) turns into view past 90deg. Reduce: the flap stays shut, the whole envelope fades. */

[data-theme="midnight-foil"] .inv-intro {
  display: grid;
  align-content: center;
  justify-items: center;
  overflow: hidden;
  background: var(--inv-bg) var(--inv-art-scene) 50% 50% / cover no-repeat;
}
/* the envelope body */
[data-theme="midnight-foil"] .inv-intro__scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(80vw, 360px);
  aspect-ratio: 320 / 220;
  translate: -50% -50%;
  border-radius: 4px;
  /* #432 D-061: edge shadow of the envelope on the scene (static; only transform/opacity animate) */
  box-shadow: 0 1px 2px rgb(0 0 0 / .5), 0 10px 18px -6px rgb(0 0 0 / .55), 0 28px 48px -18px rgb(0 0 0 / .7);
  background: url("art/envelope.svg") 0 0 / 100% 100% no-repeat;
}
/* flap, front face (320x140 box: the last 10 units are its shadow band on the body) */
[data-theme="midnight-foil"] .inv-intro__scene::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  aspect-ratio: 320 / 140;
  transform-origin: 50% 0;
  transform: perspective(900px) rotateX(0);
  backface-visibility: hidden;
  background: url("art/flap.svg") 0 0 / 100% 100% no-repeat;
}
/* #432 D-061: flap, back face = the liner. Same box and hinge as the front, turned 180deg around Y so it faces away
   (hidden) until the flap passes 90deg; then it shows tip-up above the envelope. */
[data-theme="midnight-foil"] .inv-intro__layer--1 {
  inset: auto;
  left: 50%;
  top: calc(50% - min(80vw, 360px) * 220 / 640);
  width: min(80vw, 360px);
  aspect-ratio: 320 / 130;
  translate: -50% 0;
  transform-origin: 50% 0;
  transform: perspective(900px) rotateX(0) rotateY(180deg);
  backface-visibility: hidden;
  background: url("art/flap-back.svg") 0 0 / 100% 100% no-repeat;
}
/* foil seal on the flap tip */
[data-theme="midnight-foil"] .inv-intro__scene::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 59%;
  width: 24%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: url("art/seal.svg") 0 0 / 100% 100% no-repeat;
}
[data-theme="midnight-foil"] .inv-intro__names {
  position: relative;
  overflow: hidden;
  margin: 1.9rem 0 0;
  padding-inline: var(--space-12);
  font: italic 500 clamp(3.25rem, 2.4rem + 3.4vw, 5.5rem)/1.15 var(--inv-font-script);
  text-align: center;
  background: linear-gradient(100deg, var(--inv-ornament) 0%, var(--inv-accent) 32%, var(--inv-primary) 52%, var(--inv-accent) 74%, var(--inv-ornament) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
}
/* single foil glint */
[data-theme="midnight-foil"] .inv-intro__names::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / .5) 50%, transparent 65%);
  mix-blend-mode: color-dodge;
  transform: translateX(-110%);
  pointer-events: none;
}
[data-theme="midnight-foil"] .inv-intro__date {
  position: relative;
  margin: var(--space-3) 0 0;
  font: 400 .9375rem/1.4 var(--inv-font-numeric); /* §4.1/12 */
  font-variant-numeric: lining-nums;
  letter-spacing: clamp(.12em, .08em + .5vw, .2em);
  text-transform: var(--inv-display-transform);
  color: var(--inv-text);
  opacity: 0;
}

[data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro__scene::after {
  animation: mf-seal-break 380ms var(--ease-in) both;
}
[data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro__scene::before {
  animation: mf-flap 750ms var(--inv-motion-ease-open) 250ms both;
}
[data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro__layer--1 {
  animation: mf-flap-back 750ms var(--inv-motion-ease-open) 250ms both, mf-drop-back 700ms var(--ease-in) 950ms both;
}
[data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro__scene {
  animation: mf-drop 700ms var(--ease-in) 950ms both;
}
[data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro__names {
  animation: mf-card-up var(--inv-motion-name-in) var(--inv-motion-ease-open) 800ms both; /* ends 1500 < climax 1540 (§4.1 (6)) */
}
[data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro__names::after {
  animation: mf-glint 500ms var(--ease-in-out) 1450ms both;
}
[data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro__date {
  animation: mf-card-up 500ms var(--inv-motion-ease-open) 1000ms both;
}
[data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro__tap {
  animation: mf-fade-out 200ms linear both;
}

@keyframes mf-seal-break {
  0% { transform: scale(1) rotate(0); opacity: 1; }
  40% { transform: scale(1.12) rotate(-4deg); opacity: 1; }
  100% { transform: scale(.7) rotate(-14deg); opacity: 0; }
}
@keyframes mf-flap { from { transform: perspective(900px) rotateX(0); } to { transform: perspective(900px) rotateX(180deg); } }
@keyframes mf-flap-back { from { transform: perspective(900px) rotateX(0) rotateY(180deg); } to { transform: perspective(900px) rotateX(180deg) rotateY(180deg); } }
@keyframes mf-drop { from { transform: translateY(0); opacity: 1; } to { transform: translateY(55vh); opacity: 0; } }
/* the back face is not inside the scene, so it drops on its own (translate keeps the flip transform free) */
@keyframes mf-drop-back { from { translate: -50% 0; opacity: 1; } to { translate: -50% 55vh; opacity: 0; } }
@keyframes mf-card-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes mf-glint { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes mf-fade-out { to { opacity: 0; } }
@keyframes mf-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- reduced motion: envelope fades → names → page, opacity only ---- */
[data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__scene { animation: mf-fade-out 200ms linear both; }
[data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__scene::before,
[data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__scene::after,
[data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__layer--1,
[data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__names::after { animation: none; }
[data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__names { animation: mf-fade-in 200ms linear 50ms both; }
[data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__date { animation: mf-fade-in 200ms linear 50ms both; }
@media (prefers-reduced-motion: reduce) {
  [data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro__scene { animation: mf-fade-out 300ms linear both; }
  [data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro__scene::before,
  [data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro__scene::after,
  [data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro__layer--1,
  [data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro__names::after { animation: none; }
  [data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro__names { animation: mf-fade-in 300ms linear 250ms both; }
  [data-theme="midnight-foil"]:not([data-intro-phase="idle"]) .inv-intro__date { animation: mf-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="midnight-foil"] .inv-intro__date { font-size: var(--inv-text-date); line-height: var(--inv-lh-date); letter-spacing: .03em; }
@media (min-width: 64rem) { [data-theme="midnight-foil"] .inv-intro__date { white-space: nowrap; } } /* 1440'ta kapak günü tek satır; açılış da tek satır, devirde isim kaymaz */