/* Studio Devet — one-page space/scroll site. Values ported 1:1 from the design handoff. */

:root {
  --bg: #04050c;
  --bg-panel: #060814;
  --ink: #eceffa;
  --ink-70: rgba(236, 239, 250, 0.7);
  --ink-66: rgba(236, 239, 250, 0.66);
  --ink-62: rgba(236, 239, 250, 0.62);
  --ink-52: rgba(236, 239, 250, 0.52);
  --hair: rgba(236, 239, 250, 0.1);
  --a1: #7fd6f0;
  --a2: #bda2ff;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.16, .8, .24, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  color: var(--ink);
  font-family: 'Sora', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--a1); text-decoration: none; }
a:hover { color: #fff; }
::selection { background: var(--a1); color: var(--bg); }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--a1); outline-offset: 3px; }

.sd-root {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}

.sd-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

/* static fallback shown when WebGL is unavailable */
.sd-fallback {
  position: absolute; inset: 0; z-index: 0; display: none;
  background:
    radial-gradient(60% 50% at 22% 18%, rgba(127, 214, 240, 0.10), transparent 60%),
    radial-gradient(50% 45% at 82% 78%, rgba(189, 162, 255, 0.10), transparent 60%),
    var(--bg);
}
.sd-root[data-nogl="1"] .sd-canvas { display: none; }
.sd-root[data-nogl="1"] .sd-fallback { display: block; }

.sd-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 50%, rgba(4, 5, 12, 0) 40%, rgba(4, 5, 12, 0.72) 100%);
}

.sd-scroll {
  position: absolute; inset: 0; z-index: 2;
  overflow-y: scroll; overflow-x: hidden;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.sd-scroll::-webkit-scrollbar { width: 0; height: 0; }

section { position: relative; scroll-snap-align: start; }
.h2 { margin: 0; font-size: clamp(30px, 4.4vw, 68px); font-weight: 200; letter-spacing: -0.03em; }
.sec-head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.sec-head .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; }
.k-a1 { color: rgba(127, 214, 240, 0.75); }
.k-a2 { color: rgba(189, 162, 255, 0.8); }

/* reveal-on-scroll */
[data-rv] { transition: opacity .9s ease, transform .9s ease; }

/* ---------------- 1 · Hero ---------------- */
.hero { min-height: 158svh; padding: 0; }
.hero-sticky {
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5vw; overflow: hidden;
}
.hero-kicker {
  position: absolute; left: 50%; top: 14vh; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--ink-62);
  animation: sd-fadein-cx 1.1s ease 1.1s both;
}
.hero-logobox { position: relative; width: min(44vw, 560px); }
.hero-logo-img {
  display: block; width: 100%; height: auto; filter: invert(1);
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 180% 100%; mask-size: 180% 100%;
  animation: sd-logo 2.2s var(--ease) 1.5s both;
}
.hero-logo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.hero-tags {
  position: absolute; left: 0; right: 0; top: 50%;
  display: flex; flex-wrap: nowrap; justify-content: center;
  gap: clamp(14px, 3vw, 44px);
  font-family: var(--mono); font-size: clamp(10px, 1.05vw, 13px);
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-62);
  animation: sd-fadein 1.2s ease 3.3s both;
}
.hero-tags span { white-space: nowrap; flex-shrink: 0; }
.hero-tags .sep { color: var(--ink-62); }
.hero-hint {
  position: absolute; bottom: 2.5vh; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: sd-bob 2.6s ease-in-out infinite;
}
.hero-hint span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.34em; color: var(--ink-66); }
.hero-hint i { width: 1px; height: clamp(24px, 4vh, 46px); background: linear-gradient(180deg, rgba(236, 239, 250, 0.5), transparent); }

