/* NITRAS motion system (motion.js): the slash page wipe, the header, split headlines, readouts, slash-wipe image
   reveals, staggered arrivals, marquees, rails, the cursor, the film morph, add to bag. Everything here is switched off
   under prefers-reduced-motion. Angles follow the NITRAS slash: 115°, i.e. a 25° lean. */
:root { --slash: 20%; --ease-io: cubic-bezier(.7, 0, .2, 1); }

/* ---------- page transitions: the next page slides in behind a red slash (cross-document view transitions) ---------- */
/* navigations carry the type "nav" (CSS only, so it cannot race the scripts); motion.js also sets .vt-nav for browsers
   without types. The film morph is a same-document transition without the type, so it never wipes. */
@view-transition { navigation: auto; types: nav; }
.head { view-transition-name: nx-head; }
.bag, .drawer-menu { view-transition-name: none; }
html:active-view-transition-type(nav)::view-transition-old(root) { animation: nx-old .72s var(--ease-io) both; }
html:active-view-transition-type(nav)::view-transition-new(root) { animation: nx-new .72s var(--ease-io) both; }
html.vt-nav::view-transition-old(root) { animation: nx-old .72s var(--ease-io) both; }
html.vt-nav::view-transition-new(root) { animation: nx-new .72s var(--ease-io) both; }
@keyframes nx-old { to { transform: translateX(-8%) scale(.98); filter: brightness(.35); } }
@keyframes nx-new { from { clip-path: polygon(calc(100% + var(--slash)) 0, 140% 0, 140% 100%, 100% 100%); } to { clip-path: polygon(-10% 0, 140% 0, 140% 100%, calc(-10% - var(--slash)) 100%); } }
.nx-wipe { position: fixed; inset: 0; z-index: 200; pointer-events: none; display: none; background: var(--orange); }
html:active-view-transition-type(nav) .nx-wipe { display: block; animation: nx-band .72s var(--ease-io) both; }
html.vt-nav .nx-wipe { display: block; animation: nx-band .72s var(--ease-io) both; }
@keyframes nx-band {
  from { clip-path: polygon(calc(100% + var(--slash)) 0, calc(100% + var(--slash) + 7%) 0, calc(100% + 7%) 100%, 100% 100%); }
  to { clip-path: polygon(-10% 0, -3% 0, calc(-3% - var(--slash)) 100%, calc(-10% - var(--slash)) 100%); }
}
::view-transition-group(nx-head) { z-index: 6; }
/* the film card grows into the cinema */
::view-transition-group(nx-film) { animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); z-index: 10; }
::view-transition-old(nx-film), ::view-transition-new(nx-film) { height: 100%; object-fit: cover; }

/* ---------- header: away on the way down, back on the way up; the progress line ---------- */
.head { transition: transform .5s var(--ease-out), background var(--dur) var(--ease); }
.head.is-hidden { transform: translateY(calc(-100% - 2px)); }
.revline { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); background: var(--orange); box-shadow: 0 0 10px rgba(229, 39, 19, .7); }

/* ---------- headlines: words rise out of a mask ---------- */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .02em .06em; margin: -.08em -.02em -.06em; }
.split .wi { display: inline-block; transform: translate3d(0, 110%, 0) rotate(4deg); transform-origin: 0 100%; transition: transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms); }
.split.in .wi { transform: none; }
/* kickers: the slashes draw, then the words */
.kicker.ka::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease-out); }
.kicker.ka { clip-path: inset(0 100% 0 0); transition: clip-path .9s .1s var(--ease-out); }
.kicker.ka.in { clip-path: inset(0 -2% 0 0); }
.kicker.ka.in::before { transform: none; }

/* ---------- images: a slash wipe, then the picture settles ---------- */
.cu { clip-path: polygon(0 0, 0 0, calc(0% - var(--slash)) 100%, 0 100%); transition: clip-path 1.15s var(--ease-io) var(--d, 0s); }
.cu.in { clip-path: polygon(0 0, calc(100% + var(--slash)) 0, 100% 100%, 0 100%); }
.cu img, .cu video { scale: 1.16; transition: scale 1.8s var(--ease-out) var(--d, 0s), opacity .6s var(--ease); }
.cu.in img, .cu.in video { scale: 1; }
.cats__grid .cu:nth-child(4n+2) { --d: 80ms; } .cats__grid .cu:nth-child(4n+3) { --d: 160ms; } .cats__grid .cu:nth-child(4n) { --d: 240ms; }
.road .cu, .lab__imgs .cu:nth-child(2) { --d: 120ms; } .lab__imgs .cu:nth-child(3) { --d: 200ms; } .lab__imgs .cu:nth-child(4) { --d: 280ms; }

