/* =========================================================================
   motion.css — hyper-dynamic layer: cursor, fixed WebGL smoke, tilt,
   parallax, film grain, scroll choreography, glassmorphism.
   All heavy motion is gated by prefers-reduced-motion at the bottom.
   ========================================================================= */

/* ---- Fixed full-page smoke backdrop (one-slider continuity) ------- */
/* Negative z-index: paints above body background, below ALL content.  */
.bg-canvas {
  position: fixed; inset: 0; z-index: -2;
  width: 100%; height: 100%; display: block;
  pointer-events: none;
}
.bg-scrim {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(130% 90% at 22% 42%, rgba(0,0,0,0.55), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.3), transparent 35%, rgba(0,0,0,0.35));
}
.hero__inner, .scrollcue { z-index: 4; }
.viewfinder { z-index: 3; }

/* ---- Custom cursor ------------------------------------------------ */
.cursor, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 1200; border-radius: 50%; transform: translate(-50%,-50%); will-change: transform; mix-blend-mode: difference; }
.cursor { width: 7px; height: 7px; background: #fff; }
.cursor-ring { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.7); transition: width 0.25s var(--ease), height 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease); }
body.cursor-hover .cursor-ring { width: 66px; height: 66px; background: rgba(225,6,0,0.18); border-color: var(--color-red); }
body.cursor-down .cursor-ring { width: 30px; height: 30px; }
.cursor-ring__label { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: #fff; opacity: 0; transition: opacity 0.2s; text-transform: uppercase; mix-blend-mode: normal; }
body.cursor-view .cursor-ring__label { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-ring { display: none !important; } }

/* ---- Scroll progress --------------------------------------------- */
.progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: var(--color-red); transform: scaleX(0); transform-origin: 0 50%; z-index: 300; will-change: transform; }

/* ---- Film grain + scanline overlay -------------------------------- */
.grain {
  position: fixed; inset: -50%; z-index: 150; pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain 0.5s steps(3) infinite;
}
.scanlines { position: fixed; inset: 0; z-index: 151; pointer-events: none; opacity: 0.35; background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.10) 3px); }
@keyframes grain { 0%{transform:translate(0,0)} 33%{transform:translate(-4%,3%)} 66%{transform:translate(3%,-2%)} 100%{transform:translate(-2%,-3%)} }

/* =========================================================================
   GLASSMORPHISM — tokens + surfaces
   ========================================================================= */
:root {
  --glass-bg: rgba(255,255,255,0.05);
  --glass-bg-strong: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.14);
  --glass-blur: 16px;
}
/* frosted nav once scrolled — lives on .nav::before (see style.css), not .nav itself:
   backdrop-filter on a real ancestor becomes the containing block for position:fixed
   descendants, which broke .nav__menu's fullscreen mobile overlay */
.nav.is-solid { border-bottom: 1px solid var(--glass-border); }
.nav.is-solid::before {
  background: rgba(8,8,8,0.55);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
}
/* glass contact card */
.contact__list {
  padding: clamp(1.4rem,3vw,2.2rem); border-radius: 18px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}
.contact__list .contact__row:last-of-type { border-bottom: none; padding-bottom: 0; }
/* glass footer (matches frosted nav) */
.footer {
  background: rgba(11,11,11,0.6);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

/* =========================================================================
   ONE-SLIDER — sections are translucent layers over the fixed smoke,
   so the page reads as one continuous scroll instead of stacked blocks.
   ========================================================================= */
/* Projekty + Klienti + detail gallery + Contact + Footer: ONE shared flat translucent-carbon
   value — no per-section gradient reset, so there's no opacity jump at any boundary between
   them. Neighbours match exactly and the seam disappears. */
.projekty, .clients, #p-gallery, .contact, .footer {
  background: rgba(11,11,11,0.85);
}
/* Only the first band needs a fade: it bleeds up into the hero's transparent smoke instead of
   cutting straight to solid carbon. Everything after it already matches its neighbour. */
.projekty {
  background: linear-gradient(180deg, rgba(11,11,11,0) 0%, rgba(11,11,11,0.85) 260px);
}
/* project cards = glass tiles (matches .logo-tile) */
.card, .card--cta {
  padding: clamp(0.9rem, 1.4vw, 1.2rem) clamp(0.9rem, 1.4vw, 1.2rem) clamp(1.2rem, 1.8vw, 1.6rem);
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 18px;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  transition: transform 0.5s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
}
.card:hover, .card--cta:hover {
  background: var(--glass-bg-strong); border-color: var(--color-red);
  box-shadow: 0 30px 60px -30px rgba(225,6,0,0.5);
}
.card--cta:hover { transform: translateY(-6px); }
/* Detail page: the smoke runs behind these too, so the copy bands get a scrim.
   0.95 -> 0.8 picks up exactly where .detail-hero__bg::after ends, so there is no seam. */
