/* =========================================================
   On the Move Productions — stylesheet
   Visual system adapted from the client-referenced Genesis
   template (genesis-template.webflow.io + its style guide):
   single Red Hat Display type family carrying the whole scale
   through weight/case, restrained near-black + one accent,
   pill buttons, rounded media, a marquee, an outsized footer
   wordmark. Brand-fixed inputs (palette, hero, bios) unchanged.
   ========================================================= */

/* Self-hosted (no third-party requests): one variable file per character
   set covers every weight; latin-ext carries the Czech diacritics. */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/red-hat-display-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/red-hat-display-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --cream-1: #FFFBF4;   /* Bridal Heath — lightest */
  --cream-2: #FFF1DC;   /* Peach Cream */
  --accent: #73ACA3;    /* Sensational Mint (turquoise) */
  --accent-dim: #5c8c85;
  --accent-dim-onlight: #3f6660; /* darker teal for text on cream — 6.2:1 vs #FFFBF4, passes WCAG AA */
  --wine: #4E0A10;      /* Cab Sav */
  --black: #050403;
  --black-2: #100d0a;   /* layered card surface, one step up from --black */
  --black-3: #1c1712;   /* a further step, for nested surfaces on black */

  --font: 'Red Hat Display', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(4rem, 9vw, 8rem);

  --radius: 22px;
  --radius-sm: 12px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  /* Matches body's own background so the brief window where body is
     cloaked (visibility:hidden, see the inline anti-flash style in each
     page's <head>) shows this dark canvas instead of the browser's white
     default. */
  background: var(--black);
  scroll-behavior: smooth;
  scrollbar-color: var(--accent) var(--black);
  scrollbar-width: thin;
  /* Mobile Chrome's default tap-highlight is an opaque-ish blue rectangle
     drawn over whatever was tapped until the resulting state settles —
     visible as a stray blue box behind a nav link the instant it's
     tapped. Every interactive element already gives its own tap/hover
     feedback (underline, accent color, the mobile menu's own fade), so
     this default has nothing to add. */
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  background: var(--black);
  color: var(--cream-1);
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* height:auto so width/height attributes (kept to reserve space while
   loading) only set the proportions, never a fixed pixel height. */
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; caret-color: var(--accent); }

::selection { background: var(--accent); color: var(--black); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--accent); border: 2px solid var(--black); }
::-webkit-scrollbar-thumb:hover { background: var(--cream-1); }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
[hidden] { display: none !important; }

.skip-link {
  position: fixed; top: -60px; left: 1rem; z-index: 999;
  background: var(--accent); color: var(--black);
  padding: .75rem 1.25rem; border-radius: 999px;
  font-weight: 700; transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Typography ----------
   One family, three roles: 700/uppercase/-0.03em/0.9 line-height
   for every heading; 300/mixed-case for large lead statements;
   400 for body copy. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: .9;
}
h1, .h1 { font-size: clamp(2.8rem, 7.5vw, 6.4rem); }
h2, .h2 { font-size: clamp(2.2rem, 5vw, 4rem); }
h3, .h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h4, .h4 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }

.lead {
  font-weight: 300;
  font-size: clamp(1.15rem, 2.2vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  max-width: 40ch;
}
.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.65;
  letter-spacing: -0.01em;
  max-width: 42ch;
}
.on-dark { color: var(--cream-1); }
.on-light { color: var(--black); }
.text-muted { opacity: .68; }
.label {
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .8rem;
}

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .92rem;
  padding: 1.05em 2.2em;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }

.btn-solid {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--black);
}
.btn-solid:hover { background: var(--cream-1); border-color: var(--cream-1); color: var(--black); }

/* A short text link with a small circular arrow button — the site's
   standard secondary action (mirrors the reference's card "read
   more" convention). */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .88rem;
}
.link-arrow .arrow-circle {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
  flex-shrink: 0;
}
.link-arrow .arrow-circle svg { width: 14px; height: 14px; }
.link-arrow:hover .arrow-circle { transform: translateX(4px); }
.on-dark .link-arrow:hover .arrow-circle,
.link-arrow.on-dark:hover .arrow-circle { background: var(--accent); color: var(--black); border-color: var(--accent); }
.on-light .link-arrow:hover .arrow-circle,
.link-arrow.on-light:hover .arrow-circle { background: var(--black); color: var(--cream-1); border-color: var(--black); }

