/* ---------- Первый экран: слои глубины с разной скоростью (схема Fora) ----------
   Секция НЕ закреплена и прокручивается как обычная. Глубину дают чёткие силуэты на разных расстояниях:
   --sy (px прокрутки, пишет js/scroll.js) сдвигает дальние слои вниз — они «отстают» от страницы.
     город-арт 31 %  ·  шестерни 24 %  ·  средний силуэт 17 %  ·  карта 20 %  ·  дымка 10 %  ·  передний силуэт 0 %
   Передний силуэт едет с полной скоростью и поэтому наползает на карту. Он того же цвета, что следующая
   секция, — он и есть переход к прологу: без шва и без пустого экрана. Без JS --sy = 0: статичная композиция. */
.hero{position:relative;overflow:clip;isolation:isolate;display:grid;justify-items:center;align-content:start;gap:clamp(32px,7vh,72px);min-height:142vh;min-height:142svh;padding:calc(var(--header-h) + 8vh) var(--gutter) 0;background:var(--ink-950);--sy:0} /* фон = цвет пролога: на стыке не остаётся волосяной линии */
.hero__layer{position:absolute;left:0;right:0;pointer-events:none}

.hero__far{top:0;height:118vh;height:118svh;background:url(../../img/hero-backlund.webp) 24% 30%/cover no-repeat;transform:translate3d(0,calc(var(--sy)*.31px),0);animation:rise 1.2s var(--spring) both;--from:72px}
.hero__far::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 55% at 68% 66%,rgba(224,138,44,.28),transparent 70%),linear-gradient(180deg,rgba(7,6,13,.9) 0,rgba(7,6,13,.62) 30%,rgba(7,6,13,.16) 54%,rgba(7,6,13,0) 70%)}

.hero__gears{top:0;height:100vh;height:100svh;transform:translate3d(0,calc(var(--sy)*.24px),0)}
.gear{position:absolute;color:var(--gold-400);opacity:.2}
.gear--a{right:-6%;top:10%;width:min(44vw,420px);transform:rotate(calc(var(--sy)*.1deg))}
.gear--b{left:-5%;top:50%;width:min(28vw,240px);transform:rotate(calc(var(--sy)*-.14deg))}

.hero__mid{bottom:18vh;bottom:18svh;height:clamp(180px,40vh,420px);background:url(../../img/skyline-mid.svg) repeat-x 50% 100%/auto 100%;opacity:.94;transform:translate3d(0,calc(var(--sy)*.17px),0);animation:lift 1.2s var(--spring) both;--from:48px}
.hero__mid::after{content:"";position:absolute;inset:40% 0 -40vh;background:linear-gradient(180deg,rgba(170,176,196,0) 0,rgba(170,176,196,.32) 45%,rgba(120,122,160,.5) 100%)} /* воздушная дымка у основания */