.detail-meta { background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 100%); }
#p-video, #p-body, [data-highlights-wrap], [data-credits-wrap], .detail-next-wrap,
#p-people, #p-bio, [data-results-wrap] { background: rgba(0,0,0,0.8); }
/* the film (or, on osobni-brand, the people grid) hands straight off from the meta band —
   no section gap to read as a seam */
#p-video, #p-people { padding-top: clamp(2rem, 4vw, 3.4rem); }

/* dim aurora variant for the contact band */
.aurora--dim { opacity: 0.22; }
.aurora--dim span:nth-child(1) { width: 36vw; height: 36vw; left: -10vw; top: 10%; }
.aurora--dim span:nth-child(2) { width: 30vw; height: 30vw; right: -8vw; bottom: -10%; }

/* =========================================================================
   CLIENTS — glass logo grid + aurora + spotlight
   ========================================================================= */
.logos {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.4rem); position: relative; z-index: 2;
}
.logo-tile {
  position: relative; overflow: hidden;
  display: grid; place-items: center; min-height: clamp(110px, 12vw, 152px);
  padding: 1.4rem;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  transition: transform 0.5s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
  animation: tileFloat 9s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.1s);
}
.logos .logo-tile:nth-child(3n)   { --i: 0; }
.logos .logo-tile:nth-child(3n+1) { --i: 1; }
.logos .logo-tile:nth-child(3n+2) { --i: 2; }
/* One fixed box for every logo + object-fit:contain.
   Uniform source canvases therefore land at identical optical size — that is what
   makes the wall read as a normalised logo grid. Do NOT switch this to max-height
   alone: it scales each PNG by its own aspect and long wordmarks vanish. */
.logo-tile img {
  width: 100%; max-width: 220px; height: 78px; object-fit: contain;
  opacity: 0.88;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.logo-tile__text {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(0.9rem,1.4vw,1.15rem);
  letter-spacing: 0.02em; color: rgba(255,255,255,0.7); text-align: center; line-height: 1.2;
}
.logo-tile:hover {
  transform: translateY(-6px); background: var(--glass-bg-strong); border-color: var(--color-red);
  box-shadow: 0 30px 60px -30px rgba(225,6,0,0.5);
}
.logo-tile:hover img { opacity: 1; transform: scale(1.05); }
.logo-tile:hover .logo-tile__text { color: #fff; }
/* cursor spotlight */
.logo-tile::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(180px circle at var(--mx,50%) var(--my,50%), rgba(225,6,0,0.22), transparent 60%);
  transition: opacity 0.35s var(--ease);
}
.logo-tile:hover::before { opacity: 1; }
/* diagonal sheen sweep */
.logo-tile__sheen { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.logo-tile__sheen::after {
  content: ""; position: absolute; top: -50%; left: -70%; width: 45%; height: 200%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: skewX(-18deg); animation: sheen 6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -2s);
}
@keyframes sheen { 0%,72% { left: -70%; } 88%,100% { left: 140%; } }
@keyframes tileFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* aurora blobs behind the grid */
/* Faded mask on both ends: each section clips its own aurora at overflow:hidden, and without
   this the glow gets cut off mid-fade — a hard straight edge right at the section boundary.
   Dying to fully transparent before the box edge means the clip line is invisible. */
.aurora {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; filter: blur(70px); opacity: 0.5;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.aurora span { position: absolute; border-radius: 50%; }
.aurora span:nth-child(1) { width: 42vw; height: 42vw; left: -8vw; top: -10vw; background: radial-gradient(circle, rgba(225,6,0,0.55), transparent 68%); animation: drift1 22s ease-in-out infinite; }
.aurora span:nth-child(2) { width: 34vw; height: 34vw; right: -6vw; top: 12vw; background: radial-gradient(circle, rgba(163,4,0,0.5), transparent 68%); animation: drift2 26s ease-in-out infinite; }
.aurora span:nth-child(3) { width: 30vw; height: 30vw; left: 38vw; bottom: -14vw; background: radial-gradient(circle, rgba(225,6,0,0.35), transparent 70%); animation: drift1 30s ease-in-out infinite reverse; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vw,4vw) scale(1.15); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1.1); } 50% { transform: translate(-5vw,-3vw) scale(0.9); } }
@media (max-width: 1080px) { .logos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .logos { grid-template-columns: repeat(2, 1fr); } }

/* ---- 3D tilt cards ------------------------------------------------ */
/* The perspective lives in each card's own transform (JS writes perspective(1000px)),
   NOT on .grid — a shared origin skewed the outer columns and pushed their titles sideways. */
.card { transform-style: preserve-3d; will-change: transform; }
.card__media { will-change: transform; transition: box-shadow 0.4s var(--ease); }
/* .card already declares `transition: transform, background, border-color, box-shadow`
   above. Shorten ONLY the transform leg while tilting — a `transition` shorthand here
   would reset the property list and make the glass hover snap instead of fade. */