/* ---------------- 2 · Moto ---------------- */
.moto { min-height: 300svh; padding: 0; }
.moto-sticky {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8vh clamp(20px, 5vw, 80px); overflow: hidden;
}
/* soft dark pool behind the statement so the text never fights a bright nebula */
.moto-sticky::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(58% 42% at 50% 48%, rgba(4, 5, 12, 0.78), rgba(4, 5, 12, 0.32) 60%, rgba(4, 5, 12, 0) 82%);
}
.moto-label, .moto-text, .moto-sub { position: relative; z-index: 1; }
.moto-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase;
  color: rgba(127, 214, 240, 0.85); margin-bottom: clamp(18px, 3.5vh, 38px);
  text-shadow: 0 1px 12px rgba(4, 5, 12, 0.9);
}
.moto-text {
  margin: 0; max-width: 1400px; text-align: center;
  font-size: clamp(21px, 3.6vw, 58px); line-height: 1.2; font-weight: 200;
  letter-spacing: 0.01em; text-transform: uppercase; text-wrap: pretty;
  transition: opacity .25s linear;
  text-shadow: 0 2px 24px rgba(4, 5, 12, 0.92), 0 0 10px rgba(4, 5, 12, 0.7);
}
.moto-text em { font-style: normal; font-weight: 600; color: var(--a1); text-shadow: 0 2px 24px rgba(4, 5, 12, 0.92), 0 0 14px rgba(127, 214, 240, 0.35); }
.moto-sub { text-shadow: 0 1px 12px rgba(4, 5, 12, 0.9); }
.moto-sub { margin-top: clamp(20px, 4vh, 44px); font-family: var(--mono); font-size: clamp(10px, 1vw, 12px); letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-66); }
.moto-sig {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(74vw, 900px); height: auto;
  filter: invert(1) drop-shadow(0 0 26px rgba(127, 214, 240, 0.35));
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 78%);
  mask-image: linear-gradient(90deg, #000 55%, transparent 78%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 0% 100%; mask-size: 0% 100%;
}