.hero__copy{position:relative;z-index:1;display:grid;justify-items:center;gap:18px;text-align:center}
.hero__title{font-size:var(--fs-h1);text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.hero__sub{max-width:38ch;color:#e9dcc6;text-shadow:0 1px 16px rgba(0,0,0,.7)}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}

.hero__card{position:relative;z-index:1;width:min(58vw,330px);aspect-ratio:735/1105;overflow:hidden;border:1px solid var(--gold-400);border-radius:18px;box-shadow:0 40px 80px -20px rgba(0,0,0,.85),0 0 0 6px rgba(7,6,13,.55),0 0 60px rgba(212,175,106,.18);transform:translate3d(0,calc(var(--sy)*.2px),0)}
.hero__card img{width:100%;height:100%;object-fit:cover}

.hero__wisp{bottom:26vh;bottom:26svh;height:46vh;z-index:1;overflow:hidden;transform:translate3d(0,calc(var(--sy)*.1px),0)}
.hero__wisp::before{content:"";position:absolute;inset:0 -8%;background:url(../../img/fog-2.webp) 50% 100%/100% 100% no-repeat;opacity:.5;animation:drift 70s ease-in-out infinite alternate}

.hero__near{bottom:-2px;z-index:2;border-bottom:3px solid var(--ink-950);height:clamp(230px,44vh,460px);background:url(../../img/skyline-near.svg) repeat-x 50% 100%/auto 100%;animation:lift 1.2s var(--spring) both;--from:36px}
.hero__hint{position:absolute;left:0;right:0;top:calc(100vh - 44px);top:calc(100svh - 44px);z-index:3;text-align:center;font-size:.8125rem;letter-spacing:.08em;color:var(--gold-200);opacity:calc(.9 - var(--sy)/160);pointer-events:none}

@keyframes drift{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(4%,0,0)}}
/* Сверхширокие мониторы (21:9): окно низкое, арт режется по высоте — держим верх кадра и сжимаем отступы */
@media(min-aspect-ratio:2/1){.hero{padding-top:calc(var(--header-h) + 4vh);gap:clamp(24px,5vh,48px)}.hero__far{background-position:24% 8%}.hero__copy{gap:12px}}
@media(prefers-reduced-motion:reduce){.hero__hint{display:none}}

/* ---------- Пролог ---------- */
.intro{padding-block:clamp(72px,11vw,140px) clamp(90px,16vw,180px);background:radial-gradient(70% 46% at 50% 58%,rgba(42,37,96,.3),transparent 72%)}
.intro__text{display:grid;gap:clamp(28px,5vw,48px);max-width:780px;margin-top:28px;font:500 var(--fs-lit)/1.22 var(--font-display)}
.intro__text p{color:var(--text)}

/* ---------- Клуб Таро: три акта, наслаивание «как у Fora» ----------
   У всех панелей ОДИН отступ сверху — никакой «лесенки» краёв. Закрытая панель стоит неподвижно, пока верх
   следующей не пересечёт середину окна (--cover из js/scroll.js), затем уходит: прозрачность → 0, масштаб → 0.9. */
.stack{display:grid;gap:48px}
.panel{position:sticky;top:calc(var(--header-h) + 24px)}
.panel__inner{display:grid;grid-template-rows:auto minmax(0,1fr);height:min(560px,calc(100vh - var(--header-h) - 24px - 72px));height:min(560px,calc(100svh - var(--header-h) - 24px - 72px));overflow:hidden;background:linear-gradient(160deg,var(--ink-800),var(--ink-900) 60%);opacity:calc(1 - var(--cover,0));transform:translate3d(0,calc(var(--cover,0)*-24px),0) scale(calc(1 - var(--cover,0)*.1))}

/* Карты одной высоты при разных пропорциях: ширина делится пропорционально --g (1 для карт 1:2, 1.333 для 2:3),
   высота получается из aspect-ratio. Ряд всегда помещается в колонку — ничего не обрезается и не прокручивается. */
.act__cards{display:flex;align-items:flex-end;justify-content:center;gap:10px;min-width:0;padding:22px 16px 12px;background:radial-gradient(70% 90% at 50% 40%,color-mix(in srgb,var(--tone) 34%,transparent),transparent 75%)}
.tcard{position:relative;flex:var(--g,1) 1 0;min-width:0;max-width:calc(var(--g,1)*150px);display:block;aspect-ratio:var(--ar,1/2);padding:0;border:1px solid rgba(212,175,106,.45);border-radius:10px;overflow:hidden;background:var(--ink-950);cursor:pointer;opacity:.55;transform:scale(.9);transform-origin:50% 100%;transition:opacity .45s var(--spring),transform .45s var(--spring),box-shadow .45s ease-out}
.tcard img{width:100%;height:100%;object-fit:cover}
.tcard:hover,.tcard:focus-visible{opacity:.85}
.tcard.is-active{opacity:1;transform:scale(1);border-color:var(--gold-400);box-shadow:0 22px 44px -14px rgba(0,0,0,.9),0 0 40px rgba(212,175,106,.22)}
.tcard.is-picked::after{content:"✦";position:absolute;top:6px;right:6px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gold-400);color:#1a1407;font-size:.75rem}
/* запечатанная карта второй книги: рубашка с филигранью вместо арта */
.tcard--sealed{--g:1.333;display:grid;place-items:center;aspect-ratio:2/3;background:repeating-linear-gradient(45deg,rgba(212,175,106,.1) 0 6px,transparent 6px 12px),radial-gradient(circle at 50% 50%,#2a2560,var(--ink-950) 75%);color:var(--gold-400);font:600 clamp(1.5rem,5vh,2.5rem)/1 var(--font-display)}

.act__detail{display:grid;align-content:start;gap:10px;min-height:0;padding:14px 22px 22px;overflow:hidden}
.act__eyebrow{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fog-300)}
.act__infos{display:grid}
.act__info{grid-area:1/1;display:grid;align-content:start;gap:8px;opacity:0;visibility:hidden;transform:translate3d(0,12px,0);transition:opacity .45s var(--spring),transform .45s var(--spring),visibility 0s .45s}
.act__info.is-active{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.panel__num{font:600 .8125rem/1 var(--font-text);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400)}
.panel__name{font-size:var(--fs-h3)}
.panel__desc{font-size:.9375rem;color:var(--fog-300)}
.panel__path{font-size:.8125rem;color:var(--gold-200)}
.act__pick{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:4px}
.act__status{font-size:.8125rem;color:var(--gold-200)}
@media(min-width:860px){
  .panel__inner{grid-template-rows:none;grid-template-columns:1.1fr .9fr;height:min(520px,calc(100vh - var(--header-h) - 24px - 72px));height:min(520px,calc(100svh - var(--header-h) - 24px - 72px))}
  .panel--flip .act__cards{order:2}
  .act__cards{align-items:center;gap:14px;padding:36px 28px}
  .tcard{max-width:calc(var(--g,1)*170px)}
  .act__detail{align-content:center;gap:14px;padding:44px}
  .panel__desc{font-size:1.0625rem}
}
/* без JS все описания видны списком */
html:not(.has-tarot) .act__info{opacity:1;visibility:visible;transform:none;grid-area:auto}

/* ---------- Хиты, валюта, сообщество, обратная связь ---------- */
.hits{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.hits__more{margin-top:36px;text-align:center}

.coins{display:grid;gap:16px}
.coin-card{display:grid;gap:12px;padding:26px}
.coin-card h3{font-size:1.625rem}
.coin-card p{font-size:.9375rem;color:var(--fog-300)}
.coin{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;font:700 1.375rem/1 var(--font-display);color:#1a1407;background:radial-gradient(circle at 35% 30%,var(--gold-200),var(--gold-400) 60%,#8a6a2f);box-shadow:inset 0 0 0 3px rgba(26,20,7,.25),0 8px 20px -6px rgba(212,175,106,.5)}
.coin--soli{background:radial-gradient(circle at 35% 30%,#fff,#b9bfd0 60%,#6c7288);box-shadow:inset 0 0 0 3px rgba(20,22,35,.25),0 8px 20px -6px rgba(170,176,196,.45)}
.coin--penny{background:radial-gradient(circle at 35% 30%,#f0b48a,#b5683a 60%,#6e3a1c);box-shadow:inset 0 0 0 3px rgba(40,18,6,.3),0 8px 20px -6px rgba(181,104,58,.45)}
.bonus{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;padding:26px;background:linear-gradient(120deg,color-mix(in srgb,var(--indigo-700) 55%,var(--ink-900)),var(--ink-900))}
.bonus h3{font-size:var(--fs-h3)}
@media(min-width:720px){.coins{grid-template-columns:repeat(3,1fr)}}

.club{display:grid;gap:28px;align-items:center}
.chat-demo{display:grid;gap:12px;padding:22px}
.bubble{max-width:85%;padding:12px 16px;border:1px solid rgba(255,255,255,.06);border-radius:16px 16px 16px 4px;background:var(--ink-800);font-size:.9375rem}
.bubble b{display:block;margin-bottom:2px;font-size:.75rem;letter-spacing:.04em;color:var(--gold-400)}
.bubble--me{justify-self:end;border-radius:16px 16px 4px 16px;background:color-mix(in srgb,var(--indigo-700) 60%,var(--ink-800))}
@media(min-width:860px){.club{grid-template-columns:1fr 1fr;gap:56px}}

.feedback{display:grid;gap:18px;max-width:640px;padding:clamp(22px,4vw,40px)}