/* ===================================================================== 2. НОВИНКИ — по мотивам db-longbow. ПРОТОТИП: три композиции, ?layout=a|b|c (по умолчанию a, ставит скрипт в ). После выбора заказчика удалить блоки двух других вариантов и атрибут data-layout. Общее: гигантский заголовок по линиям, подпись секции «Hand-picked / View all» — sticky на всю высоту товаров (в C1; <1024 — строка под шапкой), движение longbow (буквы, маска ячейки, вход сумки). Фото сняты на ровном #EEEEEE, поэтому ячейка может быть любой пропорции: сумка вписана (contain), края кадра не видны. A «Журнальный разворот» — модуль ряда R (C2 в 4:5 = 2R). Товар-герой C2–C4 × 3R, крошечный товар в C5 рядом, дальше ступенька разных масштабов (1R · 2R · 3R, 1–2 колонки), пустые ячейки — паузы. Подпись висит под фото в следующем ряду. B «Галерея» — секция закрепляется, вертикальная прокрутка ведёт ленту влево (CSS scroll-driven, без JS). Ширины карточек = колонки C2 · C4 · C3, шаг = C3; первый кадр стоит ровно на линиях L2–L3 и L4–L5. C «Один за другим» — 6 кадров (7-й и 8-й — в каталоге по View all): фото в разных колонках от кадра к кадру, номер и бренд набраны крупно, подпись кадра держится (sticky), пока фото проезжает. ===================================================================== */ .vm-new { container-type: inline-size; isolation: isolate; overflow-x: clip; --line: rgb(22 22 21 / .11); --W: calc(100cqi - 2 * var(--margin)); --u: calc(var(--W) / 1801); --R: round(calc(var(--u) * 306.875), 1px); /* ряд модуля A: C2 (491) в 4:5 = 2 ряда */ --e-p2o: cubic-bezier(.33, 1, .68, 1); /* GSAP power2.out */ --e-p2io: cubic-bezier(.645, .045, .355, 1); } /* GSAP power2.inOut */ .vm-new__lines { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .vm-new__lines i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); } .vm-new__lines i:nth-child(1) { left: calc(var(--margin) - 1px); } .vm-new__lines i:nth-child(2) { left: calc(var(--L2) - 1px); } .vm-new__lines i:nth-child(3) { left: calc(var(--L3) - 1px); } .vm-new__lines i:nth-child(4) { left: calc(var(--L4) - 1px); } .vm-new__lines i:nth-child(5) { left: calc(var(--L5) - 1px); } .vm-new__lines i:nth-child(6) { left: calc(100% - var(--margin) - 1px); } /* Заголовок: кегль = (L6 − L3) / ширину чернил COLLECTION (3,714 em при wdth 75, трекинг −0,04 em; canvas + пиксельный скан). EXPLORE от L1, NEW от L4, COLLECTION от L3 до L6; сдвиг на левый пробел глифа (E, N .0725 em; C .041 em) */ .vm-new__title { display: grid; grid-template-columns: var(--cols); padding-inline: var(--margin); margin-bottom: var(--sp-72); font-weight: 400; font-stretch: 75%; font-size: calc(var(--W) * 1018 / 1801 / 3.714); line-height: .8; letter-spacing: var(--tr-display); } /* 27.09: «Available now» (copy-v2 §5) в одну строку — AVAILABLE от L1, NOW чернилами в L6 (сдвиг на боковые пробелы A .02 em, чернила W выходят за рамку слова на .008 em — canvas, wdth 75). Кегль прежний; строка вместо двух — секция короче на ~160 px */ .vm-new__w { display: block; white-space: nowrap; } .vm-new__w--1 { grid-area: 1 / 1 / 2 / 4; margin-left: -.02em; } .vm-new__w--2 { grid-area: 1 / 4 / 2 / 6; justify-self: end; margin-right: .008em; } .vm-new__w .c { display: inline-block; } /* Подпись и товары — в одной области грида: sticky-подпись ограничена своей областью, так она держится до конца товаров */ .vm-new__body { display: grid; grid-template-columns: var(--cols); padding-inline: var(--margin); } .vm-new__side { grid-area: 1 / 1 / 2 / 2; align-self: start; position: sticky; z-index: 2; top: calc(var(--head-h) + var(--sp-12)); padding: var(--sp-12) var(--sp-12) 0 0; } .vm-new__side .vm-link { margin-top: var(--sp-12); } .still .vm-new__side { position: static; } .vm-new__list { grid-area: 1 / 2 / 2 / -1; position: relative; counter-reset: vm-no; } .vm-new__item { position: relative; min-width: 0; counter-increment: vm-no; } .vm-new__item .vm-card__a { display: block; height: 100%; scroll-margin-top: var(--head-h); } .vm-new__item .vm-card__a:focus-visible { outline-offset: -2px; border-radius: 0; } .vm-new__media { position: relative; overflow: hidden; background: var(--c-card); } .vm-new__pic { position: absolute; inset: 0; } .vm-new__item .vm-card__info { display: block; margin: 0; padding: var(--sp-12) var(--sp-12) var(--sp-24); } .vm-new__item .vm-price { text-align: left; margin-top: var(--sp-8); } .vm-card__cond { margin-top: var(--sp-8); font-size: 12px; line-height: 1.25; letter-spacing: 0; color: var(--c-ink-2); } /* состояние: тег Condition товара, аудит 25.09 */ .vm-new__item .vm-badge { display: block; margin-top: var(--sp-8); } /* «Sold out» строкой, если товар распродан */ /* Номер образа 01–08 (B, C): счётчик, для чтения с экрана скрыт (alt-текст "") */ [data-layout="b"] .vm-new__item .vm-card__info::before, [data-layout="c"] .vm-new__item .vm-card__info::before { content: counter(vm-no, decimal-leading-zero) / ""; display: block; margin-bottom: var(--sp-12); font-stretch: 75%; font-size: var(--fs-h1); line-height: .8; letter-spacing: var(--tr-display); } /* ═════════ A — «Журнальный разворот» (≥1024) ═════════ Треки списка: 1 = C2, 2 = C3, 3 = C4, 4 = C5. Ряды R. [ряд-начало / кол / ряд-конец / кол] Правка заказчика 25.09 («miu miu прям маленькая», «Алая справа обделена»): фото не уже C2 (491 из 1801), узкие C3 и C5 поодиночке не используются. Разворот: герой Fendi C2–C4 × 3R, Alaïa ступенькой ниже и правее C4–C5 × 2R (восток-запад, горизонтальная сумка), дальше C2 × 2R · C3–C4 × 3R · C2 × 2R · C4–C5 × 2R · C2–C3 × 3R · C4 × 2R — масштаб 2R/3R и колонки чередуются, ряды сдвинуты, пустые ячейки — паузы */ @media (min-width: 1024px) { [data-layout="a"] .vm-new__list { display: grid; grid-template-columns: subgrid; grid-template-rows: repeat(16, var(--R)); } [data-layout="a"] .vm-new__list::before { content: ""; position: absolute; z-index: -1; top: -1px; bottom: 0; left: -100vw; right: -100vw; background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--R)); } [data-layout="a"] .vm-new__item { margin: 0 1px 1px 0; } [data-layout="a"] .vm-new__media { height: 100%; } [data-layout="a"] .vm-new__item .vm-card__info { position: absolute; top: calc(100% + 1px); left: 0; right: 0; } [data-layout="a"] .vm-new__item:nth-child(1) { grid-area: 1 / 1 / 4 / 4; } [data-layout="a"] .vm-new__item:nth-child(1) .vm-card__info { right: auto; width: calc(var(--u) * 491); } [data-layout="a"] .vm-new__item:nth-child(2) { grid-area: 4 / 3 / 6 / 5; } /* Alaïa: ступенька под героем, C4–C5 */ [data-layout="a"] .vm-new__item:nth-child(3) { grid-area: 5 / 1 / 7 / 2; } /* C2 × 2R, под подписью героя */ [data-layout="a"] .vm-new__item:nth-child(4) { grid-area: 7 / 2 / 10 / 4; } /* Miu Miu: второй крупный, C3–C4 × 3R */ [data-layout="a"] .vm-new__item:nth-child(5) { grid-area: 9 / 1 / 11 / 2; } /* C2 × 2R, на ряд ниже верха Miu Miu */ [data-layout="a"] .vm-new__item:nth-child(6) { grid-area: 11 / 3 / 13 / 5; } /* C4–C5 × 2R */ [data-layout="a"] .vm-new__item:nth-child(7) { grid-area: 12 / 1 / 15 / 3; } /* C2–C3 × 3R */ [data-layout="a"] .vm-new__item:nth-child(8) { grid-area: 14 / 3 / 16 / 4; } /* C4 × 2R */ [data-layout="a"] .vm-new__item:nth-child(2) { --d: 120ms; } } /* ═════════ B — «Галерея» ═════════ Лента: ширины C2 · C4 · C3 по кругу, шаг C3 (234). Первый кадр: 1-я карточка L2–L3, 2-я L4–L5, 3-я выглядывает за L6. Путь ленты = сумма ширин и шагов − (L6 − L2) = 5436 − 1509 = 3927 единиц сетки; последняя карточка приезжает к L6. Нечётные — по верхней линии, подпись под фото; чётные — по нижней, подпись над фото. */ [data-layout="b"] .vm-new { --travel: calc(var(--u) * 3927); } [data-layout="b"] .vm-new__list { display: flex; align-items: flex-start; gap: calc(var(--u) * 234); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--margin)); padding-right: var(--margin); } [data-layout="b"] .vm-new__list::-webkit-scrollbar { display: none; } [data-layout="b"] .vm-new__item { flex: none; width: calc(var(--u) * 491); scroll-snap-align: start; } [data-layout="b"] .vm-new__item:nth-child(3n+2) { width: calc(var(--u) * 619); } [data-layout="b"] .vm-new__item:nth-child(3n) { width: calc(var(--u) * 234); } [data-layout="b"] .vm-new__item:nth-child(even) { align-self: flex-end; } [data-layout="b"] .vm-new__item:nth-child(even) .vm-card__a { display: flex; flex-direction: column-reverse; } [data-layout="b"] .vm-new__media { aspect-ratio: 4 / 5; max-height: calc(100svh - var(--head-h) - 300px); width: 100%; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) { html[data-layout="b"]:not(.still) .vm-new__body { grid-template-rows: calc(100svh + var(--travel)); view-timeline: --vm-gal block; } html[data-layout="b"]:not(.still) .vm-new__list { position: sticky; top: 0; align-self: start; height: 100svh; overflow: clip; padding-top: calc(var(--head-h) + var(--sp-24)); padding-bottom: var(--sp-24); scroll-snap-type: none; } html[data-layout="b"]:not(.still) .vm-new__item { animation: vm-gal linear both; animation-timeline: --vm-gal; animation-range: contain 0% contain 100%; } } } @keyframes vm-gal { to { transform: translateX(calc(-1 * var(--travel))); } } /* ═════════ C — «Один за другим» (≥1024) ═════════ Кадр = ряд во всю ширину товаров, линия сверху во всю ширину экрана. Фото / подпись по кадрам: 1 C2 / C4–C5 · 2 C4 / C2 · 3 C2–C3 / C4–C5 · 4 C3–C4 / C2 · 5 C4–C5 / C2–C3 · 6 C2 / C3–C4. Подпись держится, пока фото проезжает. Фото не уже C2 (правка заказчика: «miu miu прям маленькая» — была одна C3, ≈170 px на 1440). */ [data-layout="c"] .vm-new__item:nth-child(n+7) { display: none; } @media (min-width: 1024px) { [data-layout="c"] .vm-new__list { display: grid; grid-template-columns: subgrid; } [data-layout="c"] .vm-new__item { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding-bottom: var(--sp-72); } .still[data-layout="c"] .vm-new__item .vm-card__info { position: relative; top: auto; } [data-layout="c"] .vm-new__item::before { content: ""; position: absolute; top: -1px; left: -100vw; right: -100vw; height: 1px; background: var(--line); } [data-layout="c"] .vm-new__item .vm-card__a { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; } [data-layout="c"] .vm-new__media { grid-row: 1; aspect-ratio: 4 / 5; margin-right: 1px; } [data-layout="c"] .vm-new__item .vm-card__info { grid-row: 1; align-self: start; position: sticky; top: calc(var(--head-h) + var(--sp-12)); } [data-layout="c"] .vm-new__item .vm-card__info::before { font-size: calc(var(--u) * 150); color: var(--c-ink-2); margin-bottom: var(--sp-24); } [data-layout="c"] .vm-new__item .vm-card__brand { font-stretch: 75%; font-size: calc(var(--u) * 150); line-height: .8; letter-spacing: var(--tr-display); margin-bottom: var(--sp-24); white-space: nowrap; } [data-layout="c"] .vm-new__item:nth-child(1) .vm-new__media { grid-column: 1 / 2; } [data-layout="c"] .vm-new__item:nth-child(1) .vm-card__info { grid-column: 3 / 5; } [data-layout="c"] .vm-new__item:nth-child(2) .vm-new__media { grid-column: 3 / 4; } [data-layout="c"] .vm-new__item:nth-child(2) .vm-card__info { grid-column: 1 / 2; } [data-layout="c"] .vm-new__item:nth-child(3) .vm-new__media { grid-column: 1 / 3; } [data-layout="c"] .vm-new__item:nth-child(3) .vm-card__info { grid-column: 3 / 5; } [data-layout="c"] .vm-new__item:nth-child(4) .vm-new__media { grid-column: 2 / 4; } [data-layout="c"] .vm-new__item:nth-child(4) .vm-card__info { grid-column: 1 / 2; } [data-layout="c"] .vm-new__item:nth-child(5) .vm-new__media { grid-column: 3 / 5; } [data-layout="c"] .vm-new__item:nth-child(5) .vm-card__info { grid-column: 1 / 3; } [data-layout="c"] .vm-new__item:nth-child(6) .vm-new__media { grid-column: 1 / 2; } [data-layout="c"] .vm-new__item:nth-child(6) .vm-card__info { grid-column: 2 / 4; } [data-layout="c"] .vm-new__item .vm-card__info { --d: 160ms; } } /* ═════════ <1024: сетка секции — 2 колонки по 50 % (линии: поле, середина, поле), заголовок в 3 строки, подпись секции — sticky-строка под шапкой цветом бумаги, товары проезжают под ней ═════════ */ @media (max-width: 1023px) { .vm-new { --cols: repeat(2, minmax(0, 1fr)); --L3: 50%; } .vm-new__lines i:nth-child(2), .vm-new__lines i:nth-child(4), .vm-new__lines i:nth-child(5) { display: none; } .vm-new__title { font-size: calc(var(--W) / 3.714); margin-bottom: var(--sp-48); } .vm-new__w--1 { grid-area: 1 / 1 / 2 / 3; } .vm-new__w--2 { grid-area: 2 / 2 / 3 / 3; justify-self: start; margin: 0 0 0 -.065em; } .vm-new__side { grid-area: 1 / 1 / 2 / -1; top: var(--head-h); display: flex; justify-content: space-between; align-items: center; margin: 0 calc(-1 * var(--margin)); padding: 0 var(--margin); background: var(--paper); box-shadow: inset 0 -1px 0 var(--line); } .vm-new__side .vm-link { margin-top: 0; } .vm-new__list { grid-area: 1 / 1 / 2 / -1; margin-top: 44px; } .vm-new__media { aspect-ratio: 4 / 5; } /* подпись на бумаге: линия L3 (x = 195 на 390) идёт по фото и швам пар, но не по тексту широких карточек */ .vm-new__item .vm-card__info { background: var(--paper); } .vm-new__item .vm-card__name { -webkit-line-clamp: 3; line-clamp: 3; } /* колонка пары 150 px: модель дочитывается */ /* A: целый · пара · целый · пара · целый · целый — строки по линиям */ [data-layout="a"] .vm-new__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-layout="a"] .vm-new__item { margin-right: 1px; } [data-layout="a"] .vm-new__item::before { content: ""; position: absolute; top: -1px; left: 0; right: -1px; height: 1px; background: var(--line); } [data-layout="a"] .vm-new__item:is(:nth-child(1), :nth-child(4), :nth-child(7), :nth-child(8)) { grid-column: 1 / -1; } [data-layout="a"] .vm-new__item:is(:nth-child(4), :nth-child(8)) .vm-new__media { aspect-ratio: 5 / 4; } /* B: нативная лента со scroll-snap, карточки 72 % / 48 % ширины, по верхней и нижней линии */ [data-layout="b"] .vm-new__list { gap: 20px; margin-left: calc(-1 * var(--margin)); padding-left: var(--margin); scroll-padding-inline: var(--margin); padding-top: var(--sp-24); } [data-layout="b"] .vm-new__item:nth-child(n) { width: calc(var(--W) * .72); } [data-layout="b"] .vm-new__item:nth-child(even) { width: calc(var(--W) * .48); } [data-layout="b"] .vm-new__media { max-height: none; } /* C: кадры друг под другом, фото всегда во всю ширину (не миниатюра); ритм — 4:5 и 5:4 по очереди */ [data-layout="c"] .vm-new__item { padding-bottom: var(--sp-48); } [data-layout="c"] .vm-new__item::before { content: ""; position: absolute; top: -1px; left: calc(-1 * var(--margin)); right: calc(-1 * var(--margin)); height: 1px; background: var(--line); } [data-layout="c"] .vm-new__item:nth-child(even) .vm-new__media { aspect-ratio: 5 / 4; } [data-layout="c"] .vm-new__item .vm-card__info::before, [data-layout="c"] .vm-new__item .vm-card__brand { font-stretch: 75%; font-size: calc(var(--W) * .12); line-height: .8; letter-spacing: var(--tr-display); } [data-layout="c"] .vm-new__item .vm-card__info::before { color: var(--c-ink-2); } [data-layout="c"] .vm-new__item .vm-card__brand { margin-bottom: var(--sp-12); } } /* ═════════ Раскрытие ячейки: направление от места карточки в композиции, фиксировано (не случайно), у соседей разное. Три типа маски на секцию: шторка по горизонтали (слева / справа / из центральной вертикали), шторка по вертикали (сверху / снизу), из центра (раскрывается от середины во все стороны). Задано в CSS по вариантам, а не атрибутом: одна и та же карточка стоит в A, B и C в разных местах; после выбора варианта можно перенести в разметку. ═════════ */ .vm-new__item { --m-pos: 0 0; --m-size: 0% 101%; } /* по умолчанию: от левой линии */ [data-layout="a"] .vm-new__item:nth-child(1) { --m-pos: 50% 0; --m-size: 0% 101%; } /* герой: из центральной вертикали */ [data-layout="a"] .vm-new__item:nth-child(2) { --m-pos: 100% 0; --m-size: 0% 101%; } /* крошка у L6: справа */ [data-layout="a"] .vm-new__item:nth-child(3) { --m-pos: 0 0; --m-size: 101% 0%; } /* под подписью героя: сверху */ [data-layout="a"] .vm-new__item:nth-child(4) { --m-pos: 50% 50%; --m-size: 0% 0%; } /* второй крупный: из центра */ [data-layout="a"] .vm-new__item:nth-child(5) { --m-pos: 0 100%; --m-size: 101% 0%; } /* у L2: снизу вверх */ [data-layout="a"] .vm-new__item:nth-child(6) { --m-pos: 100% 0; --m-size: 0% 101%; } /* у L6: справа */ [data-layout="a"] .vm-new__item:nth-child(7) { --m-pos: 0 0; --m-size: 0% 101%; } /* у L2: слева */ [data-layout="a"] .vm-new__item:nth-child(8) { --m-pos: 0 0; --m-size: 101% 0%; } /* сверху */ /* B: карточки у верхней линии — сверху, у нижней — снизу, узкие C3 — из центра */ [data-layout="b"] .vm-new__item:nth-child(odd) { --m-pos: 0 0; --m-size: 101% 0%; } [data-layout="b"] .vm-new__item:nth-child(even) { --m-pos: 0 100%; --m-size: 101% 0%; } [data-layout="b"] .vm-new__item:nth-child(3n) { --m-pos: 50% 50%; --m-size: 0% 0%; } /* C: фото у левой линии — слева, у правой — справа, двойная колонка — из центральной вертикали, крошка C3 — из центра */ [data-layout="c"] .vm-new__item:nth-child(1) { --m-pos: 0 0; --m-size: 0% 101%; } [data-layout="c"] .vm-new__item:nth-child(2) { --m-pos: 100% 0; --m-size: 0% 101%; } [data-layout="c"] .vm-new__item:nth-child(3) { --m-pos: 50% 0; --m-size: 0% 101%; } [data-layout="c"] .vm-new__item:nth-child(4) { --m-pos: 50% 50%; --m-size: 0% 0%; } [data-layout="c"] .vm-new__item:nth-child(5) { --m-pos: 100% 0; --m-size: 0% 101%; } [data-layout="c"] .vm-new__item:nth-child(6) { --m-pos: 0 0; --m-size: 0% 101%; } @media (max-width: 1023px) { /* A телефон: целые — из центральной вертикали / из центра, в паре левая — слева, правая — справа */ [data-layout="a"] .vm-new__item:nth-child(1), [data-layout="a"] .vm-new__item:nth-child(7) { --m-pos: 50% 0; --m-size: 0% 101%; } [data-layout="a"] .vm-new__item:nth-child(4), [data-layout="a"] .vm-new__item:nth-child(8) { --m-pos: 50% 50%; --m-size: 0% 0%; } [data-layout="a"] .vm-new__item:nth-child(2), [data-layout="a"] .vm-new__item:nth-child(5) { --m-pos: 0 0; --m-size: 0% 101%; } [data-layout="a"] .vm-new__item:nth-child(3), [data-layout="a"] .vm-new__item:nth-child(6) { --m-pos: 100% 0; --m-size: 0% 101%; } /* C телефон: целые — из центральной вертикали и из центра по очереди, половинки справа — справа */ [data-layout="c"] .vm-new__item:nth-child(4n+1) { --m-pos: 50% 0; --m-size: 0% 101%; } [data-layout="c"] .vm-new__item:nth-child(4n+3) { --m-pos: 50% 50%; --m-size: 0% 0%; } [data-layout="c"] .vm-new__item:nth-child(even) { --m-pos: 100% 0; --m-size: 0% 101%; } } /* ═════════ Движение по коду longbow. Только при .rv (не ?still) и без reduced motion — иначе всё видно сразу. Буквы заголовка: y 150 % → 0, rotate 1° → 0, opacity 0 → 1, 500 мс power2.out, шаг 50 мс. Ячейка фото: маска 0 → 101 % из левого нижнего угла, opacity, 1250 мс ease-in-out. Сумка: opacity 0, y 50 px, scale .85 → 1, 1200 мс power2.inOut; подпись — то же без scale. IO 0,5, один раз. ═════════ */ @media (prefers-reduced-motion: no-preference) { .rv .vm-new__w .c { opacity: 0; transform: translateY(150%) rotate(1deg); transform-origin: 50% 100%; } .rv .vm-new__w.is-in .c { opacity: 1; transform: none; transition: transform 500ms var(--e-p2o), opacity 500ms var(--e-p2o); transition-delay: calc(var(--i) * 50ms); } .rv .vm-new__media { opacity: 0; -webkit-mask: linear-gradient(#000, #000) var(--m-pos, 0 0) / var(--m-size, 0% 101%) no-repeat; mask: linear-gradient(#000, #000) var(--m-pos, 0 0) / var(--m-size, 0% 101%) no-repeat; } .rv .vm-new__pic { opacity: 0; transform: translateY(50px) scale(.85); } .rv .vm-new__item .vm-card__info { opacity: 0; translate: 0 50px; } .rv .vm-new__item.is-in .vm-new__media { opacity: 1; -webkit-mask-size: 101% 101%; mask-size: 101% 101%; transition: -webkit-mask-size 1250ms ease-in-out, mask-size 1250ms ease-in-out, opacity 1250ms ease-in-out; transition-delay: var(--d, 0ms); } .rv .vm-new__item.is-in .vm-new__pic, .rv .vm-new__item.is-in .vm-card__info { opacity: 1; transform: none; translate: none; transition: opacity 1200ms var(--e-p2io), transform 1200ms var(--e-p2io), translate 1200ms var(--e-p2io); transition-delay: var(--d, 0ms); } }