/* Gece Yarısı Neonu intro (#397, Mina). A dark wall with unlit glass tubes: the pink portal buzzes on,
   the cyan moon, stars and glass follow, then the name flickers alight — at the climax the name is in the light.
   Timeline = ms since tap (all animations start when the phase leaves idle), total 2400.
   Reduced motion: .inv-intro--reduce or the media query — the tubes and the name fade on, no flicker, ≤ 800 ms. */

[data-theme="neon-afterhours"] .inv-intro {
  display: grid;
  align-content: center;
  justify-items: center;
  overflow: hidden;
  background: var(--inv-bg) image-set(var(--inv-art-scene-1x) 1x, var(--inv-art-scene) 2x) 50% 50% / cover no-repeat;
}
[data-theme="neon-afterhours"] .inv-intro__scene {
  position: absolute;
  inset: 0;
  background: url("art/neon-off.svg") 50% 50% / contain no-repeat;
}
[data-theme="neon-afterhours"] .inv-intro__scene::before,
[data-theme="neon-afterhours"] .inv-intro__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: url("art/neon-frame.svg") 50% 50% / contain no-repeat;
}
[data-theme="neon-afterhours"] .inv-intro__scene::after { background-image: url("art/neon-accents.svg"); }
[data-theme="neon-afterhours"] .inv-intro__names {
  position: relative;
  max-width: 16rem;
  margin: calc(3.4rem + .2em) 0 0; /* = cover eyebrow (Monoton) + gap + names' .2em top margin (theme.css) */
  font: 400 clamp(3.75rem, 2.9rem + 3.4vw, 6rem)/1.05 var(--inv-font-script);
  color: var(--inv-primary);
  text-align: center;
  filter: drop-shadow(0 0 3px var(--inv-primary)) drop-shadow(0 0 14px color-mix(in srgb, var(--inv-primary) 65%, transparent));
  opacity: 0;
}
[data-theme="neon-afterhours"] .inv-intro__date {
  position: relative;
  margin: var(--space-4) 0 0;
  font: 400 clamp(.875rem, .8rem + .3vw, .9375rem)/1.4 var(--inv-font-body); /* 13 → 15 */
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: clamp(.1em, .06em + .4vw, .18em);
  text-transform: uppercase;
  color: var(--inv-text);
  opacity: 0;
}

[data-theme="neon-afterhours"]:not([data-intro-phase="idle"]) .inv-intro__scene::before {
  animation: na-buzz-on 800ms linear 150ms both;
}
[data-theme="neon-afterhours"]:not([data-intro-phase="idle"]) .inv-intro__scene::after {
  animation: na-buzz-on 700ms linear 600ms both;
}
[data-theme="neon-afterhours"]:not([data-intro-phase="idle"]) .inv-intro__names {
  animation: na-buzz-on var(--inv-motion-name-in) linear 750ms both; /* ends 1650 < climax 1680 (§4.1 (6)) */
}
/* §4.1 (5): with per-letter spans the tube lights letter by letter, 70 ms apart; the box itself just switches on */
[data-theme="neon-afterhours"] .inv-intro__names:has(.inv-char) .inv-char { opacity: 0; }
[data-theme="neon-afterhours"]:not([data-intro-phase="idle"]) .inv-intro__names:has(.inv-char) { animation: na-fade-in 1ms linear 740ms both; }
[data-theme="neon-afterhours"]:not([data-intro-phase="idle"]) .inv-intro__names .inv-char {
  animation: na-buzz-on 400ms linear calc(750ms + var(--i) * 70ms) both; /* "Ayşe&Ömer" = 9 letters: last starts 1310, steady (keyframe ≥ 42 %) from 1480, before climax 1680 */
}
[data-theme="neon-afterhours"]:not([data-intro-phase="idle"]) .inv-intro__date {
  animation: na-fade-in 300ms var(--ease-out) 1350ms both;
}
[data-theme="neon-afterhours"]:not([data-intro-phase="idle"]) .inv-intro__tap {
  animation: na-fade-out 150ms linear both;
}

/* a tube striking: two failed sparks, a dip, then steady light */
@keyframes na-buzz-on {
  0% { opacity: 0; }
  8% { opacity: .85; }
  12% { opacity: .05; }
  26% { opacity: .05; }
  30% { opacity: 1; }
  36% { opacity: .3; }
  42% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes na-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes na-fade-out { to { opacity: 0; } }

/* ---- reduced motion: tubes → name → page, smooth opacity only ---- */
[data-theme="neon-afterhours"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__scene::before,
[data-theme="neon-afterhours"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__scene::after { animation: na-fade-in 200ms linear both; }
[data-theme="neon-afterhours"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__names { animation: na-fade-in 200ms linear 50ms both; }
[data-theme="neon-afterhours"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__names .inv-char { animation: none; opacity: 1; }
[data-theme="neon-afterhours"]:not([data-intro-phase="idle"]) .inv-intro--reduce .inv-intro__date { animation: na-fade-in 200ms linear 50ms both; }
@media (prefers-reduced-motion: reduce) {
  [data-theme="neon-afterhours"]:not([data-intro-phase="idle"]) .inv-intro__scene::before,
  [data-theme="neon-afterhours"]:not([data-intro-phase="idle"]) .inv-intro__scene::after { animation: na-fade-in 300ms linear both; }
  [data-theme="neon-afterhours"]:not([data-intro-phase="idle"]) .inv-intro__names { animation: na-fade-in 300ms linear 250ms both; }
  [data-theme="neon-afterhours"]:not([data-intro-phase="idle"]) .inv-intro__names .inv-char { animation: none; opacity: 1; }
  [data-theme="neon-afterhours"]:not([data-intro-phase="idle"]) .inv-intro__date { animation: na-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="neon-afterhours"] .inv-intro {
    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/wall-wide-2x.webp") 50% 50% / auto 100% no-repeat,
      var(--inv-bg);
  }
}

/* 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="neon-afterhours"] .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))); }
}