/* BIODOM — Пътят на водата */
:root {
  --ink: #0d0f10;
  --blue: #1b75bb;
  --green: #39b54a;
  --paper: #f6f4f1;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  overflow-x: clip; /* НЕ hidden — чупи sticky на iOS */
  scroll-behavior: auto;
}
body {
  background: var(--ink);
  color: var(--paper);
  font-family: "Golos Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* ---------- topbar ---------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 26px;
  mix-blend-mode: difference;
  pointer-events: none;
}
.brand {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
}
.brand span {
  color: #8ec9ff;
}
.tag {
  font-size: 10px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  opacity: 0.75;
}

/* ---------- film ---------- */
.film {
  position: relative;
  width: 100%;
}
.film-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--ink);
}
.js-pin .film-stage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
#filmCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- scroll hint ---------- */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-size: 9.5px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transition: opacity 0.5s ease;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.6),
    0 0 14px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 5;
}
.scroll-hint i {
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, #fff, transparent);
  animation: drip 2.1s ease-in-out infinite;
}
@keyframes drip {
  0% {
    transform: scaleY(0.2);
    transform-origin: top;
    opacity: 0;
  }
  40% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    transform-origin: bottom;
    opacity: 0;
  }
}

/* ---------- outro ---------- */
.outro {
  position: relative;
  z-index: 10;
  background: var(--ink);
  padding: 16vh 8vw 18vh;
  text-align: center;
}
.outro h1 {
  font-size: clamp(28px, 5.2vw, 64px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 26px;
}
.outro h1 em {
  font-style: normal;
  color: #8ec9ff;
}
.outro p {
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.65;
  opacity: 0.72;
  max-width: 620px;
  margin: 0 auto 38px;
}
.cta {
  display: inline-block;
  padding: 15px 34px;
  border: 1.5px solid var(--paper);
  border-radius: 2px;
  color: var(--paper);
  text-decoration: none;
  font-size: 11.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}
.cta:hover {
  background: var(--paper);
  color: var(--ink);
}

/* ---------- mobile ---------- */
@media (max-width: 820px) {
  .topbar {
    padding: 14px 18px;
  }
  .brand {
    font-size: 13px;
  }
  .tag {
    font-size: 9px;
    letter-spacing: 2.5px;
  }
  .film-stage::after {
    /* долен скрим — текстът на моб. е bottom-anchored */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32%;
    background: linear-gradient(
      to top,
      rgba(13, 15, 16, 0.86),
      transparent 70%
    );
    pointer-events: none;
  }
}

/* ================= ИНТРО ================= */
.intro{
  position:fixed;inset:0;z-index:60;
  background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  transition:opacity .8s ease,visibility .8s;
}
.intro.out{opacity:0;visibility:hidden}
.intro-word{display:flex;gap:.06em;font-weight:800;letter-spacing:.14em;
  font-size:clamp(30px,8vw,86px);line-height:1}
.intro-word i{
  font-style:normal;display:inline-block;
  opacity:0;transform:translateY(26px) scale(.9);
  transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1);
}
.intro-word i.in{opacity:1;transform:none}
.intro-word i:nth-child(3),
.intro-word i:nth-child(4){color:#8ec9ff}
.intro-sub{
  font-size:clamp(9px,2.4vw,12px);letter-spacing:.45em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);transition:opacity .7s ease,transform .7s ease;
}
.intro.sub-in .intro-sub{opacity:.6;transform:none}

/* ================= СПИРКИ ================= */
.stops{position:absolute;inset:0;z-index:6;pointer-events:none}
.stop{
  position:absolute;opacity:0;pointer-events:none;
  transition:opacity .28s ease;
  will-change:opacity;
}
.stop-in{transition:transform .28s ease;will-change:transform}
.stop-in{
  background:rgba(12,14,15,.62);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(255,255,255,.13);
  border-radius:6px;
  padding:20px 22px;
}
.stop-eyebrow{
  display:block;font-size:9px;letter-spacing:3.2px;text-transform:uppercase;
  color:#8ec9ff;margin-bottom:9px;
}
.stop h2{font-size:20px;line-height:1.22;font-weight:700;margin-bottom:9px;letter-spacing:-.2px}
.stop p{font-size:13.5px;line-height:1.6;opacity:.82;margin-bottom:14px}

