/* Longevity scroll film — /iv-terapiya/, directly under the new-zone renders.
   Site tokens only (styles.css). The film's own text is baked into the video,
   so the HTML copy is visually hidden but kept for search and screen readers. */

.iv-long { position: relative; padding: 88px 0 0; }
.iv-long .section-head { margin-bottom: 8px; }

/* Scroll track: the time map's total (longevity.js MAP, 11.82 screens) plus
   one screen for the stage. Set here too, so nothing below the film jumps
   when the script runs. Keep in sync if MAP or SPEED change. */
.iv-long-track { position: relative; height: calc(1182vh + 100vh); }

.iv-long-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  padding: 96px 16px 28px; /* clears the sticky nav pill */
  box-sizing: border-box;
}

.iv-long-frame {
  position: relative;
  width: min(100%, var(--maxw), calc((100dvh - 190px) * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #E6E2DA;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
}
.iv-long-frame img,
.iv-long-frame video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.iv-long-frame video { opacity: 0; transition: opacity .25s ease; }
.iv-long-frame[data-painted="true"] video { opacity: 1; }

.iv-long-hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.82); backdrop-filter: blur(8px);
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: opacity .4s ease;
  pointer-events: none;
}
.iv-long[data-started="true"] .iv-long-hint { opacity: 0; }
.iv-long-hint svg { animation: ivLongNudge 1.6s ease-in-out infinite; }
@keyframes ivLongNudge { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* Chapter rail under the frame */
.iv-long-rail {
  width: min(100%, var(--maxw), calc((100dvh - 190px) * 16 / 9));
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  list-style: none; margin: 0; padding: 0;
}
.iv-long-rail li {
  position: relative; padding-top: 10px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  transition: color .3s ease;
}
.iv-long-rail li::before,
.iv-long-rail li::after {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; border-radius: 3px;
}
.iv-long-rail li::before { right: 0; background: var(--teal-100); }
.iv-long-rail li::after {
  width: calc(var(--fill, 0) * 100%);
  background: var(--teal-500);
}
.iv-long-rail li[data-active="true"] { color: var(--ink); }

/* Visually hidden copy (search engines, screen readers) */
.iv-long-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Static story: phones/tablets, reduced motion, or the video could not load.
   The film is desktop only (owner decision 2026-10-17); CSS decides first so
   phones never see the tall scroll track, even before the script runs. */
.iv-long-static { display: none; }
.iv-long-static figure { margin: 0; }
.iv-long-static img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-md); border: 1px solid var(--line);
}
.iv-long-static figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-2); }

.iv-long[data-mode="static"] .iv-long-track { display: none; }
.iv-long[data-mode="static"] .iv-long-static {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 28px; padding-bottom: 88px;
}
@media (max-width: 860px), (hover: none) and (pointer: coarse), (prefers-reduced-motion: reduce) {
  .iv-long .iv-long-track { display: none; }
  .iv-long .iv-long-static {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    margin-top: 28px; padding-bottom: 88px;
  }
}
@media (max-width: 860px) {
  .iv-long { padding-top: 64px; }
  .iv-long .iv-long-static,
  .iv-long[data-mode="static"] .iv-long-static { grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 64px; }
}
@media (max-width: 520px) {
  .iv-long .iv-long-static,
  .iv-long[data-mode="static"] .iv-long-static { grid-template-columns: 1fr; }
}

/* Phones: the six stills become a swipe row (next still peeks in) instead of
   a 1,400px column. Added 2026-10-17. */
@media (max-width: 640px) {
  .iv-long { padding-top: 56px; }
  .iv-long .iv-long-static,
  .iv-long[data-mode="static"] .iv-long-static {
    display: flex; gap: 12px; margin: 24px -16px 0; padding: 0 16px 56px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .iv-long .iv-long-static::-webkit-scrollbar { display: none; }
  .iv-long-static figure { flex: 0 0 86%; scroll-snap-align: start; }
}