/* Plain circular icon button (social/utility) — thin translucent
   border, transparent fill, per the reference's "GET IN TOUCH"
   social row and reused here for the hero pause control. */
.icon-circle {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.6px solid rgba(255,251,244,.3);
  color: var(--cream-1);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.icon-circle:hover { background: rgba(115,172,163,.25); border-color: var(--accent); }
.icon-circle svg { width: 18px; height: 18px; }

/* ---------- Header / nav ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  padding: 1.3rem 0;
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled,
.site-header.is-solid {
  background: rgba(5, 4, 3, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255,251,244,.08);
  padding: .85rem 0;
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: .65rem; }
.brand img { transform-origin: left center; transition: transform .3s var(--ease); }
.site-header.is-scrolled .brand img,
.site-header.is-solid .brand img { transform: scale(0.86); }
/* The stylized wordmark's own lettering has a much wider aspect ratio than
   the roughly-square icon mark, so each needs its own height rather than
   sharing one "img" rule sized for the icon — at the icon's 36px that
   would render the wordmark almost 150px wide. */
.brand-icon { height: 36px; width: auto; }
.brand-wordmark { height: 22px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 2.2rem; }
.main-nav a {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .88rem;
  color: var(--cream-2);
  position: relative;
  padding-bottom: 4px;
}
.main-nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--accent); transition: right .3s var(--ease);
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { right: 0; }
.main-nav a[aria-current="page"] { color: var(--accent); }

