/* ============================================================
ATA DALA PRODUCTION — «ANAMORPHOT»
base.css — reset, font, base typography, focus, scroll,
layout primitives, reveal, global motion switch.
Load AFTER tokens.css.
============================================================ */
/* Font. One family across the whole site: Golos Text 400/500/600/700.
Also linked with in (see SPEC.md) — @import here is a
safety net when a file is opened directly over file://. */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&display=swap');
/* ---------- RESET ---------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
/* The theatre is cold: scrollbars and system UI go dark too */
color-scheme: dark;
background: var(--c-bg);
/* No horizontal scroll anywhere. Off-canvas menu + huge headings clip here. */
overflow-x: clip;
}
body {
min-height: 100svh;
background: var(--c-bg);
color: var(--c-text);
font-family: var(--f-body);
font-size: var(--fs-body);
font-weight: var(--fw-regular);
line-height: var(--lh-body);
letter-spacing: var(--tr-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
img {
/* Until the frame loads — not a white hole but a cold plate */
background: var(--g-frame);
border: 0;
}
input,
button,
textarea,
select {
font: inherit;
letter-spacing: inherit;
color: inherit;
background: none;
border: 0;
}
button { cursor: pointer; }
ul[role='list'],
ol[role='list'] { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
hr { border: 0; border-top: var(--border); }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
/* Long words (URLs, names) must never push a horizontal scrollbar */
h1, h2, h3, p, a, li, figcaption, dd, dt { overflow-wrap: break-word; }
/* ---------- TYPOGRAPHY ----------------------------------- */
/* H0–H2 — normal case. The richness rides on size and negative
tracking, not on caps (the A24 model). */
.t-display,
h1.t-display {
font-size: var(--fs-display);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-display);
line-height: var(--lh-display);
text-wrap: balance;
}
h1, .t-h1 {
font-size: var(--fs-h1);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-h1);
line-height: var(--lh-h1);
text-wrap: balance;
}
h2, .t-h2 {
font-size: var(--fs-h2);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-h2);
line-height: var(--lh-h2);
text-wrap: balance;
}
h3, .t-h3 {
font-size: var(--fs-h3);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-h3);
line-height: var(--lh-h3);
}
h4, h5, h6 {
font-size: var(--fs-body);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-body);
line-height: var(--lh-h3);
}
p {
max-width: var(--measure);
text-wrap: pretty;
}
/* Project title in the reel — quiet */
.t-title {
font-size: var(--fs-title);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-title);
line-height: var(--lh-h3);
}
/* Logline / lead */
.t-lead {
font-size: var(--fs-lead);
font-weight: var(--fw-regular);
letter-spacing: var(--tr-h3);
line-height: 1.45;
max-width: var(--measure-col);
}
/* Meta row. Two weights in one line: .t-meta b is 600, the rest 400. */
.t-meta {
font-size: var(--fs-small);
font-weight: var(--fw-regular);
line-height: var(--lh-flat);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--c-muted);
font-variant-numeric: tabular-nums;
}
.t-meta b,
.t-meta strong,
.t-meta .is-strong {
font-weight: var(--fw-semi);
color: var(--c-text);
}
/* Service label. No mono — service is weight 600 + caps + tracking. */
.t-label {
font-size: var(--fs-small);
font-weight: var(--fw-semi);
line-height: var(--lh-flat);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--c-muted);
}
.t-muted { color: var(--c-muted); }
/* Small accent text uses the LIGHTENED ink tint (>=4.5:1),
never the pure brand red. */
.t-accent { color: var(--c-accent-ink); }
/* For large/bold accent headings, the pure brand red is allowed. */
.t-accent-lg { color: var(--c-accent); }
/* Numbers — always tabular */
.t-num,
time,
.t-meta,
.t-label {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}
/* Year as a superscript to the right of a title — A24 device.
Markup: 2025 */
.sup-year {
font-size: 0.42em;
font-weight: var(--fw-regular);
letter-spacing: 0;
color: var(--c-muted);
vertical-align: super;
line-height: 0;
margin-left: 0.28em;
font-variant-numeric: tabular-nums;
}
/* ---------- LINKS --------------------------------------- */
a { color: inherit; text-decoration: none; }
/* A link inside a text column — underlined but quiet */
.prose a,
a.link {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.22em;
text-decoration-color: var(--c-line-strong);
transition: color var(--d-fast) var(--e-ease),
text-decoration-color var(--d-fast) var(--e-ease);
}
.prose a:hover,
a.link:hover {
color: var(--c-accent-ink);
text-decoration-color: var(--c-accent);
}
/* ---------- SELECTION & FOCUS --------------------------- */
::selection {
background: var(--c-selection);
color: var(--c-text);
}
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 3px;
border-radius: var(--r-1);
}
/* On a frame there's little to outline — add a background pad */
.frame :focus-visible,
a.frame:focus-visible,
.on-frame:focus-visible {
outline-offset: 0;
box-shadow: var(--sh-focus);
}
/* ---------- SCROLLBAR ------------------------------------ */
@supports (scrollbar-width: thin) {
html { scrollbar-width: thin; scrollbar-color: var(--c-line-strong) var(--c-bg); }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb {
background: var(--c-line);
border: 2px solid var(--c-bg);
border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-line-strong); }
/* ---------- LAYOUT PRIMITIVES --------------------------- */
/* Centred content container with a max-width. Frames go full-bleed
with .bleed. */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--text { max-width: calc(var(--container-text) + var(--gutter) * 2); }
/* Full-bleed: a frame across the whole viewport, no horizontal scroll */
.bleed {
width: 100%;
margin-inline: 0;
padding-inline: 0;
}
/* Section = a pause */
.section {
position: relative;
width: 100%;
padding-block: var(--sp-12);
}
.section--screen { min-height: 100svh; }
.section--tight { padding-block: var(--sp-10); }
.section--flush { padding-block: 0; }
/* 4-column grid inside a section */
.grid-4 {
display: grid;
grid-template-columns: repeat(var(--grid-cols), 1fr);
gap: var(--grid-gap);
align-items: start;
}
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
/* Auto-fit card grids for services / gallery */
.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
gap: var(--grid-gap);
}
.col-text { width: var(--measure-col); max-width: 100%; margin-inline: 0; }
.col-wide { width: var(--measure-wide); max-width: 100%; margin-inline: 0; }
.prose > * + * { margin-top: var(--sp-5); }
.prose p { max-width: var(--measure); }
.stack { display: flex; flex-direction: column; }
.stack--2 { gap: var(--sp-2); }
.stack--4 { gap: var(--sp-4); }
.stack--6 { gap: var(--sp-6); }
.stack--8 { gap: var(--sp-8); }
.row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
/* Frame. The ratio is set by a modifier and doesn't mix in a row. */
.frame {
position: relative;
display: block;
width: 100%;
overflow: hidden;
background: var(--g-frame);
border-radius: var(--r-0);
}
.frame > img { width: 100%; height: 100%; object-fit: cover; }
.frame--scope { aspect-ratio: var(--ar-scope); }
.frame--wide { aspect-ratio: var(--ar-wide); }
.frame--portrait { aspect-ratio: var(--ar-portrait); }
.frame--bw > img { filter: grayscale(1); }
/* Scrim over a frame so text keeps contrast */
.frame--scrim::after {
content: '';
position: absolute;
inset: 0;
background: var(--g-scrim);
pointer-events: none;
z-index: var(--z-scrim);
}
/* ---------- UTILITIES ----------------------------------- */
.vh,
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.no-scroll {
overflow: hidden;
padding-right: var(--scrollbar-w, 0px);
}
[hidden] { display: none !important; }
.divider {
width: 100%;
height: var(--bw);
background: var(--c-line);
border: 0;
}
/* ---------- REVEAL ---------------------------------------
Default is VISIBLE. We only hide when carries .js (set
inline in ), so a JS failure never leaves the page blank.
Masks, not clip-path: Chromium clips the IntersectionObserver
rect by the element's own clip-path, so inset(100%) makes the
observed area 0 and .is-visible never arrives. Masks and opacity
are paint-level effects — they don't touch the observer geometry. */
.reveal { opacity: 1; }
@media not (prefers-reduced-motion: reduce) {
/* Появление при прокрутке: заметный, но спокойный подъём.
Длительность и кривая вынесены в переменные — правятся в одном месте. */
.js .reveal {
opacity: 0;
transform: translateY(var(--reveal-shift));
transition: opacity var(--d-reveal) var(--e-reveal),
transform var(--d-reveal) var(--e-reveal);
will-change: opacity, transform;
}
.js .reveal.is-visible {
opacity: 1;
transform: none;
will-change: auto;
}
/* Каскад для наборов карточек: data-delay="1..8" */
.js .reveal[data-delay='1'] { transition-delay: 70ms; }
.js .reveal[data-delay='2'] { transition-delay: 140ms; }
.js .reveal[data-delay='3'] { transition-delay: 210ms; }
.js .reveal[data-delay='4'] { transition-delay: 280ms; }
.js .reveal[data-delay='5'] { transition-delay: 350ms; }
.js .reveal[data-delay='6'] { transition-delay: 420ms; }
.js .reveal[data-delay='7'] { transition-delay: 490ms; }
.js .reveal[data-delay='8'] { transition-delay: 560ms; }
/* Editing cut: the block doesn't slide, it overwrites the previous
one. A solid mask grows bottom -> top. */
.js .reveal--cut {
opacity: 1;
transform: none;
-webkit-mask-image: linear-gradient(var(--mask-opaque), var(--mask-opaque));
mask-image: linear-gradient(var(--mask-opaque), var(--mask-opaque));
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: 50% 100%; mask-position: 50% 100%;
-webkit-mask-size: 100% 0%; mask-size: 100% 0%;
transition: -webkit-mask-size var(--d-cut) var(--e-cut),
mask-size var(--d-cut) var(--e-cut);
}
.js .reveal--cut.is-visible { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
/* Iris: a frame opens from the centre + content pushes in */
.js .reveal--iris {
opacity: 1;
transform: none;
-webkit-mask-image: linear-gradient(var(--mask-opaque), var(--mask-opaque));
mask-image: linear-gradient(var(--mask-opaque), var(--mask-opaque));
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: 50% 50%; mask-position: 50% 50%;
-webkit-mask-size: 0% 100%; mask-size: 0% 100%;
transition: -webkit-mask-size var(--d-slow) var(--e-cut),
mask-size var(--d-slow) var(--e-cut);
}
.js .reveal--iris.is-visible { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.js .reveal--iris > img { transform: scale(1.12); transition: transform var(--d-slow) var(--e-out); }
.js .reveal--iris.is-visible > img { transform: scale(1); }
}
/* ---------- RESPONSIVE ---------------------------------- */
@media (max-width: 900px) {
:root { --grid-cols: 2; }
.col-3, .col-4 { grid-column: span 2; }
}
@media (max-width: 768px) {
:root { --measure-col: min(100%, 38rem); }
.col-text { width: var(--measure-col); }
.col-wide { width: 100%; }
}
@media (max-width: 560px) {
:root { --grid-cols: 1; --gutter: 1.25rem; }
.col-1, .col-2, .col-3, .col-4 { grid-column: span 1; }
.section { padding-block: var(--sp-10); }
}
/* ---------- REDUCED MOTION ------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0ms !important;
transition-duration: 0.001ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
animation-timeline: none !important;
}
/* Grain — a texture, stays. The jitter — a photosensitivity trigger — goes. */
.grain { animation: none !important; }
}