/* Экран final.html (T-008): «Тебе 1 год», счётчики, интерактивный recap,
   финал и CTA «Продолжить дневник → 2 года».
   Только токены; анимации — transform/opacity. */
@layer screens {
  /* ---------- Каркас ---------- */
  .final-spread { row-gap: var(--space-6); }
  .final-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
    isolation: isolate;
  }

  /* ---------- Конфетти (декор, aria-hidden) ---------- */
  .final-confetti { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
  .final-confetti i {
    position: absolute;
    width: 9px; height: 14px;
    border-radius: 2px;
    background: var(--color-secondary);
    opacity: 0.75;
    animation: final-float 8s ease-in-out infinite;
  }
  .final-confetti i:nth-child(3n) { background: var(--color-accent); opacity: 0.45; }
  .final-confetti i:nth-child(3n+1) { background: var(--color-ph-2); }
  .final-confetti i:nth-child(4n) { width: 10px; height: 10px; border-radius: 50%; }
  .final-confetti i:nth-child(1)  { left: 6%;  top: 8%;  animation-delay: -1s; }
  .final-confetti i:nth-child(2)  { left: 18%; top: 30%; animation-delay: -3s; rotate: 30deg; }
  .final-confetti i:nth-child(3)  { left: 84%; top: 6%;  animation-delay: -5s; }
  .final-confetti i:nth-child(4)  { left: 92%; top: 26%; animation-delay: -2s; }
  .final-confetti i:nth-child(5)  { left: 10%; top: 52%; animation-delay: -6s; rotate: -24deg; }
  .final-confetti i:nth-child(6)  { left: 88%; top: 48%; animation-delay: -4s; rotate: 50deg; }
  .final-confetti i:nth-child(7)  { left: 30%; top: 4%;  animation-delay: -7s; }
  .final-confetti i:nth-child(8)  { left: 70%; top: 16%; animation-delay: -1.5s; rotate: 70deg; }
  .final-confetti i:nth-child(9)  { left: 4%;  top: 78%; animation-delay: -3.5s; }
  .final-confetti i:nth-child(10) { left: 94%; top: 72%; animation-delay: -5.5s; rotate: -40deg; }
  .final-confetti i:nth-child(11) { left: 24%; top: 90%; animation-delay: -2.5s; }
  .final-confetti i:nth-child(12) { left: 76%; top: 92%; animation-delay: -6.5s; rotate: 15deg; }
  @keyframes final-float {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-16px) rotate(140deg); }
  }

  /* ---------- «Тебе 1 год» ---------- */
  .final-hero__title { display: grid; justify-items: center; gap: var(--space-1); }
  .final-hero__one {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(9rem, 42vw, 13rem);
    aspect-ratio: 1;
    font-size: calc(clamp(6.5rem, 30vw, 10rem) * var(--font-display-scale));
    line-height: 1;
    font-variant-numeric: lining-nums;
    color: var(--color-accent-ink);
  }
  .final-hero__one::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--radius-photo);
    background:
      radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--color-page) 70%, transparent), transparent 60%),
      linear-gradient(150deg, var(--color-secondary-soft), var(--color-accent-soft));
    box-shadow: var(--shadow-photo);
    rotate: var(--tilt-photo);
  }
  .page.is-current .final-hero__one { animation: final-pop 900ms var(--ease-out) both; }
  @keyframes final-pop { from { transform: scale(0.7) rotate(-8deg); } 70% { transform: scale(1.04); } }
  .final-hero__words { font-size: calc(var(--fs-2xl) * var(--font-display-scale)); }
  .final-hero__name { font-family: var(--font-hand); font-style: var(--font-hand-style); color: var(--color-secondary-ink); }

  .final-counters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    width: 100%;
    max-width: 30rem;
  }
  .final-counters > div {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding: var(--space-3) var(--space-2);
    background: var(--texture-card), var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }
  .final-counters dd {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: calc(var(--fs-xl) * var(--font-display-scale));
    line-height: 1.1;
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .final-counters dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-muted); }
  .final-hero__before { color: var(--color-ink-muted); font-size: calc(var(--fs-base) * var(--font-display-scale)); }
  .final-totals { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
  .final-totals li {
    padding: 4px var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-accent-ink);
    font-size: var(--fs-sm);
  }
  .final-totals strong { font-weight: 700; }

  /* ---------- Recap ---------- */
  .recap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .recap__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
  .recap__slide {
    grid-area: 1 / 1;
    display: grid;
    align-content: start;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-3);
    background: var(--texture-card), var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateX(18px) scale(0.98);
    transition: opacity var(--dur-turn) var(--ease-turn), transform var(--dur-turn) var(--ease-turn), visibility 0s linear var(--dur-turn);
  }
  .recap__slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .recap__slide.is-before { transform: translateX(-18px) scale(0.98); }
  .recap__photo { border-radius: var(--radius-md); }
  .recap__slide.is-active .recap__photo::after { animation: final-kenburns 5s var(--ease-out) both; }
  @keyframes final-kenburns { from { transform: scale(0.86) translateY(4%); } to { transform: scale(1.02); } }
  .recap__caption { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--space-1) var(--space-1); }
  .recap__when { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-secondary-ink); }
  .recap__title {
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: calc(var(--fs-xl) * var(--font-display-scale));
    line-height: var(--lh-tight);
    overflow-wrap: normal;
    hyphens: auto;
  }
  .recap__text { color: var(--color-ink); }
  .recap__stats { margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--color-ink-muted); }

  .recap__timer {
    position: absolute;
    z-index: 2;
    left: var(--space-5); right: var(--space-5); top: var(--space-2);
    height: 3px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-page) 60%, transparent);
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--dur-base);
  }
  .recap__timer > span {
    display: block; height: 100%;
    background: var(--color-accent);
    transform-origin: left;
    transform: scaleX(0);
  }
  .recap.is-playing .recap__timer { opacity: 1; }
  .recap.is-playing .recap__timer > span.is-running { animation: final-timer var(--recap-interval, 3400ms) linear forwards; }
  @keyframes final-timer { to { transform: scaleX(1); } }

  .recap__count {
    position: absolute;
    z-index: 2;
    top: var(--space-5); right: var(--space-5);
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-page) 88%, transparent);
    color: var(--color-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .recap__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-3); min-width: 0; }
  .recap__play { min-width: 0; flex: 0 1 auto; white-space: normal; text-align: center; padding-inline: var(--space-4); }
  .recap__icon-pause { display: none; }
  .recap__play[aria-pressed="true"] .recap__icon-play { display: none; }
  .recap__play[aria-pressed="true"] .recap__icon-pause { display: block; }

  .recap__collage {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .recap__cell { min-width: 0; aspect-ratio: 1; }
  .recap__cell--wide { grid-column: span 2; aspect-ratio: auto; }
  .recap__thumb {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: var(--tap);
    overflow: hidden;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 1px var(--color-line);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
  }
  .recap__thumb:hover { transform: translateY(-2px); }
  .recap__thumb .recap__thumb-ph { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border-radius: 0; }
  .recap__thumb .recap__thumb-ph::after { inset: 18%; }
  .recap__thumb-label {
    position: absolute;
    left: 4px; bottom: 4px;
    max-width: calc(100% - 8px);
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-page) 90%, transparent);
    color: var(--color-ink);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .recap__thumb.is-seen { box-shadow: 0 0 0 1px var(--color-line-strong); }
  .recap__thumb[aria-current] { box-shadow: 0 0 0 3px var(--color-accent); transform: translateY(-2px); }
  .recap__thumb[aria-current] .recap__thumb-label { background: var(--color-accent); color: var(--color-on-accent); }

  /* ---------- Финал ---------- */
  .final-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-2);
    text-align: center;
  }
  .final-end__divider { width: min(100%, 22rem); color: var(--color-secondary); }
  .final-end__title {
    font-family: var(--font-hand);
    font-style: var(--font-hand-style);
    font-size: calc(var(--fs-xl) * var(--font-display-scale));
    line-height: 1.25;
    max-width: 30ch;
  }
  .final-end__title span { display: block; color: var(--color-accent-ink); font-size: 1.2em; }
  .final-end__text { max-width: 36rem; }
  .final-end__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); }
  .final-end__cta { white-space: normal; text-align: center; max-width: 100%; }
  .final-end__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }

  @media (max-width: 420px) {
    .final-end__cta { font-size: var(--fs-base); padding-inline: var(--space-5); }
  }

  @media (min-width: 900px) {
    .final-spread::after { content: none; }
    .final-spread { row-gap: 0; }
    .final-hero { justify-content: center; }
    .final-counters { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
    .final-recap { justify-content: flex-start; }
    .recap__collage { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .recap__slide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: var(--space-4); }
    .recap__photo { aspect-ratio: 1; }
    .recap__count { right: auto; left: var(--space-5); }
    .recap__title { font-size: calc(var(--fs-lg) * var(--font-display-scale)); }
    .recap__thumb-label { font-size: 0.6875rem; padding: 0 4px; left: 3px; bottom: 3px; max-width: calc(100% - 6px); }
    .final-end {
      grid-column: 1 / -1;
      padding: var(--space-6) var(--space-7) var(--space-7);
      border-top: 1px solid var(--color-line);
    }
  }
}