;
an inline picker script sets the src and .is-on fires on first 'playing' frame */
.kmb-hero-video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--kmb-ease-out); }
.kmb-hero-video.is-on { opacity: 1; }
/* the local film is 2:1 (1920×960) — its own cover-crop math */
.kmb-hero-video video {
position: absolute; top: 50%; left: 50%;
width: max(100vw, 200vh); height: max(100vh, 50vw);
transform: translate(-50%, -50%) scale(1.02);
border: 0; pointer-events: none; object-fit: cover;
}
/* centered 16:9 cover-crop for promo iframes; the slight scale hides YouTube chrome */
.kmb-hero-video iframe {
position: absolute; top: 50%; left: 50%;
width: max(100vw, 177.78vh); height: max(100vh, 56.25vw);
transform: translate(-50%, -50%) scale(1.15);
border: 0; pointer-events: none;
}
/* promo crossfade layer above the looping film */
.kmb-hero-yt { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--kmb-ease-out); }
.kmb-hero-yt.is-on { opacity: 1; }
/* particle canvas (drawn by the island; CSS size is mandatory — the island scales
the backing store by devicePixelRatio, so the canvas must map onto this box) */
.kmb-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* vignette + film grain (inline SVG feTurbulence tile, 128px, repeats) */
.kmb-hero-grain {
position: absolute; inset: 0; pointer-events: none; opacity: .5;
background-image:
radial-gradient(ellipse at center, transparent 0%, transparent 52%, rgba(22,4,5,.55) 100%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23g)' opacity='.35'/%3E%3C/svg%3E");
background-size: 100% 100%, 128px 128px;
background-repeat: no-repeat, repeat;
}
@media (prefers-reduced-motion: no-preference) {
.kmb-hero-grain { animation: kmb-grain 1.2s steps(6) infinite; }
}
/* only the grain tile jumps — the vignette layer stays put */
@keyframes kmb-grain {
0%, 100% { background-position: 0 0, 0 0; }
20% { background-position: 0 0, -28px 16px; }
40% { background-position: 0 0, 14px -36px; }
60% { background-position: 0 0, -42px -20px; }
80% { background-position: 0 0, 34px 30px; }
}
/* kinetic title — real text stays in the DOM: word wrapper .kmb-w masks letter
.kmb-l (--i = continuous letter index, set by PHP); no-JS shows the plain title */
.kmb-hero-title .kmb-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; } /* descender room for the display face */
.js .kmb-hero-title .kmb-l { display: inline-block; transform: translateY(115%); animation: kmb-letter-up .7s var(--kmb-ease-out) both; animation-delay: calc(.2s + var(--i, 0) * 35ms); }
@keyframes kmb-letter-up { to { transform: none; } }
/* red accent rule in the eyebrow line */
.kmb-hero-rule { display: inline-block; width: 3.5rem; height: 2px; background: var(--kmb-red); margin-left: .75rem; vertical-align: middle; }
.js .kmb-hero-rule { transform: scaleX(0); transform-origin: left; animation: kmb-rule-in .8s var(--kmb-ease-out) .9s both; }
@keyframes kmb-rule-in { to { transform: scaleX(1); } }
/* video pause/play toggle — ghost circle, 44px a11y target; unhidden by the island
(lifted above the nearest-event strip) */
.kmb-hero-pause { position: absolute; right: 1.25rem; bottom: 4.75rem; z-index: 30; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: border-color .2s; }
.kmb-hero-pause:hover { border-color: #fff; }
.kmb-hero-pause[hidden] { display: none; }
/* pause glyph (two bars) ↔ play glyph (triangle), driven by aria-pressed */
.kmb-hero-pause span { width: 10px; height: 12px; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px); }
.kmb-hero-pause[aria-pressed="true"] span { width: 11px; margin-left: 2px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* sound toggle (local film only — the desktop file carries the score) */
.kmb-hero-sound { position: absolute; right: 4.5rem; bottom: 4.75rem; z-index: 30; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: border-color .2s; }
.kmb-hero-sound:hover { border-color: #fff; }
.kmb-hero-sound[hidden] { display: none; }
/* speaker glyph; a slash overlays it while muted (aria-pressed=false) */
.kmb-hero-sound span { position: relative; width: 14px; height: 12px; background: currentColor; clip-path: polygon(0 35%, 35% 35%, 70% 0, 70% 100%, 35% 65%, 0 65%); }
.kmb-hero-sound[aria-pressed="false"]::after { content: ""; position: absolute; width: 1.4rem; height: 2px; background: currentColor; transform: rotate(-45deg); }
/* hero h1 — Unbounded is a wide face; the clamp keeps «Модерн-балет» on one line at 360px */
.kmb-hero-title { font-size: clamp(2.25rem, 1.1rem + 6.2vw, 6.5rem); line-height: 1.04; letter-spacing: -.02em; }
/* scroll-moment tilt (transform written by app.js, like [data-mouseparallax]) */
[data-tilt] { transition: transform .35s var(--kmb-ease-out); will-change: transform; transform-style: preserve-3d; }
/* keep the fast tilt timing when the element also carries a reveal
(.js [data-reveal] sets the transition shorthand and wins on specificity) */
.js [data-reveal][data-tilt] {
transition: opacity var(--kmb-dur-base) var(--kmb-ease-out),
clip-path var(--kmb-dur-slow) var(--kmb-ease-out),
transform .35s var(--kmb-ease-out);
}
/* ===== CINEMATIC LAYER (home upgrade) ===== */
/* ---- hover-video / living-poster overlay (app.js, data-hv-yt|data-hv-img) ----
Overlay sits between the base
![]()
and the card's scrim/caption layers;
nothing is fetched until the first hover intent. */
.kmb-hv { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--kmb-ease-out); pointer-events: none; }
.kmb-hv.is-on { opacity: 1; }
/* centered 16:9 cover-crop (cards are taller than 16:9, so height:100% covers);
slight scale hides YouTube edge chrome */
.kmb-hv iframe {
position: absolute; top: 50%; left: 50%; border: 0;
height: 100%; width: auto; aspect-ratio: 16 / 9;
transform: translate(-50%, -50%) scale(1.06);
}
.kmb-hv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kmb-hv.is-on .kmb-hv-img { animation: kmb-hv-kb 8s var(--kmb-ease-out) both; }
@keyframes kmb-hv-kb { from { transform: scale(1.02); } to { transform: scale(1.12); } }
/* ---- curtain: scroll-driven stage-curtain lift on dark sections ----
Progressive enhancement only (Chromium 115+/Safari 26): others keep the hard boundary. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.js .kmb-curtain { view-timeline: --kmb-curtain block; }
.js .kmb-curtain::before {
content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none;
background: linear-gradient(to bottom, #0a0102, rgba(10,1,2,.93) 70%, rgba(10,1,2,.86));
border-bottom: 2px solid rgba(237,28,36,.55);
box-shadow: 0 6px 22px -4px rgba(237,28,36,.28); /* red hem glow riding the edge */
animation: kmb-curtain-lift linear both;
animation-timeline: --kmb-curtain;
animation-range: entry 5% entry 90%;
}
}
}
@keyframes kmb-curtain-lift { from { transform: translateY(0); } to { transform: translateY(-101%); } }
/* ---- magnetic buttons (translate written by app.js pointer engine) ---- */
[data-magnetic] { will-change: transform; transition: transform .45s var(--kmb-ease-spring); }
/* ---- cursor spotlight on dark sections (--mx/--my written by app.js) ----
A warm additive glow positioned via transform only (compositor-friendly). */
.js [data-spotlight]::after {
content: ""; position: absolute; left: 0; top: 0; width: 68rem; height: 68rem; z-index: 10;
pointer-events: none; opacity: 0; transition: opacity .6s var(--kmb-ease-out);
background: radial-gradient(closest-side, rgba(255,235,220,.08), rgba(237,28,36,.05) 40%, transparent 70%);
transform: translate(-50%, -50%) translate3d(var(--mx, 50vw), var(--my, 40vh), 0);
will-change: transform, opacity;
}
.js [data-spotlight].is-spot-on::after { opacity: 1; }
@media (hover: none) { .js [data-spotlight]::after { display: none; } }
/* ---- static grain tile (same feTurbulence tile as the hero, no vignette/animation) ---- */
.kmb-grain-tile {
position: absolute; inset: 0; pointer-events: none; opacity: .35;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23g)' opacity='.35'/%3E%3C/svg%3E");
background-size: 128px 128px; background-repeat: repeat;
}
/* ---- masked word reveal for section titles (PHP emits .kmb-tw/.kmb-twi spans) ----
Triggered by the shared IntersectionObserver via data-reveal="mask"; the container
stays visible — words carry the motion (after the [data-reveal] base rules above). */
.kmb-tw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.kmb-twi { display: inline-block; }
.js [data-reveal="mask"] { opacity: 1; transform: none; }
.js [data-reveal="mask"] .kmb-twi { transform: translateY(112%); }
[data-reveal="mask"].is-in .kmb-twi {
animation: kmb-word-up .7s var(--kmb-ease-out) both;
animation-delay: calc(var(--w, 0) * 70ms);
}
@keyframes kmb-word-up { to { transform: none; } }