/* ==========================================================================
   Головна — герой-«стрічка», студія, роботи, власні продукти, напрямки, статті
   ========================================================================== */

/* ---------- герой ---------- */
.hero { padding-top: calc(var(--hdr) + clamp(28px, 5vw, 72px)); }
.hero__row { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px 48px; align-items: end; }
.hero__title { font-size: var(--fs-hero); font-weight: 500; letter-spacing: -.058em; line-height: .88; max-width: 15.5ch; }
.hero__aside { display: grid; gap: 22px; justify-items: start; padding-bottom: .6vw; color: var(--muted); font-size: 17px; }
@media (max-width: 1199.98px) { .hero__row { grid-template-columns: 1fr; } .hero__aside { grid-template-columns: 1fr auto; align-items: center; max-width: 640px; } }
@media (max-width: 809.98px) { .hero__aside { grid-template-columns: 1fr; } }
.hero__title em { letter-spacing: -.03em; }

.reel { margin-top: clamp(28px, 4.5vw, 64px); aspect-ratio: 2.39 / 1; background: var(--ink); color: #fff; }
.reel__slides, .reel__slide { position: absolute; inset: 0; }
.reel__slide { opacity: 0; transition: opacity 1.2s var(--ease); }
.reel__slide.is-on { opacity: 1; }
.reel__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s linear; }
.reel__slide.is-on img { transform: scale(1); }
.reel::after { z-index: 3; }
.reel__slides::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, transparent 55%, rgba(0,0,0,.55)); }
.reel__hud { position: absolute; z-index: 4; inset: 0 0 auto; display: flex; gap: 24px; align-items: center; padding: 18px 42px; }
.reel__rec { display: inline-flex; align-items: center; gap: 8px; }
.reel__tc { font-variant-numeric: tabular-nums; }
.reel__scene { margin-left: auto; opacity: .8; }
.reel__foot { position: absolute; z-index: 4; inset: auto 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 0 42px 30px; }
.reel__play { display: inline-flex; align-items: center; gap: 16px; }
.reel__play-btn { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--ink);
  transition: transform .5s var(--ease), background-color .3s, color .3s; }
.reel__play-btn svg { width: 14px; height: 16px; margin-left: 3px; }
.reel__play:hover .reel__play-btn { transform: scale(1.08); background: var(--rec); color: #fff; }
.reel__play-text { display: grid; gap: 2px; }
.reel__play-text .mono { opacity: .75; }
.reel__play-text strong { font-size: clamp(18px, 1.8vw, 26px); font-weight: 500; letter-spacing: -.02em; }
.reel__dots { display: flex; gap: 8px; }
.reel__dot { width: 46px; height: 24px; display: grid; align-items: center; }
.reel__dot i { display: block; height: 2px; background: rgba(255,255,255,.35); position: relative; overflow: hidden; }
.reel__dot i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.reel__dot.is-on i::after { animation: dot var(--slide, 6s) linear forwards; }
.reel__dot.is-done i::after { transform: none; }
@keyframes dot { to { transform: none; } }

/* цифри: три колонки по центру, число зверху, підпис зі знаком під ним */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(28px, 4vw, 56px); border-top: 1px solid var(--line); }
.fact { display: grid; justify-items: center; align-content: start; gap: 14px; padding: clamp(24px, 3vw, 40px) 16px 0; text-align: center; }
.fact + .fact { border-left: 1px solid var(--line); }
.fact dd { font-size: clamp(56px, 7vw, 128px); font-weight: 500; letter-spacing: -.06em; line-height: .9; font-variant-numeric: tabular-nums; }
.fact dt { display: flex; gap: 10px; align-items: baseline; font-size: 13px; font-weight: 500; letter-spacing: .01em; text-transform: uppercase; }
.fact dt span { color: var(--muted); }
@media (max-width: 1199.98px) { .fact dt { flex-direction: column; align-items: center; gap: 4px; } }