.lang-toggle {
  display: flex; align-items: center; border: 1.5px solid rgba(255,251,244,.3);
  border-radius: 999px; padding: 3px; gap: 2px;
}
.lang-toggle button {
  font-weight: 700;
  letter-spacing: .04em;
  font-size: .76rem;
  padding: .45em 1em;
  border-radius: 999px;
  color: var(--cream-2);
}
.lang-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--black); }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,251,244,.3); border-radius: 50%;
  /* .main-nav becomes a position:fixed, z-index:90 full-screen overlay
     once open (see the mobile block below) — without its own position
     and z-index, this button has neither, so that overlay painted over
     it. The animated hamburger-to-X (aria-expanded="true" below) was
     always running correctly; it was just hidden behind the menu it
     opens, leaving no visible way to close it. */
  position: relative;
  z-index: 95;
}
/* All three bars sit on the button's center and are moved apart with
   transforms, so they can meet in the middle as an X. */
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 2px; margin: -1px 0 0 -9px; background: var(--cream-1);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle::before { transform: translateY(-6px); }
.nav-toggle::after { transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] span { opacity: 0; }
.nav-toggle[aria-expanded="true"]::before { transform: translateY(0) rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after { transform: translateY(0) rotate(-45deg); }

/* ---------- Hero (unchanged concept: full-bleed match video) ---------- */
.hero {
  /* Pinned reveal: the hero holds its position as the visitor scrolls, and
     the very next section (.intro-cover) — an ordinary in-flow block —
     slides up over it. position:sticky is what does the pinning; it needs
     no wrapper or extra scroll height because .hero's containing block
     (<main>, spanning the whole page) is far taller than the hero itself,
     so it has room to stay stuck until .intro-cover's opaque background
     has fully scrolled up to cover it. z-index just fixes paint order —
     sticky promotes an element into the "positioned" paint bucket, which
     by default paints ABOVE static in-flow siblings regardless of DOM
     order, the opposite of what a "next section covers it" effect needs. */
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--black);
}
.hero-video-wrap { position: absolute; inset: 0; }
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
@media (max-aspect-ratio: 3/4) {
  /* Static pre-JS/no-JS fallback only. On a narrow/tall viewport,
     object-fit: cover has to blow the wide source video up until it fills
     the box's height, cropping away most of its width — main.js takes
     over from here once it's running, panning this same object-position
     to follow the flame (see "Camera-follow crop" in main.js) rather than
     leaving it fixed, which could crop the flame out of frame entirely. */
  .hero-video { object-position: 30% center; }
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 50% 42%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 78%),
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.85) 100%);
}
.hero-content {
  position: relative; z-index: 2;
  text-align: center;
  padding: 0 var(--gutter);
  max-width: 66rem;
}
.hero-slogan {
  /* The global heading line-height (.9) is tight enough that Czech caron
     diacritics (e.g. the "ď" in "Pojďme", uppercased to "Ď") clip against
     the top of their own line and against the line below on 3-line wraps.
     This is the only heading long/tall enough in Czech to hit that, so the
     fix is scoped here rather than loosening line-height site-wide.
     Line-height's extra space splits into half-leading above and below each
     line, so between two lines that combines into a full gap — but the
     very first line only gets the single half-leading above it, half the
     cushion. padding-top gives that top line its own guaranteed clearance
     instead of relying on half-leading alone. */
  line-height: 1.05;
  padding-top: 0.18em;
  /* --flame-x/--flame-y/--flame-hsize/--flame-vsize are written every frame
     by main.js, sampled directly from the video's own pixels (brightness
     centroid and extent of the flame), so both where the glow sits and how
     big it is track what's actually burning on screen right now — a small
     spark at ignition, a tall column once the match has caught. The values
     here are only the pre-JS/no-JS fallback. */
  --flame-x: 28%;
  --flame-y: 40%;
  --flame-hsize: 120%;
  --flame-vsize: 400%;
  /* How far the reveal has spread from the flame point, as a % of the
     distance to the box's farthest corner — written every frame by main.js
     during the fade-in so the text lights up outward from the match rather
     than appearing everywhere at once. Defaults fully open for the pre-JS/
     no-JS fallback. */
  --reveal: 100%;
  /* Blackbody-ish falloff — floored at a dim rust rather than fading to
     near-black, so text far from the flame reads as a dim ember instead of
     vanishing outright. The white-hot core is deliberately tiny (0-2%) —
     real flame-white only right at the flame itself — then orange is held
     as a flat plateau (8-45%) rather than a single transitional stop, so
     most of the glow's reach reads as orange, not a wash of cream.

     --flame-vsize normally dwarfs --flame-hsize (see above): the match
     flame is a tall, vertically-drawn-out light source, not a point, so a
     line of text shouldn't dim just because it sits above or below the
     flame's tracked (x, y) dot — realistically the flame's whole height is
     roughly as close to it as the flame's dead center is. A vertical radius
     much bigger than the horizontal one makes vertical offset from that dot
     contribute almost nothing to the falloff, leaving horizontal offset to
     do the real work, which reads as a column of light sweeping left/right
     — not a single hotspot. It also neutralizes the mobile case where a
     3-line wrap shrinks the text box to a fraction of the flame's real
     vertical travel, which used to make the *y* side of this same math
     swing between the clamped extremes almost the whole cycle (pitch
     black, with a flash of brightness only when it briefly crossed the
     text). */
  background: radial-gradient(var(--flame-hsize) var(--flame-vsize) at var(--flame-x) var(--flame-y),
    #fff6e0 0%, var(--cream-1) 2%, #e2914f 8%, #e2914f 36%, #7a3216 52%, #3d2013 75%, #3d2013 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* No text-shadow. A fixed blur merged adjacent glyphs' shadows into a
     hazy rectangle behind the whole slogan; a smaller em-based blur with a
     y-offset still stacked into a thin line along the baseline (the
     offset biased every glyph's shadow toward the same side); a small
     *symmetric* blur fixed both but then bled shadow into the inside of
     closed letterforms (O, D, A...) too, since text-shadow follows the
     glyph's true outline, holes and all, reading as an unwanted inner
     glow. The blackbody gradient below already floors at a dim rust
     rather than fading to near-black (see --flame-hsize/vsize above), so
     it carries its own contrast against the video without a shadow. */
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle at var(--flame-x) var(--flame-y),
    #000 var(--reveal), transparent calc(var(--reveal) + 25%));
  mask-image: radial-gradient(circle at var(--flame-x) var(--flame-y),
    #000 var(--reveal), transparent calc(var(--reveal) + 25%));
}
@supports not (background-clip: text) {
  .hero-slogan { background: none; color: var(--cream-1); -webkit-text-fill-color: currentColor; }
}
.hero.no-anim .hero-slogan { opacity: 1; transform: none; -webkit-mask-image: none; mask-image: none; }

.hero-controls {
  position: absolute; right: var(--gutter); bottom: 1.75rem; z-index: 3;
}
.hero-pause { backdrop-filter: blur(6px); background: rgba(5,4,3,.45); }
.hero-pause .icon-play { display: none; }
.hero-pause[aria-pressed="true"] .icon-pause { display: none; }
.hero-pause[aria-pressed="true"] .icon-play { display: block; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
  z-index: 2; color: var(--cream-1); opacity: .75;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-weight: 700; letter-spacing: .2em; font-size: .72rem; text-transform: uppercase;
}
.scroll-cue svg { width: 14px; height: 20px; animation: cue-bob 2.2s ease-in-out infinite; }
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ---------- Sections ---------- */
section { position: relative; }
.section-pad { padding-block: var(--section-pad); }
.bg-cream { background: var(--cream-1); color: var(--black); }
.bg-cream-2 { background: var(--cream-2); color: var(--black); }
.bg-black { background: var(--black); color: var(--cream-1); }
.bg-wine { background: linear-gradient(160deg, var(--wine) 0%, #33070c 100%); color: var(--cream-1); }

.section-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.center { margin-inline: auto; text-align: center; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; margin-top: 2.2rem; }
.center .cta-row { justify-content: center; }

/* Intro — asymmetric lead-statement + body, per the reference's
   "We shoot and produce..." / caption-body split. */
.intro-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

/* Every section after .hero, not just the first one — the pinned hero
   stays "positioned" (sticky) for the whole scroll length of <main>, and a
   positioned element paints above static in-flow siblings by default
   regardless of DOM order. Without this, the hero would only stay covered
   through the intro section and then reappear on top of the team/marquee/
   work sections once the intro had fully scrolled past. Since normal-flow
   siblings never overlap each other on screen — only the stuck hero
   overlaps all of them — giving them all the same z-index is unambiguous:
   whichever one currently occupies a given point on screen paints over
   the hero there. */
.hero ~ * {
  position: relative;
  z-index: 2;
}

/* Marquee ticker — the signature motion moment, real service words. */
.marquee {
  overflow: hidden;
  border-block: 1px solid rgba(255,251,244,.12);
  padding-block: 1.4rem;
  background: var(--black-2);
}
.marquee-track {
  display: flex; width: max-content;
  animation: marquee-scroll 32s linear infinite;
}
.marquee-track span {
  display: inline-flex; align-items: center; gap: 1.75rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  padding-inline: 1.75rem;
  white-space: nowrap;
}
.marquee-track span::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  margin-left: 1.75rem;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* Team teaser — rounded photo cards */
.team-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 4vw, 2rem);
}
.team-card {
  display: block; border-radius: var(--radius); overflow: hidden;
  background: var(--black-2);
}
.team-photo {
  aspect-ratio: 4/5; width: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter .4s var(--ease);
}
.team-card:hover .team-photo { filter: grayscale(0) contrast(1.05); }
.team-card-body { padding: 1.5rem 1.6rem 1.75rem; }
.team-name { font-size: 1.5rem; }
.team-role { color: var(--accent); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .82rem; margin-top: .35rem; display: block; }
.team-teaser-link { margin-top: 1.1rem; }

/* Featured work */
.work-feature { display: block; position: relative; overflow: hidden; border-radius: var(--radius); }
.work-feature img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .6s var(--ease); }
.work-feature:hover img { transform: scale(1.04); }
.work-feature-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.05) 55%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.5rem, 3vw, 2.5rem);
}
.play-badge {
  width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--cream-1);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.work-feature:hover .play-badge { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.play-badge svg { width: 20px; height: 20px; margin-left: 3px; }
.work-feature-tag { color: var(--accent); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem; }
.work-feature-title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-top: .4rem; }