.stop-specs{list-style:none;margin-bottom:14px}
.stop-specs li{
  font-size:12px;opacity:.72;padding-left:15px;position:relative;margin-bottom:5px;
}
.stop-specs li::before{
  content:"";position:absolute;left:0;top:7px;width:5px;height:5px;
  background:#8ec9ff;border-radius:50%;
}
.stop-points{margin-bottom:12px}
.stop-points dt{font-size:12.5px;font-weight:700;margin-top:11px}
.stop-points dt:first-child{margin-top:0}
.stop-points dd{font-size:12px;line-height:1.55;opacity:.7;margin-top:2px}

.stop-picklabel{
  display:block;font-size:9px;letter-spacing:2.6px;text-transform:uppercase;
  opacity:.55;margin-bottom:8px;
}
.stop-opts{display:flex;flex-direction:column;gap:7px}
.opt{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:4px;padding:10px 12px;color:var(--paper);
  font-family:inherit;transition:background .18s ease,border-color .18s ease;
}
.opt:hover{background:rgba(255,255,255,.1)}
.opt.on{background:rgba(142,201,255,.16);border-color:#8ec9ff}
.opt b{display:block;font-size:12.5px;font-weight:700}
.opt i{display:block;font-style:normal;font-size:11px;opacity:.62;margin-top:2px}

.stop-link,.stop-openlink{
  display:inline-block;margin-top:13px;
  font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:#8ec9ff;text-decoration:none;border-bottom:1px solid rgba(142,201,255,.4);
  padding-bottom:2px;
}

/* --- десктоп: карта вдясно --- */
@media (min-width:821px){
  .stop{right:4vw;top:50%;transform:translateY(-50%);width:min(370px,32vw)}
  .stop-in{max-height:78vh;overflow-y:auto}
}

/* --- мобилно: картата долу, палецът я стига --- */
@media (max-width:820px){
  .stop{left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom))}
  .stop-in{
    padding:16px 16px 18px;
    max-height:56svh;overflow-y:auto;
    background:rgba(12,14,15,.74);
  }
  .stop h2{font-size:17px}
  .stop p{font-size:12.5px;margin-bottom:12px}
  .stop-points dd{font-size:11.5px}
  .opt{padding:12px 12px}          /* по-голяма мишена за пръст */
  .opt b{font-size:12.5px}
  .scroll-hint{bottom:auto;top:calc(60px + env(safe-area-inset-top))}
}