/* ---------- staggered arrivals ---------- */
/* translate, not transform: the rails' lean (transform) and hover lifts compose with it */
.st { opacity: 0; translate: 0 28px; transition: opacity .8s var(--ease-out) var(--d, 0s), translate .9s var(--ease-out) var(--d, 0s), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.st.in { opacity: 1; translate: none; }
.rise { transition-delay: var(--d, 0s); }

/* ---------- marquees ---------- */
.marquee { overflow: hidden; }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__track > * { flex: none; }

/* ---------- rails: lean with their speed, grab to drag ---------- */
.rail, .films__rail, .reels, .partners__rail { --lean: 0deg; }
.rail > *, .films__rail > *, .reels > *, .partners__rail > * { transform: skewX(var(--lean)); transition: transform .5s var(--ease-out), opacity .8s var(--ease-out) var(--d, 0s), translate .9s var(--ease-out) var(--d, 0s), box-shadow var(--dur) var(--ease); }
.rail > .card:hover { transform: skewX(var(--lean)) translateY(-4px); }
@media (hover: hover) and (pointer: fine) { .rail, .films__rail, .reels, .partners__rail { cursor: grab; } }
.is-drag { cursor: grabbing !important; scroll-snap-type: none !important; scroll-behavior: auto !important; user-select: none; }
.is-drag > * { pointer-events: none; }

/* ---------- cursor label ---------- */
.nxcur { position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; }
.nxcur span { position: absolute; left: -44px; top: -44px; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #fff; font: 800 14px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 10px 30px rgba(229, 39, 19, .45); transform: scale(0); opacity: 0; transition: transform .45s var(--ease-out), opacity .25s var(--ease); }
.nxcur.on span { transform: scale(1); opacity: 1; }

/* ---------- magnetic buttons ---------- */
.mag { translate: var(--bx, 0px) var(--by, 0px); transition: translate .5s var(--ease-out), transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.mag:hover { transition-duration: .15s, var(--dur), var(--dur); }

/* ---------- the cinema: fades and settles when there is no morph; always fades out ---------- */
.cinema { transition: opacity .35s var(--ease), scale .35s var(--ease-out), overlay .35s allow-discrete, display .35s allow-discrete; }
.cinema:not([open]) { opacity: 0; scale: .96; }
.cinema::backdrop { transition: opacity .35s var(--ease), overlay .35s allow-discrete, display .35s allow-discrete; }
.cinema:not([open])::backdrop { opacity: 0; }
.cinema.pop[open] { animation: cine-in .55s var(--ease-out); }
@keyframes cine-in { from { opacity: 0; scale: .92; translate: 0 24px; } }
.cinema[open] .cinema__shop a, .cinema[open] .cinema__list button { animation: cine-item .6s var(--ease-out) both; }
.cinema[open] .cinema__list button:nth-child(2), .cinema[open] .cinema__shop a:nth-of-type(2) { animation-delay: 60ms; }
.cinema[open] .cinema__list button:nth-child(3), .cinema[open] .cinema__shop a:nth-of-type(3) { animation-delay: 120ms; }
.cinema[open] .cinema__list button:nth-child(4) { animation-delay: 180ms; } .cinema[open] .cinema__list button:nth-child(5) { animation-delay: 240ms; }
.cinema[open] .cinema__list button:nth-child(n+6) { animation-delay: 300ms; }
@keyframes cine-item { from { opacity: 0; transform: translateY(12px); } }


/* ---------- drawers and overlays ---------- */
.bag.is-open .bag__item { animation: slide-in .55s var(--ease-out) both; }
.bag.is-open .bag__item:nth-child(2) { animation-delay: 50ms; } .bag.is-open .bag__item:nth-child(3) { animation-delay: 100ms; } .bag.is-open .bag__item:nth-child(4) { animation-delay: 150ms; } .bag.is-open .bag__item:nth-child(n+5) { animation-delay: 200ms; }
.drawer-menu.is-open > a { animation: slide-in .55s var(--ease-out) both; }
.drawer-menu.is-open > a:nth-of-type(2) { animation-delay: 40ms; } .drawer-menu.is-open > a:nth-of-type(3) { animation-delay: 80ms; } .drawer-menu.is-open > a:nth-of-type(4) { animation-delay: 120ms; } .drawer-menu.is-open > a:nth-of-type(5) { animation-delay: 160ms; } .drawer-menu.is-open > a:nth-of-type(n+6) { animation-delay: 200ms; }
@keyframes slide-in { from { opacity: 0; transform: translateX(28px); } }
.search.is-open .search__box { animation: drop .5s var(--ease-out) both; }
@keyframes drop { from { opacity: 0; transform: translateY(-18px) scale(.98); } }
.toast.is-on { transition-timing-function: cubic-bezier(.3, 1.4, .5, 1); }

/* ---------- confirmation: the tick draws ---------- */
.done .flagcheck { animation: pop-in .6s cubic-bezier(.3, 1.5, .5, 1) both; }
.done .flagcheck .icon path, .done .flagcheck .icon polyline { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .5s .35s var(--ease-out) forwards; }
@keyframes pop-in { from { transform: scale(.3); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- autoplay video ---------- */
video[data-autoplay] { background: #0a0a0a; }
.vid-wrap { position: relative; }
.vid-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.vid-wrap video.playing { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .nx-wipe { display: none !important; }
  .split .wi, .cu, .cu img, .cu video, .st, .kicker.ka, .kicker.ka::before { transform: none !important; clip-path: none !important; scale: none !important; translate: none !important; opacity: 1 !important; }
  .rail > *, .films__rail > *, .reels > *, .partners__rail > * { transform: none !important; }
  .head.is-hidden { transform: none; }
}