/* Contact CTA strip */
.contact-cta { text-align: center; }
.contact-cta .h2 { max-width: 24ch; margin-inline: auto; }
.contact-cta .cta-row { justify-content: center; }

/* Page hero (non-home) — a bold statement band, ember-textured.
   --ember-x/--ember-y mark the flame's actual position in page-hero-ember.jpg
   (measured via brightness-centroid analysis of the source image). Using that
   same point for both the background-image position and the glow's radial
   center keeps the light anchored to the real flame at any crop/aspect ratio,
   since percentage positions scale with the box rather than the viewport. */
.page-hero {
  --ember-x: 65%;
  --ember-y: 70%;
  padding-top: clamp(9rem, 16vw, 12rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(42% 55% at var(--ember-x) var(--ember-y), rgba(255,148,64,.3) 0%, rgba(120,32,16,.52) 30%, rgba(78,10,16,.74) 58%, rgba(5,4,3,.85) 100%),
    url('../img/page-hero-ember.jpg') var(--ember-x) var(--ember-y) / cover no-repeat;
}

/* Bios — rounded photo, asymmetric grid */
.bio {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.bio:not(:last-child) { margin-bottom: clamp(3rem, 7vw, 5.5rem); }
/* The photo swaps sides on every other bio; the columns swap with it so
   both photos get the same width. */
.bio:nth-child(even) { grid-template-columns: 1.2fr .8fr; }
.bio:nth-child(even) .bio-photo { order: 2; }
.bio-photo img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius);
  filter: grayscale(1) contrast(1.08);
}
.bio-name { font-size: clamp(2rem, 4vw, 2.6rem); }
.bio-role {
  display: block; margin-top: .5rem; margin-bottom: 1.1rem;
  color: var(--accent-dim-onlight);
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  font-size: .85rem;
}
.bio-text p { max-width: 62ch; }
.bio-text p + p { margin-top: 1em; }