@media (max-width: 1199.98px) {
  .reel { aspect-ratio: 16 / 9; }
  .reel__hud { padding: 16px 30px 16px 42px; }
  .reel__foot { padding: 0 30px 24px; }
}
@media (max-width: 809.98px) {
  .reel { aspect-ratio: 4 / 5; }
  .reel__hud { padding: 14px 18px 14px 38px; gap: 14px; }
  .reel__scene { display: none; }
  .reel__foot { padding: 0 18px 18px; flex-direction: column; align-items: flex-start; }
  .reel__play-btn { width: 54px; height: 54px; }
  .fact { padding: 20px 6px 0; gap: 10px; }
  .fact dt { flex-direction: column; gap: 4px; font-size: 11px; }
}

/* ---------- студія ---------- */
.studio-intro { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px var(--gap); padding-top: clamp(100px, 14vw, 220px); padding-bottom: clamp(100px, 14vw, 220px); }
.studio-intro .sline { grid-column: 1 / -1; }
.studio-intro__text { grid-column: 1 / 12; font-size: var(--fs-lead); font-weight: 500; letter-spacing: -.04em; line-height: 1.08; }
.studio-intro__text .w { opacity: .14; transition: opacity .25s linear; }
.studio-intro__text .w.on { opacity: 1; }
.studio-intro__aside { grid-column: 8 / 13; display: grid; gap: 18px; justify-items: start; font-size: 18px; color: var(--muted); }
@media (max-width: 809.98px) {
  .studio-intro__text, .studio-intro__aside { grid-column: 1 / -1; }
}

/* ---------- роботи: рівні ряди «широка + вузька», однакова висота кадрів у ряду ---------- */
.works__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(48px, 5vw, 80px) var(--gap); }
.wcard { grid-column: span 5; }
.wcard--big { grid-column: span 7; }
.works__grid .wcard__media { aspect-ratio: 8 / 7; }
.works__grid .wcard--big .wcard__media { aspect-ratio: 16 / 10; }
@media (max-width: 809.98px) {
  .works__grid { grid-template-columns: 1fr; gap: 36px; }
  .wcard, .wcard--big { grid-column: 1 / -1; }
  .works__grid .wcard__media, .works__grid .wcard--big .wcard__media { aspect-ratio: 4 / 3; }
}

/* ---------- власні продукти ---------- */
.products { background: var(--ink); color: var(--on-ink); margin-top: clamp(120px, 16vw, 240px); padding: clamp(100px, 13vw, 200px) 0; }
.prods { border-top: 1px solid var(--on-ink-line); }
.prod { border-bottom: 1px solid var(--on-ink-line); }
.prod__link { position: relative; display: grid; grid-template-columns: 90px 1.1fr 1.3fr 170px 40px; gap: 24px; align-items: center;
  padding: clamp(24px, 3vw, 44px) 0; }
.prod__num { color: var(--on-ink-muted); }
.prod__name { font-size: clamp(42px, 6vw, 104px); font-weight: 500; letter-spacing: -.055em; line-height: .95; transition: transform .6s var(--ease); }
.prod__text { color: var(--on-ink-muted); font-size: 17px; max-width: 38ch; }
.prod__status { display: inline-flex; align-items: center; gap: 8px; color: var(--on-ink-muted); }
.prod__status.is-live { color: var(--on-ink); }
.prod__status .rec:not(.rec--on) { background: transparent; border: 1px solid var(--on-ink-muted); }
.prod__go { width: 30px; height: 30px; justify-self: end; transition: transform .5s var(--ease), color .3s; }
.prod__go svg { width: 100%; height: 100%; }
@media (hover: hover) { .prod__link:hover .prod__name { transform: translateX(16px); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.03em; } }
.prod__link.is-tap .prod__name { transform: translateX(16px); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.03em; }
@media (hover: hover) { a.prod__link:hover .prod__go { transform: rotate(45deg); color: var(--rec); } }
a.prod__link.is-tap .prod__go { transform: rotate(45deg); color: var(--rec); }
/* прев'ю йде за курсором (координати відносно рядка задає site.js) */
.prod__img { position: absolute; left: 0; top: 0; width: 300px; aspect-ratio: 4 / 3; overflow: hidden; pointer-events: none; z-index: 2;
  opacity: 0; transform: translate3d(var(--x, 60%), var(--y, 50%), 0) translate(var(--dx, 24px), -50%) rotate(-3deg) scale(.9);
  transition: opacity .35s, transform .2s linear; }