/* ---------- смяна на визията върху филма ---------- */
.swap{
  position:absolute;inset:0;z-index:5;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s ease,visibility .35s;
  cursor:pointer;
}
.swap.on{opacity:1;visibility:visible;pointer-events:auto}
.swap img{width:100%;height:100%;object-fit:cover;display:block}
.swap-x{
  position:absolute;top:calc(16px + env(safe-area-inset-top));left:50%;
  transform:translateX(-50%);
  background:rgba(12,14,15,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:8px 16px;font-size:10px;letter-spacing:2.4px;text-transform:uppercase;
}
@media (max-width:820px){
  .swap-x{top:calc(52px + env(safe-area-inset-top));font-size:9.5px;padding:9px 15px}
}

/* ================= GATE — заключена спирка ================= */
.gatebar{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(22px + env(safe-area-inset-bottom));
  z-index:12;display:flex;flex-direction:column;align-items:center;gap:9px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s ease,visibility .4s;
}
.gatebar.on{opacity:1;visibility:visible;pointer-events:auto}
.gate-btn{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  background:#8ec9ff;color:#0d0f10;border:0;border-radius:999px;
  padding:14px 30px;font-family:inherit;font-weight:700;
  font-size:12px;letter-spacing:2.6px;text-transform:uppercase;
  box-shadow:0 10px 34px rgba(0,0,0,.42);
  transition:transform .2s ease,background .2s ease;
}
.gate-btn:hover{transform:translateY(-2px);background:#a8d5ff}
.gate-btn i{
  width:8px;height:8px;border-right:2px solid #0d0f10;border-bottom:2px solid #0d0f10;
  transform:rotate(45deg) translate(-1px,-1px);
  animation:gnudge 1.7s ease-in-out infinite;
}
@keyframes gnudge{0%,100%{opacity:.5;margin-top:0}50%{opacity:1;margin-top:4px}}
.gate-note{
  font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;opacity:.6;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.is-gated .scroll-hint{opacity:0 !important}

@media (max-width:820px){
  /* на телефон картата е долу — бутонът отива НАД нея */
  .gatebar{bottom:auto;top:calc(60px + env(safe-area-inset-top))}
  .gate-btn{padding:12px 24px;font-size:11px;letter-spacing:2px}
  .gate-note{display:none}
  .swap-x{top:calc(112px + env(safe-area-inset-top))}
}

/* ============ ГОЛЯМ НАДПИС — кино/корица ============ */
.big{
  position:absolute;left:50%;transform:translateX(-50%);
  top:9vh;z-index:8;width:min(1200px,90vw);
  text-align:center;pointer-events:none;opacity:0;
  transition:opacity .45s ease;
}
.big.on{opacity:1}
.big-eyebrow{
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:4px;text-transform:uppercase;
  color:#cfe4f7;text-shadow:0 1px 8px rgba(0,0,0,.7);
  opacity:0;transform:translateY(-10px);
  margin-bottom:14px;
}
.big.on .big-eyebrow{animation:bigDown .6s cubic-bezier(.16,.84,.28,1) .1s forwards}
.big-num{color:#8ec9ff;font-weight:600}
.big-line{width:44px;height:1px;background:rgba(255,255,255,.5)}
.big-t{
  font-family:"Prata",Georgia,serif;font-weight:400;
  font-size:clamp(38px,6.8vw,104px);line-height:1.02;
  letter-spacing:.2px;
  text-shadow:0 4px 30px rgba(0,0,0,.85),0 0 90px rgba(0,0,0,.55);
  opacity:0;transform:translateY(30px) scale(.985);
  clip-path:inset(0 0 100% 0);
}
.big.on .big-t{animation:bigReveal .9s cubic-bezier(.16,.84,.28,1) .18s forwards}
@keyframes bigReveal{
  40%{clip-path:inset(0 0 0 0)}
  to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}
@keyframes bigDown{to{opacity:1;transform:none}}
@keyframes bigIn{to{opacity:1;transform:none}}
.big-specs{display:flex;flex-wrap:wrap;gap:11px;margin-top:22px;justify-content:center}
.big-specs span{
  display:inline-block;
  font-family:"IBM Plex Mono",monospace;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(10,12,13,.46);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:999px;padding:9px 19px;
  font-size:12px;letter-spacing:2.2px;text-transform:uppercase;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
  opacity:0;transform:translateY(16px);
}
.big.on .big-specs span{animation:bigIn .55s cubic-bezier(.16,.84,.28,1) forwards}

/* ============ HERO КОРИЦА ============ */
.cover{
  position:absolute;inset:0;z-index:7;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:16vh;text-align:center;
  opacity:0;pointer-events:none;
}
html.cover-in .cover{transition:opacity .9s ease .1s;opacity:1}
.cover-eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:5px;text-transform:uppercase;color:#cfe4f7;
  text-shadow:0 1px 8px rgba(0,0,0,.8);margin-bottom:16px;
  opacity:0;transform:translateY(12px);
}
.cover-t{
  font-family:"Prata",Georgia,serif;font-weight:400;
  font-size:clamp(40px,7.4vw,116px);line-height:1.04;
  text-shadow:0 4px 34px rgba(0,0,0,.85),0 0 100px rgba(0,0,0,.5);
  opacity:0;transform:translateY(26px);
}
.cover-sub{
  margin-top:18px;font-size:clamp(12px,1.4vw,16px);letter-spacing:.6px;
  opacity:0;transform:translateY(12px);
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}
html.cover-in .cover-eyebrow{animation:bigDown .7s cubic-bezier(.16,.84,.28,1) .25s forwards}
html.cover-in .cover-t{animation:bigIn .9s cubic-bezier(.16,.84,.28,1) .4s forwards}
html.cover-in .cover-sub{animation:bigIn .7s cubic-bezier(.16,.84,.28,1) .75s forwards}

/* интрото също на Prata */
.intro-word{font-family:"Prata",Georgia,serif;font-weight:400}

/* панелите: заглавие в Prata, eyebrow в Mono */
.stop h2{font-family:"Prata",Georgia,serif;font-weight:400;font-size:21px}
.stop-eyebrow{font-family:"IBM Plex Mono",monospace}
.stop-picklabel{font-family:"IBM Plex Mono",monospace}
.gate-note{font-family:"IBM Plex Mono",monospace}

/* лека горна винетка за четимост на надписите */
.film-stage::before{
  content:"";position:absolute;left:0;right:0;top:0;height:34%;z-index:6;
  background:linear-gradient(to bottom,rgba(10,12,13,.5),transparent 75%);
  pointer-events:none;
}

@media (max-width:820px){
  .big{top:calc(70px + env(safe-area-inset-top));width:94vw}
  .big-t{font-size:clamp(26px,8vw,40px)}
  .big-eyebrow{font-size:9px;letter-spacing:2.6px;margin-bottom:10px}
  .big-specs{gap:6px;margin-top:12px}
  .big-specs span{font-size:9px;padding:6px 11px;letter-spacing:1.2px}
  .cover{padding-bottom:22vh}
  .cover-t{font-size:clamp(30px,9.6vw,44px)}
  /* gate бутонът долу, панелът над него */
  .gatebar{top:auto;bottom:calc(12px + env(safe-area-inset-bottom))}
  .stop{bottom:calc(72px + env(safe-area-inset-bottom))}
  .stop-in{max-height:46svh}
  .swap-x{top:calc(64px + env(safe-area-inset-top))}
}

/* ============ ПОЗИЦИИ НА ГОЛЕМИЯ НАДПИС ============ */
.big--bc{top:auto;bottom:13vh}
.big--tl,.big--bl{left:5vw;transform:none;text-align:left;width:min(720px,48vw)}
.big--tr,.big--br{left:auto;right:5vw;transform:none;text-align:right;width:min(720px,48vw)}
.big--bl,.big--br{top:auto;bottom:13vh}
.big--tl .big-eyebrow,.big--bl .big-eyebrow{justify-content:flex-start}
.big--tr .big-eyebrow,.big--br .big-eyebrow{justify-content:flex-end}
.big--tl .big-specs,.big--bl .big-specs{justify-content:flex-start}
.big--tr .big-specs,.big--br .big-specs{justify-content:flex-end}

/* ============ МАРКЕР КЪМ ОБЕКТА ============ */
.mark{
  position:absolute;z-index:7;pointer-events:none;
  opacity:0;transition:opacity .5s ease .25s;
  transform:translate(-50%,-50%);
}
.mark.on{opacity:1}
.mark-dot{
  display:block;width:10px;height:10px;border-radius:50%;
  background:#8ec9ff;box-shadow:0 0 0 0 rgba(142,201,255,.65);
  animation:markPulse 2s ease-out infinite;
}
@keyframes markPulse{
  0%{box-shadow:0 0 0 0 rgba(142,201,255,.65)}
  70%{box-shadow:0 0 0 22px rgba(142,201,255,0)}
  100%{box-shadow:0 0 0 0 rgba(142,201,255,0)}
}
.mark-label{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  color:#e9f3fc;text-shadow:0 1px 6px rgba(0,0,0,.85);
  padding-left:12px;
}
.mark-label::before{
  content:"";position:absolute;left:0;top:50%;width:10px;height:1px;
  background:rgba(142,201,255,.8);
}

/* ============ ПРОГРЕС РЕЙЛ ============ */
.rail{
  position:fixed;left:18px;top:50%;transform:translateY(-50%);
  z-index:22;display:flex;flex-direction:column;gap:10px;
}
.rail-dot{
  position:relative;width:22px;height:22px;
  background:none;border:0;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.rail-dot i{
  display:block;width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.34);
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease;
}
.rail-dot.done i{background:rgba(142,201,255,.55)}
.rail-dot.on i{
  background:#8ec9ff;transform:scale(1.5);
  box-shadow:0 0 12px rgba(142,201,255,.8);
}
.rail-tip{
  position:absolute;left:26px;top:50%;transform:translateY(-50%) translateX(-6px);
  white-space:nowrap;opacity:0;pointer-events:none;
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
  background:rgba(12,14,15,.78);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);border-radius:4px;
  padding:6px 10px;color:#e9f3fc;
  transition:opacity .2s ease,transform .2s ease;
}
.rail-dot:hover .rail-tip{opacity:1;transform:translateY(-50%) translateX(0)}

@media (max-width:820px){
  .rail{display:none}
  .mark-label{display:none}
  .big--tl,.big--tr,.big--bl,.big--br,.big--bc{
    top:calc(70px + env(safe-area-inset-top));bottom:auto;
    left:50%;right:auto;transform:translateX(-50%);
    text-align:center;width:94vw;
  }
  .big--tl .big-eyebrow,.big--bl .big-eyebrow,.big--tr .big-eyebrow,.big--br .big-eyebrow{justify-content:center}
  .big--tl .big-specs,.big--bl .big-specs,.big--tr .big-specs,.big--br .big-specs{justify-content:center}
}