/* Values — flowing manifesto list (kept: avoids the equal-card
   scaffold the client's earlier critique flagged) */
.manifesto-item {
  display: grid; grid-template-columns: 1fr 2fr; gap: clamp(1.25rem, 4vw, 3rem);
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(0,0,0,.15);
}
.manifesto-item:last-child { border-bottom: 1px solid rgba(0,0,0,.15); }
.manifesto-item p { max-width: 60ch; opacity: .82; margin-top: .5rem; }

.page-hero .lead { margin-top: 1.4rem; }
.contact-cta .lede { margin-inline: auto; margin-top: 1rem; }

/* ---------- Work: the reel ----------
   The featured film leads full width like a showreel opener; the rest
   follow two across. Posters are the whole card: the title sits under
   the frame, never on top of the picture. */
.project-tag { color: var(--accent); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem; }

.reel-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.reel-filters button {
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: .78rem;
  padding: .7em 1.3em; border-radius: 999px;
  border: 1.5px solid rgba(255,251,244,.25); color: var(--cream-2);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.reel-filters button:hover { border-color: var(--accent); }
.reel-filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--black); }

.reel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 3vw, 2rem); }
.reel-card { display: grid; gap: 1.1rem; }
.reel-card.is-lead { grid-column: 1 / -1; }
.reel-media {
  position: relative; display: block; aspect-ratio: 16/9;
  border-radius: var(--radius); overflow: hidden; background: var(--black-2);
}
.reel-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s var(--ease); }
.reel-media .play-badge {
  position: absolute; left: 50%; top: 50%; margin: 0; translate: -50% -50%;
  background: rgba(5,4,3,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.reel-card.is-lead .play-badge { width: 84px; height: 84px; }
.reel-card:hover .reel-media img, .reel-card:focus-visible .reel-media img { transform: scale(1.035); filter: brightness(.85); }
.reel-card:hover .play-badge, .reel-card:focus-visible .play-badge { background: var(--accent); border-color: var(--accent); color: var(--black); transform: scale(1.06); }
.reel-card:focus-visible { outline-offset: 6px; border-radius: var(--radius); }
.reel-info { display: grid; gap: .35rem; }
.reel-title { font-weight: 700; text-transform: uppercase; letter-spacing: -0.03em; line-height: .95; font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
.reel-card.is-lead .reel-title { font-size: clamp(2.2rem, 5.5vw, 4.4rem); }

.more-soon { margin-top: clamp(4rem, 8vw, 6rem); text-align: center; }
.more-soon p { margin-top: .75rem; max-width: 44ch; margin-inline: auto; }
.more-soon .cta-row { justify-content: center; }

/* ---------- Film pages (work/<film>.html, generated by the editor) ---------- */
.film { background: var(--black); }
.film-head { padding-top: clamp(8rem, 14vw, 10.5rem); padding-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.film-back {
  display: inline-flex; align-items: center; gap: .6em; margin-bottom: clamp(2rem, 5vw, 3rem);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; color: var(--cream-2); opacity: .8;
  transition: opacity .25s var(--ease), color .25s var(--ease);
}
.film-back svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.film-back:hover { opacity: 1; color: var(--accent); }
.film-back:hover svg { transform: translateX(-3px); }
.film-head .project-tag { display: block; }
.film-title { margin-top: .5rem; font-size: clamp(3rem, 10vw, 8rem); line-height: .85; }
.film-stage video, .film-stage img {
  width: 100%; aspect-ratio: 16/9; max-height: 82svh; object-fit: contain;
  background: #000; border-radius: var(--radius);
}
.film-body { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-pad); }
.film-body-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.film-facts { margin: 0; display: grid; gap: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,251,244,.15); }
.film-facts dt { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .75rem; color: var(--accent); }
.film-facts dd { margin: .25rem 0 0; font-size: 1.15rem; }
.film-next { border-top: 1px solid rgba(255,251,244,.1); }
.film-next-link {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .5rem 2rem;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.film-next-link .label { grid-column: 1 / -1; color: var(--accent); }
.film-next-link .arrow-circle {
  width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.film-next-link .arrow-circle svg { width: 18px; height: 18px; }
.film-next-link:hover .arrow-circle { background: var(--accent); border-color: var(--accent); color: var(--black); transform: translateX(6px); }

/* ---------- 404 ---------- */
.not-found {
  min-height: 88svh; display: flex; align-items: center;
  padding-block: clamp(8rem, 14vw, 10rem) var(--section-pad);
  background: radial-gradient(60% 60% at 70% 60%, rgba(78,10,16,.55), transparent 70%), var(--black);
}
.not-found-code {
  font-weight: 900; line-height: .8; letter-spacing: -0.05em;
  font-size: clamp(6rem, 24vw, 18rem);
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,251,244,.35);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.not-found .lead { margin-top: 1.25rem; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(3rem, 7vw, 6rem); align-items: start; }
.field { margin-bottom: 1.6rem; }
.field label {
  display: block; margin-bottom: .55rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; font-size: .8rem; color: var(--accent-dim-onlight);
}
.field input,
.field textarea {
  width: 100%; border: 1.5px solid rgba(0,0,0,.2);
  background: rgba(0,0,0,.03); border-radius: var(--radius-sm);
  padding: .9em 1.1em; color: var(--black); font-size: 1.05rem;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.field input:focus, .field textarea:focus { border-color: var(--accent); background: rgba(0,0,0,.01); outline: none; }
.field textarea { min-height: 160px; resize: vertical; }
.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--wine); }
.form-status { margin-top: 1.2rem; font-size: .95rem; min-height: 1.4em; }
.form-status[data-state="ok"] { color: var(--accent-dim-onlight); }
.form-status[data-state="error"] { color: var(--wine); }
.form-status[data-state="busy"] { color: var(--black); opacity: .7; }
.contact-form [type="submit"]:disabled { opacity: .55; cursor: progress; transform: none; }
/* Acknowledges the submit action itself — restarted on every attempt via
   main.js (a repeated identical error needs to feel like a fresh response,
   not a no-op), not just on first appearance. */
.form-status.is-announcing { animation: status-in .35s var(--ease); }
@keyframes status-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.contact-info { padding-top: 2.5rem; border-top: 1px solid rgba(0,0,0,.15); }
.contact-info-row { margin-top: 1.6rem; }
.contact-info-row .label { display: block; margin-bottom: .4rem; color: var(--accent-dim-onlight); }
.contact-info-row a {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; text-transform: uppercase;
}
.contact-info-row a:hover { color: var(--accent-dim-onlight); }
.contact-info-row span { font-size: 1.05rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); border-top: 1px solid rgba(255,251,244,.1); padding-block: clamp(3rem, 6vw, 4.5rem) 0; overflow: hidden; }
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(2rem, 5vw, 3rem); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.footer-brand img { height: 42px; width: auto; margin-bottom: 1rem; }
.footer-tagline { max-width: 26ch; opacity: .72; }
.footer-col h2 { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .82rem; color: var(--accent); margin-bottom: 1rem; padding-top: .75rem; border-top: 1px solid rgba(255,251,244,.2); }
.footer-col a, .footer-col span { display: block; padding-block: .35rem; opacity: .82; }
.footer-col a:hover { opacity: 1; color: var(--accent); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  padding-block: 1.5rem; border-top: 1px solid rgba(255,251,244,.08);
  font-size: .85rem; opacity: .6;
}
.footer-wordmark {
  font-weight: 700; text-transform: uppercase; letter-spacing: -0.03em; line-height: .82;
  font-size: clamp(3.2rem, 12vw, 9rem);
  color: var(--cream-1); opacity: .96;
  white-space: nowrap;
  margin-top: clamp(1rem, 3vw, 2rem);
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  /* Full-screen takeover, present but inert (visibility:hidden clears
     both hit-testing and the tab/reading order) until opened, so the
     open/close is a real transition instead of an instant display swap. */
  .main-nav {
    position: fixed; inset: 0; top: 0;
    background: var(--black); flex-direction: column; justify-content: center; align-items: center;
    gap: 2.2rem; z-index: 90;
    visibility: hidden; pointer-events: none;
    transition: visibility 0s linear .3s;
  }
  /* The fade/drop-in used to be on .main-nav itself, including its own
     opaque background — animating that background's *opacity* meant the
     panel spent its whole .3s open transition semi-transparent, letting
     whatever's underneath (the hero slogan, on the home page) ghost
     through the black before it fully covered the screen. Moving the
     animation to just the links, while the background snaps to fully
     opaque immediately, keeps the same fade/drop-in feel for the menu
     content without ever exposing the page behind it. */
  .main-nav > a {
    opacity: 0;
    transform: translateY(-16px);
    /* font-size here (not the base .main-nav a rule up top) because this
       rule wins the cascade on mobile — same selector specificity, later
       in source order, so its transition shorthand fully replaces the
       other one instead of merging with it. Needed so the tapped link's
       1.8rem -> .88rem drop (closing the menu removes .menu-open, and
       with it the mobile font-size bump, the instant a link is clicked)
       animates instead of snapping instantly. */
    transition: opacity .3s var(--ease), transform .35s var(--ease), font-size .3s var(--ease);
  }
  /* .site-header's own backdrop-filter (from .is-scrolled/.is-solid, below)
     makes it the containing block for its position:fixed descendants —
     the same way transform does — so .main-nav's "inset: 0" was resolving
     against the header's own ~69px bar instead of the viewport, on any
     page/state where that filter was active. .is-solid is baked into
     every non-home page from first paint, so this broke the menu there
     immediately; on home it only appears after scrolling past 40px
     (.is-scrolled). There's nothing left to blur once the opaque
     full-screen menu is open anyway, so just drop the filter for as long
     as it's open. */
  .site-header.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* Belt and suspenders on top of the menu's own opaque background: rather
     than trust z-index/paint order alone to keep the page behind it fully
     hidden — real mobile GPUs have known compositing quirks around
     layering a full-screen fixed overlay on top of masked/gradient
     content like the hero's, sometimes painting the "covered" layer
     through anyway — unconditionally hide the actual page content while
     the menu is open. There is nothing left behind the menu to see
     either way, so this can't cost anything visually. */
  .site-header.menu-open ~ main,
  .site-header.menu-open ~ footer {
    visibility: hidden;
  }
  .nav-toggle { display: flex; }
  /* Stays above the open menu so the language can be switched from it. */
  .lang-toggle { order: 3; position: relative; z-index: 95; }

  .site-header.menu-open .main-nav {
    visibility: visible; pointer-events: auto;
    transition: visibility 0s linear 0s;
  }
  .site-header.menu-open .main-nav > a {
    opacity: 1;
    transform: translateY(0);
  }
  .site-header.menu-open .main-nav a { font-size: 1.8rem; }

  .intro-grid, .bio, .bio:nth-child(even), .contact-grid, .film-body-grid { grid-template-columns: 1fr; }
  .reel { grid-template-columns: 1fr; }
  .bio:nth-child(even) .bio-photo { order: 0; }
  .bio-photo img { aspect-ratio: 16/10; }
  .team-grid { grid-template-columns: 1fr; }
  .manifesto-item { grid-template-columns: 1fr; gap: .5rem; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .contact-info { border-top: 0; padding-top: 0; margin-top: clamp(2.5rem, 6vw, 3.5rem); }
  .footer-wordmark { font-size: clamp(2.4rem, 15vw, 5rem); white-space: normal; }
}

@media (max-width: 560px) {
  .hero-content { padding-inline: 1.25rem; }
}

/* ---------- Page transitions ----------
   The studio's own craft is the cut and the dissolve (it's on the homepage
   marquee: "Střih" — Editing), so moving between pages gets an authored
   dissolve instead of the flat reload flash a static multi-page site gets
   by default. This is the native cross-document View Transition API — a
   CSS-only declaration, no router, no JS: unsupported browsers just ignore
   the at-rule and keep today's plain navigation, so there's no fallback
   path to maintain.
   The opt-in itself (`@view-transition { navigation: auto }`) lives inline
   in each page's <head>, not here — from an external stylesheet it can
   miss the browser's early per-navigation opt-in check depending on load
   timing, which silently disables the whole transition. Only the visual
   styling of the transition (safe to depend on style.css) stays here. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .5s;
  animation-timing-function: var(--ease);
  /* The captured "root" snapshot is sized to each page's full scrollable
     height, not just the viewport — a static site's pages are all
     different lengths, so old and new naturally have different captured
     dimensions. Force both to fill their (viewport-sized) container
     explicitly rather than leaving it to whatever their intrinsic
     captured size resolves to. */
  height: 100%;
  width: 100%;
}
/* The browser's default view-transition behavior also interpolates the
   *size* of ::view-transition-group(root) between the old and new page's
   captured dimensions (its own built-in animation, separate from the
   dissolve above) — visible as the whole page briefly resizing right as
   a navigation starts, most noticeable leaving the full-screen mobile
   menu open (a very different captured size than a normal page) for a
   destination with different content height.

   Turning off the group's own animation isn't enough by itself, though —
   without it, the group just freezes at whichever page's captured size
   it started from (still the wrong size for the *other* page), which is
   exactly the "briefly tiny/wrong-sized page" flash right before the
   dissolve masks it. Explicitly pinning the group to 100% of its own
   (viewport-sized) parent removes the dependency on either page's
   captured content height entirely, instead of just disabling the
   animation between two still-mismatched sizes. */
::view-transition-group(root) {
  animation: none;
  width: 100%;
  height: 100%;
}
::view-transition-old(root) { animation-name: page-dissolve-out; }
::view-transition-new(root) { animation-name: page-dissolve-in; }
@keyframes page-dissolve-out {
  from { opacity: 1; filter: blur(0); }
  to { opacity: 0; filter: blur(10px); }
}
@keyframes page-dissolve-in {
  from { opacity: 0; filter: blur(10px); }
  to { opacity: 1; filter: blur(0); }
}
/* The header was briefly given its own view-transition-name to "hold
   still" across navigation, on the theory that it's visually continuous —
   but it isn't: the home page header is transparent/expanded (it has to
   sit over the hero video) while every interior page's header is the
   solid/collapsed state, a different height. Naming it froze both the old
   and new header on screen for the full transition with no crossfade
   between them (their own animation was set to none), so navigating
   to/from home showed two overlapping headers at two different heights.
   Simplest correct fix: no special-cased name, so it dissolves with the
   rest of the page like everything else — only one snapshot pair, ever. */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue svg { animation: none; }
  .btn, .team-photo, .work-feature img, .play-badge, .icon-circle { transition: none; }
  /* Page dissolve is full-viewport blur+opacity motion, not an in-place
     fade — drop it entirely rather than soften it, same as the spec's own
     reduced-motion guidance for view transitions. */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  /* Mobile nav links keep their opacity feedback (confirms the tap) but
     lose the drop-in movement, same call already made for the hero
     slogan. The panel's own visibility timing (not animated either way)
     is unaffected. */
  .main-nav > a, .site-header.menu-open .main-nav > a { transition: opacity .2s linear; transform: none; }
  .form-status.is-announcing { animation: none; }
}