.prod__img img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .prod__link:hover .prod__img { opacity: 1; transform: translate3d(var(--x, 60%), var(--y, 50%), 0) translate(var(--dx, 24px), -50%) rotate(-3deg) scale(1); } }
.prod__link.is-tap .prod__img { opacity: 1; transform: translate3d(var(--x, 60%), var(--y, 50%), 0) translate(var(--dx, 24px), -50%) rotate(-3deg) scale(1); }
.prod__img svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.prod__img--pulse { background: var(--blue); color: #fff; }
.prod__img--voice { background: var(--paper); color: var(--ink); }
.prod__cap { position: absolute; left: 14px; bottom: 12px; font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; opacity: .75; }
.prod__img--pulse .prod__cap { opacity: .85; }
.art-ecg { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
@media (hover: hover) { .prod__link:hover .art-ecg { animation: ecg 2.2s linear infinite; } }
.prod__link.is-tap .art-ecg { animation: ecg 2.2s linear infinite; }
@keyframes ecg { 0% { stroke-dashoffset: 1000; } 60%, 100% { stroke-dashoffset: 0; } }
.art-bar { transform-box: fill-box; transform-origin: center; transform: scaleY(.35); transition: transform .5s var(--ease); }
@media (hover: hover) { .prod__link:hover .art-bar { animation: vbar .9s ease-in-out calc(var(--i) * -.13s) infinite alternate; } }
.prod__link.is-tap .art-bar { animation: vbar .9s ease-in-out calc(var(--i) * -.13s) infinite alternate; }
@keyframes vbar { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .art-ecg { stroke-dashoffset: 0; } .prod__link:is(:hover, .is-tap) .art-ecg, .prod__link:is(:hover, .is-tap) .art-bar { animation: none; }
  .art-bar { transform: none; }
}
@media (max-width: 1199.98px) {
  .prod__link { grid-template-columns: 60px 1fr 140px 30px; }
  .prod__text { grid-column: 2 / -1; grid-row: 2; }
  .prod__img { display: none; }
}
@media (max-width: 809.98px) {
  .prod__link { grid-template-columns: 1fr 28px; gap: 10px 14px; }
  .prod__num { grid-column: 1 / -1; }
  .prod__name { grid-column: 1; }
  .prod__go { grid-column: 2; grid-row: 2; }
  .prod__text, .prod__status { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------- напрямки ---------- */
.caps { padding-top: clamp(110px, 14vw, 220px); }
.caps__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.cap { display: grid; align-content: start; gap: 18px; padding: 26px 26px 34px 0; }
.cap + .cap { padding-left: 26px; border-left: 1px solid var(--line); }
.cap__num { color: var(--rec); }
.cap__title { font-size: clamp(36px, 3.8vw, 64px); font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.cap__text { color: var(--muted); font-size: 17px; max-width: 34ch; }
.cap__list { display: grid; margin-top: 10px; border-top: 1px solid var(--line); color: var(--ink); }
.cap__list li { padding: 11px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; }
.cap__list li::before { content: "+"; color: var(--muted); }
@media (max-width: 1199.98px) {
  .caps__grid { grid-template-columns: 1fr; }
  .cap, .cap + .cap { padding: 28px 0 36px; border-left: 0; }
  .cap + .cap { border-top: 1px solid var(--line); }
  .cap { grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
  .cap__num, .cap__title { grid-column: 1 / -1; }
  .cap__list { margin-top: 0; }
}
@media (max-width: 809.98px) { .cap { grid-template-columns: 1fr; } }

/* ---------- статті ---------- */
.journal { padding-top: clamp(110px, 14vw, 220px); }