/* v1 motion layer: prelude, review panel, splices between sections, reveal, small links.
   Transform/opacity only; everything is static under prefers-reduced-motion. */

/* ================================================================ prelude: REC → timecode → the first cut */
.intro { display: none; }
html.intro-on .intro { display: block; position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.intro-bar { position: absolute; left: 0; right: 0; height: 50.2%; background: #050506; will-change: transform; }
.intro-t { top: 0; }
.intro-b { bottom: 0; }
.intro-hud {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 12px;
  font-size: 13px; letter-spacing: 0.08em; color: rgba(244, 242, 237, 0.86); opacity: 0; transition: opacity 0.18s;
}
.intro-hud .rec-dot { background: #ff453a; box-shadow: 0 0 14px rgba(255, 69, 58, 0.7); }
.intro-rec { color: #ff453a; font-weight: 600; }
.intro-tc { font-variant-numeric: tabular-nums; min-width: 11ch; }
html.intro-rec .intro-hud { opacity: 1; }
.intro-flash { position: absolute; inset: 0; background: #fff6ea; opacity: 0; }
/* the cut: bars snap to a 2.39:1 letterbox (first frame), then open to full frame */
html.intro-cut .intro-hud { opacity: 0; transition-duration: 0.08s; }
html.intro-cut .intro-t { animation: intro-open-t 0.56s cubic-bezier(0.7, 0, 0.18, 1) forwards; }
html.intro-cut .intro-b { animation: intro-open-b 0.56s cubic-bezier(0.7, 0, 0.18, 1) forwards; }
html.intro-cut .intro-flash { animation: intro-flash 0.26s ease-out forwards; }
@keyframes intro-open-t { 0% { transform: translateY(0); } 18% { transform: translateY(-76%); } 46% { transform: translateY(-76%); } 100% { transform: translateY(-101%); } }
@keyframes intro-open-b { 0% { transform: translateY(0); } 18% { transform: translateY(76%); } 46% { transform: translateY(76%); } 100% { transform: translateY(101%); } }
@keyframes intro-flash { 0% { opacity: 0.16; } 100% { opacity: 0; } }
/* chrome and hero copy arrive after the cut */
.topbar, .tsb { transition: opacity 0.6s ease 0.1s; }
html.intro-on:not(.intro-cut) .topbar, html.intro-on:not(.intro-cut) .tsb { opacity: 0; transition: none; }
.hero-rec, .hero-row { transition: opacity 0.7s ease 0.28s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.28s; }
html.intro-on:not(.intro-cut) .hero-rec, html.intro-on:not(.intro-cut) .hero-row { opacity: 0; transform: translate3d(0, 18px, 0); transition: none; }


/* ================================================================ splices: the playhead runs over each clip header */
.clip-head { overflow: hidden; }
.clip-head::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--rec);
  box-shadow: 0 0 12px var(--rec); opacity: 0; pointer-events: none;
}
.clip-head.cut-play::after { animation: cut-run 1.05s cubic-bezier(0.5, 0, 0.2, 1) forwards; }
@keyframes cut-run { 0% { opacity: 1; transform: translateX(0); } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(100vw - var(--tsb-right))); } }
.js .clip-head:not(.cut-play):not(.cut-done) > b, .js .clip-head:not(.cut-play):not(.cut-done) > em { clip-path: inset(0 100% 0 0); }
.clip-head.cut-play > b { animation: cut-name 0.7s steps(14, end) 0.08s both; }
.clip-head.cut-play > em { animation: cut-name 0.5s steps(11, end) 0.55s both; }
.clip-head.cut-play > i { animation: cut-chip 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: 0 50%; }
@keyframes cut-name { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cut-chip { from { transform: scaleX(0.2); } to { transform: none; } }
/* the splice itself: a hairline of light and a short glow at the head of the new clip — not a panel, not a strobe */
main > section.cut-flash::before {
  content: ''; position: absolute; z-index: 5; left: 0; right: var(--tsb-right); top: 0; height: 140px; pointer-events: none;
  background:
    linear-gradient(90deg, transparent, color-mix(in oklab, var(--rec) 70%, #fff) 30%, #fff8ee 50%, color-mix(in oklab, var(--rec) 70%, #fff) 70%, transparent) 0 0 / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(255, 244, 228, 0.1) 0%, rgba(255, 244, 228, 0) 100%);
  animation: cut-burn 0.75s ease-out forwards;
}
@keyframes cut-burn { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ================================================================ reveal: rise out of a mask */
.rv { opacity: 0; transform: translate3d(0, 22px, 0); }
.rv.rv-in { opacity: 1; transform: none; transition: opacity 0.8s ease var(--rv-d, 0ms), transform 1s cubic-bezier(0.16, 1, 0.3, 1) var(--rv-d, 0ms); }

/* ================================================================ links: underline wipes out and back in */
.link-arrow {
  border-bottom: 0; padding-bottom: 3px;
  background: linear-gradient(color-mix(in oklab, currentColor 45%, transparent), color-mix(in oklab, currentColor 45%, transparent)) 0 100% / 100% 1px no-repeat;
}
.link-arrow:hover, a:hover > .link-arrow { animation: ul-wipe 0.7s cubic-bezier(0.65, 0, 0.35, 1); }
@keyframes ul-wipe {
  0% { background-size: 100% 1px; background-position: 100% 100%; }
  48% { background-size: 0% 1px; background-position: 100% 100%; }
  52% { background-size: 0% 1px; background-position: 0 100%; }
  100% { background-size: 100% 1px; background-position: 0 100%; }
}

/* «Детальніше» → direction pages */
.more-btn { gap: 8px; }
.more-btn svg { width: 16px; height: 16px; }
.sec-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 10px; }
.magnetic { will-change: transform; transition-property: background-color, color, border-color; }
.magnetic > * { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  html.intro-on .intro { display: none; }
  .clip-head::after, main > section.cut-flash::before { display: none; }
  .js .clip-head > b, .js .clip-head > em { clip-path: none !important; }
  .rv { opacity: 1; transform: none; }
  .link-arrow:hover, a:hover > .link-arrow { animation: none; }
}

/* the brand dot is the camera's tally light: it breathes while you are on the page */
.brand .rec-dot { animation: tally 2.4s ease-in-out infinite; }
@keyframes tally { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
/* channels and cards: a hairline playhead runs across on hover */
.channels a { position: relative; overflow: hidden; }
.channels a::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 1.5px; background: var(--rec); opacity: 0; transform: translateX(-4px); }
.channels a:hover::after { animation: chan-run 0.6s cubic-bezier(0.5, 0, 0.2, 1); }
@keyframes chan-run { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(var(--w, 140px)); } }
@media (prefers-reduced-motion: reduce) { .brand .rec-dot, .channels a:hover::after { animation: none; } }

/* «Детальніше» → the direction page: tinted with the current direction so it reads as a way in, not a footnote */
.fm-more .more-btn { border-color: color-mix(in oklab, var(--dir, var(--text)) 70%, transparent);
  background: color-mix(in oklab, var(--dir, var(--surface)) 24%, transparent); color: var(--text); font-weight: 600;
  transition: background 0.3s, border-color 0.3s, transform 0.35s var(--ease-out); }
.fm-more .more-btn:hover, .fm-more .more-btn:focus-visible { background: color-mix(in oklab, var(--dir, var(--surface)) 48%, transparent); border-color: var(--dir, var(--text)); }
.fm-more .more-btn svg { transition: transform 0.35s var(--ease-out); }
.fm-more .more-btn:hover svg { transform: translateX(3px); }