/* ---------------- 3 · Usluge ---------------- */
.svc {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(30px, 4.5vh, 56px); padding: 9vh clamp(24px, 6vw, 110px);
}
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(24px, 3vw, 52px); }
.svc-card {
  position: relative; display: flex; flex-direction: column; gap: 22px;
  padding: clamp(24px, 2.6vw, 40px);
  border: 1px solid var(--hair); border-radius: 4px;
  background: linear-gradient(180deg, rgba(127, 214, 240, 0.05), rgba(4, 5, 12, 0.35));
  backdrop-filter: blur(6px);
  transition: opacity .9s ease, transform .9s ease, border-color .5s ease;
}
.svc-card:hover { border-color: rgba(127, 214, 240, 0.42); }
.svc-index { font-family: var(--mono); font-size: 10px; letter-spacing: 0.32em; color: rgba(127, 214, 240, 0.8); }
.svc-title { margin: 0; font-size: clamp(22px, 2.2vw, 34px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; }
.svc-desc { margin: 0; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.6; color: rgba(236, 239, 250, 0.6); font-weight: 300; text-wrap: pretty; }
.svc-items { display: flex; flex-direction: column; }
.svc-row { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-top: 1px solid rgba(236, 239, 250, 0.08); opacity: 0; }
.svc-line { position: absolute; left: 0; top: -1px; height: 1px; width: 0%; background: linear-gradient(90deg, #7fd6f0, rgba(189, 162, 255, 0)); }
.svc-dot { width: 5px; height: 5px; margin-top: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--a1); }
.svc-name { font-size: clamp(15px, 1.25vw, 18px); font-weight: 400; }
.svc-note { font-size: 13px; line-height: 1.5; color: rgba(236, 239, 250, 0.5); font-weight: 300; }

/* ---------------- 4 · Projekti ---------------- */
.proj { min-height: 540svh; padding: 0; }
.proj-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.proj-head { position: absolute; left: clamp(24px, 6vw, 110px); top: 10vh; z-index: 3; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.proj-stagewrap { position: absolute; inset: 0; z-index: 2; perspective: 1500px; perspective-origin: 50% 52%; }
.proj-track { position: absolute; left: 50%; top: 52%; width: 0; height: 0; transform-style: preserve-3d; }
.pcard {
  position: absolute; left: 0; top: 0; width: clamp(250px, 30vw, 400px);
  cursor: pointer; transition: none;
  border: 1px solid rgba(236, 239, 250, 0.13); border-radius: 5px; overflow: hidden;
  background: rgba(9, 11, 24, 0.62); backdrop-filter: blur(8px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.pcard-media {
  position: relative; aspect-ratio: 16 / 10;
  background-color: #0a0c1c;
  background-image: repeating-linear-gradient(115deg, rgba(236, 239, 250, 0.055) 0 1px, transparent 1px 9px);
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end; padding: 14px;
}
.pcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard-slot { position: relative; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-66); }
.pcard.has-media .pcard-slot { display: none; }
.pcard-kind { position: absolute; top: 14px; right: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; padding: 5px 9px; border: 1px solid rgba(236, 239, 250, 0.18); border-radius: 999px; color: rgba(236, 239, 250, 0.72); background: rgba(4, 5, 12, 0.4); backdrop-filter: blur(3px); }
.pcard-body { display: flex; flex-direction: column; gap: 9px; padding: 22px; }
.pcard-metarow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pcard-client { font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(189, 162, 255, 0.85); }
.pcard-num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: rgba(236, 239, 250, 0.4); }
.pcard-title { font-size: clamp(17px, 1.5vw, 22px); font-weight: 400; letter-spacing: -0.015em; line-height: 1.2; }
.pcard-desc { font-size: 13px; line-height: 1.55; color: var(--ink-52); font-weight: 300; text-wrap: pretty; }
.pcard-cta { margin-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(127, 214, 240, 0.9); }

/* ---------------- 5 · Reference ---------------- */
.refs { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(26px, 4vh, 48px); padding: 9vh clamp(24px, 6vw, 110px); }
.refs-rows { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 20px); }
.sd-row {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.sd-track { display: flex; width: max-content; gap: clamp(12px, 1.4vw, 20px); }
.sd-track.a { animation: sd-marq-a 46s linear infinite; }
.sd-track.b { animation: sd-marq-b 54s linear infinite; }
.sd-row:hover .sd-track { animation-play-state: paused; }
.ref-plate {
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  min-width: clamp(210px, 18vw, 270px); height: clamp(140px, 16vh, 180px);
  padding: 18px 20px; border: 1px solid rgba(236, 239, 250, 0.11); border-radius: 5px;
  background: linear-gradient(180deg, rgba(127, 214, 240, 0.045), rgba(6, 8, 20, 0.72));
  backdrop-filter: blur(5px);
  transition: border-color .35s ease, background-color .35s ease, transform .35s ease;
}
.sd-track.b .ref-plate { background: linear-gradient(180deg, rgba(189, 162, 255, 0.045), rgba(6, 8, 20, 0.72)); }
.ref-plate:hover { border-color: rgba(127, 214, 240, 0.5); transform: translateY(-4px); }
.sd-track.b .ref-plate:hover { border-color: rgba(189, 162, 255, 0.5); }
.ref-num { font-family: var(--mono); font-size: 9px; letter-spacing: 0.28em; color: rgba(127, 214, 240, 0.7); }
.sd-track.b .ref-num { color: rgba(189, 162, 255, 0.75); }
.ref-logo { display: flex; align-items: center; flex: 1; min-height: 0; }
.ref-logo img { max-height: 74px; max-width: 82%; width: auto; height: auto; object-fit: contain; opacity: 0.82; transition: opacity .35s ease; }
.ref-plate:hover .ref-logo img { opacity: 1; }
.ref-name { font-family: var(--mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(236, 239, 250, 0.78); text-wrap: pretty; }

/* ---------------- 6 · Kontakt + footer ---------------- */
.contact { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(28px, 4.5vh, 56px); padding: 9vh clamp(24px, 6vw, 110px) 0; }
.contact-head { max-width: 900px; }
.contact-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(127, 214, 240, 0.8); margin-bottom: 22px; }
.contact-head .h2 { font-size: clamp(32px, 5vw, 76px); letter-spacing: -0.035em; line-height: 1.05; text-wrap: pretty; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 4vw, 70px); align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 26px; }
.info-item { display: flex; flex-direction: column; gap: 5px; }
.info-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-66); }
.info-link { font-size: clamp(18px, 1.8vw, 26px); font-weight: 300; }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.field {
  font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 300; color: var(--ink);
  background: rgba(236, 239, 250, 0.04); border: 1px solid rgba(236, 239, 250, 0.14);
  border-radius: 3px; padding: 15px 16px; outline: none; width: 100%;
  transition: border-color .3s ease, background-color .3s ease;
}
.field:focus { border-color: rgba(127, 214, 240, 0.6); background: rgba(127, 214, 240, 0.07); }
textarea.field { resize: vertical; min-height: 120px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.btn-send {
  align-self: flex-start; font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--bg); background: var(--ink);
  border: none; border-radius: 999px; padding: 15px 30px; cursor: pointer;
  transition: background-color .35s ease, transform .35s ease, opacity .3s ease;
}
.btn-send:hover { background: var(--a1); transform: translateY(-2px); }
.btn-send[disabled] { opacity: 0.5; cursor: default; transform: none; }
.form-status { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: rgba(127, 214, 240, 0.9); min-height: 14px; }
.form-status.err { color: #ff9ab0; }

.footer {
  position: relative; overflow: hidden; isolation: isolate;
  margin: auto calc(-1 * clamp(24px, 6vw, 110px)) 0;
  padding: clamp(40px, 7vh, 78px) clamp(24px, 6vw, 110px) clamp(24px, 3vh, 34px);
  border-top: 1px solid var(--hair);
}
.footer .crew-video {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1;
  object-fit: cover; opacity: 0.34; filter: grayscale(1) contrast(1.05);
}
.footer .crew-veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4,5,12,0.82) 0%, rgba(4,5,12,0.62) 45%, rgba(4,5,12,0.92) 100%);
}
.footer-inner { display: flex; flex-direction: column; gap: clamp(26px, 4.5vh, 52px); }
.crew-row { position: relative; width: 100%; }
.crew-strip { gap: clamp(12px, 1.4vw, 20px); }
.crew-shot {
  flex: 0 0 auto; min-width: clamp(150px, 16vw, 208px); height: clamp(88px, 11vh, 124px);
  border: 1px solid rgba(236, 239, 250, 0.12); border-radius: 6px; overflow: hidden; background: #0a0c1c;
}
.crew-shot img { width: 100%; height: 100%; object-fit: cover; opacity: 0.86; transition: opacity .4s ease; }
.crew-shot img:hover { opacity: 1; }
.crew-slogan {
  margin: 0; text-align: left; text-transform: uppercase; line-height: 1.02;
  font-weight: 200; letter-spacing: 0.02em; font-size: clamp(28px, 5.4vw, 72px);
}
.crew-slogan span { display: inline-block; }
.crew-slogan span:last-child { color: var(--a1); font-weight: 400; }
.footer-legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  padding-top: clamp(20px, 3vh, 30px); border-top: 1px solid var(--hair);
}
.footer-sig { width: min(40vw, 240px); height: auto; filter: invert(1); opacity: 0.8; }
.footer-meta { display: flex; flex-direction: column; gap: 6px; text-align: right; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-66); }
.footer-meta b { font-weight: 400; color: rgba(236, 239, 250, 0.72); }
@media (prefers-reduced-motion: reduce) { .footer .crew-video { display: none; } }

