/* Экран birth.html (T-007): эмоциональная глава «Ты родился».
   Идея: рассвет (родился в 06:42) — восходящее солнце и лучи за первым
   фото, звёзды гаснут; справа — бирка из роддома с главными цифрами.
   Только @layer screens, только токены, классы .birth-… */
@layer screens {
  /* Лист светлеет «рассветом» сверху-слева */
  .birth-page {
    background:
      radial-gradient(90% 60% at 20% 0%, color-mix(in srgb, var(--color-secondary-soft) 85%, transparent), transparent 70%),
      radial-gradient(60% 50% at 100% 100%, var(--color-accent-soft), transparent 70%),
      var(--texture-page), var(--color-page);
  }

  /* ---------- Визуал: рассвет за фото ---------- */
  .birth-visual { display: flex; align-items: center; justify-content: center; }
  .birth-dawn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid; place-items: center;
    width: 100%;
    padding: var(--space-7) var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
  }
  .birth-dawn__sun, .birth-dawn__rays {
    position: absolute; z-index: -1;
    left: 50%; top: 52%;
    width: min(150%, 760px); aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    pointer-events: none;
  }
  .birth-dawn__sun {
    background: radial-gradient(closest-side,
      color-mix(in srgb, var(--color-secondary) 60%, var(--color-page)) 0%,
      color-mix(in srgb, var(--color-secondary) 34%, var(--color-page)) 30%,
      color-mix(in srgb, var(--color-secondary-soft) 70%, transparent) 52%,
      transparent 72%);
    animation: birth-rise 1.6s var(--ease-out) both;
  }
  .birth-dawn__rays {
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--color-secondary) 30%, transparent) 0deg 3deg, transparent 3deg 12deg);
    -webkit-mask: radial-gradient(closest-side, transparent 24%, black 34%, transparent 72%);
    mask: radial-gradient(closest-side, transparent 24%, black 34%, transparent 72%);
    opacity: 0.8;
    animation: birth-spin 140s linear infinite;
  }
  .birth-photo { width: min(80%, 360px); }

  .birth-star { position: absolute; z-index: 1; width: 18px; height: 18px; color: var(--color-secondary); animation: birth-twinkle 3.2s ease-in-out infinite; }
  .birth-star svg { width: 100%; height: 100%; fill: currentColor; }
  .birth-star--1 { top: 12%; left: 12%; }
  .birth-star--2 { top: 22%; right: 10%; width: 12px; height: 12px; animation-delay: -1.1s; color: var(--color-accent); }
  .birth-star--3 { bottom: 16%; left: 7%; width: 12px; height: 12px; animation-delay: -2s; }
  .birth-star--4 { bottom: 26%; right: 6%; width: 22px; height: 22px; animation-delay: -0.6s; }

  @keyframes birth-rise { from { opacity: 0; transform: translateY(12%) scale(0.92); } }
  @keyframes birth-spin { to { transform: rotate(360deg); } }
  @keyframes birth-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }

  /* ---------- Текст ---------- */
  .birth-text { gap: var(--space-4); }
  .birth-title { color: var(--color-accent-ink); margin-top: calc(var(--space-1) * -1); }
  .birth-hello { color: var(--color-secondary-ink); margin-top: calc(var(--space-2) * -1); }

  /* Бирка из роддома */
  .birth-tag {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    background: var(--texture-card), var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-line-strong);
    border-radius: var(--radius-lg) var(--radius-md) var(--radius-md) var(--radius-lg);
    box-shadow: var(--shadow-md);
    rotate: calc(var(--tilt-card) * -2);
    overflow: hidden;
  }
  /* Левая часть бирки — «застёжка» с дырочками */
  .birth-tag__clasp {
    background:
      radial-gradient(circle at 50% 50%, var(--color-page) 0 4px, var(--color-line-strong) 4px 5px, transparent 5.5px) center / 100% 22px repeat-y,
      var(--color-secondary-soft);
    border-right: 1.5px dashed var(--color-line-strong);
  }
  .birth-tag__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); min-width: 0; }
  .birth-tag__name {
    display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
    font-family: var(--font-hand); font-style: var(--font-hand-style);
    font-size: calc(var(--fs-xl) * var(--font-display-scale)); line-height: 1.1;
    color: var(--color-ink);
  }
  .birth-tag__name span { font-family: var(--font-body); font-style: normal; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-muted); }
  .birth-tag__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: var(--space-3) var(--space-4); }
  .birth-tag__fact dt { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--color-ink-muted); }
  .birth-tag__fact dt svg { width: 16px; height: 16px; color: var(--color-secondary-ink); }
  .birth-tag__fact dd {
    margin: 0;
    font-family: var(--font-display); font-weight: var(--font-display-weight); font-style: var(--font-display-style);
    font-size: calc(var(--fs-xl) * var(--font-display-scale)); line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .birth-tag__fact dd small { font-size: 0.6em; color: var(--color-ink-muted); }
  .birth-tag__fact--time dd { color: var(--color-accent-ink); }
  .birth-tag__place { display: flex; align-items: center; gap: 6px; padding-top: var(--space-3); border-top: 1px solid var(--color-line); font-size: var(--fs-sm); color: var(--color-ink-muted); }
  .birth-tag__place svg { width: 18px; height: 18px; color: var(--color-secondary-ink); }

  .birth-note p:first-child::before {
    content: "«";
    float: left;
    margin: -0.12em 0.08em 0 -0.05em;
    font-family: var(--font-display);
    font-size: 3.2em; line-height: 1;
    color: var(--color-secondary);
  }
  .birth-note > p + p { margin-top: 0.7em; }

  .birth-day { display: grid; gap: var(--space-2); font-size: var(--fs-sm); color: var(--color-ink-muted); }
  .birth-day li { display: flex; align-items: center; gap: var(--space-3); }
  .birth-day svg { width: 20px; height: 20px; color: var(--color-secondary-ink); }
  .birth-day b { color: var(--color-ink); font-weight: 700; }

  .birth-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

  /* Десктоп: визуал без своего фона — рассвет на всю левую половину */
  @media (min-width: 900px) {
    .birth-visual { padding: var(--space-5); }
    .birth-dawn { height: 100%; padding: var(--space-6); }
    .birth-photo { width: min(74%, 380px); }
    .birth-text { gap: var(--space-3); }
  }
  @media (max-width: 899px) {
    .birth-photo { width: min(72%, 300px); }
  }
}