[data-tilt].tilting {
  transition-duration: 0.08s, 0.4s, 0.4s, 0.5s;
  transition-timing-function: linear, var(--ease), var(--ease), var(--ease);
  transition-delay: 0s;
}
.card__media .glare {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.35), transparent 45%);
  transition: opacity 0.3s var(--ease); mix-blend-mode: soft-light;
}
.card:hover .card__media .glare { opacity: 1; }
/* depth layers — only meaningful while the card itself is tilting */
.card__media { transform: translateZ(0); }
.card__title, .card__sub { transform: translateZ(26px); }
.card__cta { transform: translateZ(40px); }

/* ---- Images fade in instead of popping ----------------------------
   The hidden state is applied BY JS (.is-fading), never by this rule alone:
   if the script fails, images must still be visible. */
img[data-fade] { transition: opacity 0.7s var(--ease); }
img[data-fade].is-fading { opacity: 0; }
img[data-fade].is-loaded { opacity: 1; }

/* ---- Nav: current section ----------------------------------------- */
.nav__menu a[aria-current="true"] { opacity: 1; color: var(--color-red); }
.nav__menu a[aria-current="true"]::after { transform: scaleX(1); }

/* ---- Lightbox: no zoom pop under reduced motion -------------------- */
@media (prefers-reduced-motion: reduce) { .lb__img { transform: none !important; } }

/* ---- Magnetic buttons -------------------------------------------- */
[data-magnetic] { will-change: transform; }

/* ---- Parallax ----------------------------------------------------- */
[data-parallax] { will-change: transform; }
.detail-hero__bg { will-change: transform; }
.detail-hero__bg img { transform: scale(1.12); animation: kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns { from{transform:scale(1.08) translate(0,0)} to{transform:scale(1.2) translate(-2%,-2%)} }

/* ---- Word / line reveal (hero + section titles) ------------------- */
.reveal-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-top: 0.2em; margin-top: -0.2em; }
.reveal-mask > span { display: inline-block; transform: translateY(115%) rotate(6deg); opacity: 0; transition: transform 0.9s var(--ease), opacity 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + var(--base, 0ms)); }
.is-lit .reveal-mask > span, .hero-lit .reveal-mask > span { transform: none; opacity: 1; }

/* hero title reveals immediately on load */
.hero__title .reveal-mask > span { transition-duration: 1.1s; }

/* ---- Reveal upgrade (fade+blur+slide) ----------------------------- */
.reveal { opacity: 0; transform: translateY(34px); filter: blur(6px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }
.reveal[data-d="1"] { transition-delay: 0.08s; }
.reveal[data-d="2"] { transition-delay: 0.16s; }
.reveal[data-d="3"] { transition-delay: 0.24s; }

.section__title, .contact__title { position: relative; }

/* ---- Detail: highlights chips + credits rows ----------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.chip {
  font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 9px 18px; border-radius: var(--radius-pill);
  background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--color-paper);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.chip:hover { border-color: var(--color-red); color: var(--color-red-bright); }
.credits { border-top: 1px solid var(--color-hairline); max-width: 640px; }
.credit-row { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.9rem 0; border-bottom: 1px solid var(--color-hairline); }
.credit-row .k { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ash); }
.credit-row .v { text-align: right; }

/* ---- Reduced motion: strip it all back ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bg-canvas, .grain, .scanlines, .aurora { display: none !important; }
  .detail-hero__bg img { animation: none !important; transform: scale(1.05) !important; }
  .cursor, .cursor-ring { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .reveal-mask > span { transform: none !important; opacity: 1 !important; }
  [data-tilt] { transform: none !important; }
  .kenburns, [data-parallax] { transform: none !important; }
  .logo-tile, .logo-tile__sheen::after { animation: none !important; }
  .logo-tile:hover, .card:hover, .card--cta:hover { transform: none !important; }
  img[data-fade] { opacity: 1 !important; }
  /* video.js already withholds autoplay here, so the poster + play button are the resting state:
     the controls must not depend on a hover the visitor may never perform. */
  .vfig__ui, .vfig__scrim { opacity: 1 !important; }
  .vfig__play { transform: none !important; }
}

/* ---- Touch devices: every one of these runs full-strength regardless of OS reduced-motion
   settings (most phones never turn that on), and none of them read as content — cutting them
   is the same call as already hiding the custom cursor here, just extended past just that one
   effect. Desktop (no pointer:coarse match) is completely untouched. ---- */
@media (pointer: coarse) {
  /* shared by .contact__list / .card / .logo-tile — one lever, no per-selector repeats */
  :root { --glass-blur: 6px; }
  .nav.is-solid::before { backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); }
  /* the light-sweep + float were the specific "feels cheap" complaint */
  .logo-tile, .logo-tile__sheen::after { animation: none !important; }
  .grain { animation: none !important; }
  .aurora { filter: blur(40px); }
  /* a persistent compositor layer for a tilt/parallax effect that motion.js already never
     runs here (both are `fine`/`!coarse`-gated in JS) — pure GPU-memory waste, not a visual */
  [data-magnetic], [data-parallax], .reel-card, .card, .card__media { will-change: auto; }
}