/* ---------------- project detail overlay ---------------- */
.detail {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(18px, 3vh, 34px);
  padding: 10vh clamp(24px, 6vw, 110px) 9vh;
  background: radial-gradient(100% 80% at 50% 45%, rgba(4, 5, 12, 0.84), rgba(4, 5, 12, 0.97));
  backdrop-filter: blur(12px); overflow-y: auto;
  opacity: 0; pointer-events: none; transform: translateY(34px);
  transition: opacity .55s ease .2s, transform .8s var(--ease) .2s;
}
.detail.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.pill {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink-70); background: none; border: 1px solid rgba(236, 239, 250, 0.2);
  border-radius: 999px; padding: 10px 18px; cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
}
.pill:hover { color: #fff; border-color: rgba(127, 214, 240, 0.6); }
.detail-back { position: absolute; top: clamp(18px, 3vw, 34px); right: clamp(18px, 3vw, 34px); padding: 11px 20px; }
.detail-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; }
.detail-meta .c { color: rgba(189, 162, 255, 0.9); }
.detail-meta .s { color: rgba(236, 239, 250, 0.3); }
.detail-meta .m { color: var(--ink-62); }
.detail-title { margin: 0; font-size: clamp(30px, 4.6vw, 72px); font-weight: 200; letter-spacing: -0.035em; line-height: 1.05; text-wrap: pretty; max-width: 1100px; }
.detail-desc { margin: 0; max-width: 760px; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.65; font-weight: 300; color: var(--ink-70); text-wrap: pretty; }
.detail-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.detail-tile {
  position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--hair); border-radius: 4px;
  background-color: #0a0c1c;
  background-image: repeating-linear-gradient(115deg, rgba(236, 239, 250, 0.055) 0 1px, transparent 1px 9px);
  overflow: hidden;
  display: flex; align-items: flex-end; padding: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-62);
}
.detail-tile img, .detail-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail-embed { grid-column: 1 / -1; position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--hair); border-radius: 4px; overflow: hidden; background: #000; }
.detail-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* self-hosted video player in the overlay */
.detail-player {
  grid-column: 1 / -1;
  position: relative; border: 1px solid var(--hair); border-radius: 5px; overflow: hidden;
  background: #000; max-height: 78vh; margin: 0 auto; width: 100%;
}
.detail-clips { grid-column: 1 / -1; }
.detail-player.h { aspect-ratio: 16 / 9; }
.detail-player.v { aspect-ratio: 9 / 16; max-width: min(440px, 46vh); }
.detail-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.detail-clips { display: flex; gap: 10px; flex-wrap: wrap; }
.detail-clip {
  position: relative; width: clamp(110px, 15vw, 168px); aspect-ratio: 16 / 10;
  border: 1px solid rgba(236,239,250,0.14); border-radius: 4px; overflow: hidden;
  cursor: pointer; background: #0a0c1c; padding: 0; flex: 0 0 auto;
  transition: border-color .3s ease;
}
.detail-clip[aria-current="true"] { border-color: rgba(127,214,240,0.7); }
.detail-clip:hover { border-color: rgba(127,214,240,0.5); }
.detail-clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail-clip span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #eceffa; background: linear-gradient(180deg, transparent, rgba(4,5,12,0.82));
  text-align: left;
}

/* phone / app screenshots (software projects) */
.detail-shots { grid-column: 1 / -1; display: flex; gap: clamp(12px, 1.4vw, 20px); flex-wrap: wrap; }
.detail-shot {
  width: clamp(150px, 19vw, 240px); border: 1px solid rgba(236,239,250,0.12);
  border-radius: 14px; overflow: hidden; background: #0a0c1c; cursor: zoom-in; padding: 0;
  transition: border-color .3s ease, transform .3s ease;
}
.detail-shot:hover { border-color: rgba(127,214,240,0.5); transform: translateY(-3px); }
.detail-shot img { display: block; width: 100%; height: auto; }
.detail-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--hair); font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: rgba(236, 239, 250, 0.55); }
.detail-nav { display: flex; gap: 10px; }

/* ---------------- persistent chrome ---------------- */
.lang { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: flex; align-items: center; justify-content: flex-end; padding: clamp(16px, 2.2vw, 30px); pointer-events: none; }
.lang-group { display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.lang-btn { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(236, 239, 250, 0.16); background: transparent; color: rgba(236, 239, 250, 0.6); cursor: pointer; }
.lang-btn[aria-pressed="true"] { background: rgba(236, 239, 250, 0.92); color: var(--bg); }

.stations { position: absolute; right: clamp(14px, 2vw, 28px); top: 50%; transform: translateY(-50%); z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.station-btn { display: flex; align-items: center; justify-content: flex-end; background: none; border: none; cursor: pointer; padding: 7px 0; width: 44px; color: var(--ink-66); transition: color .4s ease; }
.station-btn:hover { color: #fff; }
.station-btn i { display: block; width: 13px; height: 1px; background: currentColor; transition: width .4s var(--ease), height .4s ease; }
.station-btn[aria-current="true"] { color: var(--ink); }
.station-btn[aria-current="true"] i { width: 38px; height: 2px; }

.progress { position: absolute; bottom: 0; left: 0; height: 2px; z-index: 5; width: 0%; background: linear-gradient(90deg, #7fd6f0, #bda2ff); }

/* ---------------- keyframes ---------------- */
@keyframes sd-sig { from { -webkit-mask-size: 0% 100%; mask-size: 0% 100%; } to { -webkit-mask-size: 170% 100%; mask-size: 170% 100%; } }
@keyframes sd-logo { from { -webkit-mask-size: 0% 100%; mask-size: 0% 100%; opacity: 0; } 30% { opacity: 1; } to { -webkit-mask-size: 180% 100%; mask-size: 180% 100%; opacity: 1; } }
@keyframes sd-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } }
@keyframes sd-fadein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sd-fadein-cx { from { opacity: 0; transform: translateX(-50%) translateY(14px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes sd-marq-a { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sd-marq-b { from { transform: translateX(-50%); } to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .sd-scroll { scroll-behavior: auto; }
  .hero-hint { animation: none; }
  .sd-track.a, .sd-track.b { animation: none; }
  .hero-kicker, .hero-tags, .hero-logo-img { animation-duration: .01ms; }
}

@media (max-width: 640px) {
  .stations { gap: 12px; }
  .detail { padding: 10vh clamp(18px, 6vw, 40px) 7vh; }
}