@media (max-width:580px){ .bg-shell { font-size:1.4rem; } }
.bg-shell .h1, .bg-shell h1{ font-family:'Forum',serif; font-weight:400; font-size:10rem; line-height:0.78; letter-spacing:-0.015em; margin:0; }
.bg-shell .h2, .bg-shell h2{ font-family:'Forum',serif; font-weight:400; font-size:7.6rem; line-height:0.9; letter-spacing:-0.015em; margin:0; }
.bg-shell .h3, .bg-shell h3{ font-family:'Forum',serif; font-weight:400; font-size:3.2rem; line-height:1.11; margin:0; }
.bg-shell .h4, .bg-shell h4{ font-family:'Forum',serif; font-weight:400; font-size:2.4rem; line-height:1.17; margin:0; }
@media (max-width:1120px){ .bg-shell h1, .bg-shell .h1{ font-size:7.3rem; } .bg-shell h2, .bg-shell .h2{ font-size:5.9rem; } .bg-shell h3, .bg-shell .h3{ font-size:2.6rem; } .bg-shell h4, .bg-shell .h4{ font-size:2.1rem; } }
@media (max-width:580px){ .bg-shell h1, .bg-shell .h1{ font-size:4.6rem; line-height:0.755; } .bg-shell h2, .bg-shell .h2{ font-size:4.2rem; line-height:0.763; } .bg-shell h3, .bg-shell .h3{ font-size:2rem; } .bg-shell h4, .bg-shell .h4{ font-size:1.8rem; } }
/* Footer вплотную к .bg-shell — без 8rem кремовой пустоты сверху
(см. sass/layouts/footer.scss → .footer { margin-top:8rem }). На таро-страницах
.section уже даёт padding-bottom:100px внутри тёмного фона. */
/* ============ PAGE BG ============ */
.bg-shell{
position:relative; overflow:clip; min-height:100vh;
background:
radial-gradient(ellipse at 30% 20%,rgba(79,114,93,0.18) 0%,transparent 45%),
radial-gradient(ellipse at 80% 80%,rgba(204,166,86,0.15) 0%,transparent 50%),
linear-gradient(180deg,#0d1029 0%,#15193a 50%,#1d2148 100%);
background-color:#0d1029;
}
.bg-shell::before{
content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
background:
radial-gradient(1px 1px at 8% 14%,#fff 50%,transparent),
radial-gradient(1px 1px at 22% 32%,#fff 50%,transparent),
radial-gradient(1.5px 1.5px at 38% 18%,transparent 0%,transparent),
radial-gradient(1px 1px at 55% 24%,#fff 50%,transparent),
radial-gradient(1px 1px at 72% 14%,#fff 50%,transparent),
radial-gradient(1.5px 1.5px at 88% 28%,var(--gold) 50%,transparent),
radial-gradient(1.5px 1.5px at 14% 52%,var(--gold) 50%,transparent),
radial-gradient(1px 1px at 32% 64%,#fff 50%,transparent),
radial-gradient(1px 1px at 48% 78%,#fff 50%,transparent),
radial-gradient(2px 2px at 64% 56%,var(--gold-light) 50%,transparent),
radial-gradient(1px 1px at 80% 72%,#fff 50%,transparent),
radial-gradient(1.5px 1.5px at 92% 90%,var(--gold) 50%,transparent),
radial-gradient(1px 1px at 6% 88%,#fff 50%,transparent),
radial-gradient(1.5px 1.5px at 28% 92%,var(--gold-light) 50%,transparent);
background-size:
1100px 750px, 950px 680px, 850px 720px, 1050px 800px,
920px 640px, 1180px 760px, 980px 700px, 1020px 740px,
880px 660px, 1100px 820px, 940px 680px, 1060px 770px,
870px 700px, 990px 730px;
opacity:0.8;
}
/* ============ HERO ============ */
.hero{
position:relative; padding:80px var(--wrapper-offset) 80px;
min-height:100vh; display:flex; flex-direction:column; align-items:center; text-align:center;
z-index:1;
}
/* ─── Глобальный декор: только по краям, редко (вдоль всей страницы) ─── */
.bg-glyphs{
position:fixed; inset:0; pointer-events:none; z-index:0;
opacity:0.9;
background-repeat:repeat-y;
background-image:
/* Левая колонка — сердце, потом полумесяц */
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
/* Правая колонка — звёздочка, потом контурное сердце */
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
/* Дополнительные редкие искорки в обеих колонках со смещением */
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-size:
220px 850px, 220px 1100px,
220px 950px, 220px 1200px,
220px 1400px, 220px 1500px;
background-position:
left 80px, left 480px,
right 60px, right 540px,
left 1100px, right 980px;
}
@media (max-width:680px){
.bg-glyphs{
/* На мобилке сдвигаем символы вплотную к краям экрана */
background-position:
-65px 80px, -90px 480px,
calc(100% + 65px) 60px, calc(100% + 65px) 540px,
-65px 1100px, calc(100% + 65px) 980px;
}
}
.hero > .eyebrow,.hero > h1,.hero > .lede,.hero > .pills,.hero > .cta-row,.hero > .stage,.hero > .result{
will-change:transform;
}
.hero .eyebrow{ font-size:1.4rem; text-transform:uppercase; letter-spacing:0.4em; color:var(--gold); margin-bottom:24px; }
.hero h1{ font-size:9.6rem; line-height:0.95; margin-bottom:24px; max-width:1100px; color:#fbf8ec; }
.hero h1 em{ font-style:italic; color:var(--gold); }
.hero .lede{ font-size:1.8rem; line-height:1.55; color:#c4c2cc; max-width:620px; margin-bottom:40px; }
.hero .pills{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; justify-content:center; }
.hero .pills button{
background:rgba(255,255,255,0.04); border:1px solid rgba(204,166,86,0.4); color:#f4f1e6;
padding:11px 22px; border-radius:999px; font-size:1.4rem; font-weight:500;
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:all .2s;
}
.hero .pills button:hover{ background:rgba(204,166,86,0.18); border-color:var(--gold); }
.hero .pills button.active{ background:var(--gold); color:#1a1518; border-color:var(--gold); font-weight:600; }
.hero .pills button.active:hover{ background:var(--gold-light); }
.hero .cta-row{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:center; }
.hero .cta-primary{
background:linear-gradient(135deg,var(--gold) 0%,var(--gold-dark) 100%); color:#1a1518; border:none;
padding:18px 40px; border-radius:999px; font-size:1.6rem; font-weight:600;
box-shadow:0 12px 32px rgba(204,166,86,0.35);
transition:transform .15s;
}
.hero .cta-primary:hover{ transform:translateY(-1px); }
.hero .cta-primary:disabled{ opacity:.5; cursor:wait; transform:none; }
.hero .cta-secondary{
background:transparent; color:var(--gold); border:1px solid rgba(204,166,86,0.45);
padding:17px 30px; border-radius:999px; font-size:1.4rem; font-weight:500;
letter-spacing:0.04em; transition:all .15s;
}
.hero .cta-secondary:hover{ background:rgba(204,166,86,0.1); border-color:var(--gold); }
.hero .cta-secondary:disabled{ opacity:.5; cursor:wait; }
.hero .cta-secondary .ico,
.hero .cta-tertiary .ico{ display:inline-block; vertical-align:-2px; margin-right:8px; width:1.6rem; height:1.6rem; }
.hero .cta-tertiary{
background:transparent; color:var(--gold); border:1px solid rgba(204,166,86,0.45);
padding:17px 26px; border-radius:999px; font-size:1.4rem; font-weight:500;
letter-spacing:0.04em; transition:all .15s;
display:inline-flex; align-items:center;
}
.hero .cta-tertiary:hover{ background:rgba(204,166,86,0.1); border-color:var(--gold); }
.hero .cta-tertiary:disabled{ opacity:.5; cursor:wait; }
.hero .current-deck{
margin-top:24px; font-size:1.3rem; color:#c4c2cc;
display:inline-flex; align-items:center; gap:10px; justify-content:center;
}
.hero .current-deck b{ color:var(--gold-light); font-weight:500; }
.hero .current-deck .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); display:inline-block; }
/* ============ DECK MODAL ============ */
.deck-modal{
position:fixed; inset:0; background:rgba(8,9,22,0.78);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
display:none; align-items:center; justify-content:center; z-index:200;
padding:24px; opacity:0; transition:opacity .25s ease;
}
.deck-modal.open{ display:flex; opacity:1; }
.deck-modal .box{
background:linear-gradient(180deg,#1a1f44 0%,#11142e 100%);
border:1px solid rgba(204,166,86,0.22); border-radius:24px;
padding:40px 40px 28px; width:100%; max-width:720px;
box-shadow:0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(204,166,86,0.08);
transform:translateY(12px) scale(0.985); transition:transform .3s ease;
text-align:center; position:relative;
}
.deck-modal.open .box{ transform:none; }
.deck-modal .x{
position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
background:transparent; border:none; color:#c4c2cc; font-size:2.4rem; line-height:1; cursor:pointer;
display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.deck-modal .x:hover{ background:rgba(255,255,255,0.06); color:#f4f1e6; }
.deck-modal h3{ font-family:'Forum',serif; font-weight:400; font-size:3.2rem; margin:0 0 8px; color:#fbf8ec; }
.deck-modal .sub{ color:#c4c2cc; font-size:1.4rem; margin:0 0 32px; }
.deck-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:32px; }
.deck-opt{
position:relative; cursor:pointer; border:1px solid rgba(204,166,86,0.16);
border-radius:18px; padding:20px 18px 18px; background:rgba(255,255,255,0.015);
transition:all .2s ease; text-align:center;
}
.deck-opt:hover{ border-color:rgba(204,166,86,0.45); background:rgba(204,166,86,0.04); transform:translateY(-2px); }
.deck-opt .card-wrap{
position:relative; aspect-ratio:0.62; width:80%; margin:0 auto 14px;
border-radius:10px; overflow:hidden;
box-shadow:0 14px 28px rgba(0,0,0,0.45);
}
.deck-opt .card-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.deck-opt .label{ font-family:'Forum',serif; font-size:2rem; color:#fbf8ec; margin-bottom:4px; line-height:1.1; }
.deck-opt .author{ font-size:1.2rem; color:#c4c2cc; letter-spacing:0.02em; }
.deck-opt .check{
position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:50%;
background:rgba(13,16,41,0.7); border:1.5px solid rgba(204,166,86,0.4);
display:flex; align-items:center; justify-content:center; transition:all .25s ease;
}
.deck-opt .check svg{ width:14px; height:14px; opacity:0; transform:scale(0.5); transition:all .25s ease; }
.deck-opt .check svg path{ stroke:#1a1518; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.deck-opt.selected{
border-color:var(--gold); background:rgba(204,166,86,0.07);
box-shadow:0 0 0 1px var(--gold) inset, 0 18px 38px rgba(204,166,86,0.18);
}
.deck-opt.selected .check{ background:var(--gold); border-color:var(--gold); }
.deck-opt.selected .check svg{ opacity:1; transform:scale(1); }
.deck-opt.selected .label{ color:var(--gold-light); }
.deck-modal .actions{ display:flex; gap:12px; justify-content:center; }
.deck-modal .apply{
background:linear-gradient(135deg,var(--gold) 0%,var(--gold-dark) 100%);
color:#1a1518; border:none; padding:16px 48px; border-radius:999px;
font-size:1.5rem; font-weight:600; cursor:pointer;
box-shadow:0 12px 28px rgba(204,166,86,0.35); transition:transform .15s;
}
.deck-modal .apply:hover{ transform:translateY(-1px); }
.deck-modal .cancel{
background:transparent; color:#c4c2cc; border:1px solid rgba(255,255,255,0.1);
padding:15px 28px; border-radius:999px; font-size:1.4rem; cursor:pointer; transition:all .15s;
}
.deck-modal .cancel:hover{ color:#f4f1e6; border-color:rgba(255,255,255,0.25); }
@media (max-width:580px){
.deck-modal .box{ padding:28px 20px 22px; }
.deck-row{ grid-template-columns:1fr 1fr; gap:14px; }
.deck-opt{ padding:14px 10px 12px; }
.deck-opt .card-wrap{ width:92%; }
.deck-modal h3{ font-size:2.4rem; }
}
/* ============ RESULT (после раскрытия) ============ */
.result{ margin-top:80px; width:100%; opacity:0; transition:opacity .5s ease; pointer-events:none; }
.result.show{ opacity:1; pointer-events:auto; }
/* ============ Сетка карточек с летящей картой ============ */
.cells{ display:grid; grid-template-columns:1fr 1fr; gap:80px 32px; margin:60px 0 32px; }
.cells .cell:last-child{ grid-column:1/-1; }
.cell{
position:relative;
background:rgba(255,255,255,0.04);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
border:1px solid rgba(204,166,86,0.2);
border-radius:18px;
padding:36px 36px 36px 268px;
min-height:420px;
text-align:left;
}
.cell .pos-lbl, .cell .card-name, .cell .body-text, .cell .meaning{ text-align:left; }
.cell .cell-img{
position:absolute; left:36px; top:-50px;
width:200px; height:340px;
background-size:cover; background-position:center top;
border-radius:12px;
box-shadow:0 30px 80px rgba(15,18,40,0.6), inset 0 0 0 1px rgba(204,166,86,0.4);
transform:perspective(1200px) rotateY(8deg);
transition:transform 1s cubic-bezier(.2,.7,.25,1), box-shadow .8s ease;
z-index:2;
}
.cell .btn-meaning{
display:none; /* Кнопка скрыта: трактовка карты теперь видна всегда */
}
.cell .btn-meaning:hover{ background:rgba(204,166,86,0.08); border-color:var(--gold); border-style:solid; }
.cell .btn-meaning .arr{ display:inline-block; transition:transform .2s; }
.cell .btn-meaning:hover .arr{ transform:translateX(3px); }
.cell:hover .cell-img{
transform:perspective(1200px) rotateY(0deg) translateY(-12px);
box-shadow:0 50px 120px rgba(204,166,86,0.35), inset 0 0 0 1px rgba(204,166,86,0.6);
}
/* Уэйта — белое свечение под картой результата */
body[data-deck="classic"] .cell:hover .cell-img{
box-shadow:0 50px 120px rgba(255,250,240,0.42), inset 0 0 0 1px rgba(204,166,86,0.6);
}
.cell .num-mark{
position:absolute; right:24px; top:18px;
font-family:'Forum',serif; font-size:6.4rem; line-height:0.78;
color:rgba(204,166,86,0.55);
pointer-events:none; user-select:none;
}
.cell .pos-lbl{
font-size:1.4rem; text-transform:uppercase; letter-spacing:0.22em;
color:var(--gold); font-weight:600; display:inline-block;
}
.cell .card-name{
font-family:'Forum',serif; font-size:4.4rem; line-height:1.05; color:#fbf8ec;
margin:6px 0 16px;
}
.cell .body-text{ font-size:1.8rem; line-height:1.65; color:#dadbe0; margin:0 0 18px; }
.cell .meaning{
margin-top:18px; padding-top:18px;
border-top:1px dashed rgba(204,166,86,0.25);
font-size:1.5rem; line-height:1.65; color:#bdbfc7;
display:block;
}
.cell .meaning .lbl{
font-size:1.05rem; letter-spacing:0.22em; text-transform:uppercase;
color:var(--gold); margin-bottom:8px; font-weight:600;
}
.btn-secondary{
background:transparent; color:var(--gold); border:1px solid rgba(204,166,86,0.45);
padding:10px 20px; border-radius:999px; font-family:inherit;
font-size:1.3rem; font-weight:500; letter-spacing:0.04em; cursor:pointer;
transition:all .2s; display:inline-flex; align-items:center; gap:8px;
}
.btn-secondary:hover{ background:rgba(204,166,86,0.12); border-color:var(--gold); }
.btn-secondary .arr{ display:inline-block; transition:transform .2s; }
.btn-secondary:hover .arr{ transform:translateX(3px); }
@media (max-width:1280px){
.cell{ padding:32px 32px 32px 248px; }
.cell .cell-img{ width:180px; height:306px; left:32px; }
.cell .btn-meaning{ left:32px; top:280px; width:180px; }
}
@media (max-width:980px){
.cells{ grid-template-columns:1fr; gap:80px; }
.cell{ padding:28px 28px 28px 220px; }
.cell .cell-img{ width:170px; height:289px; left:28px; top:-40px; }
.cell .btn-meaning{ left:28px; top:264px; width:170px; }
}
@media (max-width:580px){
.cells{ gap:120px; margin-top:120px; }
.cell{ padding:200px 24px 24px; min-height:0; text-align:left; }
.cell .cell-img{ left:50%; top:-150px; width:140px; height:238px; transform:translateX(-50%) perspective(1200px) rotateY(0deg); }
.cell:hover .cell-img{ transform:translateX(-50%) perspective(1200px) rotateY(0deg) translateY(-8px); }
.cell .num-mark{ font-size:4.4rem; right:18px; top:14px; }
.cell .card-name{ font-size:3.4rem; }
.cell .btn-meaning{ position:relative; left:auto; top:auto; width:100%; margin-top:18px; }
}
/* ============ Общий итог — wow + aurora + snake ============ */
.result-summary{
position:relative;
margin-top:32px;
background:linear-gradient(135deg, #181c34 0%, #1a1f3a 55%, #1d2148 100%);
border:1px solid rgba(204,166,86,0.5);
border-radius:20px;
padding:60px 56px;
isolation:isolate;
animation:rsGlow 5s ease-in-out infinite alternate;
}
@keyframes rsGlow{
from{ box-shadow:0 40px 100px rgba(15,18,40,0.55), 0 0 40px rgba(204,166,86,0.10); }
to { box-shadow:0 40px 110px rgba(15,18,40,0.55), 0 0 90px rgba(204,166,86,0.22); }
}
.rs-aurora{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; z-index:0; }
.rs-aurora .blob{
position:absolute;
width:46%; height:78%;
border-radius:50%; filter:blur(60px); opacity:0.35;
left:0; top:0;
will-change:transform;
}
.rs-aurora .blob-1{
background:radial-gradient(circle, rgba(251,216,144,0.55) 0%, rgba(204,166,86,0.2) 35%, transparent 70%);
animation:blobOrbit 44s linear infinite;
}
.rs-aurora .blob-2{
background:radial-gradient(circle, rgba(168,128,228,0.5) 0%, rgba(138,79,175,0.2) 35%, transparent 70%);
animation:blobOrbit 44s linear infinite -11s;
}
.rs-aurora .blob-3{
background:radial-gradient(circle, rgba(108,188,220,0.45) 0%, rgba(60,130,180,0.18) 35%, transparent 70%);
animation:blobOrbit 44s linear infinite -22s;
}
.rs-aurora .blob-4{
background:radial-gradient(circle, rgba(228,128,148,0.45) 0%, rgba(176,86,108,0.18) 35%, transparent 70%);
animation:blobOrbit 44s linear infinite -33s;
}
@keyframes blobOrbit{
0% { transform:translate(-20%, -30%); }
25% { transform:translate( 75%, -30%); }
50% { transform:translate( 75%, 55%); }
75% { transform:translate(-20%, 55%); }
100% { transform:translate(-20%, -30%); }
}
.rs-stars{
position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; z-index:0;
background:
radial-gradient(1px 1px at 8% 22%,#fff 50%,transparent),
radial-gradient(1px 1px at 30% 80%,var(--gold-light) 50%,transparent),
radial-gradient(0.8px 0.8px at 65% 30%,#fff 50%,transparent),
radial-gradient(1px 1px at 88% 60%,var(--gold-light) 50%,transparent),
radial-gradient(1.2px 1.2px at 50% 50%,#fff 50%,transparent),
radial-gradient(0.8px 0.8px at 18% 65%,#fff 50%,transparent),
radial-gradient(1px 1px at 75% 88%,var(--gold-light) 50%,transparent),
radial-gradient(0.8px 0.8px at 92% 35%,#fff 50%,transparent),
radial-gradient(1px 1px at 42% 18%,var(--gold-light) 50%,transparent);
background-size:800px 600px;
animation:starsTwinkle 4s ease-in-out infinite alternate;
}
@keyframes starsTwinkle{ from{ opacity:0.35; } to{ opacity:0.85; } }
.rs-frame{
position:absolute; left:10px; right:10px; top:10px; bottom:10px;
border:1px solid rgba(204,166,86,0.28);
border-radius:14px; pointer-events:none; z-index:1;
}
.rs-snake-track{ position:absolute; inset:0; pointer-events:none; z-index:5; border-radius:inherit; }
.snake-star, .snake-trail{
position:absolute; top:0; left:0;
offset-path:inset(0 round 20px);
-webkit-offset-path:inset(0 round 20px);
offset-anchor:50% 50%;
offset-rotate:0deg;
offset-distance:0%;
animation:snake-orbit 14s linear infinite;
display:flex; align-items:center; justify-content:center;
}
.snake-star{ width:30px; height:30px; filter:drop-shadow(0 0 8px var(--gold-light)) drop-shadow(0 0 18px var(--gold)); }
.snake-star svg{ width:100%; height:100%; animation:snake-spin 4s linear infinite; }
.snake-trail{
border-radius:50%;
background:radial-gradient(circle, var(--gold-light) 0%, var(--gold) 55%, transparent 75%);
filter:drop-shadow(0 0 6px var(--gold));
}
.snake-trail-1{ width:14px; height:14px; animation-delay:-0.18s; opacity:0.7; }
.snake-trail-2{ width:10px; height:10px; animation-delay:-0.36s; opacity:0.45; }
.snake-trail-3{ width:8px; height:8px; animation-delay:-0.54s; opacity:0.28; }
.snake-trail-4{ width:6px; height:6px; animation-delay:-0.72s; opacity:0.15; }
.rs-snake-track.snake-2 .snake-star{ animation-delay:-7s; }
.rs-snake-track.snake-2 .snake-trail-1{ animation-delay:-7.18s; }
.rs-snake-track.snake-2 .snake-trail-2{ animation-delay:-7.36s; }
.rs-snake-track.snake-2 .snake-trail-3{ animation-delay:-7.54s; }
.rs-snake-track.snake-2 .snake-trail-4{ animation-delay:-7.72s; }
@keyframes snake-orbit{ to{ offset-distance:100%; } }
@keyframes snake-spin{ to{ transform:rotate(360deg); } }
.rs-particles{ position:absolute; inset:0; pointer-events:none; z-index:2; overflow:visible; }
.particle{
position:absolute;
left:var(--x); top:var(--y, 80%);
width:var(--size); height:var(--size);
background:radial-gradient(circle, var(--color) 0%, transparent 75%);
border-radius:50%;
filter:drop-shadow(0 0 6px var(--color));
animation:particleRise var(--dur) ease-in-out var(--delay) infinite;
opacity:0;
}
@keyframes particleRise{
0% { transform:translate(0,0) scale(0.4); opacity:0; }
15% { opacity:1; }
80% { opacity:1; }
100% { transform:translate(var(--drift), var(--rise)) scale(1.2); opacity:0; }
}
.rs-content{
position:relative; z-index:3;
display:grid; grid-template-columns:1fr 440px; gap:48px; align-items:center;
text-align:left;
}
@media (max-width:1100px){
.rs-content{ grid-template-columns:1fr; gap:36px; }
.rs-content .rs-cards{ order:-1; height:420px; max-width:460px; margin:0 auto; }
}
.rs-content .s-title{
font-family:'Forum',serif; font-size:7rem; line-height:1; font-weight:400;
color:#fbf8ec; margin:0 0 22px;
text-shadow:0 0 30px rgba(204,166,86,0.18);
letter-spacing:-0.005em;
}
.rs-content .s-pair{
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
font-family:'Forum',serif; font-size:2.6rem; line-height:1.2; font-weight:400;
color:#fbf8ec; margin:0 0 24px;
}
.rs-content .s-pair .name{ color:#fbf8ec; }
.rs-content .s-pair .ornament{
display:inline-flex; align-items:center;
color:var(--gold); height:24px;
}
.rs-content .s-pair .ornament svg{ height:18px; width:auto; display:block; filter:drop-shadow(0 0 6px rgba(204,166,86,0.5)); }
.rs-content .rs-body p{
font-size:1.8rem; line-height:1.7; color:#dadbe0; margin:0 0 18px; max-width:62rem;
}
.rs-content .rs-body p b{ color:var(--gold); font-weight:500; }
.rs-content .rs-body p:last-child{ margin-bottom:0; }
/* Карты-обложки справа (сдвинуты левее) */
.rs-cards{
position:relative;
min-height:480px;
display:flex; align-items:center; justify-content:flex-start;
padding-left:8px;
}
.rs-card{
position:relative; width:240px; height:360px;
border-radius:16px;
border:1px solid rgba(204,166,86,0.55);
box-shadow:
0 28px 70px rgba(0,0,0,0.55),
0 0 50px rgba(204,166,86,0.15),
inset 0 0 0 5px rgba(204,166,86,0.1);
overflow:hidden;
animation:rs-card-float 7s ease-in-out infinite alternate;
}
.rs-card::before{
content:""; position:absolute; inset:10px;
border:1px solid rgba(204,166,86,0.45);
border-radius:11px;
pointer-events:none;
}
.rs-card::after{
content:""; position:absolute; inset:16px;
border:1px solid rgba(204,166,86,0.2);
border-radius:7px;
pointer-events:none;
}
.rs-card[data-tone="violet"]{
background:
radial-gradient(ellipse at 50% 30%, rgba(204,166,86,0.18) 0%, transparent 70%),
linear-gradient(180deg, #3a1a5e 0%, #1f0f3d 50%, #080418 100%);
}
.rs-card[data-tone="wine"]{
background:
radial-gradient(ellipse at 50% 30%, rgba(204,166,86,0.16) 0%, transparent 70%),
linear-gradient(180deg, #5a1620 0%, #2a0a14 50%, #150408 100%);
}
.rs-card[data-tone="teal"]{
background:
radial-gradient(ellipse at 50% 30%, rgba(204,166,86,0.16) 0%, transparent 70%),
linear-gradient(180deg, #1a5a78 0%, #0b3344 50%, #062028 100%);
}
.rs-card[data-tone="steel"]{
background:
radial-gradient(ellipse at 50% 30%, rgba(204,166,86,0.16) 0%, transparent 70%),
linear-gradient(180deg, #3a4458 0%, #1a2030 50%, #08080c 100%);
}
.rs-card.rs-card-front{ z-index:2; transform:rotate(-5deg); }
.rs-card.rs-card-back{
position:absolute; left:60px; top:50%;
transform:translateY(-50%) translateX(110px) rotate(9deg);
z-index:1; opacity:0.95;
animation:rs-card-float-back 7s ease-in-out infinite alternate;
}
@keyframes rs-card-float{
from{ transform:translateY(-5px) rotate(-5deg); }
to { transform:translateY( 5px) rotate(-5deg); }
}
@keyframes rs-card-float-back{
from{ transform:translateY(-47%) translateX(110px) rotate(9deg); }
to { transform:translateY(-53%) translateX(110px) rotate(9deg); }
}
.rs-card-art{
position:absolute; inset:22px;
display:flex; align-items:center; justify-content:center;
}
.rs-card-art svg{
width:100%; height:100%;
stroke:rgba(251,216,144,0.85); fill:none; stroke-width:1.2;
filter:drop-shadow(0 0 6px rgba(251,216,144,0.4));
}
.rs-card-art .filled{ fill:rgba(251,216,144,0.9); stroke:none; }
.rs-card-art .dim{ stroke:rgba(204,166,86,0.45); }
.rs-card-art .very-dim{ stroke:rgba(204,166,86,0.28); }
.rs-card-art .glow{ fill:rgba(251,216,144,0.6); stroke:none; filter:blur(2px); }
/* анимации паттерна — зацикленные, GPU-only */
.rs-card-art .rays-slow { transform-origin:center; animation:rs-spin 60s linear infinite; }
.rs-card-art .rays-fast { transform-origin:center; animation:rs-spin 28s linear infinite reverse; }
.rs-card-art .ring-dotted { transform-origin:center; animation:rs-spin 80s linear infinite; }
.rs-card-art .ring-dashed { transform-origin:center; animation:rs-spin 50s linear infinite reverse; }
.rs-card-art .pulse-star { transform-origin:center; animation:rs-pulse 4s ease-in-out infinite alternate; }
.rs-card-art .pulse-core { transform-origin:center; animation:rs-pulse-core 3s ease-in-out infinite alternate; }
.rs-card-art .twinkle-1 { animation:rs-twinkle 3.2s ease-in-out infinite; }
.rs-card-art .twinkle-2 { animation:rs-twinkle 4.1s ease-in-out -1.2s infinite; }
.rs-card-art .twinkle-3 { animation:rs-twinkle 2.8s ease-in-out -2.0s infinite; }
.rs-card-art .twinkle-4 { animation:rs-twinkle 3.6s ease-in-out -0.7s infinite; }
.rs-card-art .twinkle-5 { animation:rs-twinkle 4.4s ease-in-out -2.6s infinite; }
@keyframes rs-spin{ to{ transform:rotate(360deg) } }
@keyframes rs-pulse{ from{ opacity:0.65; transform:scale(0.96) } to{ opacity:1; transform:scale(1.04) } }
@keyframes rs-pulse-core{ from{ opacity:0.55 } to{ opacity:1 } }
@keyframes rs-twinkle{
0%,100% { opacity:0.2; transform:scale(0.85) }
50% { opacity:1; transform:scale(1.15) }
}
@media (max-width:980px){
.result-summary{ padding:48px 32px; }
.rs-content .s-title{ font-size:4.6rem; }
}
@media (max-width:580px){
.result-summary{ padding:36px 22px; }
.rs-frame{ left:6px; right:6px; top:6px; bottom:6px; }
.rs-content .s-title{ font-size:3.6rem; }
.rs-content .rs-body p{ font-size:1.6rem; }
}
/* ============ Раскрыть с другого ракурса ============ */
.try-other{
margin-top:24px;
background:linear-gradient(135deg, rgba(79,114,93,0.1) 0%, rgba(15,18,40,0.4) 100%);
border:1px solid rgba(204,166,86,0.3); border-radius:20px;
padding:48px;
}
.try-other .head{
display:flex; align-items:flex-end; justify-content:space-between;
gap:32px; margin-bottom:32px; padding-bottom:24px;
border-bottom:1px solid rgba(204,166,86,0.18);
}
.try-other .eyebrow{ font-size:1.4rem; text-transform:uppercase; letter-spacing:0.22em; color:var(--gold); margin-bottom:14px; font-weight:600; }
.try-other h3{ font-family:'Forum',serif; font-size:4.4rem; line-height:1; color:#fbf8ec; margin:0; font-weight:400; }
.try-other .head-sub{ font-size:1.55rem; line-height:1.5; color:#dadbe0; max-width:38rem; text-align:right; flex-shrink:0; }
.try-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.try-card{
position:relative; z-index:1; display:flex; flex-direction:column; gap:12px;
background-color:#1a1a2e;
border:1px solid rgba(204,166,86,0.25); border-radius:14px;
padding:22px 22px 20px;
text-decoration:none; color:inherit;
transition:background-color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.2,.7,.25,1), box-shadow .25s ease;
}
.try-card .spread-svg{
display:block; width:100%; height:140px; margin:8px 0 4px;
transform-origin:center center;
transition:transform .25s cubic-bezier(.2,.7,.25,1);
}
.try-card:hover{ transform:translateY(-4px); z-index:10; }
.try-grid:hover > .try-card:not(:hover){ z-index:1; }
.try-card:hover .spread-svg{ transform:scale(1.12); }
.try-card .badge{
align-self:flex-start;
font-family:'Manrope',sans-serif; font-size:1.4rem; line-height:1; color:var(--gold);
padding:6px 14px; border-radius:999px;
border:1px solid rgba(204,166,86,0.4);
background:rgba(204,166,86,0.08);
letter-spacing:0.18em; text-transform:uppercase; font-weight:600;
}
.try-card .ttl{ font-family:'Forum',serif; font-size:2.8rem; line-height:1; color:#fbf8ec; margin:6px 0 0; font-weight:400; }
.try-card .desc{ font-size:1.6rem; line-height:1.5; color:#dadbe0; margin:0; flex:1; }
.try-card .arrow{ display:inline-flex; align-items:center; gap:6px; font-size:1.3rem; color:var(--gold); letter-spacing:0.04em; margin-top:8px; }
.try-card .arrow .arr{ transition:transform .2s ease; }
.try-card:hover .arrow .arr{ transform:translateX(4px); }
/* Hover — плоский цвет в тон + тень-свечение в тон карточки */
.try-card[data-tone="teal"]:hover{
background-color:#0c3848; border-color:rgba(80,180,200,0.55);
box-shadow:0 14px 32px rgba(0,0,0,0.45), 0 0 28px rgba(122,220,220,0.25);
}
.try-card[data-tone="wine"]:hover{
background-color:#3a1018; border-color:rgba(218,82,138,0.55);
box-shadow:0 14px 32px rgba(0,0,0,0.45), 0 0 28px rgba(245,168,168,0.25);
}
.try-card[data-tone="violet"]:hover{
background-color:#241040; border-color:rgba(140,80,220,0.55);
box-shadow:0 14px 32px rgba(0,0,0,0.45), 0 0 28px rgba(200,168,232,0.25);
}
.try-card[data-tone="steel"]:hover{
background-color:#22293a; border-color:rgba(140,160,190,0.55);
box-shadow:0 14px 32px rgba(0,0,0,0.45), 0 0 28px rgba(168,184,200,0.22);
}
@media (max-width:1280px){ .try-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:580px){
.try-other{ padding:28px; }
.try-other .head{ flex-direction:column; align-items:flex-start; gap:14px; }
.try-other .head-sub{ text-align:left; max-width:none; }
.try-grid{ grid-template-columns:1fr; gap:10px; }
}
/* ============ Birth-form (cosmic) — 1:1 с birth-promo-variants.html ============ */
.birth-promo{
position:relative; margin-top:24px;
border-radius:24px; padding:60px 56px;
background:
radial-gradient(ellipse at 0% 0%, rgba(138,79,175,0.18) 0%, transparent 55%),
radial-gradient(ellipse at 100% 100%, rgba(218,128,158,0.16) 0%, transparent 55%),
linear-gradient(140deg, rgba(36,28,72,0.65), rgba(15,18,40,0.9));
border:1px solid rgba(204,166,86,0.3);
overflow:hidden;
text-align:left;
}
.birth-promo::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(1.2px 1.2px at 14% 22%, rgba(251,216,144,0.5) 50%, transparent),
radial-gradient(1px 1px at 86% 30%, rgba(251,216,144,0.45) 50%, transparent),
radial-gradient(1.2px 1.2px at 30% 82%, rgba(251,216,144,0.5) 50%, transparent),
radial-gradient(1px 1px at 88% 78%, rgba(251,216,144,0.45) 50%, transparent),
radial-gradient(0.8px 0.8px at 55% 15%, rgba(204,166,86,0.4) 50%, transparent);
animation:cosmic-twinkle 6s ease-in-out infinite alternate;
}
@keyframes cosmic-twinkle{ from{ opacity:0.5; } to{ opacity:0.9; } }
.birth-promo > *{ position:relative; z-index:1; }
/* токены */
.birth-promo .bp-title{
font-family:'Forum',serif; font-size:5rem; line-height:1.1; color:#fbf8ec;
max-width:78rem; margin:0 0 18px;
font-weight:400; letter-spacing:0; text-align:left;
}
.birth-promo .bp-title em{ font-style:italic; color:#fbf8ec; font-weight:400; }
.birth-promo .bp-lead{
font-size:1.8rem; color:#dadbe0; line-height:1.6;
max-width:62rem; margin:0 0 36px;
}
/* теги-плашки */
.birth-promo .tag-grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
gap:10px; margin:0 0 40px;
}
.birth-promo .tag-plate{
display:flex; align-items:center; gap:14px;
background:rgba(204,166,86,0.08);
border-radius:12px; padding:16px 20px;
transition:background .25s, transform .25s;
}
.birth-promo .tag-plate:hover{ background:rgba(204,166,86,0.16); transform:translateY(-2px); }
.birth-promo .tag-plate .ico{
flex-shrink:0; position:relative;
width:36px; height:36px;
border-radius:8px;
background:rgba(204,166,86,0.18);
display:flex; align-items:center; justify-content:center;
animation:bp-ico-pulse 4s ease-in-out infinite;
}
.birth-promo .tag-plate .ico svg{
width:22px; height:22px; fill:var(--gold-light);
animation:bp-ico-shimmer 4s ease-in-out infinite;
}
.birth-promo .tag-plate .txt{ font-size:1.5rem; color:#fbf8ec; line-height:1.2; letter-spacing:.02em; }
@keyframes bp-ico-pulse{
0%,100%{ box-shadow:0 0 0 rgba(251,216,144,0); }
50% { box-shadow:0 0 14px rgba(251,216,144,0.35), 0 0 22px rgba(228,168,200,0.18); }
}
@keyframes bp-ico-shimmer{
0%,100%{ fill:var(--gold-light); filter:drop-shadow(0 0 0 transparent); }
50% { fill:#ffe6b0; filter:drop-shadow(0 0 4px rgba(251,216,144,0.6)); }
}
.birth-promo .tag-plate .ico::before,
.birth-promo .tag-plate .ico::after{
content:"✦"; position:absolute;
color:var(--gold-light); font-size:9px; line-height:1;
opacity:0; pointer-events:none;
text-shadow:0 0 4px rgba(251,216,144,0.6), 0 0 8px rgba(228,168,200,0.3);
animation:bp-ico-spark 5s ease-in-out infinite;
}
.birth-promo .tag-plate .ico::before{ top:-5px; right:-6px; animation-delay:0s; }
.birth-promo .tag-plate .ico::after{
bottom:-4px; left:-5px; animation-delay:2.4s; font-size:7px;
color:#ffd9e0; text-shadow:0 0 4px rgba(228,168,200,0.7);
}
@keyframes bp-ico-spark{
0%,100% { opacity:0; transform:scale(0.3) rotate(0deg); }
45%,55% { opacity:1; transform:scale(1) rotate(20deg); }
70% { opacity:0; transform:scale(0.6) rotate(40deg); }
}
.birth-promo .tag-plate:nth-child(1) .ico{ animation-delay:0s; }
.birth-promo .tag-plate:nth-child(2) .ico{ animation-delay:0.7s; }
.birth-promo .tag-plate:nth-child(3) .ico{ animation-delay:1.4s; }
.birth-promo .tag-plate:nth-child(4) .ico{ animation-delay:0.4s; }
.birth-promo .tag-plate:nth-child(5) .ico{ animation-delay:2.1s; }
.birth-promo .tag-plate:nth-child(6) .ico{ animation-delay:1.1s; }
.birth-promo .tag-plate:nth-child(7) .ico{ animation-delay:1.8s; }
.birth-promo .tag-plate:nth-child(1) .ico svg{ animation-delay:0s; }
.birth-promo .tag-plate:nth-child(2) .ico svg{ animation-delay:0.7s; }
.birth-promo .tag-plate:nth-child(3) .ico svg{ animation-delay:1.4s; }
.birth-promo .tag-plate:nth-child(4) .ico svg{ animation-delay:0.4s; }
.birth-promo .tag-plate:nth-child(5) .ico svg{ animation-delay:2.1s; }
.birth-promo .tag-plate:nth-child(6) .ico svg{ animation-delay:1.1s; }
.birth-promo .tag-plate:nth-child(7) .ico svg{ animation-delay:1.8s; }
.birth-promo .tag-plate:nth-child(1) .ico::before{ animation-delay:0.2s; }
.birth-promo .tag-plate:nth-child(2) .ico::before{ animation-delay:1.1s; }
.birth-promo .tag-plate:nth-child(3) .ico::before{ animation-delay:2.0s; }
.birth-promo .tag-plate:nth-child(4) .ico::before{ animation-delay:3.0s; }
.birth-promo .tag-plate:nth-child(5) .ico::before{ animation-delay:0.6s; }
.birth-promo .tag-plate:nth-child(6) .ico::before{ animation-delay:1.7s; }
.birth-promo .tag-plate:nth-child(7) .ico::before{ animation-delay:2.6s; }
.birth-promo .tag-plate:nth-child(1) .ico::after{ animation-delay:2.6s; }
.birth-promo .tag-plate:nth-child(2) .ico::after{ animation-delay:3.5s; }
.birth-promo .tag-plate:nth-child(3) .ico::after{ animation-delay:0.4s; }
.birth-promo .tag-plate:nth-child(4) .ico::after{ animation-delay:1.4s; }
.birth-promo .tag-plate:nth-child(5) .ico::after{ animation-delay:3.0s; }
.birth-promo .tag-plate:nth-child(6) .ico::after{ animation-delay:0.1s; }
.birth-promo .tag-plate:nth-child(7) .ico::after{ animation-delay:1.0s; }
/* CTA-текст */
.birth-promo .cta-text{
font-family:'Forum',serif; font-size:3.2rem; color:#fbf8ec; line-height:1.2;
margin:0 0 24px; max-width:64rem; font-weight:400;
}
.birth-promo .cta-text em{ color:#fbf8ec; font-style:normal; }
/* поля формы */
.birth-promo .form-grid{
display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; align-items:end;
}
.birth-promo .bp-field{
display:flex; flex-direction:column; gap:8px;
background:transparent; border:0; padding:0;
}
.birth-promo .bp-field label{
font-size:1.15rem; text-transform:uppercase; letter-spacing:.22em;
color:var(--gold); font-weight:500; margin:0;
}
.birth-promo .bp-select{
height:62px; width:100%;
background:rgba(15,18,40,0.4);
border:1px solid rgba(204,166,86,0.45);
border-radius:10px;
color:#fbf8ec; padding:0 42px 0 18px;
font-family:inherit; font-size:1.7rem;
cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 18px center;
transition:border-color .25s, background-color .25s;
outline:none;
}
.birth-promo .bp-select:focus, .birth-promo .bp-select:hover{
border-color:var(--gold);
background-color:rgba(15,18,40,0.6);
}
.birth-promo .bp-select.is-placeholder{ color:rgba(251,248,236,0.55); }
.birth-promo .bp-select option{ background:#1a1f3a; color:#fbf8ec; }
.birth-promo .bp-select option[disabled]{ color:rgba(251,248,236,0.55); }
.birth-promo .bp-btn,
.bk-panel .bk-btn{
height:62px; padding:0 32px;
background:var(--gold); color:#1a1518;
border:0; border-radius:10px;
font-family:'Forum',serif; font-size:2.1rem; font-weight:400;
cursor:pointer; white-space:nowrap; letter-spacing:.02em;
transition:transform .15s, background .25s, box-shadow .25s;
display:inline-flex; align-items:center; justify-content:center; gap:8px;
box-shadow:none;
}
.birth-promo .bp-btn:hover,
.bk-panel .bk-btn:hover{
background:var(--gold-light); transform:translateY(-1px);
box-shadow:0 12px 28px -8px rgba(204,166,86,0.4);
}
.birth-promo .bp-btn:active,
.bk-panel .bk-btn:active{ transform:scale(0.98); }
.birth-promo .bp-btn .arr,
.bk-panel .bk-btn .arr{ display:inline-block; transition:transform .2s; }
.birth-promo .bp-btn:hover .arr,
.bk-panel .bk-btn:hover .arr{ transform:translateX(3px); }
@media (max-width:980px){ .birth-promo{ padding:48px 32px; } .birth-promo .bp-title{ font-size:4rem; } .birth-promo .cta-text{ font-size:2.4rem; } }
@media (max-width:760px){
.birth-promo .form-grid{ grid-template-columns:1fr 1fr; }
.birth-promo .form-grid .bp-btn{ grid-column:1/-1; }
}
@media (max-width:580px){ .birth-promo{ padding:36px 22px; } .birth-promo .bp-title{ font-size:3.2rem; } }
/* ============ Book-Promo (A+C hybrid) ============ */
.book-promo{
position:relative; margin-top:32px;
border:1px solid rgba(204,166,86,0.45); border-radius:24px; padding:48px 60px; overflow:hidden;
background:
radial-gradient(ellipse at 50% -20%, rgba(251,216,144,0.18) 0%, transparent 55%),
radial-gradient(ellipse at 100% 110%, rgba(204,166,86,0.12) 0%, transparent 50%),
linear-gradient(160deg, rgba(35,39,75,0.7) 0%, rgba(15,18,40,0.88) 100%);
display:grid; grid-template-columns: minmax(380px, 1fr) 1.1fr; gap:60px; align-items:center;
}
.book-promo[hidden]{ display:none; }
.book-promo .corner{ position:absolute; width:48px; height:48px; pointer-events:none; opacity:0; transition:opacity .8s ease .9s; }
.book-promo.show .corner{ opacity:1; }
.book-promo .corner.tl{ top:18px; left:18px; border-top:1.5px solid var(--gold); border-left:1.5px solid var(--gold); border-radius:14px 0 0 0; }
.book-promo .corner.tr{ top:18px; right:18px; border-top:1.5px solid var(--gold); border-right:1.5px solid var(--gold); border-radius:0 14px 0 0; }
.book-promo .corner.bl{ bottom:18px; left:18px; border-bottom:1.5px solid var(--gold); border-left:1.5px solid var(--gold); border-radius:0 0 0 14px; }
.book-promo .corner.br{ bottom:18px; right:18px; border-bottom:1.5px solid var(--gold); border-right:1.5px solid var(--gold); border-radius:0 0 14px 0; }
.bk-stage{ position:relative; height:460px; display:flex; align-items:center; justify-content:center; perspective:1500px; }
.bk-halo{ position:absolute; width:420px; height:420px; border-radius:50%; pointer-events:none;
background:radial-gradient(circle, rgba(251,216,144,0.45) 0%, rgba(204,166,86,0.16) 38%, transparent 66%);
filter:blur(14px); opacity:0; transition:opacity 1.2s ease 0.3s; }
.book-promo.show .bk-halo{ opacity:1; animation:bkHaloPulse 4.5s ease-in-out 1.6s infinite; }
@keyframes bkHaloPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.1); opacity:0.85; } }
.bk-orbit{ position:absolute; width:520px; height:520px; pointer-events:none; opacity:0; transition:opacity 1.5s ease 0.5s; }
.book-promo.show .bk-orbit{ opacity:0.7; animation:bkOrbitSpin 70s linear 1.5s infinite; }
@keyframes bkOrbitSpin{ to{ transform:rotate(360deg); } }
.bk-const{ position:absolute; width:520px; height:520px; pointer-events:none; opacity:0; transition:opacity 1.5s ease 0.7s; }
.book-promo.show .bk-const{ opacity:0.55; animation:bkConstSpin 110s linear 2s infinite; }
@keyframes bkConstSpin{ to{ transform:rotate(-360deg); } }
.bk-const .line{ stroke:var(--gold-light); stroke-width:0.9; fill:none; stroke-dasharray:700; stroke-dashoffset:700; }
.book-promo.show .bk-const .line{ animation:bkDrawLine 2s ease forwards 0.8s; }
@keyframes bkDrawLine{ to{ stroke-dashoffset:0; } }
.bk-const .star{ fill:var(--gold-light); opacity:0; }
.book-promo.show .bk-const .star{ animation:bkStarFade 0.6s ease forwards 1.5s; }
@keyframes bkStarFade{ to{ opacity:1; } }
.bk-book{ position:relative; width:260px; height:380px; transform-style:preserve-3d;
opacity:0; transform: rotateY(180deg) rotateX(2deg) scale(0.82);
transition: opacity .8s ease, transform 1.5s cubic-bezier(.34,1.55,.64,1);
}
.book-promo.show .bk-book{ opacity:1; transform: rotateY(12deg) rotateX(2deg) scale(1); animation:bkFloat 6.5s ease-in-out 2s infinite; }
@keyframes bkFloat{
0%,100%{ transform: rotateY(12deg) rotateX(2deg) translateY(0); }
50% { transform: rotateY(10deg) rotateX(2deg) translateY(-12px); }
}
.bk-spine{ position:absolute; right:-14px; top:7px; bottom:7px; width:16px;
background: linear-gradient(-90deg, #0a0d1f 0%, #1a1f3a 60%, #2a2f5a 100%);
border-right:1px solid var(--gold); border-radius:0 4px 4px 0;
transform: rotateY(90deg); transform-origin:left center;
box-shadow: inset 2px 0 6px rgba(0,0,0,0.6);
}
.bk-spine::before{ content:""; position:absolute; left:2px; right:2px; top:18%; bottom:18%;
border-top:1px solid rgba(204,166,86,0.4); border-bottom:1px solid rgba(204,166,86,0.4); }
.bk-cover{
position:absolute; inset:0; border-radius:8px;
background:
radial-gradient(ellipse at 50% 38%, rgba(251,216,144,0.22) 0%, transparent 55%),
linear-gradient(180deg, #2a2f5a 0%, #1a1f3a 50%, #0f1228 100%);
border:2px solid var(--gold);
box-shadow:
0 50px 100px rgba(0,0,0,0.6),
0 22px 44px rgba(204,166,86,0.28),
inset 0 0 0 1px rgba(204,166,86,0.25);
overflow:hidden;
}
.bk-cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
display:block; pointer-events:none; z-index:0; }
.bk-cover-img:not([src]){ display:none; }
.bk-sheen{ position:absolute; left:0; right:0; top:-100%; height:200%;
background:linear-gradient(180deg, transparent 0%, rgba(251,216,144,0.16) 50%, transparent 100%);
pointer-events:none; z-index:0; }
.book-promo.show .bk-sheen{ animation:bkSheen 4s ease-in-out 2.4s infinite; }
@keyframes bkSheen{ 0%{ transform:translateY(0); } 60%,100%{ transform:translateY(60%); } }
.bk-dust{ position:absolute; inset:0; pointer-events:none; }
.bk-dust .p{ position:absolute; width:2px; height:2px; border-radius:50%; background:var(--gold-light);
opacity:0; animation:bkDustRise var(--d,8s) linear infinite; animation-delay:var(--dl,0s);
box-shadow:0 0 6px var(--gold-light);
}
@keyframes bkDustRise{
0%{ transform:translate(0,0) scale(0.6); opacity:0; }
10%{ opacity:1; }
90%{ opacity:0.8; }
100%{ transform:translate(var(--dx,30px), -280px) scale(1); opacity:0; }
}
.bk-panel{ position:relative; padding-right:8px; text-align:left;
opacity:0; transform:translateX(40px); transition:opacity 1s ease 0.7s, transform 1s cubic-bezier(.2,.7,.25,1) 0.7s;
}
.book-promo.show .bk-panel{ opacity:1; transform:translateX(0); }
.bk-panel h3{ font-family:'Forum',serif; font-size:5rem; line-height:1.02; color:#fbf8ec; margin:0 0 22px; font-weight:400; text-align:left; }
.bk-panel h3 em{ color:var(--gold); font-style:italic; }
.bk-panel .bk-lead{ font-size:1.8rem; line-height:1.55; color:#dadbe0; margin:0 0 32px; text-align:left; }
.bk-panel .bk-lead strong{ color:#fbf8ec; font-weight:500; }
.bk-panel .bk-cta{ display:flex; gap:24px; align-items:center; flex-wrap:wrap; justify-content:flex-start; }
.bk-panel .bk-price{ display:inline-flex; align-items:baseline; gap:10px; font-family:'Forum',serif; font-size:1.8rem; }
.bk-panel .bk-price-now{ color:var(--gold-light); font-size:2.2rem; font-style:normal; letter-spacing:.01em; }
.bk-panel .bk-price-old{ color:#8a8474; font-size:2.2rem; text-decoration:line-through; text-decoration-color:rgba(204,166,86,0.7); text-decoration-thickness:1.5px; font-style:italic; }
@media (max-width:1120px){
.book-promo{ grid-template-columns:1fr; padding:40px 28px; gap:24px; }
.bk-stage{ height:420px; }
.bk-panel h3{ font-size:3.8rem; }
}
@media (max-width:580px){
.book-promo{ padding:36px 18px; border-radius:16px; }
.bk-stage{ height:400px; }
.bk-book{ width:220px; height:330px; }
.bk-orbit, .bk-const{ width:380px; height:380px; }
.bk-halo{ width:320px; height:320px; }
.bk-panel h3{ font-size:3.2rem; }
.bk-panel .bk-btn{ width:100%; }
}
/* ============ STAGE & DECK ============ */
.stage{ position:relative; width:100%; height:520px; margin-bottom:36px; }
.deck{ position:absolute; inset:0; }
.card{
position:absolute; left:50%; top:50%; width:200px; height:340px; margin:-170px 0 0 -100px;
border-radius:10px; background:#23274b;
box-shadow:0 30px 80px rgba(204,166,86,0.28), 0 6px 20px rgba(15,18,40,0.6);
-webkit-transform-style:preserve-3d; transform-style:preserve-3d;
-webkit-transform:translate(0,0) rotate(0deg) perspective(1400px) rotateY(0deg) scale(1);
transform:translate(0,0) rotate(0deg) perspective(1400px) rotateY(0deg) scale(1);
}
@media (max-width:980px){ .card{ width:140px; height:238px; margin:-119px 0 0 -70px; } }
@media (max-width:580px){ .card{ width:108px; height:184px; margin:-92px 0 0 -54px; } }
.card .face,.card .back{
position:absolute; inset:0; border-radius:10px;
-webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.card .back{ background:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDM0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmciIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIzMjc0YiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzFhMWYzYSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZjEyMjgiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9Imdsb3ciIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjUwJSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjY2E2NTYiIHN0b3Atb3BhY2l0eT0iMC4xOCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iI2NjYTY1NiIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjYTY1NiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogICAgPHBhdHRlcm4gaWQ9ImRvdHMiIHg9IjAiIHk9IjAiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxjaXJjbGUgY3g9IjciIGN5PSI3IiByPSIwLjUiIGZpbGw9IiNjY2E2NTYiIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgogICAgPC9wYXR0ZXJuPgogIDwvZGVmcz4KCiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIzNDAiIGZpbGw9InVybCgjYmcpIiByeD0iMTAiLz4KICA8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjM0MCIgZmlsbD0idXJsKCNkb3RzKSIgcng9IjEwIi8+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIzNDAiIGZpbGw9InVybCgjZ2xvdykiIHJ4PSIxMCIvPgoKICA8cmVjdCB4PSI2IiB5PSI2IiB3aWR0aD0iMTg4IiBoZWlnaHQ9IjMyOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjY2NhNjU2IiBzdHJva2Utd2lkdGg9IjAuOCIgc3Ryb2tlLW9wYWNpdHk9IjAuNyIgcng9IjYiLz4KICA8cmVjdCB4PSIxMSIgeT0iMTEiIHdpZHRoPSIxNzgiIGhlaWdodD0iMzE4IiBmaWxsPSJub25lIiBzdHJva2U9IiNjY2E2NTYiIHN0cm9rZS13aWR0aD0iMC41IiBzdHJva2Utb3BhY2l0eT0iMC40NSIgcng9IjQiLz4KCiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAwLDE3MCkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2NjYTY1NiI+CiAgICA8Y2lyY2xlIHI9IjQ0IiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuNyIvPgogICAgPGNpcmNsZSByPSIzNiIgc3Ryb2tlLXdpZHRoPSIwLjUiIHN0cm9rZS1vcGFjaXR5PSIwLjUiLz4KICAgIDxjaXJjbGUgcj0iMjgiIHN0cm9rZS13aWR0aD0iMC40IiBzdHJva2Utb3BhY2l0eT0iMC40NSIvPgoKICAgIDxnIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSI+CiAgICAgIDxwYXRoIGQ9Ik0gMCwtNTAgTCA4LC04IEwgNTAsMCBMIDgsOCBMIDAsNTAgTCAtOCw4IEwgLTUwLDAgTCAtOCwtOCBaIi8+CiAgICAgIDxwYXRoIGQ9Ik0gMCwtNTAgTCA4LC04IEwgNTAsMCBMIDgsOCBMIDAsNTAgTCAtOCw4IEwgLTUwLDAgTCAtOCwtOCBaIiB0cmFuc2Zvcm09InJvdGF0ZSgyMi41KSIgc3Ryb2tlLW9wYWNpdHk9IjAuNiIvPgogICAgPC9nPgoKICAgIDxnIHN0cm9rZS13aWR0aD0iMC42IiBzdHJva2Utb3BhY2l0eT0iMC44Ij4KICAgICAgPHBhdGggZD0iTSAwLC0yMiBMIDUsLTUgTCAyMiwwIEwgNSw1IEwgMCwyMiBMIC01LDUgTCAtMjIsMCBMIC01LC01IFoiIHRyYW5zZm9ybT0icm90YXRlKDQ1KSIvPgogICAgPC9nPgoKICAgIDxjaXJjbGUgcj0iMy41IiBmaWxsPSIjY2NhNjU2IiBzdHJva2U9Im5vbmUiLz4KICAgIDxjaXJjbGUgcj0iNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHN0cm9rZS1vcGFjaXR5PSIwLjYiLz4KICA8L2c+CgogIDxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2NjYTY1NiIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjYiPgogICAgPHBhdGggZD0iTSAyMiwyMiBMIDQyLDIyIEwgNDIsMzAgTSAyMiwyMiBMIDIyLDQyIEwgMzAsNDIgTSAyMiwyMiBMIDMwLDMwIi8+CiAgICA8cGF0aCBkPSJNIDE3OCwyMiBMIDE1OCwyMiBMIDE1OCwzMCBNIDE3OCwyMiBMIDE3OCw0MiBMIDE3MCw0MiBNIDE3OCwyMiBMIDE3MCwzMCIvPgogICAgPHBhdGggZD0iTSAyMiwzMTggTCA0MiwzMTggTCA0MiwzMTAgTSAyMiwzMTggTCAyMiwyOTggTCAzMCwyOTggTSAyMiwzMTggTCAzMCwzMTAiLz4KICAgIDxwYXRoIGQ9Ik0gMTc4LDMxOCBMIDE1OCwzMTggTCAxNTgsMzEwIE0gMTc4LDMxOCBMIDE3OCwyOTggTCAxNzAsMjk4IE0gMTc4LDMxOCBMIDE3MCwzMTAiLz4KICA8L2c+CgogIDxnIGZpbGw9IiNjY2E2NTYiIGZpbGwtb3BhY2l0eT0iMC42Ij4KICAgIDxjaXJjbGUgY3g9IjEwMCIgY3k9IjU4IiByPSIxLjIiLz4KICAgIDxjaXJjbGUgY3g9IjEwMCIgY3k9IjI4MiIgcj0iMS4yIi8+CiAgICA8Y2lyY2xlIGN4PSI4MCIgY3k9IjY4IiByPSIwLjgiIGZpbGwtb3BhY2l0eT0iMC40Ii8+CiAgICA8Y2lyY2xlIGN4PSIxMjAiIGN5PSI2OCIgcj0iMC44IiBmaWxsLW9wYWNpdHk9IjAuNCIvPgogICAgPGNpcmNsZSBjeD0iODAiIGN5PSIyNzIiIHI9IjAuOCIgZmlsbC1vcGFjaXR5PSIwLjQiLz4KICAgIDxjaXJjbGUgY3g9IjEyMCIgY3k9IjI3MiIgcj0iMC44IiBmaWxsLW9wYWNpdHk9IjAuNCIvPgogIDwvZz4KCiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAwLDkwKSIgZmlsbD0iI2NjYTY1NiIgZmlsbC1vcGFjaXR5PSIwLjciIGZvbnQtZmFtaWx5PSJHZW9yZ2lhLCBzZXJpZiI+CiAgICA8dGV4dCB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjkiIGxldHRlci1zcGFjaW5nPSIzIj7QmNCg0JjQndCQINCT0KDQmNCiPC90ZXh0PgogIDwvZz4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAsMjYwKSIgZmlsbD0iI2NjYTY1NiIgZmlsbC1vcGFjaXR5PSIwLjciIGZvbnQtZmFtaWx5PSJHZW9yZ2lhLCBzZXJpZiI+CiAgICA8dGV4dCB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjkiIGxldHRlci1zcGFjaW5nPSIzIj5UQVJPVDwvdGV4dD4KICA8L2c+Cjwvc3ZnPgo=") center/cover; box-shadow:inset 0 0 0 1.5px rgba(204,166,86,0.85); }
/* Уэйта — рубашка «Солнечный диск» (16-лучевое солнце, тёмно-синий, белые линии) */
.deck[data-deck="classic"] .card .back{ background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+CiAgPGRlZnM+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9IndiZyIgY3g9IjUwJSIgY3k9IjQ4JSIgcj0iNjIlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI2MzQ2YSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzEwMWUzZSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNDA4MWMiLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9IndzdW4iIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjUwJSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmYmY4ZWMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0iI2ZiZjhlYyIgc3RvcC1vcGFjaXR5PSIwLjU1Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZiZjhlYyIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogIDwvZGVmcz4KCiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9InVybCgjd2JnKSIvPgogIDxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSIxOTAiIGhlaWdodD0iMjkwIiByeD0iMyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmJmOGVjIiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz4KICA8cmVjdCB4PSIxMSIgeT0iMTEiIHdpZHRoPSIxNzgiIGhlaWdodD0iMjc4IiByeD0iMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmJmOGVjIiBzdHJva2Utd2lkdGg9IjAuNSIgc3Ryb2tlLW9wYWNpdHk9IjAuNDUiLz4KCiAgPCEtLSBnbG93IGhhbG8gYmVoaW5kIHN1biBkaXNjIC0tPgogIDxjaXJjbGUgY3g9IjEwMCIgY3k9IjE1MCIgcj0iNjIiIGZpbGw9InVybCgjd3N1bikiIG9wYWNpdHk9IjAuNjUiLz4KCiAgPCEtLSAxNiByYWRpYXRpbmcgcmF5cyAoNCBncm91cHMsIHJvdGF0ZWQpIC0tPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMCwxNTApIiBzdHJva2U9IiNmYmY4ZWMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CiAgICA8ZyBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLW9wYWNpdHk9IjAuOTUiPgogICAgICA8bGluZSB4MT0iMCIgeTE9Ii00NCIgeDI9IjAiIHkyPSItNzIiLz4KICAgICAgPGxpbmUgeDE9IjAiIHkxPSI0NCIgeDI9IjAiIHkyPSI3MiIvPgogICAgICA8bGluZSB4MT0iLTQ0IiB5MT0iMCIgeDI9Ii03MiIgeTI9IjAiLz4KICAgICAgPGxpbmUgeDE9IjQ0IiB5MT0iMCIgeDI9IjcyIiB5Mj0iMCIvPgogICAgPC9nPgogICAgPGcgc3Ryb2tlLXdpZHRoPSIwLjkiIHN0cm9rZS1vcGFjaXR5PSIwLjg1IiB0cmFuc2Zvcm09InJvdGF0ZSgyMi41KSI+CiAgICAgIDxsaW5lIHgxPSIwIiB5MT0iLTQ0IiB4Mj0iMCIgeTI9Ii02NiIvPgogICAgICA8bGluZSB4MT0iMCIgeTE9IjQ0IiB4Mj0iMCIgeTI9IjY2Ii8+CiAgICAgIDxsaW5lIHgxPSItNDQiIHkxPSIwIiB4Mj0iLTY2IiB5Mj0iMCIvPgogICAgICA8bGluZSB4MT0iNDQiIHkxPSIwIiB4Mj0iNjYiIHkyPSIwIi8+CiAgICA8L2c+CiAgICA8ZyBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuNzUiIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+CiAgICAgIDxsaW5lIHgxPSIwIiB5MT0iLTQ0IiB4Mj0iMCIgeTI9Ii02MiIvPgogICAgICA8bGluZSB4MT0iMCIgeTE9IjQ0IiB4Mj0iMCIgeTI9IjYyIi8+CiAgICAgIDxsaW5lIHgxPSItNDQiIHkxPSIwIiB4Mj0iLTYyIiB5Mj0iMCIvPgogICAgICA8bGluZSB4MT0iNDQiIHkxPSIwIiB4Mj0iNjIiIHkyPSIwIi8+CiAgICA8L2c+CiAgICA8ZyBzdHJva2Utd2lkdGg9IjAuNSIgc3Ryb2tlLW9wYWNpdHk9IjAuNjUiIHRyYW5zZm9ybT0icm90YXRlKDY3LjUpIj4KICAgICAgPGxpbmUgeDE9IjAiIHkxPSItNDQiIHgyPSIwIiB5Mj0iLTU4Ii8+CiAgICAgIDxsaW5lIHgxPSIwIiB5MT0iNDQiIHgyPSIwIiB5Mj0iNTgiLz4KICAgICAgPGxpbmUgeDE9Ii00NCIgeTE9IjAiIHgyPSItNTgiIHkyPSIwIi8+CiAgICAgIDxsaW5lIHgxPSI0NCIgeTE9IjAiIHgyPSI1OCIgeTI9IjAiLz4KICAgIDwvZz4KICA8L2c+CgogIDwhLS0gY2VudHJhbCBjcmVhbSBtZWRhbGxpb24gd2l0aCBuYXZ5IGNvbXBhc3Mgc3RhciAtLT4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAsMTUwKSI+CiAgICA8Y2lyY2xlIHI9IjM4IiBmaWxsPSIjZmJmOGVjIiBmaWxsLW9wYWNpdHk9IjAuOTIiIHN0cm9rZT0iIzBmMWY0MiIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4KICAgIDxjaXJjbGUgcj0iMzIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzBmMWY0MiIgc3Ryb2tlLXdpZHRoPSIwLjYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1Ii8+CiAgICA8cGF0aCBkPSJNIDAgLTIyIEwgNCAtNCBMIDIyIDAgTCA0IDQgTCAwIDIyIEwgLTQgNCBMIC0yMiAwIEwgLTQgLTQgWiIgZmlsbD0iIzBmMWY0MiIvPgogICAgPHBhdGggZD0iTSAwIC0xNCBMIDMgLTMgTCAxNCAwIEwgMyAzIEwgMCAxNCBMIC0zIDMgTCAtMTQgMCBMIC0zIC0zIFoiIGZpbGw9IiNmYmY4ZWMiLz4KICAgIDxjaXJjbGUgcj0iMyIgZmlsbD0iIzBmMWY0MiIvPgogICAgPGNpcmNsZSByPSIwLjgiIGZpbGw9IiNmYmY4ZWMiLz4KICAgIDxnIGZpbGw9IiMwZjFmNDIiPgogICAgICA8Y2lyY2xlIGN4PSIwIiBjeT0iLTMwIiByPSIxIi8+CiAgICAgIDxjaXJjbGUgY3g9IjAiIGN5PSIzMCIgcj0iMSIvPgogICAgICA8Y2lyY2xlIGN4PSItMzAiIGN5PSIwIiByPSIxIi8+CiAgICAgIDxjaXJjbGUgY3g9IjMwIiBjeT0iMCIgcj0iMSIvPgogICAgICA8Y2lyY2xlIGN4PSItMjEiIGN5PSItMjEiIHI9IjAuNyIvPgogICAgICA8Y2lyY2xlIGN4PSIyMSIgY3k9Ii0yMSIgcj0iMC43Ii8+CiAgICAgIDxjaXJjbGUgY3g9Ii0yMSIgY3k9IjIxIiByPSIwLjciLz4KICAgICAgPGNpcmNsZSBjeD0iMjEiIGN5PSIyMSIgcj0iMC43Ii8+CiAgICA8L2c+CiAgPC9nPgoKICA8IS0tIHRvcCBhcmNoIHdpdGggZG90cyBhbmQgdHdpbmtsZSBzdGFyIC0tPgogIDxwYXRoIGQ9Ik0gNTAgNjAgUSAxMDAgMzggMTUwIDYwIiBmaWxsPSJub25lIiBzdHJva2U9IiNmYmY4ZWMiIHN0cm9rZS13aWR0aD0iMC44IiBzdHJva2Utb3BhY2l0eT0iMC44Ii8+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI2MCIgcj0iMiIgZmlsbD0iI2ZiZjhlYyIvPgogIDxjaXJjbGUgY3g9IjE1MCIgY3k9IjYwIiByPSIyIiBmaWxsPSIjZmJmOGVjIi8+CiAgPGNpcmNsZSBjeD0iMTAwIiBjeT0iNDIiIHI9IjIiIGZpbGw9IiNmYmY4ZWMiLz4KICA8cGF0aCBkPSJNIDEwMCAyOCBMIDEwMSAzMSBMIDEwNCAzMiBMIDEwMSAzMyBMIDEwMCAzNiBMIDk5IDMzIEwgOTYgMzIgTCA5OSAzMSBaIiBmaWxsPSIjZmJmOGVjIi8+CgogIDwhLS0gYm90dG9tIGFyY2ggd2l0aCBkb3RzIGFuZCBjcmVzY2VudCBtb29uIC0tPgogIDxwYXRoIGQ9Ik0gNTAgMjQwIFEgMTAwIDI2MiAxNTAgMjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNmYmY4ZWMiIHN0cm9rZS13aWR0aD0iMC44IiBzdHJva2Utb3BhY2l0eT0iMC44Ii8+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSIyNDAiIHI9IjIiIGZpbGw9IiNmYmY4ZWMiLz4KICA8Y2lyY2xlIGN4PSIxNTAiIGN5PSIyNDAiIHI9IjIiIGZpbGw9IiNmYmY4ZWMiLz4KICA8Y2lyY2xlIGN4PSIxMDAiIGN5PSIyNTgiIHI9IjIiIGZpbGw9IiNmYmY4ZWMiLz4KICA8cGF0aCBkPSJNIDk0IDI3MiBBIDYgNiAwIDEgMCAxMDYgMjcyIEEgNC41IDQuNSAwIDEgMSA5NCAyNzIgWiIgZmlsbD0iI2ZiZjhlYyIgZmlsbC1vcGFjaXR5PSIwLjkiLz4KCiAgPCEtLSBjb3JuZXIgYnJhY2tldHMg4pSM4pSQ4pSU4pSYIC0tPgogIDxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZiZjhlYyIgc3Ryb2tlLXdpZHRoPSIwLjkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiPgogICAgPHBhdGggZD0iTSAyMCAzMCBMIDIwIDIwIEwgMzAgMjAgTSAyNSAyMCBMIDI1IDI1IEwgMjAgMjUiLz4KICAgIDxwYXRoIGQ9Ik0gMTgwIDIwIEwgMTcwIDIwIEwgMTcwIDMwIE0gMTc1IDI1IEwgMTgwIDI1IEwgMTgwIDIwIi8+CiAgICA8cGF0aCBkPSJNIDIwIDI3MCBMIDIwIDI4MCBMIDMwIDI4MCBNIDIwIDI3NSBMIDI1IDI3NSBMIDI1IDI4MCIvPgogICAgPHBhdGggZD0iTSAxODAgMjgwIEwgMTcwIDI4MCBMIDE3MCAyNzAgTSAxNzUgMjc1IEwgMTgwIDI3NSBMIDE4MCAyODAiLz4KICA8L2c+CgogIDwhLS0gc2NhdHRlcmVkIHRpbnkgc3RhcnMgLS0+CiAgPGcgZmlsbD0iI2ZiZjhlYyIgb3BhY2l0eT0iMC43Ij4KICAgIDxjaXJjbGUgY3g9IjQwIiBjeT0iMTAwIiByPSIwLjYiLz4KICAgIDxjaXJjbGUgY3g9IjE2MCIgY3k9IjEwMCIgcj0iMC42Ii8+CiAgICA8Y2lyY2xlIGN4PSI0MCIgY3k9IjIwMCIgcj0iMC42Ii8+CiAgICA8Y2lyY2xlIGN4PSIxNjAiIGN5PSIyMDAiIHI9IjAuNiIvPgogICAgPGNpcmNsZSBjeD0iMzUiIGN5PSIxNTAiIHI9IjAuNSIvPgogICAgPGNpcmNsZSBjeD0iMTY1IiBjeT0iMTUwIiByPSIwLjUiLz4KICAgIDxjaXJjbGUgY3g9IjcwIiBjeT0iNzAiIHI9IjAuNCIvPgogICAgPGNpcmNsZSBjeD0iMTMwIiBjeT0iNzAiIHI9IjAuNCIvPgogICAgPGNpcmNsZSBjeD0iNzAiIGN5PSIyMzAiIHI9IjAuNCIvPgogICAgPGNpcmNsZSBjeD0iMTMwIiBjeT0iMjMwIiByPSIwLjQiLz4KICA8L2c+Cjwvc3ZnPgo=") center/cover; box-shadow:inset 0 0 0 1.5px rgba(255,250,240,0.55); }
.card .face{
background-size:cover; background-position:center top;
-webkit-transform:rotateY(180deg); transform:rotateY(180deg);
box-shadow:inset 0 0 0 1.5px rgba(204,166,86,0.85);
}
/* ============ ANIMATIONS ============ */
/* Единый порядок функций во всех keyframes для стабильной интерполяции:
translate → rotate → perspective → rotateY → scale */
/* "Стопка раскрывается" */
.deck.do-stack .card{
-webkit-transform:translate(0,0) rotate(calc(var(--i) * 1deg - 2deg)) perspective(1400px) rotateY(0deg) scale(1);
transform:translate(0,0) rotate(calc(var(--i) * 1deg - 2deg)) perspective(1400px) rotateY(0deg) scale(1);
-webkit-animation:doStack 1.4s cubic-bezier(.3,.7,.25,1) forwards;
animation:doStack 1.4s cubic-bezier(.3,.7,.25,1) forwards;
-webkit-animation-delay:calc(var(--i) * 0.08s);
animation-delay:calc(var(--i) * 0.08s);
}
@-webkit-keyframes doStack{
0% { -webkit-transform:translate(0,0) rotate(0deg) perspective(1400px) rotateY(0deg) scale(1); }
35% { -webkit-transform:translate(0,-40px) rotate(0deg) perspective(1400px) rotateY(0deg) scale(1.04); }
100% { -webkit-transform:translate(var(--x-open),var(--y-open)) rotate(var(--rot-open)) perspective(1400px) rotateY(0deg) scale(1); }
}
@keyframes doStack{
0% { transform:translate(0,0) rotate(0deg) perspective(1400px) rotateY(0deg) scale(1); }
35% { transform:translate(0,-40px) rotate(0deg) perspective(1400px) rotateY(0deg) scale(1.04); }
100% { transform:translate(var(--x-open),var(--y-open)) rotate(var(--rot-open)) perspective(1400px) rotateY(0deg) scale(1); }
}
/* "Магический взрыв" — opacity управляется только из keyframes, */
/* fill-mode: both → до старта применяется 0% (карты невидимы пока ждут delay), после — 100% */
.deck.do-burst .card{
-webkit-animation:doBurst 1.5s cubic-bezier(.2,.8,.25,1) both;
animation:doBurst 1.5s cubic-bezier(.2,.8,.25,1) both;
-webkit-animation-delay:calc(var(--i) * 0.1s);
animation-delay:calc(var(--i) * 0.1s);
}
/* "Сбор в стопку" — переход от burst-состояния к центру по дуге */
.deck.do-gather .card{
-webkit-animation:doGather .8s cubic-bezier(.5,.05,.25,1) forwards;
animation:doGather .8s cubic-bezier(.5,.05,.25,1) forwards;
}
/* idle-состояние после burst: карты лежат рубашкой, можно навести/кликнуть */
.deck.idle .card{
cursor:pointer;
transition:-webkit-transform 1.2s cubic-bezier(.25,.1,.25,1), transform 1.2s cubic-bezier(.25,.1,.25,1), box-shadow 1.2s ease;
}
.deck.idle .card:hover{
-webkit-transform:translate(var(--x),calc(var(--y) - 14px)) rotate(var(--rot)) perspective(1400px) rotateY(0deg) scale(1.06) !important;
transform:translate(var(--x),calc(var(--y) - 14px)) rotate(var(--rot)) perspective(1400px) rotateY(0deg) scale(1.06) !important;
box-shadow:0 30px 80px rgba(204,166,86,0.55), 0 0 70px rgba(204,166,86,0.35), 0 0 0 1px rgba(204,166,86,0.6) inset;
z-index:10;
}
/* Уэйта — белое свечение вместо золотого */
.deck[data-deck="classic"] .card{
box-shadow:0 30px 80px rgba(255,250,240,0.3), 0 6px 20px rgba(15,18,40,0.6);
}
.deck[data-deck="classic"].idle .card:hover{
box-shadow:0 30px 80px rgba(255,250,240,0.6), 0 0 70px rgba(255,250,240,0.4), 0 0 0 1px rgba(204,166,86,0.6) inset;
}
/* opened — после flip: hover плавно увеличивает + мягкая подсветка, клик открывает лайтбокс */
.deck.opened .card{
cursor:zoom-in;
transition:-webkit-transform 1.2s cubic-bezier(.25,.1,.25,1), transform 1.2s cubic-bezier(.25,.1,.25,1), box-shadow 1.2s ease;
}
.deck.opened .card:hover{
-webkit-transform:translate(var(--x-open),calc(var(--y-open) - 14px)) rotate(var(--rot-open)) perspective(1400px) rotateY(180deg) scale(1.05) !important;
transform:translate(var(--x-open),calc(var(--y-open) - 14px)) rotate(var(--rot-open)) perspective(1400px) rotateY(180deg) scale(1.05) !important;
box-shadow:0 24px 60px rgba(15,18,40,0.5), 0 0 40px rgba(204,166,86,0.18), 0 0 0 1px rgba(204,166,86,0.28) inset;
z-index:10;
}
/* LIGHTBOX — стили перенесены в taro-base.css (единый источник правды).
Раньше здесь был дубликат с font-size:2.3rem на .lb-info p — он перебивал
правило из taro-base и давал «огромный» шрифт описания на мобиле.
Дубликат удалён 2026-05-20. */
@-webkit-keyframes doGather{
0% { -webkit-transform:translate(var(--x),var(--y)) rotate(var(--rot)) perspective(1400px) rotateY(0deg) scale(1); }
50% { -webkit-transform:translate(calc(var(--x) * 0.4),calc(var(--y) * 0.4 - 30px)) rotate(calc(var(--rot) * 0.4)) perspective(1400px) rotateY(0deg) scale(1.04); }
100% { -webkit-transform:translate(0,0) rotate(0deg) perspective(1400px) rotateY(0deg) scale(1); }
}
@keyframes doGather{
0% { transform:translate(var(--x),var(--y)) rotate(var(--rot)) perspective(1400px) rotateY(0deg) scale(1); }
50% { transform:translate(calc(var(--x) * 0.4),calc(var(--y) * 0.4 - 30px)) rotate(calc(var(--rot) * 0.4)) perspective(1400px) rotateY(0deg) scale(1.04); }
100% { transform:translate(0,0) rotate(0deg) perspective(1400px) rotateY(0deg) scale(1); }
}
/* Перестроение раскрытой колоды на месте: карты переворачиваются на рубашку и одновременно переезжают в новые позиции */
.deck.do-relayout .card{
-webkit-animation:doRelayout .9s cubic-bezier(.45,.05,.25,1) forwards;
animation:doRelayout .9s cubic-bezier(.45,.05,.25,1) forwards;
}
@-webkit-keyframes doRelayout{
0% { -webkit-transform:translate(var(--x-prev),var(--y-prev)) rotate(var(--rot-prev)) perspective(1400px) rotateY(180deg) scale(1); }
50% { -webkit-transform:translate(calc((var(--x-prev) + var(--x-open)) / 2),calc((var(--y-prev) + var(--y-open)) / 2 - 26px)) rotate(calc((var(--rot-prev) + var(--rot-open)) / 2)) perspective(1400px) rotateY(270deg) scale(1.05); }
100% { -webkit-transform:translate(var(--x-open),var(--y-open)) rotate(var(--rot-open)) perspective(1400px) rotateY(360deg) scale(1); }
}
@keyframes doRelayout{
0% { transform:translate(var(--x-prev),var(--y-prev)) rotate(var(--rot-prev)) perspective(1400px) rotateY(180deg) scale(1); }
50% { transform:translate(calc((var(--x-prev) + var(--x-open)) / 2),calc((var(--y-prev) + var(--y-open)) / 2 - 26px)) rotate(calc((var(--rot-prev) + var(--rot-open)) / 2)) perspective(1400px) rotateY(270deg) scale(1.05); }
100% { transform:translate(var(--x-open),var(--y-open)) rotate(var(--rot-open)) perspective(1400px) rotateY(360deg) scale(1); }
}
/* Сбор из ОТКРЫТОЙ колоды: face-up в позициях → центр + переворот на back-down */
.deck.do-gather-open .card{
-webkit-animation:doGatherOpen .9s cubic-bezier(.5,.05,.25,1) forwards;
animation:doGatherOpen .9s cubic-bezier(.5,.05,.25,1) forwards;
}
@-webkit-keyframes doGatherOpen{
0% { -webkit-transform:translate(var(--x-open),var(--y-open)) rotate(var(--rot-open)) perspective(1400px) rotateY(180deg) scale(1); }
50% { -webkit-transform:translate(calc(var(--x-open) * 0.4),calc(var(--y-open) * 0.4 - 36px)) rotate(calc(var(--rot-open) * 0.4)) perspective(1400px) rotateY(90deg) scale(1.06); }
100% { -webkit-transform:translate(0,0) rotate(0deg) perspective(1400px) rotateY(0deg) scale(1); }
}
@keyframes doGatherOpen{
0% { transform:translate(var(--x-open),var(--y-open)) rotate(var(--rot-open)) perspective(1400px) rotateY(180deg) scale(1); }
50% { transform:translate(calc(var(--x-open) * 0.4),calc(var(--y-open) * 0.4 - 36px)) rotate(calc(var(--rot-open) * 0.4)) perspective(1400px) rotateY(90deg) scale(1.06); }
100% { transform:translate(0,0) rotate(0deg) perspective(1400px) rotateY(0deg) scale(1); }
}
/* Тасование стопки: карты в центре подскакивают и веером качаются туда-сюда */
.deck.do-shuffle .card{
--shuffle-rgb:204,166,86; /* грит — золото */
-webkit-animation:doShuffle 2.5s cubic-bezier(.4,.0,.6,1) forwards;
animation:doShuffle 2.5s cubic-bezier(.4,.0,.6,1) forwards;
}
.deck[data-deck="classic"].do-shuffle .card{
--shuffle-rgb:255,250,240; /* уэйта — белое */
}
@-webkit-keyframes doShuffle{
0% { -webkit-transform:translate(0,0) rotate(0deg) perspective(1400px) rotateY(0deg) scale(1); }
10% { -webkit-transform:translate(0,-22px) rotate(calc((var(--i) - 2) * 8deg)) perspective(1400px) rotateY(0deg) scale(1.04); box-shadow:0 28px 70px rgba(var(--shuffle-rgb),0.4), 0 0 50px rgba(var(--shuffle-rgb),0.22); }
25% { -webkit-transform:translate(0,-36px) rotate(calc((var(--i) - 2) * -14deg)) perspective(1400px) rotateY(0deg) scale(1.06); box-shadow:0 35px 90px rgba(var(--shuffle-rgb),0.5), 0 0 80px rgba(var(--shuffle-rgb),0.32); }
40% { -webkit-transform:translate(0,-44px) rotate(calc((var(--i) - 2) * 12deg)) perspective(1400px) rotateY(0deg) scale(1.07); box-shadow:0 40px 100px rgba(var(--shuffle-rgb),0.55), 0 0 90px rgba(var(--shuffle-rgb),0.38); }
55% { -webkit-transform:translate(0,-38px) rotate(calc((var(--i) - 2) * -16deg)) perspective(1400px) rotateY(0deg) scale(1.06); box-shadow:0 38px 95px rgba(var(--shuffle-rgb),0.55), 0 0 90px rgba(var(--shuffle-rgb),0.38); }
70% { -webkit-transform:translate(0,-30px) rotate(calc((var(--i) - 2) * 10deg)) perspective(1400px) rotateY(0deg) scale(1.05); box-shadow:0 32px 82px rgba(var(--shuffle-rgb),0.45), 0 0 70px rgba(var(--shuffle-rgb),0.28); }
85% { -webkit-transform:translate(0,-18px) rotate(calc((var(--i) - 2) * -6deg)) perspective(1400px) rotateY(0deg) scale(1.03); box-shadow:0 26px 65px rgba(var(--shuffle-rgb),0.32), 0 0 50px rgba(var(--shuffle-rgb),0.18); }
100% { -webkit-transform:translate(0,0) rotate(0deg) perspective(1400px) rotateY(0deg) scale(1); box-shadow:0 12px 40px rgba(15,18,40,0.45), 0 2px 6px rgba(15,18,40,0.25); }
}
@keyframes doShuffle{
0% { transform:translate(0,0) rotate(0deg) perspective(1400px) rotateY(0deg) scale(1); }
10% { transform:translate(0,-22px) rotate(calc((var(--i) - 2) * 8deg)) perspective(1400px) rotateY(0deg) scale(1.04); box-shadow:0 28px 70px rgba(var(--shuffle-rgb),0.4), 0 0 50px rgba(var(--shuffle-rgb),0.22); }
25% { transform:translate(0,-36px) rotate(calc((var(--i) - 2) * -14deg)) perspective(1400px) rotateY(0deg) scale(1.06); box-shadow:0 35px 90px rgba(var(--shuffle-rgb),0.5), 0 0 80px rgba(var(--shuffle-rgb),0.32); }
40% { transform:translate(0,-44px) rotate(calc((var(--i) - 2) * 12deg)) perspective(1400px) rotateY(0deg) scale(1.07); box-shadow:0 40px 100px rgba(var(--shuffle-rgb),0.55), 0 0 90px rgba(var(--shuffle-rgb),0.38); }
55% { transform:translate(0,-38px) rotate(calc((var(--i) - 2) * -16deg)) perspective(1400px) rotateY(0deg) scale(1.06); box-shadow:0 38px 95px rgba(var(--shuffle-rgb),0.55), 0 0 90px rgba(var(--shuffle-rgb),0.38); }
70% { transform:translate(0,-30px) rotate(calc((var(--i) - 2) * 10deg)) perspective(1400px) rotateY(0deg) scale(1.05); box-shadow:0 32px 82px rgba(var(--shuffle-rgb),0.45), 0 0 70px rgba(var(--shuffle-rgb),0.28); }
85% { transform:translate(0,-18px) rotate(calc((var(--i) - 2) * -6deg)) perspective(1400px) rotateY(0deg) scale(1.03); box-shadow:0 26px 65px rgba(var(--shuffle-rgb),0.32), 0 0 50px rgba(var(--shuffle-rgb),0.18); }
100% { transform:translate(0,0) rotate(0deg) perspective(1400px) rotateY(0deg) scale(1); box-shadow:0 12px 40px rgba(15,18,40,0.45), 0 2px 6px rgba(15,18,40,0.25); }
}
/* Разлёт из стопки (после gather-open): без opacity-вспышки, чисто движение из центра в позиции */
.deck.do-burst-spread .card{
-webkit-animation:doBurstSpread 1.4s cubic-bezier(.2,.8,.25,1) forwards;
animation:doBurstSpread 1.4s cubic-bezier(.2,.8,.25,1) forwards;
-webkit-animation-delay:calc(var(--i) * 0.1s);
animation-delay:calc(var(--i) * 0.1s);
}
@-webkit-keyframes doBurstSpread{
0% { -webkit-transform:translate(0,0) rotate(0deg) perspective(1400px) rotateY(0deg) scale(1); }
60% { -webkit-transform:translate(calc(var(--x) * 1.15),calc(var(--y) - 60px)) rotate(calc(var(--rot) * 1.8)) perspective(1400px) rotateY(0deg) scale(1.05); }
100% { -webkit-transform:translate(var(--x),var(--y)) rotate(var(--rot)) perspective(1400px) rotateY(0deg) scale(1); }
}
@keyframes doBurstSpread{
0% { transform:translate(0,0) rotate(0deg) perspective(1400px) rotateY(0deg) scale(1); }
60% { transform:translate(calc(var(--x) * 1.15),calc(var(--y) - 60px)) rotate(calc(var(--rot) * 1.8)) perspective(1400px) rotateY(0deg) scale(1.05); }
100% { transform:translate(var(--x),var(--y)) rotate(var(--rot)) perspective(1400px) rotateY(0deg) scale(1); }
}
@-webkit-keyframes doBurst{
0% { -webkit-transform:translate(0,0) rotate(180deg) perspective(1400px) rotateY(0deg) scale(0.3); opacity:0; }
20% { opacity:1; }
60% { -webkit-transform:translate(calc(var(--x) * 1.15),calc(var(--y) - 80px)) rotate(calc(var(--rot) * 1.8)) perspective(1400px) rotateY(0deg) scale(1.05); opacity:1; }
100% { -webkit-transform:translate(var(--x),var(--y)) rotate(var(--rot)) perspective(1400px) rotateY(0deg) scale(1); opacity:1; }
}
@keyframes doBurst{
0% { transform:translate(0,0) rotate(180deg) perspective(1400px) rotateY(0deg) scale(0.3); opacity:0; }
20% { opacity:1; }
60% { transform:translate(calc(var(--x) * 1.15),calc(var(--y) - 80px)) rotate(calc(var(--rot) * 1.8)) perspective(1400px) rotateY(0deg) scale(1.05); opacity:1; }
100% { transform:translate(var(--x),var(--y)) rotate(var(--rot)) perspective(1400px) rotateY(0deg) scale(1); opacity:1; }
}
/* FLIP — улучшенный (lift в середине + локальная perspective внутри transform) */
.deck.flipped .card{
-webkit-animation:doFlip .85s cubic-bezier(.45,.05,.25,1) forwards;
animation:doFlip .85s cubic-bezier(.45,.05,.25,1) forwards;
-webkit-animation-delay:calc(var(--i) * 0.1s);
animation-delay:calc(var(--i) * 0.1s);
}
@-webkit-keyframes doFlip{
0% { -webkit-transform:translate(var(--x-open),var(--y-open)) rotate(var(--rot-open)) perspective(1400px) rotateY(0deg) scale(1); }
50% { -webkit-transform:translate(var(--x-open),calc(var(--y-open) - 30px)) rotate(var(--rot-open)) perspective(1400px) rotateY(90deg) scale(1.08); }
100% { -webkit-transform:translate(var(--x-open),var(--y-open)) rotate(var(--rot-open)) perspective(1400px) rotateY(180deg) scale(1); }
}
@keyframes doFlip{
0% { transform:translate(var(--x-open),var(--y-open)) rotate(var(--rot-open)) perspective(1400px) rotateY(0deg) scale(1); }
50% { transform:translate(var(--x-open),calc(var(--y-open) - 30px)) rotate(var(--rot-open)) perspective(1400px) rotateY(90deg) scale(1.08); }
100% { transform:translate(var(--x-open),var(--y-open)) rotate(var(--rot-open)) perspective(1400px) rotateY(180deg) scale(1); }
}
/* ============ Sections ============ */
/* .bg-shell .section — повышенная специфичность (0,2,0), чтобы перебить
.bg-shell .wrap{ padding:0 var(--wrapper-offset) }, которое обнуляло
padding-top/bottom через shorthand на тех же элементах (.section.wrap). */
/* ============ SEO-блок · текст слева + SVG-иллюстрация справа ============ */
.seo-block{ position:relative; padding-top:60px; padding-bottom:60px; border-top:1px solid rgba(204,166,86,0.1); }
.seo-row{
display:grid; grid-template-columns:1fr 360px; gap:80px; align-items:center;
padding:64px 0; border-top:1px solid rgba(204,166,86,0.1);
}
.seo-row:first-child{ border-top:none; padding-top:20px; }
@media (max-width:980px){
.seo-row{ grid-template-columns:1fr; gap:32px; padding:40px 0; }
.seo-illust{ max-width:360px; margin:0 auto; }
}
.seo-section{ padding:0; border-top:none; }
.seo-section .h2, .seo-section h2{ color:#fbf8ec; margin-bottom:36px; max-width:720px; }
.seo-section p{ line-height:1.6; color:#dadbe0; margin-bottom:18px; max-width:646px; }
.seo-section p:last-child{ margin-bottom:0; }
/* SVG-иллюстрация — контурная обложка карты, без плашки */
.seo-illust{
position:relative; width:100%; aspect-ratio:3/4;
background:transparent; border:none; border-radius:0; box-shadow:none;
display:flex; align-items:center; justify-content:center;
}
.seo-illust svg{ width:100%; height:100%; display:block; overflow:visible; }
.seo-illust .twinkle{ transform-origin:center; transform-box:fill-box; animation:seoTwinkle 3.2s ease-in-out infinite; }
.seo-illust .twinkle.t2{ animation-delay:-0.7s; }
.seo-illust .twinkle.t3{ animation-delay:-1.4s; }
.seo-illust .twinkle.t4{ animation-delay:-2.1s; }
@keyframes seoTwinkle{
0%, 100% { opacity:0.4; transform:scale(0.85); }
50% { opacity:1; transform:scale(1.1); }
}
.seo-illust .rotate-slow{ transform-origin:center; transform-box:fill-box; animation:seoRotateSlow 90s linear infinite; }
.seo-illust .rotate-rev{ transform-origin:center; transform-box:fill-box; animation:seoRotateRev 120s linear infinite reverse; }
@keyframes seoRotateSlow{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
@keyframes seoRotateRev{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
.seo-illust .pulse{ transform-origin:center; animation:seoPulse 5s ease-in-out infinite; }
@keyframes seoPulse{
0%, 100% { opacity:0.55; }
50% { opacity:1; }
}
.section h2{ color:#fbf8ec; margin-bottom:14px; }
.section .sub{ font-size:1.8rem; color:#aeacb8; margin-bottom:48px; max-width:600px; line-height:1.55; }
.grid-themes{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:980px){ .grid-themes{ grid-template-columns:repeat(2,1fr); } }
.theme-card{
background:rgba(255,255,255,0.04);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
border:1px solid rgba(204,166,86,0.2); border-radius:18px;
padding:32px; transition:all .25s; cursor:pointer;
}
.theme-card:hover{ background:rgba(204,166,86,0.08); border-color:var(--gold); transform:translateY(-3px); }
.theme-card .icon{ width:48px; height:48px; margin-bottom:18px; color:var(--gold); }
.theme-card h3{ color:#fbf8ec; margin-bottom:8px; }
.theme-card p{ color:#aeacb8; line-height:1.5; }
/* ============ «По теме» · Polaroid · фото-карточки ============ */
.grid-themes--photo{ gap:32px; padding-top:8px; }
@media (max-width:580px){ .grid-themes--photo{ gap:36px; } }
.theme-card--photo{
position:relative; z-index:1;
background:transparent !important; -webkit-backdrop-filter:none; backdrop-filter:none;
border:none !important; border-radius:0; padding:0;
text-align:center; transition:transform .35s ease;
}
.theme-card--photo:hover{ transform:translateY(-4px); background:transparent; z-index:10; }
.grid-themes--photo:hover > .theme-card--photo:not(:hover){ z-index:1; }
/* ─── ВНЕШНЯЯ ОБЁРТКА (без overflow:hidden, чтобы карты выходили за края) ─── */
.theme-card--photo .vd-photo{
position:relative; aspect-ratio:4/5;
margin-bottom:44px;
transform:rotate(-2deg);
transition:transform .4s ease;
isolation:isolate;
}
/* ─── Цветное свечение позади карты (исходит из эмблемы) ─── */
.theme-card--photo .vd-photo::before{
content:""; position:absolute; inset:-70px;
border-radius:50%;
filter:blur(70px);
z-index:-1;
opacity:0.2;
pointer-events:none;
transition:opacity .55s ease, transform .55s ease;
}
.theme-card--photo:hover .vd-photo::before{ opacity:1; transform:scale(1.15); }
.theme-card--love .vd-photo::before{ background:radial-gradient(ellipse at center, rgba(232,90,150,1) 0%, rgba(232,90,150,0.5) 35%, transparent 70%); }
.theme-card--self .vd-photo::before{ background:radial-gradient(ellipse at center, rgba(150,90,235,0.95) 0%, rgba(150,90,235,0.45) 35%, transparent 70%); }
.theme-card--career .vd-photo::before{ background:radial-gradient(ellipse at center, rgba(72,210,110,0.95) 0%, rgba(40,165,80,0.5) 35%, transparent 70%); }
.theme-card--question .vd-photo::before{ background:radial-gradient(ellipse at center, rgba(86,144,228,0.95) 0%, rgba(86,144,228,0.45) 35%, transparent 70%); }
.theme-card--photo:nth-child(2n) .vd-photo{ transform:rotate(2deg); }
.theme-card--photo:nth-child(3n) .vd-photo{ transform:rotate(-1.2deg); }
.theme-card--photo:hover .vd-photo{ transform:rotate(0deg); }
/* tape & cap — поверх стопки */
/* Эмит-частицы при ховере (сердечки/глаза/монетки/?) */
.theme-card--photo .emit{
position:absolute; left:50%; top:50%;
width:0; height:0;
pointer-events:none; z-index:6;
}
.theme-card--photo .emit .bit{
position:absolute; left:0; top:0;
width:24px; height:24px;
margin-left:-12px; margin-top:-12px;
opacity:0;
}
.theme-card--photo .emit .bit svg{
width:100%; height:100%; display:block;
filter:drop-shadow(0 0 6px currentColor) drop-shadow(0 0 12px currentColor);
}
.theme-card--love .emit .bit{ color:#f5a8c8; }
.theme-card--self .emit .bit{ color:#c8a8e8; }
.theme-card--career .emit .bit{ color:#72d890; }
.theme-card--question .emit .bit{ color:#a8c8e8; }
.theme-card--photo:hover .emit .bit{
animation:emit-rise 2.4s ease-out var(--d, 0s) infinite;
}
@keyframes emit-rise{
0% { opacity:0; transform:translate(0,0) scale(0.4) rotate(-12deg); }
15% { opacity:1; transform:translate(calc(var(--x) * 0.3), -40px) scale(1) rotate(0); }
85% { opacity:0.85; transform:translate(calc(var(--x) * 0.85), -160px) scale(1.05) rotate(8deg); }
100% { opacity:0; transform:translate(var(--x), -210px) scale(0.6) rotate(14deg); }
}
.theme-card--photo .vd-cap{
position:absolute; bottom:10px; left:0; right:0; text-align:center;
font-family:'Forum',serif; font-size:1.4rem; letter-spacing:.4em;
color:rgba(251,216,144,0.9); text-transform:uppercase;
text-shadow:0 1px 4px rgba(0,0,0,0.7);
z-index:5; pointer-events:none;
}
.theme-card--photo h3{ margin-bottom:8px; }
.theme-card--photo p{ max-width:26ch; margin:0 auto; }
/* ─── СЛОИ КАРТ: одинаковый размер, стартуют в одной точке (back/mid скрыты под front) ─── */
.theme-card--photo .card-layer{
position:absolute; inset:0;
border-radius:20px;
clip-path:inset(0 round 20px);
background:#0a0c20;
will-change:transform;
}
.theme-card--photo .card-layer svg{ width:100%; height:100%; display:block; }
.theme-card--photo .card-layer.back { z-index:1; }
.theme-card--photo .card-layer.mid { z-index:2; }
.theme-card--photo .card-layer.front{
z-index:3;
box-shadow:
0 22px 50px -22px rgba(0,0,0,0.7),
0 6px 18px -8px rgba(0,0,0,0.5);
}
/* волновая задержка — каждый слой отстаёт на 0.4с */
.theme-card--photo:hover .card-layer{
animation:tema-sway 4s ease-in-out infinite;
}
.theme-card--photo:hover .card-layer.front{ animation-delay:0s; }
.theme-card--photo:hover .card-layer.mid { animation-delay:0.4s; }
.theme-card--photo:hover .card-layer.back { animation-delay:0.8s; }
@keyframes tema-sway{
0% { transform:translateX(-26px) rotate(-7deg); }
25% { transform:translateX(0) rotate(0deg); }
50% { transform:translateX(26px) rotate(7deg); }
75% { transform:translateX(0) rotate(0deg); }
100% { transform:translateX(-26px) rotate(-7deg); }
}
/* лёгкое золотое свечение на эмблеме на ховере */
.theme-card--photo:hover .card-layer.front svg{
filter:drop-shadow(0 0 8px rgba(204,166,86,0.45)) drop-shadow(0 0 16px rgba(251,216,144,0.25));
transition:filter .35s ease;
}
.grid-themes.grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .grid-themes.grid-3{ grid-template-columns:1fr; } }
/* ============ Гороскоп · Warm Spice по смыслу знаков ============ */
.zodiac-circle{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
@media (max-width:980px){ .zodiac-circle{ grid-template-columns:repeat(4,1fr); gap:14px; } }
@media (max-width:580px){ .zodiac-circle{ grid-template-columns:repeat(3,1fr); gap:12px; } }
.zodiac-cell{
position:relative; aspect-ratio:5/6; border-radius:14px; overflow:hidden;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
padding:18px 10px; cursor:pointer;
color:#ebdcb8;
transition:transform .3s cubic-bezier(.2,.7,.25,1), box-shadow .3s;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
inset 0 -40px 50px rgba(0,0,0,0.18);
}
.zodiac-cell:hover{
transform:translateY(-3px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.10),
inset 0 -40px 50px rgba(0,0,0,0.18),
0 22px 50px -22px rgba(0,0,0,0.55);
}
.zodiac-cell .glyph{ width:46%; aspect-ratio:1; color:#ebdcb8; }
.zodiac-cell .glyph svg{ width:100%; height:100%; display:block; }
.zodiac-cell .nm{ font-family:'Forum',serif; font-size:2.2rem; line-height:1; color:#ebdcb8; }
.zodiac-cell .dt{ font-family:'Manrope',sans-serif; font-size:1.3rem; letter-spacing:.18em; text-transform:uppercase; color:#d4c39c; }
@media (max-width:580px){
.zodiac-cell{ gap:10px; padding:14px 8px; }
.zodiac-cell .nm{ font-size:1.8rem; }
.zodiac-cell .dt{ font-size:1.1rem; letter-spacing:.14em; }
}
/* цвета по стихии — простая логика «зодиак = цвет» */
/* Огонь — красно-оранжевые: Овен, Лев, Стрелец */
.zodiac-cell.z-aries { background:#7a1c20; } /* гранат-бордо · кровь Марса */
.zodiac-cell.z-leo { background:#8a3818; } /* оранж-терракота · солнце Льва */
.zodiac-cell.z-sagittarius { background:#a36018; } /* янтарь · стрела Юпитера */
/* Земля — зелёные: Телец, Дева, Козерог */
.zodiac-cell.z-taurus { background:#1a4a32; } /* изумруд · сад Венеры */
.zodiac-cell.z-virgo { background:#3a4a18; } /* олива-мох · поля жатвы */
.zodiac-cell.z-capricorn { background:#1a3a28; } /* deep forest · горы Сатурна */
/* Воздух — фиолетовые: Близнецы, Весы */
.zodiac-cell.z-gemini { background:#3a1a5e; } /* лаванда-фиолет · двойственность */
.zodiac-cell.z-libra { background:#52145a; } /* royal violet · гармония Венеры */
/* Вода — синие/голубые: Рак, Скорпион, Рыбы, Водолей */
.zodiac-cell.z-cancer { background:#1a3a5e; } /* moon navy · Луна на воде */
.zodiac-cell.z-scorpio { background:#0a1a3e; } /* indigo deep · бездна Плутона */
.zodiac-cell.z-aquarius { background:#1a5a78; } /* электро-голубой · вода-лей */
.zodiac-cell.z-pisces { background:#0e3a4a; } /* deep teal · океан Нептуна */
/* ============ «По времени» · стопки карт с веером на ховере ============ */
/* Слайдер */
.time-section-head{
display:flex; align-items:flex-start; justify-content:space-between; gap:32px;
margin-bottom:24px;
}
.time-section-head .head-text{ flex:1; }
.time-section-head .h2{ margin-bottom:0; }
.time-section-head .sub{ margin-top:8px; }
.time-slider-nav{
display:flex; gap:12px; flex-shrink:0; padding-top:18px;
}
@media (max-width:760px){
.time-section-head{ flex-wrap:wrap; align-items:center; gap:16px; }
.time-section-head .head-text{ flex:1 0 100%; }
.time-slider-nav{ padding-top:0; align-self:center; }
}
.time-slider{ position:relative; }
.time-slider-viewport{ overflow:visible; }
.time-slider-track{
display:flex; gap:32px;
transition:transform .6s cubic-bezier(.4,0,.2,1);
will-change:transform;
}
.time-slider-track > .theme-card--time{
flex:0 0 calc((100% - 64px) / 3);
min-width:0;
}
@media (max-width:980px){
.time-slider-track > .theme-card--time{ flex-basis:calc((100% - 32px) / 2); }
.time-slider-track{ gap:32px; }
}
@media (max-width:760px){
.time-slider-track > .theme-card--time{ flex-basis:100%; }
}
.time-slider-btn{
width:48px; height:48px; border-radius:50%;
background:rgba(15,18,40,0.85); border:1px solid rgba(204,166,86,0.5);
color:var(--gold); font-family:'Forum',serif; font-size:30px; line-height:1;
cursor:pointer; padding:0 0 4px;
display:flex; align-items:center; justify-content:center;
transition:background .2s, border-color .2s, opacity .2s;
}
.time-slider-btn:hover:not(:disabled){ background:rgba(204,166,86,0.2); border-color:var(--gold); }
.time-slider-btn:disabled{ opacity:0.25; cursor:default; }
@media (max-width:760px){
.time-slider-btn{ width:40px; height:40px; font-size:24px; }
}
/* «Расклад на будущее» CTA — между head-text и time-slider-nav */
.time-cta{
display:inline-flex; align-items:center; gap:8px;
padding:14px 28px; border-radius:32px;
background:#fff; color:#0f1228;
font-family:'Manrope',sans-serif; font-size:1.6rem; letter-spacing:0.02em;
text-decoration:none; font-weight:500; white-space:nowrap;
flex-shrink:0; margin-top:18px; align-self:flex-start;
transition:background .2s, transform .2s, box-shadow .2s;
}
/* override .bg-shell a{color:inherit} — make CTA text dark */
.bg-shell .time-cta{ color:#0f1228; }
.time-cta:hover{ background:#f5f5f5; transform:translateY(-1px); box-shadow:0 6px 22px rgba(15,18,40,0.18); }
.bg-shell .time-cta:hover{ color:#0f1228; }
.time-cta::after{ content:'→'; font-size:1.4rem; line-height:1; }
@media(max-width:760px){
.time-cta{ padding:12px 22px; font-size:1.6rem; align-self:center; justify-content:flex-start; margin-top:0; }
}
.theme-card--time{
position:relative; padding:32px 28px 28px;
background:linear-gradient(160deg, rgba(36,28,72,0.55), rgba(15,18,40,0.6)) !important;
border:1px solid rgba(204,166,86,0.25) !important;
border-radius:18px;
-webkit-backdrop-filter:none; backdrop-filter:none;
display:flex; flex-direction:column;
min-height:380px;
transition:transform .35s cubic-bezier(.2,.7,.25,1), border-color .35s, box-shadow .35s, background .4s ease;
}
/* На ховере — фон в цвет рубашки эмблемы */
.theme-card--time.s7:hover{
background:
radial-gradient(ellipse at 50% 0%, rgba(245,168,168,0.18) 0%, transparent 60%),
linear-gradient(160deg, #4a1820 0%, #2a0e16 50%, #150408 100%) !important;
border-color:rgba(218,82,138,0.6) !important;
}
.theme-card--time.s30:hover{
background:
radial-gradient(ellipse at 50% 0%, rgba(168,200,232,0.16) 0%, transparent 60%),
linear-gradient(160deg, #1a3458 0%, #0e1e36 50%, #040a18 100%) !important;
border-color:rgba(78,128,210,0.6) !important;
}
.theme-card--time.s365:hover{
background:
radial-gradient(ellipse at 50% 0%, rgba(200,168,232,0.18) 0%, transparent 60%),
linear-gradient(160deg, #2a1248 0%, #1a0a30 50%, #080418 100%) !important;
border-color:rgba(140,80,220,0.6) !important;
}
.theme-card--time.s1:hover{
background:
radial-gradient(ellipse at 50% 0%, rgba(122,220,220,0.18) 0%, transparent 60%),
linear-gradient(160deg, #0c4858 0%, #062028 50%, #020e14 100%) !important;
border-color:rgba(80,180,200,0.6) !important;
}
.theme-card--time.s4:hover{
background:
radial-gradient(ellipse at 50% 0%, rgba(168,232,200,0.18) 0%, transparent 60%),
linear-gradient(160deg, #14402c 0%, #08241a 50%, #021008 100%) !important;
border-color:rgba(86,200,140,0.6) !important;
}
.theme-card--time.s10:hover{
background:
radial-gradient(ellipse at 50% 0%, rgba(168,184,200,0.16) 0%, transparent 60%),
linear-gradient(160deg, #2e3848 0%, #181c28 50%, #08080c 100%) !important;
border-color:rgba(140,160,190,0.6) !important;
}
.theme-card--time.s12:hover{
background:
radial-gradient(ellipse at 50% 0%, rgba(168,168,232,0.18) 0%, transparent 60%),
linear-gradient(160deg, #1e2058 0%, #0e1030 50%, #04061a 100%) !important;
border-color:rgba(120,120,210,0.6) !important;
}
.theme-card--time:hover{
transform:translateY(-2px) !important;
box-shadow:0 30px 60px -28px rgba(0,0,0,0.7), 0 0 36px rgba(204,166,86,0.12);
}
.theme-card--time .deck{
position:relative; height:180px; margin:0 -28px 24px; pointer-events:none;
perspective:800px;
}
/* Одна мягкая общая тень под стопкой — только в собранном виде */
.theme-card--time .deck::after{
content:""; position:absolute; left:50%; bottom:-14px;
width:170px; height:26px; transform:translateX(-50%);
background:radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0) 75%);
filter:blur(10px);
pointer-events:none; z-index:11;
transition:opacity .35s ease;
}
.theme-card--time:hover .deck::after{ opacity:0; }
.theme-card--time .mini{
position:absolute; bottom:0; aspect-ratio:2/3; height:170px; left:50%;
border-radius:7px; overflow:hidden;
border:1px solid rgba(204,166,86,0.45);
box-shadow:none;
transform-origin:50% 100%;
transition:transform 1.15s cubic-bezier(.2,.85,.25,1.05), box-shadow .35s ease;
}
/* На ховере у каждой карты появляется своя тень */
.theme-card--time:hover .mini{
box-shadow:0 14px 30px -10px rgba(0,0,0,0.6);
}
.theme-card--time .mini svg{ width:100%; height:100%; display:block; }
.theme-card--time .meta{ font-size:1.4rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; font-weight:500; }
.theme-card--time h3{ color:#fbf8ec; margin-bottom:12px; }
.theme-card--time p{ font-size:1.8rem; color:#dadbe0; line-height:1.55; margin:0; flex:1; }
.theme-card--time .footer{ margin-top:20px; font-size:1.7rem; color:var(--gold); display:inline-flex; gap:8px; align-items:center; transition:gap .25s; }
.theme-card--time:hover .footer{ gap:14px; }
@media (max-width:580px){
.theme-card--time p{ font-size:1.5rem; }
.theme-card--time .footer{ font-size:1.5rem; }
}
/* Стопки: исходное положение */
.theme-card--time.s7 .mini:nth-child(1){ transform:translateX(-50%) rotate(-2deg) translateY(0); z-index:3; }
.theme-card--time.s7 .mini:nth-child(2){ transform:translateX(-50%) rotate(0deg) translateY(-2px); z-index:2; }
.theme-card--time.s7 .mini:nth-child(3){ transform:translateX(-50%) rotate(2deg) translateY(-4px); z-index:1; }
.theme-card--time.s30 .mini:nth-child(1){ transform:translateX(-50%) rotate(-3deg) translateY(0); z-index:5; }
.theme-card--time.s30 .mini:nth-child(2){ transform:translateX(-50%) rotate(-1deg) translateY(-2px); z-index:4; }
.theme-card--time.s30 .mini:nth-child(3){ transform:translateX(-50%) rotate(1deg) translateY(-4px); z-index:3; }
.theme-card--time.s30 .mini:nth-child(4){ transform:translateX(-50%) rotate(3deg) translateY(-6px); z-index:2; }
.theme-card--time.s30 .mini:nth-child(5){ transform:translateX(-50%) rotate(5deg) translateY(-8px); z-index:1; }
.theme-card--time.s365 .mini:nth-child(1){ transform:translateX(-50%) rotate(-4deg) translateY(0); z-index:7; }
.theme-card--time.s365 .mini:nth-child(2){ transform:translateX(-50%) rotate(-2deg) translateY(-2px); z-index:6; }
.theme-card--time.s365 .mini:nth-child(3){ transform:translateX(-50%) rotate(0deg) translateY(-4px); z-index:5; }
.theme-card--time.s365 .mini:nth-child(4){ transform:translateX(-50%) rotate(2deg) translateY(-6px); z-index:4; }
.theme-card--time.s365 .mini:nth-child(5){ transform:translateX(-50%) rotate(4deg) translateY(-8px); z-index:3; }
.theme-card--time.s365 .mini:nth-child(6){ transform:translateX(-50%) rotate(6deg) translateY(-10px); z-index:2; }
.theme-card--time.s365 .mini:nth-child(7){ transform:translateX(-50%) rotate(8deg) translateY(-12px); z-index:1; }
/* На ховере: распахивается веером */
.theme-card--time.s7:hover .mini:nth-child(1){ transform:translateX(calc(-50% - 60px)) rotate(-14deg) translateY(-10px); }
.theme-card--time.s7:hover .mini:nth-child(2){ transform:translateX(-50%) rotate(0deg) translateY(-22px); }
.theme-card--time.s7:hover .mini:nth-child(3){ transform:translateX(calc(-50% + 60px)) rotate(14deg) translateY(-10px); }
.theme-card--time.s30:hover .mini:nth-child(1){ transform:translateX(calc(-50% - 100px)) rotate(-22deg) translateY(-8px); }
.theme-card--time.s30:hover .mini:nth-child(2){ transform:translateX(calc(-50% - 50px)) rotate(-11deg) translateY(-18px); }
.theme-card--time.s30:hover .mini:nth-child(3){ transform:translateX(-50%) rotate(0deg) translateY(-22px); }
.theme-card--time.s30:hover .mini:nth-child(4){ transform:translateX(calc(-50% + 50px)) rotate(11deg) translateY(-18px); }
.theme-card--time.s30:hover .mini:nth-child(5){ transform:translateX(calc(-50% + 100px)) rotate(22deg) translateY(-8px); }
.theme-card--time.s365:hover .mini:nth-child(1){ transform:translateX(calc(-50% - 130px)) rotate(-30deg) translateY(0); }
.theme-card--time.s365:hover .mini:nth-child(2){ transform:translateX(calc(-50% - 90px)) rotate(-20deg) translateY(-10px); }
.theme-card--time.s365:hover .mini:nth-child(3){ transform:translateX(calc(-50% - 45px)) rotate(-10deg) translateY(-18px); }
.theme-card--time.s365:hover .mini:nth-child(4){ transform:translateX(-50%) rotate(0deg) translateY(-22px); }
.theme-card--time.s365:hover .mini:nth-child(5){ transform:translateX(calc(-50% + 45px)) rotate(10deg) translateY(-18px); }
.theme-card--time.s365:hover .mini:nth-child(6){ transform:translateX(calc(-50% + 90px)) rotate(20deg) translateY(-10px); }
.theme-card--time.s365:hover .mini:nth-child(7){ transform:translateX(calc(-50% + 130px)) rotate(30deg) translateY(0); }
/* s1 — одна карта */
.theme-card--time.s1 .mini:nth-child(1){ transform:translateX(-50%) rotate(0deg) translateY(-2px); z-index:1; }
.theme-card--time.s1:hover .mini:nth-child(1){ transform:translateX(-50%) rotate(0deg) translateY(-18px) scale(1.06); }
/* s4 — четыре карты */
.theme-card--time.s4 .mini:nth-child(1){ transform:translateX(-50%) rotate(-3deg) translateY(0); z-index:4; }
.theme-card--time.s4 .mini:nth-child(2){ transform:translateX(-50%) rotate(-1deg) translateY(-2px); z-index:3; }
.theme-card--time.s4 .mini:nth-child(3){ transform:translateX(-50%) rotate(1deg) translateY(-4px); z-index:2; }
.theme-card--time.s4 .mini:nth-child(4){ transform:translateX(-50%) rotate(3deg) translateY(-6px); z-index:1; }
.theme-card--time.s4:hover .mini:nth-child(1){ transform:translateX(calc(-50% - 78px)) rotate(-18deg) translateY(-8px); }
.theme-card--time.s4:hover .mini:nth-child(2){ transform:translateX(calc(-50% - 26px)) rotate(-6deg) translateY(-22px); }
.theme-card--time.s4:hover .mini:nth-child(3){ transform:translateX(calc(-50% + 26px)) rotate(6deg) translateY(-22px); }
.theme-card--time.s4:hover .mini:nth-child(4){ transform:translateX(calc(-50% + 78px)) rotate(18deg) translateY(-8px); }
/* s10 — десять карт (Кельтский крест → веером) */
.theme-card--time.s10 .mini:nth-child(1){ transform:translateX(-50%) rotate(-5deg) translateY(0); z-index:10; }
.theme-card--time.s10 .mini:nth-child(2){ transform:translateX(-50%) rotate(-3deg) translateY(-2px); z-index:9; }
.theme-card--time.s10 .mini:nth-child(3){ transform:translateX(-50%) rotate(-1deg) translateY(-4px); z-index:8; }
.theme-card--time.s10 .mini:nth-child(4){ transform:translateX(-50%) rotate(1deg) translateY(-6px); z-index:7; }
.theme-card--time.s10 .mini:nth-child(5){ transform:translateX(-50%) rotate(3deg) translateY(-8px); z-index:6; }
.theme-card--time.s10 .mini:nth-child(6){ transform:translateX(-50%) rotate(5deg) translateY(-10px); z-index:5; }
.theme-card--time.s10 .mini:nth-child(7){ transform:translateX(-50%) rotate(7deg) translateY(-12px); z-index:4; }
.theme-card--time.s10 .mini:nth-child(8){ transform:translateX(-50%) rotate(9deg) translateY(-14px); z-index:3; }
.theme-card--time.s10 .mini:nth-child(9){ transform:translateX(-50%) rotate(11deg) translateY(-16px); z-index:2; }
.theme-card--time.s10 .mini:nth-child(10){ transform:translateX(-50%) rotate(13deg) translateY(-18px); z-index:1; }
.theme-card--time.s10:hover .mini:nth-child(1){ transform:translateX(calc(-50% - 130px)) rotate(-32deg) translateY(2px); }
.theme-card--time.s10:hover .mini:nth-child(2){ transform:translateX(calc(-50% - 100px)) rotate(-24deg) translateY(-6px); }
.theme-card--time.s10:hover .mini:nth-child(3){ transform:translateX(calc(-50% - 70px)) rotate(-16deg) translateY(-14px); }
.theme-card--time.s10:hover .mini:nth-child(4){ transform:translateX(calc(-50% - 40px)) rotate(-8deg) translateY(-20px); }
.theme-card--time.s10:hover .mini:nth-child(5){ transform:translateX(calc(-50% - 14px)) rotate(-2deg) translateY(-24px); }
.theme-card--time.s10:hover .mini:nth-child(6){ transform:translateX(calc(-50% + 14px)) rotate(2deg) translateY(-24px); }
.theme-card--time.s10:hover .mini:nth-child(7){ transform:translateX(calc(-50% + 40px)) rotate(8deg) translateY(-20px); }
.theme-card--time.s10:hover .mini:nth-child(8){ transform:translateX(calc(-50% + 70px)) rotate(16deg) translateY(-14px); }
.theme-card--time.s10:hover .mini:nth-child(9){ transform:translateX(calc(-50% + 100px)) rotate(24deg) translateY(-6px); }
.theme-card--time.s10:hover .mini:nth-child(10){ transform:translateX(calc(-50% + 130px)) rotate(32deg) translateY(2px); }
/* s12 — двенадцать карт */
.theme-card--time.s12 .mini:nth-child(1){ transform:translateX(-50%) rotate(-6deg) translateY(0); z-index:12; }
.theme-card--time.s12 .mini:nth-child(2){ transform:translateX(-50%) rotate(-4deg) translateY(-2px); z-index:11; }
.theme-card--time.s12 .mini:nth-child(3){ transform:translateX(-50%) rotate(-2deg) translateY(-4px); z-index:10; }
.theme-card--time.s12 .mini:nth-child(4){ transform:translateX(-50%) rotate(0deg) translateY(-6px); z-index:9; }
.theme-card--time.s12 .mini:nth-child(5){ transform:translateX(-50%) rotate(2deg) translateY(-8px); z-index:8; }
.theme-card--time.s12 .mini:nth-child(6){ transform:translateX(-50%) rotate(4deg) translateY(-10px); z-index:7; }
.theme-card--time.s12 .mini:nth-child(7){ transform:translateX(-50%) rotate(6deg) translateY(-12px); z-index:6; }
.theme-card--time.s12 .mini:nth-child(8){ transform:translateX(-50%) rotate(8deg) translateY(-14px); z-index:5; }
.theme-card--time.s12 .mini:nth-child(9){ transform:translateX(-50%) rotate(10deg) translateY(-16px); z-index:4; }
.theme-card--time.s12 .mini:nth-child(10){ transform:translateX(-50%) rotate(12deg) translateY(-18px); z-index:3; }
.theme-card--time.s12 .mini:nth-child(11){ transform:translateX(-50%) rotate(14deg) translateY(-20px); z-index:2; }
.theme-card--time.s12 .mini:nth-child(12){ transform:translateX(-50%) rotate(16deg) translateY(-22px); z-index:1; }
.theme-card--time.s12:hover .mini:nth-child(1){ transform:translateX(calc(-50% - 145px)) rotate(-36deg) translateY(8px); }
.theme-card--time.s12:hover .mini:nth-child(2){ transform:translateX(calc(-50% - 118px)) rotate(-29deg) translateY(0); }
.theme-card--time.s12:hover .mini:nth-child(3){ transform:translateX(calc(-50% - 92px)) rotate(-22deg) translateY(-8px); }
.theme-card--time.s12:hover .mini:nth-child(4){ transform:translateX(calc(-50% - 66px)) rotate(-15deg) translateY(-15px); }
.theme-card--time.s12:hover .mini:nth-child(5){ transform:translateX(calc(-50% - 40px)) rotate(-9deg) translateY(-20px); }
.theme-card--time.s12:hover .mini:nth-child(6){ transform:translateX(calc(-50% - 13px)) rotate(-3deg) translateY(-24px); }
.theme-card--time.s12:hover .mini:nth-child(7){ transform:translateX(calc(-50% + 13px)) rotate(3deg) translateY(-24px); }
.theme-card--time.s12:hover .mini:nth-child(8){ transform:translateX(calc(-50% + 40px)) rotate(9deg) translateY(-20px); }
.theme-card--time.s12:hover .mini:nth-child(9){ transform:translateX(calc(-50% + 66px)) rotate(15deg) translateY(-15px); }
.theme-card--time.s12:hover .mini:nth-child(10){ transform:translateX(calc(-50% + 92px)) rotate(22deg) translateY(-8px); }
.theme-card--time.s12:hover .mini:nth-child(11){ transform:translateX(calc(-50% + 118px)) rotate(29deg) translateY(0); }
.theme-card--time.s12:hover .mini:nth-child(12){ transform:translateX(calc(-50% + 145px)) rotate(36deg) translateY(8px); }
.seo p{ line-height:1.6; color:#dadbe0; max-width:760px; margin-bottom:18px; }
/* Справочник: кнопки на всю ширину */
.grid-ref{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1024px){ .grid-ref{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-ref{ grid-template-columns:1fr; } }
/* Две карты-обложки в FAQ-секции (правая колонка) — без плашки, с лёгкой анимацией */
.ref-duo{
position:relative;
width:100%; height:540px;
display:flex; align-items:center; justify-content:center;
}
.duo-card{
position:absolute;
width:240px; height:360px;
border-radius:16px;
overflow:hidden;
will-change:transform;
}
.duo-card svg{ width:100%; height:100%; display:block; }
/* Левая карта — «Лунный аркан», свечение в индиго-синем (более прозрачное). */
.duo-card.duo-left{
z-index:1;
transform:translate(-60px, 12px) rotate(-9deg);
animation:duoSwayLeft 7s ease-in-out infinite;
box-shadow:
0 30px 70px -18px rgba(60, 80, 170, 0.3),
0 0 70px -8px rgba(90, 120, 210, 0.2),
0 0 30px -4px rgba(140, 160, 230, 0.14),
0 8px 22px -6px rgba(7, 10, 30, 0.45);
}
/* Правая карта — «Звёздный аркан», свечение в аметисте. z-index:2 — впереди. */
.duo-card.duo-right{
z-index:2;
transform:translate(60px, 36px) rotate(7deg);
animation:duoSwayRight 7s ease-in-out infinite;
box-shadow:
0 30px 70px -18px rgba(110, 70, 170, 0.6),
0 0 70px -8px rgba(150, 100, 200, 0.45),
0 0 30px -4px rgba(190, 150, 230, 0.3),
0 8px 22px -6px rgba(13, 10, 34, 0.6);
}
/* ============ Анимация рубашки карты (живая рубашка как rs-card-art) ============
Несколько слоёв с разными скоростями вращения, пульс центра, твинклы точек.
Всё на transform/opacity — GPU-композит. */
/* Светящееся гало за центральным мотивом — медленно дышит */
.duo-card .duo-halo{
transform-box:fill-box; transform-origin:center;
animation:duoHaloBreath 5s ease-in-out infinite alternate;
}
@keyframes duoHaloBreath{
from { opacity:0.55; transform:scale(0.92); }
to { opacity:1; transform:scale(1.08); }
}
/* Внешнее кольцо — качается на ±18° (туда-обратно), не уходит за границы карты */
.duo-card .duo-ring-outer{
transform-box:view-box; transform-origin:100px 150px;
animation:duoRingOuter 14s ease-in-out infinite alternate;
}
.duo-card.duo-left .duo-ring-outer{ animation-duration:16s; }
@keyframes duoRingOuter{
from { transform:translate(100px,150px) rotate(-18deg) translate(-100px,-150px); }
to { transform:translate(100px,150px) rotate( 18deg) translate(-100px,-150px); }
}
/* Среднее кольцо — качается в противофазе на ±12°, быстрее */
.duo-card .duo-ring-mid{
transform-box:view-box; transform-origin:100px 150px;
animation:duoRingMid 10s ease-in-out infinite alternate;
}
.duo-card.duo-left .duo-ring-mid{ animation-duration:12s; animation-direction:alternate-reverse; }
@keyframes duoRingMid{
from { transform:translate(100px,150px) rotate( 12deg) translate(-100px,-150px); }
to { transform:translate(100px,150px) rotate(-12deg) translate(-100px,-150px); }
}
/* Центральная звезда / 8-конечник — пульс */
.duo-card .duo-star-pulse{
transform-box:fill-box; transform-origin:center;
animation:duoStarPulse 4s ease-in-out infinite alternate;
}
@keyframes duoStarPulse{
from { opacity:0.7; transform:scale(0.94); }
to { opacity:1; transform:scale(1.08); }
}
/* Ядро — мерцает */
.duo-card .duo-core{
transform-box:fill-box; transform-origin:center;
animation:duoCorePulse 3s ease-in-out infinite alternate;
}
@keyframes duoCorePulse{
from { opacity:0.7; transform:scale(0.9); }
to { opacity:1; transform:scale(1.15); }
}
/* Звёзды/точки на арках и в фоне — твинкл с разными задержками */
.duo-card .duo-tw{ transform-box:fill-box; transform-origin:center; }
.duo-card .duo-tw.tw-1{ animation:duoTwinkle 3.2s ease-in-out infinite; }
.duo-card .duo-tw.tw-2{ animation:duoTwinkle 4.1s ease-in-out -1.2s infinite; }
.duo-card .duo-tw.tw-3{ animation:duoTwinkle 2.8s ease-in-out -2.0s infinite; }
.duo-card .duo-tw.tw-4{ animation:duoTwinkle 3.6s ease-in-out -0.7s infinite; }
.duo-card .duo-tw.tw-5{ animation:duoTwinkle 4.4s ease-in-out -2.6s infinite; }
.duo-card .duo-tw.tw-6{ animation:duoTwinkle 3.0s ease-in-out -1.8s infinite; }
.duo-card .duo-tw.tw-7{ animation:duoTwinkle 4.0s ease-in-out -3.0s infinite; }
.duo-card .duo-tw.tw-8{ animation:duoTwinkle 3.4s ease-in-out -1.4s infinite; }
@keyframes duoTwinkle{
0%,100% { opacity:0.25; transform:scale(0.8); }
50% { opacity:1; transform:scale(1.2); }
}
/* Золотое свечение на гравированных элементах — общий drop-shadow */
.duo-card .duo-glow-stroke{
filter:drop-shadow(0 0 2px rgba(204,166,86,0.5));
}
/* (Старые .duo-rotor-*, .duo-stars удалены — заменены классами .duo-ring-outer/mid + .duo-tw выше) */
@keyframes duoSwayLeft{
0%, 100% { transform:translate(-60px, 12px) rotate(-9deg); }
50% { transform:translate(-56px, 4px) rotate(-7deg); }
}
@keyframes duoSwayRight{
0%, 100% { transform:translate(60px, 36px) rotate(7deg); }
50% { transform:translate(64px, 28px) rotate(9deg); }
}
@media (max-width:600px){
.ref-duo{ height:400px; margin-top:-40px; }
.duo-card{ width:180px; height:270px; border-radius:12px; }
.duo-card.duo-left{ transform:translate(-44px, 10px) rotate(-9deg); }
.duo-card.duo-right{ transform:translate(44px, 28px) rotate(7deg); }
@keyframes duoSwayLeft{
0%, 100% { transform:translate(-44px, 10px) rotate(-9deg); }
50% { transform:translate(-40px, 4px) rotate(-7deg); }
}
@keyframes duoSwayRight{
0%, 100% { transform:translate(44px, 28px) rotate(7deg); }
50% { transform:translate(48px, 22px) rotate(9deg); }
}
}
.ref-card{
display:flex; align-items:center; gap:14px;
/* Опаковый эквивалент rgba(255,255,255,0.04) над тёмно-синим bg — без alpha-blend с
bg-shell::before звёздами под секцией. */
background:#181c40; border:1px solid rgba(204,166,86,0.18);
border-radius:14px; padding:26px 26px;
text-decoration:none; color:#fbf8ec; font-family:'Forum',serif; font-size:2.4rem; line-height:1.15;
transition:background .2s, border-color .2s, transform .25s cubic-bezier(.2,.7,.25,1);
transform:translateZ(0);
will-change:transform;
}
.ref-card:hover{ background:#262248; border-color:var(--gold); transform:translateY(-2px); }
.ref-card::after{ content:"→"; margin-left:auto; color:var(--gold); transition:transform .2s; }
.ref-card:hover::after{ transform:translateX(3px); }
.faq-orb-section .h2{ margin-top:0; margin-bottom:24px; }
/* Аккардеон: grid-template-rows 0fr→1fr — браузер оптимизирует это нативно,
без layout-thrashing main thread'а. Содержимое плавно появляется через
GPU-composited opacity+translateY (никакой height/max-height в transition). */
.faq-item{
background:#181c40;
border:1px solid rgba(204,166,86,0.2); border-radius:14px;
overflow:hidden;
cursor:pointer;
transition:border-color .15s ease, background-color .15s ease;
contain:layout style;
}
/* Аккардеон по образцу product-faq: padding статичный (не анимируется),
клиппинг через overflow:hidden на .faq-a + grid-template-rows на .faq-a-wrap.
Текст плавно появляется через opacity+transform — это GPU-композит. */
.faq-item.open .faq-a{
opacity:0.9;
transform:translateY(0);
padding-bottom:28px;
transition:
opacity .22s cubic-bezier(0.25, 0.46, 0.45, 0.94) .08s,
transform .22s cubic-bezier(0.25, 0.46, 0.45, 0.94) .08s;
}
/* ============ Унифицированные размеры описаний ============ */
.cell .body-text,
.rs-content .rs-body p,
.try-other .head-sub,
.try-card .desc,
.bp-content .bp-lead,
.bk-body .bk-desc,
.theme-card p,
.section .sub,
.seo p{
font-size:1.8rem;
}
/* FAQ вопрос +2px от базового 1.8rem = 2rem (20px); ответ остаётся 1.8rem */
.faq-q{ font-size:2rem; }
.faq-a{ font-size:1.8rem; }
@media (max-width:580px){
.cell .body-text,
.rs-content .rs-body p,
.try-other .head-sub,
.try-card .desc,
.bp-content .bp-lead,
.bk-body .bk-desc,
.theme-card p,
.section .sub,
.seo p{
font-size:1.6rem;
}
.faq-q, .faq-a{
font-size:1.6rem;
}
}
/* ============ Старшие арканы — тикер ============ */
.arcana-section{ position:relative; }
.arcana-box{
position:relative;
border-radius:24px;
padding:60px 56px 30px;
/* Непрозрачный фон — иначе каждый кадр анимации ticker'а и hover-скейла карт
требует семплировать звёздный паттерн bg-shell::before и alpha-blend поверх него. */
background:linear-gradient(140deg, #1c1a40, #11142d);
box-shadow:inset 0 0 0 1px rgba(204,166,86,0.18);
overflow:visible;
isolation:isolate;
/* Карты строго в границах бокса по горизонтали; снизу разрешаем тексту/hover опускаться */
clip-path:inset(0 0 -360px 0 round 24px);
}
.arcana-box .ar-fade-l,
.arcana-box .ar-fade-r{
position:absolute; top:0; bottom:0; width:110px;
pointer-events:none; z-index:5;
}
/* Фейды по краям — в тон контейнера, чтобы карты растворялись в фоне, а не темнели.
Цвет = рендер фоновой плашки на каждом крае поверх #0d1029. */
.arcana-box .ar-fade-l{
left:0;
background:linear-gradient(90deg,
#1a1739 0%,
rgba(26,23,57,0.9) 35%,
rgba(26,23,57,0.5) 65%,
rgba(26,23,57,0) 100%);
border-radius:24px 0 0 24px;
}
.arcana-box .ar-fade-r{
right:0;
background:linear-gradient(270deg,
#0f1228 0%,
rgba(15,18,40,0.9) 35%,
rgba(15,18,40,0.5) 65%,
rgba(15,18,40,0) 100%);
border-radius:0 24px 24px 0;
}
.arcana-box::before{
content:""; position:absolute; inset:0;
background:
radial-gradient(1px 1px at 12% 18%, rgba(204,166,86,0.4) 50%, transparent),
radial-gradient(1px 1px at 84% 28%, rgba(204,166,86,0.4) 50%, transparent),
radial-gradient(1.2px 1.2px at 22% 76%, rgba(204,166,86,0.4) 50%, transparent),
radial-gradient(1px 1px at 92% 82%, rgba(204,166,86,0.4) 50%, transparent),
radial-gradient(0.8px 0.8px at 60% 12%, rgba(204,166,86,0.3) 50%, transparent);
pointer-events:none; z-index:0;
}
@media (max-width:760px){
.arcana-box{ padding:40px 24px 30px; }
.arcana-section .ar-cta{ font-size:16px; height:40px; padding:0 18px; }
}
.arcana-section .ar-head{
position:relative; z-index:6;
display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
margin-bottom:18px; flex-wrap:wrap;
}
.arcana-section .ar-head .left{ flex:1 1 380px; max-width:680px; }
.arcana-section .ar-head .left .sub{ margin-bottom:0; }
.arcana-section .ar-head .right{ flex-shrink:0; padding-bottom:0; }
.arcana-section .ar-head .sub{ font-size:1.8rem; }
.arcana-section .ar-pill{
display:inline-flex; align-items:center; gap:8px;
padding:6px 14px; border-radius:999px;
background:rgba(204,166,86,0.12); color:var(--gold);
font-size:1.4rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
margin-bottom:14px;
}
.arcana-section .ar-cta{
display:inline-flex; gap:10px; align-items:center;
height:46px; padding:0 24px;
background:transparent; color:var(--gold);
border:1px solid var(--gold); border-radius:10px;
font-family:'Forum',serif; font-size:18px;
text-decoration:none;
transition:background .25s, color .25s, transform .15s;
}
.arcana-section .ar-cta:hover{ background:var(--gold); color:#1a1518; transform:translateY(-1px); }
.arcana-section .ar-cta::after{ content:"→"; transition:transform .25s; }
.arcana-section .ar-cta:hover::after{ transform:translateX(4px); }
.arcana-ticker{
position:relative;
margin:0 calc(-1 * var(--wrapper-offset));
overflow:visible;
}
.arcana-ticker-track{
display:flex; gap:32px; padding:20px 0;
width:max-content;
animation:arcana-ticker 90s linear infinite;
}
.arcana-ticker:hover .arcana-ticker-track{ animation-play-state:paused; }
@keyframes arcana-ticker{
from{ transform:translateX(0); }
to { transform:translateX(-50%); }
}
.arcana-card{
position:relative;
flex:0 0 auto; width:170px; height:255px;
border-radius:10px;
background:linear-gradient(160deg, #2a1248 0%, #15082c 50%, #08041a 100%);
border:1px solid var(--gold);
box-shadow:0 10px 24px -10px rgba(0,0,0,0.55);
text-decoration:none; color:inherit;
transition:transform .35s cubic-bezier(.2,.7,.25,1), box-shadow .35s;
z-index:1;
/* Промоутим в свой compositor-слой: hover-скейл идёт чисто на GPU,
без repaint area под картой и соседних карт ticker'а. */
transform:translateZ(0);
will-change:transform;
}
/* мостик-перекрытие зазора между картой и блоком текста — не даёт hover мигать */
.arcana-card::after{
content:""; position:absolute;
top:100%; left:-22px; right:-22px; height:18px;
pointer-events:auto;
}
.arcana-card:hover img{
box-shadow:
0 28px 56px -14px rgba(0,0,0,0.35),
0 12px 28px -10px rgba(0,0,0,0.22);
}
/* фон-подставка — появляется при ховере, в стиле карточек «Карта дня» */
.arcana-shell{
position:absolute;
top:38px; left:-22px; right:-22px; bottom:-160px;
border-radius:14px;
background:
radial-gradient(ellipse 100% 70% at 50% 30%, rgba(204,166,86,0.28) 0%, rgba(204,166,86,0.10) 35%, transparent 70%),
linear-gradient(160deg, rgba(36,28,72,0.95), rgba(15,18,40,0.98));
border:1px solid rgba(204,166,86,0.45);
box-shadow:
0 24px 56px -20px rgba(0,0,0,0.7),
inset 0 0 80px rgba(204,166,86,0.18);
opacity:0;
transform:translateY(10px);
transition:opacity .35s, transform .35s cubic-bezier(.2,.7,.25,1);
z-index:0;
pointer-events:none;
}
.arcana-card img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; display:block;
border-radius:9px;
z-index:1;
transition:box-shadow .35s ease;
}
.arcana-card .ar-num{
position:absolute; top:10px; left:50%; transform:translateX(-50%);
font-family:'Forum',serif; font-size:1.4rem; color:var(--gold-light);
letter-spacing:.05em; z-index:3;
background:rgba(15,18,40,0.85); padding:2px 12px; border-radius:999px;
border:1px solid rgba(204,166,86,0.4);
}
.arcana-card .ar-hover{
position:absolute;
top:calc(100% + 14px); left:0; right:0;
display:flex; flex-direction:column; align-items:flex-start; gap:8px;
opacity:0; transform:translateY(10px);
transition:opacity .35s ease .05s, transform .35s ease .05s;
z-index:3;
pointer-events:none;
text-align:left;
}
.arcana-card .ar-name{
font-family:'Forum',serif; font-size:2.6rem; color:#fbf8ec;
letter-spacing:.02em; line-height:1.1;
margin:0;
}
.arcana-card .ar-desc{
font-family:'Inter',sans-serif; font-size:1.8rem; color:#dadbe0;
line-height:1.4; margin:0;
}
.arcana-card .ar-link{
font-family:inherit; font-size:1.5rem; color:rgba(255,255,255,0.85); letter-spacing:.02em;
border:1px dashed rgba(255,255,255,0.45); border-radius:10px;
padding:10px 14px;
display:inline-flex; gap:6px; align-items:center; justify-content:center;
font-weight:500; background:transparent;
text-align:center;
transition:background .2s, color .2s, border-color .2s, border-style .2s;
margin-top:6px;
width:100%;
}
.arcana-card:hover{
transform:scale(1.18);
transform-origin:50% 100%;
z-index:10;
}
.arcana-card:hover .arcana-shell{ opacity:1; transform:translateY(0); }
.arcana-card:hover .ar-hover{ opacity:1; transform:translateY(0); pointer-events:auto; }
.arcana-card .ar-link:hover{ background:rgba(255,255,255,0.06); border-color:#ffffff; border-style:solid; color:#ffffff; }
@media (max-width:760px){
.arcana-card{ width:140px; height:210px; }
.arcana-card .ar-name{ font-size:2rem; }
.arcana-card .ar-desc{ font-size:1.4rem; }
.arcana-card .ar-link{ font-size:1.4rem; }
}
/* ============ Hero · Справочник (без интерактивной колоды) ============ */
.hero--ref{ min-height:auto; padding-top:60px; padding-bottom:80px; }
.hero--ref h1{ margin-bottom:24px; }
.hero--ref .lede{ margin-bottom:48px; }
.ref-stats{
display:grid; grid-template-columns:repeat(4, minmax(0, 200px));
gap:18px;
}
.ref-stat{
display:flex; flex-direction:column; align-items:center; gap:6px;
padding:24px 18px; border-radius:18px;
background:rgba(255,255,255,0.03);
border:1px solid rgba(204,166,86,0.22);
text-decoration:none; color:#f4f1e6;
transition:background .2s, border-color .2s, transform .12s;
}
.ref-stat:hover{ background:rgba(204,166,86,0.08); border-color:var(--gold); transform:translateY(-2px); }
.ref-stat .num{ font-family:'Forum',serif; font-size:4.4rem; line-height:1; color:var(--gold-light); }
.ref-stat .lbl{ font-size:1.3rem; letter-spacing:0.06em; color:#c4c2cc; text-align:center; }
@media (max-width:780px){
.ref-stats{ grid-template-columns:repeat(2, 1fr); gap:12px; }
.ref-stat{ padding:18px 12px; }
.ref-stat .num{ font-size:3.4rem; }
}
/* ============ Сетки карт справочника ============ */
.arc-section{ position:relative; }
.arc-section .h2{ margin-bottom:12px; }
.arc-section .sub{ margin-bottom:36px; font-size:1.8rem; color:#aeacb8; max-width:720px; line-height:1.55; }
.arc-suit{ margin-top:64px; }
.arc-suit:first-child{ margin-top:0; }
.arc-suit-head{
display:flex; align-items:baseline; justify-content:space-between;
gap:24px; flex-wrap:wrap; margin-bottom:24px;
}
.arc-suit-head h3{
font-family:'Forum',serif; font-weight:400;
font-size:3.6rem; line-height:1; color:#fbf8ec; margin:0;
}
.arc-suit-head h3 .count{
display:inline-block; margin-left:10px;
font-size:1.6rem; color:var(--gold); letter-spacing:0.08em;
vertical-align:middle;
}
.arc-suit-head .arc-suit-note{ font-size:1.5rem; color:#9a96a6; max-width:520px; }
.arc-grid{
display:grid; gap:18px;
grid-template-columns:repeat(6, minmax(0,1fr));
}
.arc-grid.suit-grid{ grid-template-columns:repeat(7, minmax(0,1fr)); }
@media (max-width:1120px){
.arc-grid{ grid-template-columns:repeat(5, minmax(0,1fr)); }
.arc-grid.suit-grid{ grid-template-columns:repeat(7, minmax(0,1fr)); }
}
@media (max-width:980px){
.arc-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.arc-grid.suit-grid{ grid-template-columns:repeat(5, minmax(0,1fr)); }
}
@media (max-width:680px){
.arc-grid,.arc-grid.suit-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
}
@media (max-width:420px){
.arc-grid,.arc-grid.suit-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
/* Плитка-карта */
.arc-tile{
position:relative;
display:flex; flex-direction:column;
text-decoration:none; color:#f4f1e6;
transition:transform .15s;
}
.arc-tile:hover{ transform:translateY(-3px); z-index:3; }
.arc-tile .card-art{
position:relative;
aspect-ratio:5/7; border-radius:10px;
background:linear-gradient(160deg, #2a1535 0%, #14071e 100%);
box-shadow:
0 14px 28px -10px rgba(0,0,0,0.55),
inset 0 0 0 1px rgba(204,166,86,0.55);
overflow:hidden;
transition:box-shadow .25s, transform .25s;
}
.arc-tile:hover .card-art{
box-shadow:
0 18px 38px -10px rgba(0,0,0,0.6),
0 0 32px -4px rgba(204,166,86,0.35),
inset 0 0 0 1px rgba(204,166,86,0.85);
}
.arc-tile .card-art::before{
content:""; position:absolute; inset:6px; border-radius:6px;
border:1px solid rgba(204,166,86,0.35);
pointer-events:none;
}
.arc-tile .card-num{
position:absolute; top:10px; left:0; right:0;
text-align:center;
font-family:'Forum',serif; font-size:1.5rem; letter-spacing:0.2em;
color:var(--gold-light); z-index:2;
}
.arc-tile .card-glyph{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
font-size:4.2rem; color:var(--gold);
opacity:0.85;
font-family:'Forum',serif;
text-shadow:0 0 18px rgba(251,216,144,0.35);
}
.arc-tile .card-suit-mini{
position:absolute; bottom:10px; left:0; right:0;
text-align:center;
font-size:1.2rem; letter-spacing:0.2em;
color:rgba(204,166,86,0.7);
text-transform:uppercase;
}
.arc-tile .card-name{
margin-top:12px; padding:0 4px;
font-size:1.45rem; line-height:1.25;
color:#fbf8ec; text-align:center;
min-height:2.4em;
}
.arc-tile:hover .card-name{ color:var(--gold-light); }
/* Цветовая раскраска мастей */
.arc-tile.suit-wands .card-art{ background:linear-gradient(160deg, #3a1a14 0%, #1a0a08 100%); }
.arc-tile.suit-cups .card-art{ background:linear-gradient(160deg, #2a1838 0%, #160820 100%); }
.arc-tile.suit-swords .card-art{ background:linear-gradient(160deg, #14233a 0%, #08101e 100%); }
.arc-tile.suit-pents .card-art{ background:linear-gradient(160deg, #1a3424 0%, #0a1810 100%); }
/* ============ Слайдер карт Старших Арканов ============ */
.arc-slider-head{
display:flex; align-items:baseline; justify-content:space-between;
gap:24px; flex-wrap:wrap; margin-bottom:24px;
}
.arc-slider-nav{ display:flex; gap:12px; flex-shrink:0; }
.arc-section-actions{
display:flex; gap:12px; align-items:center; flex-shrink:0; flex-wrap:wrap;
}
.arc-more-btn{
display:inline-flex; align-items:center; gap:10px;
padding:11px 22px; border-radius:999px;
background:transparent; color:var(--gold);
border:1px solid rgba(204,166,86,0.55);
font-family:'Manrope',sans-serif; font-size:1.4rem; font-weight:500;
text-decoration:none; white-space:nowrap;
transition:background .2s, border-color .2s, color .2s, transform .12s;
}
.arc-more-btn::after{ content:"→"; transition:transform .25s; font-size:1.2rem; }
.arc-more-btn:hover{
background:var(--gold); color:#1a1518; border-color:var(--gold);
transform:translateY(-1px);
}
.arc-more-btn:hover::after{ transform:translateX(3px); }
.arc-more-btn--lg{ padding:14px 32px; font-size:1.6rem; }
@media (max-width:580px){
.arc-more-btn{ padding:9px 16px; font-size:1.3rem; }
.arc-more-btn--lg{ padding:12px 22px; font-size:1.4rem; }
}
.spravochnik-cta{
display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:32px;
}
.spravochnik-cta .arc-more-btn{ min-width:220px; justify-content:center; }
@media (max-width:580px){
.spravochnik-cta .arc-more-btn{ min-width:0; flex:1 1 auto; }
}
.arc-slider{ position:relative; margin-bottom:48px; }
.arc-slider-viewport{ overflow:visible; padding:20px 0 24px; }
.arc-slider-track{
display:flex; gap:24px;
transition:transform .6s cubic-bezier(.4,0,.2,1);
will-change:transform;
}
.arc-slide{
flex:0 0 calc((100% - 96px) / 5);
min-width:0;
display:flex; flex-direction:column;
}
@media (max-width:1280px){ .arc-slide{ flex-basis:calc((100% - 72px) / 4); } }
@media (max-width:980px){ .arc-slide{ flex-basis:calc((100% - 48px) / 3); } }
@media (max-width:680px){ .arc-slide{ flex-basis:calc((100% - 24px) / 2); } }
@media (max-width:480px){ .arc-slide{ flex-basis:78%; } }
.arc-slide-card{
position:relative; aspect-ratio:2/3; border-radius:12px; overflow:hidden;
box-shadow:
0 18px 32px -12px rgba(0,0,0,0.6),
0 0 36px -6px rgba(204,166,86,0),
inset 0 0 0 1.5px rgba(204,166,86,0.7),
inset 0 0 0 3px rgba(251,216,144,0.18);
background:linear-gradient(160deg, #2a1535 0%, #14071e 100%);
transition:transform .25s, box-shadow .25s;
}
.arc-slide:hover .arc-slide-card{
transform:translateY(-4px);
box-shadow:
0 22px 42px -12px rgba(0,0,0,0.7),
0 0 36px -6px rgba(204,166,86,0.32),
inset 0 0 0 1.5px rgba(204,166,86,0.95),
inset 0 0 0 3px rgba(251,216,144,0.25);
}
.arc-slide-card img{
width:100%; height:100%; display:block; object-fit:cover;
transform:translateZ(0);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
.arc-slide-num{
position:absolute; top:8px; left:0; right:0; text-align:center;
font-family:'Forum',serif; font-size:1.4rem; letter-spacing:0.18em;
color:var(--gold-light);
text-shadow:0 1px 6px rgba(0,0,0,0.7);
z-index:2;
}
.arc-slide-info{
padding:14px 4px 0; text-align:center;
}
.arc-slide-info .nm{
font-family:'Forum',serif; font-size:2.4rem; line-height:1.15;
color:#fbf8ec; margin-bottom:14px;
}
@media (max-width:580px){
.arc-slide-info .nm{ font-size:2rem; }
}
.arc-slide-info .arc-more{
display:inline-flex; align-items:center; gap:8px;
padding:9px 18px; border-radius:999px;
background:transparent;
border:1px solid rgba(204,166,86,0.55);
color:var(--gold);
font-size:1.4rem; text-decoration:none;
transition:background .2s, border-color .2s, color .2s, transform .12s;
}
.arc-slide-info .arc-more::after{ content:"→"; transition:transform .2s; }
.arc-slide-info .arc-more:hover{
background:var(--gold); color:#1a1518; border-color:var(--gold);
transform:translateY(-1px);
}
.arc-slide-info .arc-more:hover::after{ transform:translateX(3px); }
/* Облако тегов для карт справочника */
.arc-tags{
display:flex; flex-wrap:wrap; gap:10px;
margin-top:4px;
}
.arc-tags a{
display:inline-flex; align-items:center; gap:8px;
padding:10px 18px; border-radius:999px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(204,166,86,0.28);
color:#f4f1e6; text-decoration:none;
font-size:1.4rem;
transition:background .2s, border-color .2s, color .2s, transform .12s;
}
.arc-tags a::before{
content:"✦"; color:var(--gold); font-size:0.9rem; opacity:0.7;
transition:transform .25s, color .2s;
}
.arc-tags a:hover{
background:rgba(204,166,86,0.10);
border-color:var(--gold);
color:var(--gold-light);
transform:translateY(-1px);
}
.arc-tags a:hover::before{ color:var(--gold-light); transform:rotate(72deg) scale(1.15); }
.arc-tags .num-pre{ color:var(--gold); font-weight:600; margin-right:4px; }
/* Цветной акцент тегов по масти */
.arc-tags.suit-wands a::before{ color:#d97a4a; }
.arc-tags.suit-cups a::before{ color:#c084d6; }
.arc-tags.suit-swords a::before{ color:#7aa3d6; }
.arc-tags.suit-pents a::before{ color:#8acb8e; }
.arc-tags-label{
font-size:1.3rem; letter-spacing:0.14em; text-transform:uppercase;
color:var(--gold); margin:14px 0 12px;
}
/* ============ Хлебные крошки ============ */
.bg-shell .crumbs.wrap{
position:relative; z-index:5;
display:flex; align-items:center; gap:8px;
padding-top:40px; padding-bottom:40px;
font-size:1.8rem; letter-spacing:0.04em;
color:#9a96a6;
}
.bg-shell .crumbs a{
color:#c4c2cc; text-decoration:none;
transition:color .2s;
}
.bg-shell .crumbs a:hover{ color:var(--gold); }
.bg-shell .crumbs .sep{ color:rgba(204,166,86,0.45); }
.bg-shell .crumbs .here{ color:var(--gold); }
@media (max-width:580px){
.bg-shell .crumbs{
font-size:1.45rem; padding-top:20px;
overflow-x:auto; flex-wrap:nowrap;
padding-right:0; scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.bg-shell .crumbs::-webkit-scrollbar{ display:none; }
.bg-shell .crumbs a,
.bg-shell .crumbs .here,
.bg-shell .crumbs .sep{ flex-shrink:0; white-space:nowrap; }
}
/* ════════════════════════════════════════════════════════════════════
ЕДИНЫЙ РЕГЛАМЕНТ РАЗМЕРОВ ШРИФТА (overrides — добавляются последними)
• Кнопки: ПК = 1.6rem (16px), мобайл = 1.4rem (14px)
• Описания: ПК = 1.8rem (18px), мобайл = 1.6rem (16px)
Декоративные элементы (eyebrow, мелкие caps-labels, числа, имена-Forum,
стрелки/иконки) сюда не входят. */
/* —————————— КНОПКИ —————————— */
.hero .pills button,
.hero .cta-primary,
.hero .cta-secondary,
.hero .cta-tertiary,
.deck-modal .apply,
.deck-modal .cancel,
.qask-examples button,
.qask-cta,
.qask-field textarea,
.arc-more-btn,
.arc-more-btn--lg,
.arc-tags a,
.tag-cloud a,
.arc-slide-info .arc-more,
.cm-cta-primary,
.cm-cta-secondary,
.arcana-card .ar-link,
.btn-secondary,
.cell .btn-meaning,
.theme-card--time .footer{
font-size:1.6rem;
}
@media (max-width:580px){
.hero .pills button,
.hero .cta-primary,
.hero .cta-secondary,
.hero .cta-tertiary,
.deck-modal .apply,
.deck-modal .cancel,
.qask-examples button,
.qask-cta,
.qask-field textarea,
.arc-more-btn,
.arc-more-btn--lg,
.arc-tags a,
.tag-cloud a,
.arc-slide-info .arc-more,
.cm-cta-primary,
.cm-cta-secondary,
.arcana-card .ar-link,
.btn-secondary,
.cell .btn-meaning,
.theme-card--time .footer{
font-size:1.4rem;
}
}
/* —————————— ОПИСАНИЯ —————————— */
.hero .lede,
.section .sub,
.faq-a,
.faq-a p,
.seo-section p,
.cell .body-text,
.cell .meaning,
.rs-content .rs-body p,
.deck-modal .sub,
.deck-opt .author,
.hero .current-deck,
.theme-card p,
.theme-card--time p,
.arcana-section .ar-head .sub,
.arc-suit-head .arc-suit-note,
.try-card .desc,
.qask-content .sub,
.card-meaning-content p,
.card-meaning-content .sub{
font-size:1.8rem;
}
@media (max-width:580px){
.hero .lede,
.section .sub,
.faq-a,
.faq-a p,
.seo-section p,
.cell .body-text,
.cell .meaning,
.rs-content .rs-body p,
.deck-modal .sub,
.deck-opt .author,
.hero .current-deck,
.theme-card p,
.theme-card--time p,
.arcana-section .ar-head .sub,
.arc-suit-head .arc-suit-note,
.try-card .desc,
.qask-content .sub,
.card-meaning-content p,
.card-meaning-content .sub{
font-size:1.6rem;
}
}
/* ════════ Страница карты Таро ════════ */
.card-hero{
display:grid; grid-template-columns:minmax(360px,460px) 1fr;
gap:64px; align-items:center;
padding:60px var(--wrapper-offset) 40px;
max-width:calc(144rem + 2*var(--wrapper-offset)); margin:0 auto;
}
@media (max-width:880px){
.card-hero{ grid-template-columns:1fr; gap:36px; padding-top:32px; text-align:center; }
}
.card-hero .photos{
position:relative; width:100%; max-width:440px; height:500px; align-self:center;
}
.card-hero .photo{
position:absolute; width:245px; border-radius:14px; overflow:hidden;
box-shadow:0 24px 48px rgba(0,0,0,0.55), 0 0 32px rgba(251,216,144,0.18), 0 0 64px rgba(204,166,86,0.12);
}
.card-hero .photo::after{
content:""; position:absolute; inset:0; border-radius:14px;
border:1.5px solid rgba(204,166,86,0.85);
box-shadow:inset 0 0 0 1px rgba(251,216,144,0.35), 0 0 0 4px rgba(204,166,86,0.10);
pointer-events:none;
}
.card-hero .photo img{ width:100%; height:100%; object-fit:cover; display:block; transform:translateZ(0); }
.card-hero .photo--back{ left:125px; top:10px; transform:rotate(7deg); z-index:1; }
.card-hero .photo--front{ left:8px; top:38px; transform:rotate(-5deg); z-index:2; }
@media (max-width:880px){
.card-hero .photos{ max-width:290px; height:360px; margin:0 auto; }
.card-hero .photo{ width:165px; }
.card-hero .photo--back{ left:84px; top:8px; }
.card-hero .photo--front{ left:5px; top:28px; }
}
.card-hero .eyebrow{ font-size:1.4rem; letter-spacing:0.3em; color:var(--gold); text-transform:uppercase; margin-bottom:18px; }
.card-hero h1{ font-size:7.6rem; line-height:0.92; margin-bottom:18px; color:#fbf8ec; }
.card-hero h1 .rom{ color:var(--gold); margin-right:18px; font-style:italic; }
.card-hero .motto{ font-family:'Forum',serif; font-size:2.6rem; line-height:1.18; color:#d8d6e0; margin-bottom:28px; max-width:560px; }
@media (max-width:880px){ .card-hero .motto{ margin-left:auto; margin-right:auto; } }
.card-hero .badges{ display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width:880px){ .card-hero .badges{ justify-content:center; } }
.card-hero .badge{
display:inline-flex; align-items:center; gap:8px;
padding:8px 16px; border-radius:999px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(204,166,86,0.32);
color:#f4f1e6; font-size:1.4rem; letter-spacing:0.02em;
}
.card-hero .badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
/* — Атрибуты — */
.card-attrs{
display:grid; grid-template-columns:1fr 1fr; gap:0 48px;
max-width:840px;
border-top:1px solid rgba(204,166,86,0.18);
}
@media (max-width:680px){ .card-attrs{ grid-template-columns:1fr; gap:0; } }
.card-attrs .row{
display:flex; justify-content:space-between; align-items:baseline;
padding:16px 0;
border-bottom:1px solid rgba(204,166,86,0.12);
gap:18px;
}
.card-attrs .row .k{ color:#9a96a6; font-size:1.8rem; letter-spacing:0.04em; }
.card-attrs .row .v{ color:#fbf8ec; font-size:2rem; font-family:'Forum',serif; text-align:right; }
/* — Ключевые слова — */
.card-keywords{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
@media (max-width:760px){ .card-keywords{ grid-template-columns:1fr; gap:32px; } }
.card-keywords .col h3{
font-family:'Forum',serif; font-size:2.4rem; color:#fbf8ec; margin:0 0 18px;
}
.card-keywords .col h3 .tag-side{
display:inline-block; font-size:1.4rem; padding:4px 12px; border-radius:999px;
border:1px solid rgba(204,166,86,0.4); color:var(--gold); margin-left:12px;
letter-spacing:0.06em; font-family:'Manrope',sans-serif; vertical-align:middle;
}
.card-keywords .col .keys{ display:flex; flex-wrap:wrap; gap:10px; }
.card-keywords .col .keys span{
padding:9px 16px; border-radius:999px;
background:rgba(204,166,86,0.06);
border:1px solid rgba(204,166,86,0.22);
color:#f4f1e6; font-size:1.5rem;
}
.card-keywords .col--rev .keys span{
background:rgba(196,160,200,0.04);
border-color:rgba(196,160,200,0.22);
color:#e6dbe8;
}
/* — Значение прямой/перевёрнутой — */
.card-meaning-block{ max-width:820px; }
.card-meaning-block .meaning-eyebrow{
font-size:1.8rem; letter-spacing:0.3em; text-transform:uppercase;
color:var(--gold); margin-bottom:14px;
}
.card-meaning-block.rev .meaning-eyebrow{ color:#c5a0c8; }
.card-meaning-block p{ font-size:1.8rem; line-height:1.6; color:#d8d6e0; margin:0 0 18px; }
.card-meaning-block p:last-child{ margin-bottom:0; }
/* — Сферы жизни — */
.card-spheres{
display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
}
@media (max-width:760px){ .card-spheres{ grid-template-columns:1fr; } }
.card-sphere{
padding:28px 28px 26px; border-radius:18px;
background:linear-gradient(160deg, rgba(36,28,72,0.5), rgba(15,18,40,0.55));
border:1px solid rgba(204,166,86,0.2);
}
.card-sphere h3{
font-family:'Forum',serif; font-size:2.8rem; color:#fbf8ec; margin:0 0 18px;
display:flex; align-items:center; gap:12px;
}
.card-sphere h3::before{
content:""; width:24px; height:1px; background:var(--gold);
}
.card-sphere .direct{ color:#d8d6e0; font-size:1.8rem; line-height:1.55; margin:0; padding-bottom:32px; }
.card-sphere .reversed{
color:#c4b8c8; font-size:1.8rem; line-height:1.55;
padding-top:28px; border-top:1px dashed rgba(196,160,200,0.25);
}
@media (max-width:580px){
.card-sphere .direct, .card-sphere .reversed{ font-size:1.6rem; }
}
.card-sphere .reversed::before{
content:"Перевёрнутая · ";
display:block; margin-bottom:10px;
color:#c5a0c8; font-size:inherit; letter-spacing:0.12em; text-transform:uppercase;
}
/* — Значение (прямая/перевёрнутая) — текст слева, карта справа на ПК — */
.card-meaning-layout{
display:grid; grid-template-columns:1fr 450px; gap:64px; align-items:start;
}
@media (max-width:1120px){ .card-meaning-layout{ grid-template-columns:1fr 300px; gap:40px; } }
@media (max-width:820px){ .card-meaning-layout{ grid-template-columns:1fr; gap:32px; } }
.meaning-card-photo{
position:sticky; top:24px;
}
@media (max-width:820px){
.meaning-card-photo{ position:static; max-width:300px; margin:0 auto; }
}
/* Контейнер со стопкой слайдов */
.mcp-slides{
position:relative; aspect-ratio:200/340; border-radius:16px; overflow:hidden;
box-shadow:0 24px 60px rgba(0,0,0,0.6), 0 0 40px rgba(251,216,144,0.2);
}
.mcp-slides::after{
content:""; position:absolute; inset:0; border-radius:16px;
border:1.5px solid rgba(204,166,86,0.75);
pointer-events:none; z-index:2;
}
/* Слайды */
.mcp-slide{
position:absolute; inset:0;
opacity:0; pointer-events:none;
transition:opacity .35s ease;
cursor:zoom-in;
}
.mcp-slide.is-active{ opacity:1; pointer-events:auto; }
.mcp-slide img{ width:100%; height:100%; object-fit:cover; display:block; transform:translateZ(0); }
/* Перевёрнутая позиция — крутим только картинку */
.meaning-card-photo--rev .mcp-slide img{ transform:rotate(180deg) translateZ(0); }
/* Управление стрелками: подпись слева, стрелки справа */
.mcp-controls{
display:flex; align-items:center;
gap:8px; margin-top:10px; padding:0 2px;
}
.mcp-btn{
flex-shrink:0; width:38px; height:38px; border-radius:50%;
background:rgba(255,255,255,0.04); border:1px solid rgba(204,166,86,0.35);
color:#cca656; font-size:2.4rem; line-height:1; cursor:pointer;
transition:background .15s, border-color .15s, color .15s;
display:flex; align-items:center; justify-content:center;
}
.mcp-btn:hover{ background:rgba(204,166,86,0.15); border-color:var(--gold); color:#fbd890; }
.mcp-btn:disabled{ opacity:0.35; cursor:not-allowed; }
.mcp-label{
flex:1; text-align:left; font-size:1.8rem; color:#aeacb8; line-height:1.2;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* — Символика — */
.card-symbols-layout{
display:grid; grid-template-columns:1fr 450px; gap:48px; align-items:start;
}
@media (max-width:980px){ .card-symbols-layout{ grid-template-columns:1fr 300px; gap:32px; } }
@media (max-width:680px){ .card-symbols-layout{ grid-template-columns:1fr; } }
.symbols-card-photo{
position:relative; aspect-ratio:200/340; border-radius:16px; overflow:hidden;
box-shadow:0 24px 60px rgba(0,0,0,0.6), 0 0 40px rgba(251,216,144,0.2);
}
.symbols-card-photo::after{
content:""; position:absolute; inset:0; border-radius:16px;
border:1.5px solid rgba(204,166,86,0.75);
pointer-events:none;
}
.symbols-card-photo img{ width:100%; height:100%; object-fit:cover; display:block; transform:translateZ(0); }
.card-symbols{ display:grid; grid-template-columns:1fr; gap:0; }
@media (max-width:680px){ .card-symbols{ grid-template-columns:1fr; gap:0; } }
.card-symbol{
display:flex; align-items:baseline; gap:14px;
padding:12px 0; border-bottom:1px solid rgba(204,166,86,0.1);
}
.card-symbol .nm{
font-family:'Forum',serif; color:var(--gold-light); font-size:2.2rem; flex:0 0 auto;
min-width:130px;
}
.card-symbol .d{ color:#d0cdd8; font-size:1.8rem; line-height:1.5; }
@media (max-width:580px){ .card-symbol .d{ font-size:1.6rem; } }
/* — Нумерология/Каббала · сворачиваемый — */
.card-kabbalah{
border:1px solid rgba(204,166,86,0.2); border-radius:18px;
background:rgba(15,18,40,0.4);
}
.kab-toggle{
width:100%; cursor:pointer;
background:transparent; border:0; color:inherit; font-family:inherit; text-align:left;
padding:22px 28px; display:flex; justify-content:space-between; align-items:center;
gap:16px;
}
.kab-toggle h3{
font-family:'Forum',serif; font-size:2.6rem; color:#fbf8ec; margin:0;
}
.kab-toggle .hint{ font-size:1.5rem; color:#9a96a6; letter-spacing:0.06em; }
.kab-toggle .ic{
width:32px; height:32px; border-radius:50%; border:1px solid rgba(204,166,86,0.45);
display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:18px;
flex-shrink:0; transition:transform .25s;
}
.card-kabbalah.is-open .kab-toggle .ic{ transform:rotate(45deg); }
.card-kabbalah .kab-wrap{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity .3s ease;
opacity:0;
}
.card-kabbalah.is-open .kab-wrap{
grid-template-rows:1fr;
opacity:1;
}
.card-kabbalah .kab-wrap > .kab-body{
min-height:0; overflow:hidden;
padding:0 28px 28px; display:grid; grid-template-columns:1fr 1fr; gap:20px 36px;
}
@media (max-width:680px){
.card-kabbalah .kab-wrap > .kab-body{ grid-template-columns:1fr; }
}
.card-kabbalah .kab-item h4{
font-family:'Forum',serif; font-size:2.2rem; color:var(--gold-light); margin:0 0 6px;
}
.card-kabbalah .kab-item p{ font-size:1.8rem; line-height:1.55; color:#d0cdd8; margin:0; }
@media (max-width:760px){ .card-kabbalah .kab-item p{ font-size:1.6rem; } }
/* — Сочетания — */
.card-combos{ display:grid; grid-template-columns:1fr 1fr; gap:36px; }
@media (max-width:760px){ .card-combos{ grid-template-columns:1fr; gap:24px; } }
.card-combos-col h3{
font-family:'Forum',serif; font-size:2.4rem; color:#fbf8ec; margin:0 0 16px;
}
.card-combos-col h3 .lbl{
font-size:1.2rem; letter-spacing:0.18em; text-transform:uppercase;
display:block; color:var(--gold); margin-bottom:6px; font-family:'Manrope',sans-serif;
}
.card-combos-col.is-contrast h3 .lbl{ color:#c5a0c8; }
.card-combo{
padding:16px 0; border-bottom:1px solid rgba(204,166,86,0.12);
}
.card-combo:last-child{ border-bottom:none; }
.card-combo .pair{
font-family:'Forum',serif; font-size:2.3rem; color:var(--gold-light); margin-bottom:6px;
}
@media (max-width:760px){ .card-combo .pair{ font-size:1.9rem; } }
.card-combo .pair .plus{ color:#9a96a6; font-family:'Manrope',sans-serif; margin:0 8px; }
.card-combo .d{ color:#d0cdd8; font-size:1.8rem; line-height:1.5; }
@media (max-width:760px){ .card-combo .d{ font-size:1.6rem; } }
/* — Галерея колод — */
.card-decks{
display:grid; grid-template-columns:repeat(2,1fr); gap:36px;
}
@media (max-width:760px){ .card-decks{ grid-template-columns:1fr; gap:28px; } }
.deck-variant{
display:flex; flex-direction:column; gap:18px;
padding:24px 24px 26px; border-radius:18px;
background:linear-gradient(160deg, rgba(36,28,72,0.45), rgba(15,18,40,0.55));
border:1px solid rgba(204,166,86,0.22);
}
.deck-variant .photo{
position:relative; align-self:center; width:220px; aspect-ratio:200/340; border-radius:12px; overflow:hidden;
box-shadow:0 18px 32px rgba(0,0,0,0.5), 0 0 24px rgba(251,216,144,0.15);
}
.deck-variant .photo::after{
content:""; position:absolute; inset:0; border-radius:12px;
border:1.2px solid rgba(204,166,86,0.7);
pointer-events:none;
}
.deck-variant .photo img{ width:100%; height:100%; object-fit:cover; display:block; transform:translateZ(0); }
.deck-variant .nm{ font-family:'Forum',serif; font-size:2.4rem; color:#fbf8ec; margin:0; text-align:center; }
.deck-variant .nm .author{ display:block; font-size:1.3rem; color:#9a96a6; letter-spacing:0.06em; margin-top:6px; font-family:'Manrope',sans-serif; }
.deck-variant p{ font-size:1.8rem; line-height:1.55; color:#d0cdd8; margin:0; }
@media (max-width:760px){ .deck-variant p{ font-size:1.6rem; } }
.deck-variant .accent{ font-size:1.8rem; line-height:1.5; color:#d0cdd8; }
@media (max-width:760px){ .deck-variant .accent{ font-size:1.6rem; } }
.deck-variant .accent{
padding:14px 16px; border-radius:12px;
background:rgba(204,166,86,0.05); border:1px solid rgba(204,166,86,0.18);
}
.deck-variant .accent .l{
display:block; font-size:1.2rem; letter-spacing:0.16em; text-transform:uppercase;
color:var(--gold); margin-bottom:6px;
}
.deck-variant .keys{ display:flex; flex-wrap:wrap; gap:8px; }
.deck-variant .keys span{
padding:7px 14px; border-radius:999px;
background:rgba(255,255,255,0.04); border:1px solid rgba(204,166,86,0.22);
color:#f4f1e6; font-size:1.4rem;
}
/* — Вопрос для рефлексии — */
.card-reflection{
max-width:760px; margin:0 auto;
padding:36px 40px; border-radius:18px;
background:linear-gradient(160deg, rgba(60,40,90,0.4), rgba(20,15,40,0.55));
border:1px solid rgba(204,166,86,0.25);
text-align:center;
}
.card-reflection .l{
font-size:1.3rem; letter-spacing:0.3em; text-transform:uppercase;
color:var(--gold); margin-bottom:18px;
}
.card-reflection blockquote{
margin:0; font-family:'Forum',serif; font-size:2.6rem; line-height:1.32; color:#fbf8ec;
}
.card-reflection blockquote p{ margin:0 0 14px; }
.card-reflection blockquote p:last-child{ margin-bottom:0; }
/* Section heading common */
.card-section .h2{ margin-bottom:36px; }
/* Ограничение ширины заголовка и контента для левых/одноколонных блоков */
.card-section > .h2, .card-section > h2{ max-width:720px; }
.card-section > .card-meaning-block{ max-width:720px; }
.card-section .sub{ font-size:1.8rem; line-height:1.55; color:#aeacb8; max-width:720px; margin:0 0 40px; }
/* h2 внутри левой колонки meaning-block (перед eyebrow) — меньший отступ + лимит ширины */
.card-meaning-block > .h2, .card-meaning-block > h2{ margin-bottom:20px; max-width:720px; }
/* h2 в колонке Символики — лимит ширины */
.card-symbols-col > .h2, .card-symbols-col > h2{ max-width:720px; }
@media (max-width:580px){ .card-section .sub{ font-size:1.6rem; } }
/* ════════ FAQ accordion (card-faq) ════════ */
.card-faq{display:flex;flex-direction:column;gap:1.2rem}
.card-faq-item{border:1px solid rgba(204,166,86,0.22);border-radius:1.2rem;background:rgba(20,24,55,0.4);overflow:hidden;transition:border-color .25s}
.card-faq-item[open]{border-color:rgba(204,166,86,0.5)}
.card-faq-item summary{padding:1.8rem 2.4rem;cursor:pointer;font-family:'Forum',serif;font-size:2rem;color:#fbd890;list-style:none;position:relative;padding-right:5rem;line-height:1.25;letter-spacing:0.005em}
.card-faq-item summary::-webkit-details-marker{display:none}
.card-faq-item summary::after{content:"+";position:absolute;right:2.4rem;top:50%;transform:translateY(-50%);font-size:2.4rem;color:#cca656;transition:transform .25s}
.card-faq-item[open] summary::after{content:"−"}
.card-faq-item summary:hover{color:#fff}
.card-faq-answer{padding:0 2.4rem 2rem;color:#d8d4c2;font-size:1.7rem;line-height:1.5}
@media(max-width:580px){.card-faq-item summary{padding:1.4rem 1.8rem;padding-right:4rem;font-size:1.7rem}.card-faq-item summary::after{right:1.8rem}.card-faq-answer{padding:0 1.8rem 1.6rem;font-size:1.5rem}}
/* Доп: история и символика narrative — отступ перед структурированным блоком */
.card-meaning-block p{margin:0 0 1.6rem;line-height:1.55}
.card-meaning-block p:last-child{margin-bottom:0}
.card-meaning-block strong{color:#fbd890;font-weight:600}
.card-meaning-block ul,.card-meaning-block ol{margin:0 0 1.6rem;padding-left:0;line-height:1.55;list-style:none}
.card-meaning-block li{margin:0 0 0.6rem}
/* Убираем буллеты во всех контентных секциях таро */
.bg-shell .card-section ul,.bg-shell .card-section ol,
.bg-shell .seo-section ul,.bg-shell .seo-section ol,
.bg-shell .faq-a ul,.bg-shell .faq-a ol{list-style:none;padding-left:0}
/* ════════ Грид других карт ════════ */
.taro-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:2.4rem;margin-top:3rem}
.taro-card-tile{display:flex;flex-direction:column;gap:1.2rem;text-decoration:none;color:inherit;transition:transform .25s}
.taro-card-tile:hover{transform:translateY(-4px)}
.taro-card-tile__img{aspect-ratio:5/8;border-radius:0.8rem;overflow:hidden;background:#1a1d3e;box-shadow:0 4px 16px rgba(0,0,0,.4);position:relative}
.taro-card-tile__img img{width:100%;height:100%;object-fit:cover;display:block}
.taro-card-tile:hover .taro-card-tile__img{box-shadow:0 8px 24px rgba(204,166,86,.25)}
.taro-card-tile__nm{font-family:'Forum',serif;font-size:1.6rem;line-height:1.2;color:#fbd890;text-align:center;display:flex;flex-direction:column;align-items:center;gap:0.4rem}
.taro-card-tile__nm .rom-mini{font-size:1.2rem;color:#cca656;opacity:0.7;letter-spacing:0.06em}
@media(max-width:580px){.taro-cards-grid{grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:1.6rem}.taro-card-tile__nm{font-size:1.3rem}}
/* ════════ FAQ accordion внутри .card-kabbalah ════════ */
.taro-faq-item{padding:0 0 1.2rem;border-bottom:1px solid rgba(204,166,86,0.18)}
.taro-faq-item:last-child{border-bottom:0}
.taro-faq-toggle{background:transparent;border:0;width:100%;padding:1.6rem 4rem 1.6rem 0;cursor:pointer;text-align:left;display:flex;align-items:center;justify-content:space-between;color:inherit;font-family:inherit;position:relative}
.taro-faq-toggle h4{margin:0;font-family:'Forum',serif;font-weight:400;font-size:2rem;line-height:1.25;color:#fbd890;letter-spacing:0.005em}
.taro-faq-toggle .ic{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:2.6rem;color:#cca656;transition:transform .25s}
.taro-faq-toggle:hover h4{color:#fff}
.taro-faq-toggle[aria-expanded="true"] .ic{color:#fbd890}
.taro-faq-answer{padding:0 4rem 1.4rem 0}
.taro-faq-answer p{margin:0;color:#d8d4c2;font-size:1.6rem;line-height:1.55;font-family:'Manrope',sans-serif}
@media(max-width:580px){.taro-faq-toggle{padding:1.2rem 3.2rem 1.2rem 0}.taro-faq-toggle h4{font-size:1.7rem}.taro-faq-toggle .ic{font-size:2.2rem;right:0}.taro-faq-answer{padding:0 0 1.2rem 0}.taro-faq-answer p{font-size:1.4rem}}
.grid-ref{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1024px){ .grid-ref{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-ref{ grid-template-columns:1fr; } }
/* Две карты-обложки в FAQ-секции (правая колонка) — без плашки, с лёгкой анимацией */
.ref-duo{
position:relative;
width:100%; height:540px;
display:flex; align-items:center; justify-content:center;
}
.duo-card{
position:absolute;
width:240px; height:360px;
border-radius:16px;
overflow:hidden;
will-change:transform;
}
.duo-card svg{ width:100%; height:100%; display:block; }
/* Левая карта — «Лунный аркан», свечение в индиго-синем (более прозрачное). */
.duo-card.duo-left{
z-index:1;
transform:translate(-60px, 12px) rotate(-9deg);
animation:duoSwayLeft 7s ease-in-out infinite;
box-shadow:
0 30px 70px -18px rgba(60, 80, 170, 0.3),
0 0 70px -8px rgba(90, 120, 210, 0.2),
0 0 30px -4px rgba(140, 160, 230, 0.14),
0 8px 22px -6px rgba(7, 10, 30, 0.45);
}
/* Правая карта — «Звёздный аркан», свечение в аметисте. z-index:2 — впереди. */
.duo-card.duo-right{
z-index:2;
transform:translate(60px, 36px) rotate(7deg);
animation:duoSwayRight 7s ease-in-out infinite;
box-shadow:
0 30px 70px -18px rgba(110, 70, 170, 0.6),
0 0 70px -8px rgba(150, 100, 200, 0.45),
0 0 30px -4px rgba(190, 150, 230, 0.3),
0 8px 22px -6px rgba(13, 10, 34, 0.6);
}
/* ============ Анимация рубашки карты (живая рубашка как rs-card-art) ============
Несколько слоёв с разными скоростями вращения, пульс центра, твинклы точек.
Всё на transform/opacity — GPU-композит. */
/* Светящееся гало за центральным мотивом — медленно дышит */
.duo-card .duo-halo{
transform-box:fill-box; transform-origin:center;
animation:duoHaloBreath 5s ease-in-out infinite alternate;
}
@keyframes duoHaloBreath{
from { opacity:0.55; transform:scale(0.92); }
to { opacity:1; transform:scale(1.08); }
}
/* Внешнее кольцо — качается на ±18° (туда-обратно), не уходит за границы карты */
.duo-card .duo-ring-outer{
transform-box:view-box; transform-origin:100px 150px;
animation:duoRingOuter 14s ease-in-out infinite alternate;
}
.duo-card.duo-left .duo-ring-outer{ animation-duration:16s; }
@keyframes duoRingOuter{
from { transform:translate(100px,150px) rotate(-18deg) translate(-100px,-150px); }
to { transform:translate(100px,150px) rotate( 18deg) translate(-100px,-150px); }
}
/* Среднее кольцо — качается в противофазе на ±12°, быстрее */
.duo-card .duo-ring-mid{
transform-box:view-box; transform-origin:100px 150px;
animation:duoRingMid 10s ease-in-out infinite alternate;
}
.duo-card.duo-left .duo-ring-mid{ animation-duration:12s; animation-direction:alternate-reverse; }
@keyframes duoRingMid{
from { transform:translate(100px,150px) rotate( 12deg) translate(-100px,-150px); }
to { transform:translate(100px,150px) rotate(-12deg) translate(-100px,-150px); }
}
/* Центральная звезда / 8-конечник — пульс */
.duo-card .duo-star-pulse{
transform-box:fill-box; transform-origin:center;
animation:duoStarPulse 4s ease-in-out infinite alternate;
}
@keyframes duoStarPulse{
from { opacity:0.7; transform:scale(0.94); }
to { opacity:1; transform:scale(1.08); }
}
/* Ядро — мерцает */
.duo-card .duo-core{
transform-box:fill-box; transform-origin:center;
animation:duoCorePulse 3s ease-in-out infinite alternate;
}
@keyframes duoCorePulse{
from { opacity:0.7; transform:scale(0.9); }
to { opacity:1; transform:scale(1.15); }
}
/* Звёзды/точки на арках и в фоне — твинкл с разными задержками */
.duo-card .duo-tw{ transform-box:fill-box; transform-origin:center; }
.duo-card .duo-tw.tw-1{ animation:duoTwinkle 3.2s ease-in-out infinite; }
.duo-card .duo-tw.tw-2{ animation:duoTwinkle 4.1s ease-in-out -1.2s infinite; }
.duo-card .duo-tw.tw-3{ animation:duoTwinkle 2.8s ease-in-out -2.0s infinite; }
.duo-card .duo-tw.tw-4{ animation:duoTwinkle 3.6s ease-in-out -0.7s infinite; }
.duo-card .duo-tw.tw-5{ animation:duoTwinkle 4.4s ease-in-out -2.6s infinite; }
.duo-card .duo-tw.tw-6{ animation:duoTwinkle 3.0s ease-in-out -1.8s infinite; }
.duo-card .duo-tw.tw-7{ animation:duoTwinkle 4.0s ease-in-out -3.0s infinite; }
.duo-card .duo-tw.tw-8{ animation:duoTwinkle 3.4s ease-in-out -1.4s infinite; }
@keyframes duoTwinkle{
0%,100% { opacity:0.25; transform:scale(0.8); }
50% { opacity:1; transform:scale(1.2); }
}
/* Золотое свечение на гравированных элементах — общий drop-shadow */
.duo-card .duo-glow-stroke{
filter:drop-shadow(0 0 2px rgba(204,166,86,0.5));
}
/* (Старые .duo-rotor-*, .duo-stars удалены — заменены классами .duo-ring-outer/mid + .duo-tw выше) */
@keyframes duoSwayLeft{
0%, 100% { transform:translate(-60px, 12px) rotate(-9deg); }
50% { transform:translate(-56px, 4px) rotate(-7deg); }
}
@keyframes duoSwayRight{
0%, 100% { transform:translate(60px, 36px) rotate(7deg); }
50% { transform:translate(64px, 28px) rotate(9deg); }
}
@media (max-width:600px){
.ref-duo{ height:400px; margin-top:-40px; }
.duo-card{ width:180px; height:270px; border-radius:12px; }
.duo-card.duo-left{ transform:translate(-44px, 10px) rotate(-9deg); }
.duo-card.duo-right{ transform:translate(44px, 28px) rotate(7deg); }
@keyframes duoSwayLeft{
0%, 100% { transform:translate(-44px, 10px) rotate(-9deg); }
50% { transform:translate(-40px, 4px) rotate(-7deg); }
}
@keyframes duoSwayRight{
0%, 100% { transform:translate(44px, 28px) rotate(7deg); }
50% { transform:translate(48px, 22px) rotate(9deg); }
}
}
.ref-card{
display:flex; align-items:center; gap:14px;
/* Опаковый эквивалент rgba(255,255,255,0.04) над тёмно-синим bg — без alpha-blend с
bg-shell::before звёздами под секцией. */
background:#181c40; border:1px solid rgba(204,166,86,0.18);
border-radius:14px; padding:26px 26px;
text-decoration:none; color:#fbf8ec; font-family:'Forum',serif; font-size:2.4rem; line-height:1.15;
transition:background .2s, border-color .2s, transform .25s cubic-bezier(.2,.7,.25,1);
transform:translateZ(0);
will-change:transform;
}
.ref-card:hover{ background:#262248; border-color:var(--gold); transform:translateY(-2px); }
.ref-card::after{ content:"→"; margin-left:auto; color:#fbf8ec; transition:transform .2s; }
.ref-card:hover::after{ transform:translateX(3px); }
.ref-card[data-cta="1"]{}
/* ============ Mobile section spacing ============ */
@media (max-width:580px){
.bg-shell .section{ padding-top:64px; padding-bottom:64px; }
}
/* ============ Slide label — hidden on desktop ============ */
.mcp-slide-label{ display:none; }
/* ============ Mobile infinite deck slider (≤820px) ============ */
@media (max-width:820px){
.meaning-card-photo{
position:static; max-width:none; margin:0; overflow:visible;
}
.mcp-slides{
width:calc(100vw - var(--wrapper-offset));
display:flex; flex-direction:row;
overflow-x:scroll; overflow-y:auto;
gap:12px; scroll-snap-type:x mandatory;
scrollbar-width:none; align-items:flex-start;
aspect-ratio:unset; border-radius:0; box-shadow:none;
}
.mcp-slides::-webkit-scrollbar{ display:none; }
.mcp-slides::after{ display:none; }
.mcp-slide{
position:relative !important; inset:auto !important;
opacity:1 !important; pointer-events:auto !important;
flex:0 0 calc(100% - 64px);
display:flex; flex-direction:column;
overflow:visible !important;
border:none; border-radius:0; box-shadow:none;
scroll-snap-align:start;
}
.mcp-slide img{
width:100% !important; height:auto !important;
aspect-ratio:200/340; border-radius:16px;
border:1.5px solid rgba(204,166,86,0.75);
box-shadow:0 24px 60px rgba(0,0,0,0.6), 0 0 40px rgba(251,216,144,0.2);
flex-shrink:0;
}
.mcp-slide-label{
display:block; text-align:center;
font-size:1.6rem; color:#aeacb8;
padding-top:10px; line-height:1.3;
}
.mcp-btn{ display:none !important; }
.mcp-controls{ display:none !important; }
}
/* ============ Контент из WP-страницы (MD → HTML) — единая типографика ============ */
.seo-block#seo-block-wp { padding-top:60px; padding-bottom:80px; }
.seo-block#seo-block-wp .wrap { max-width:780px; }
.seo-block#seo-block-wp h1 { display:none; }
.seo-block#seo-block-wp h2 { color:#fbf8ec; font-family:'Forum',Georgia,serif; font-weight:400; font-size:3rem; line-height:1.2; margin:56px 0 20px; }
.seo-block#seo-block-wp h2:first-child,
.seo-block#seo-block-wp > .wrap > h2:first-child { margin-top:0; }
.seo-block#seo-block-wp h3 { color:#fbf8ec; font-family:'Forum',Georgia,serif; font-weight:400; font-size:2.2rem; line-height:1.3; margin:36px 0 14px; }
.seo-block#seo-block-wp h4 { color:#fbf8ec; font-size:1.9rem; font-weight:600; margin:28px 0 12px; }
.seo-block#seo-block-wp p { color:#dadbe0; font-size:1.7rem; line-height:1.65; margin:0 0 20px; }
.seo-block#seo-block-wp ul,
.seo-block#seo-block-wp ol { color:#dadbe0; font-size:1.7rem; line-height:1.7; margin:0 0 24px; padding-left:24px; }
.seo-block#seo-block-wp li { margin-bottom:8px; }
.seo-block#seo-block-wp li::marker { color:#cca656; }
.seo-block#seo-block-wp strong { color:#fbf8ec; font-weight:600; }
.seo-block#seo-block-wp em { color:#fbf8ec; font-style:italic; }
.seo-block#seo-block-wp a { color:#cca656; border-bottom:1px solid rgba(204,166,86,0.3); transition:color .2s,border-color .2s; }
.seo-block#seo-block-wp a:hover { color:#fbf8ec; border-bottom-color:#fbf8ec; }
.seo-block#seo-block-wp blockquote { padding:18px 24px; border-left:3px solid rgba(204,166,86,0.7); background:rgba(204,166,86,0.04); color:#dadbe0; margin:0 0 24px; font-style:italic; font-size:1.7rem; line-height:1.6; }
.seo-block#seo-block-wp hr { border:none; border-top:1px solid rgba(204,166,86,0.15); margin:40px 0; }
.seo-block#seo-block-wp table { width:100%; border-collapse:collapse; margin:0 0 24px; }
.seo-block#seo-block-wp th,
.seo-block#seo-block-wp td { padding:12px 16px; text-align:left; border-bottom:1px solid rgba(204,166,86,0.12); color:#dadbe0; font-size:1.6rem; }
.seo-block#seo-block-wp th { color:#fbf8ec; font-weight:600; background:rgba(204,166,86,0.04); }
@media (max-width:820px) {
.seo-block#seo-block-wp h2 { font-size:2.4rem; margin-top:40px; }
.seo-block#seo-block-wp h3 { font-size:1.8rem; }
.seo-block#seo-block-wp p,
.seo-block#seo-block-wp ul,
.seo-block#seo-block-wp ol { font-size:1.5rem; }
}
/* Убираем декоративные
из MD-контента */
.seo-block hr,
.seo-row hr,
.combo-2cards-row hr,
.card-meaning-block hr,
.card-spheres hr { display:none; }
/* «Читать ещё» — toggle для расширенного текста карты в раскладе */
.cell .meaning .m-preview{ display:block; }
.cell .meaning .m-rest{ display:none; margin-top:10px; }
.cell .meaning.full-open .m-rest{ display:block; }
.cell .meaning .m-more{
background:transparent; color:var(--gold); border:1px dashed rgba(204,166,86,0.45);
padding:6px 14px; border-radius:6px; margin-top:10px;
font:inherit; font-size:1.4rem; cursor:pointer;
display:inline-flex; gap:6px; align-items:center;
transition:background .2s, border-color .2s;
}
.cell .meaning .m-more:hover{ background:rgba(204,166,86,0.08); border-style:solid; }
/* ============ MOBILE OVERRIDES — taro hero h1 + descriptions ============
Эталон H1 — главная irinagrit.ru (.h1 mobile = 4.6rem).
Описания (lede/sub/абзацы) сведены к 16px на ≤580px по требованию
заказчика (был разнобой 17-20px по разным селекторам).
FAQ-ответы оставлены 18px (см. правило про "+2px на мобиле для FAQ"). */
@media (max-width:1120px){
.hero h1{ font-size:7.3rem; }
}
@media (max-width:580px){
/* HERO H1 — единый размер для всех вариантов селекторов hero */
.hero h1,
.hero-text .h1,
.wk-hero-title{ font-size:4.6rem; line-height:0.85; }
/* HERO lede / описание под H1 */
.hero .lede,
.hero-text .lede,
.wk-hero-lede{ font-size:1.6rem; line-height:1.5; }
/* Подписи под секционным H2 (.sub) */
.bg-shell .section .sub,
.section .sub,
.arc-section .sub,
.arcana-section .ar-head .sub,
.qask-content .sub,
.card-section .sub,
[class*="-head"] .sub{ font-size:1.6rem; line-height:1.5; }
/* Описания на странице карты (page-taro-karta) и в любых .body-text/.lead */
.card-meaning-block p,
.card-symbol .d,
.card-attrs .row .v,
.card-attrs .row .k,
.body-text,
.cell .body-text,
.bk-panel .bk-lead,
.theme-card--time p,
.arc-slide-info .nm,
.arcana-card .ar-name,
.lb-info .pos{ font-size:1.6rem; line-height:1.5; }
}
/* ============ MOBILE OVERRIDES — sprav slider blocks ============
На моб (≤580px) переупорядочиваем .arc-section через flex + order:
сначала заголовок-описание, затем слайдер карт, затем кнопка «Подробнее».
Стрелки слайдера и кнопки «Подробнее» под картами скрыты; названия карт
крупнее (2rem = +4px) и по левому краю. Применяется к старшим, младшим
арканам и всем мастям одинаково. */
@media (max-width:580px){
.arc-section{ display:flex; flex-direction:column; gap:14px; }
/* "Прозрачные" обёртки — дети сразу попадают в .arc-section и сортируются */
.arc-slider-head,
.arc-suit-head,
.arc-section-actions{ display:contents; }
.arc-slider-head > div:first-child,
.arc-suit-head > div:first-child{ order:1; margin-bottom:0; }
.arc-slider { order:2; margin-top:0; }
.arc-more-btn,
.arc-more-btn--lg { order:3; align-self:stretch; text-align:center; }
.arc-tags-label { order:4; }
.arc-tags { order:5; }
/* Стрелки навигации слайдера — спрятать */
.arc-slider-nav{ display:none; }
/* Карты в слайдере: имя крупнее (+4px), по левому краю, без "Подробнее" */
.arc-slide-info{ text-align:left; padding-left:0; }
.arc-slide-info .nm{ font-size:2rem; }
.arc-slide-info .arc-more{ display:none; }
}
/* ============ MOBILE+DESKTOP — reversed-card & life-spheres ============
Блоки «Перевёрнутые карты Таро» и «Карты Таро в контексте сфер жизни».
Жёстко выравниваем по левому краю (от .wrap) и нормализуем размеры
описаний: PC 18px, mobile 16px. */
.card-section,
.card-section > .card-meaning-layout,
.card-section .card-meaning-block,
.life-spheres-block,
.life-spheres-block .life-spheres-intro,
.life-spheres-block .life-spheres-outro,
.life-spheres-block .card-spheres,
.life-spheres-block .card-sphere{ text-align:left; }
.life-spheres-intro,
.life-spheres-intro p,
.life-spheres-outro,
.life-spheres-outro p{ font-size:1.8rem; line-height:1.55; }
@media (max-width:580px){
.life-spheres-intro,
.life-spheres-intro p,
.life-spheres-outro,
.life-spheres-outro p{ font-size:1.6rem; line-height:1.5; }
}
/* ============ FORCE LEFT-ALIGN — reversed-card & life-spheres ============
ACF-контент/inline-стили могли давать неожиданный отступ или text-align.
Принудительно фиксируем по левому краю .wrap. */
.bg-shell .section .card-meaning-layout,
.bg-shell .section .card-meaning-layout > .card-meaning-block,
.bg-shell .life-spheres-block,
.bg-shell .life-spheres-block > *,
.bg-shell .life-spheres-block .card-spheres,
.bg-shell .life-spheres-block .card-sphere,
.bg-shell .life-spheres-block .card-sphere > *{
margin-left:0 !important;
text-align:left !important;
justify-self:start !important;
}
/* === Все параграфы в .card-sphere (Любовь, Работа, Семья и т.д.) ===
На странице справочника life-spheres рендерит просто , без .direct/.reversed,
и они не подхватывали 1.8rem. */
.card-sphere p,
.card-sphere ul,
.card-sphere ol,
.card-sphere li{ font-size:1.8rem; line-height:1.55; color:#d8d6e0; }
@media (max-width:580px){
.card-sphere p,
.card-sphere ul,
.card-sphere ol,
.card-sphere li{ font-size:1.6rem; line-height:1.5; }
}
/* ============ HARD FIX — card-meaning-layout grid → flex ============
Grid 1fr+450px по неизвестной причине даёт лишний отступ слева
у текстового блока. Переделываю в flex с явными align-flex-start. */
.bg-shell .section .card-meaning-layout{
display:flex !important;
flex-direction:row !important;
align-items:flex-start !important;
justify-content:flex-start !important;
gap:64px !important;
}
.bg-shell .section .card-meaning-layout > .card-meaning-block{
flex:1 1 auto !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
}
.bg-shell .section .card-meaning-layout > .meaning-card-photo{
flex:0 0 450px !important;
margin:0 !important;
padding:0 !important;
}
@media (max-width:1120px){
.bg-shell .section .card-meaning-layout > .meaning-card-photo{ flex:0 0 300px !important; }
.bg-shell .section .card-meaning-layout{ gap:40px !important; }
}
@media (max-width:820px){
.bg-shell .section .card-meaning-layout{ flex-direction:column !important; gap:32px !important; }
.bg-shell .section .card-meaning-layout > .meaning-card-photo{ flex:0 0 auto !important; max-width:300px; margin:0 auto !important; }
}
/* То же для life-spheres-block — на всякий случай обнуляем все левые отступы */
.bg-shell .life-spheres-block{ margin:0 !important; padding-left:0 !important; padding-right:0 !important; }
.bg-shell .life-spheres-block > h2,
.bg-shell .life-spheres-block > .life-spheres-intro,
.bg-shell .life-spheres-block > .life-spheres-outro,
.bg-shell .life-spheres-block > .card-spheres{ margin-left:0 !important; padding-left:0 !important; }
/* ============ life-spheres-block — вертикальные отступы ============ */
.bg-shell .life-spheres-block > .h2,
.bg-shell .life-spheres-block > h2{ margin-bottom:32px !important; }
.bg-shell .life-spheres-block .life-spheres-intro{ margin:0 0 48px !important; }
.bg-shell .life-spheres-block .card-spheres{ margin-bottom:48px !important; }
.bg-shell .life-spheres-block .life-spheres-outro{ margin:48px 0 0 !important; }
@media (max-width:580px){
.bg-shell .life-spheres-block > .h2,
.bg-shell .life-spheres-block > h2{ margin-bottom:20px !important; }
.bg-shell .life-spheres-block .life-spheres-intro{ margin:0 0 32px !important; }
.bg-shell .life-spheres-block .card-spheres{ margin-bottom:32px !important; }
.bg-shell .life-spheres-block .life-spheres-outro{ margin:32px 0 0 !important; }
}
/* ============ EXTRA HARD FIX (без .bg-shell префикса) ============ */
html body .card-meaning-layout{
display:flex !important;
flex-direction:row !important;
align-items:flex-start !important;
justify-content:flex-start !important;
margin:0 !important;
padding:0 !important;
}
html body .card-meaning-layout > .card-meaning-block,
html body .card-meaning-layout > .card-meaning-block.rev{
margin:0 !important;
padding:0 !important;
transform:none !important;
position:static !important;
left:0 !important;
text-indent:0 !important;
}
@media (max-width:820px){
html body .card-meaning-layout{ flex-direction:column !important; }
}
/* ============ REAL FIX — double-wrap inside .seo-block ============
На странице справочника (page-taro-spravochnik.php) контейнер
.seo-block уже оборачивается в .wrap (page-template, line 431),
а template-parts reversed-card/life-spheres рендерят СВОЙ
.section.wrap.card-section — получается двойной wrap, текст
сдвигается на 2×wrapper-offset. Обнуляем внутренний wrap. */
.seo-block .wrap > .section.wrap{
padding-left:0 !important;
padding-right:0 !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
width:auto !important;
}
/* ============ MCP arrow buttons — центровка стрелок в круге ============
Глифы ‹/› (U+2039/U+203A) в Forum/serif имеют смещение от baseline,
из-за чего выглядят сдвинутыми вверх. Используем sans-serif для кнопок
и небольшой translateY для оптического центра. */
.mcp-btn{
font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif !important;
font-size:2rem !important;
font-weight:400;
line-height:1 !important;
}
.mcp-btn > *,
.mcp-btn{ position:relative; }
.mcp-prev{ padding-right:2px; }
.mcp-next{ padding-left:2px; }
/* ============ MOBILE deck-slider — full-width, seamless loop ============ */
@media (max-width:820px){
.meaning-card-photo{ padding:0 !important; margin:0 !important; max-width:none !important; }
.mcp-slides{
width:100vw !important;
margin-left:calc(-1 * var(--wrapper-offset)) !important;
margin-right:calc(-1 * var(--wrapper-offset)) !important;
padding:0 !important;
gap:0 !important;
scroll-snap-type:x mandatory !important;
}
.mcp-slide{
flex:0 0 100vw !important;
scroll-snap-align:start !important;
padding:0 var(--wrapper-offset) !important;
box-sizing:border-box !important;
}
.mcp-slide img{
width:100% !important;
max-width:100% !important;
height:auto !important;
}
}
/* ============ MOBILE arc-slider — native scroll-snap (визуал карт не трогаем) ============
Меняем ТОЛЬКО механику: nativ touch scroll + snap + infinite-loop через
JS-клоны. Размер/gap карт остаётся как было в существующих @media. */
@media (max-width:820px){
.arc-slider-viewport{
overflow-x:auto !important;
overflow-y:hidden !important;
scroll-snap-type:x mandatory !important;
scrollbar-width:none !important;
-webkit-overflow-scrolling:touch;
}
.arc-slider-viewport::-webkit-scrollbar{ display:none !important; }
.arc-slider-track{
transform:none !important;
transition:none !important;
will-change:auto !important;
}
.arc-slide{
scroll-snap-align:start !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
PATCH 2026-05-19: новое количество карт в слайдере раскладов.
На неделю (s7) теперь 7 карт (было 3), На квартал (s30) теперь 3
(было 5), На полгода (s365) теперь 6 (было 7), На будущее (s3) — 3.
Переписываем nth-child transforms и hover-фоны.
═══════════════════════════════════════════════════════════════════ */
/* s3 — На будущее (3 карты, фон амбра) */
.theme-card--time.s3:hover{
background:
radial-gradient(ellipse at 50% 0%, rgba(251,216,144,0.22) 0%, transparent 60%),
linear-gradient(160deg, #6a5018 0%, #3a2c0a 50%, #1a1404 100%) !important;
border-color:rgba(251,216,144,0.65) !important;
}
.theme-card--time.s3 .mini:nth-child(1){ transform:translateX(-50%) rotate(-2deg) translateY(0); z-index:3; }
.theme-card--time.s3 .mini:nth-child(2){ transform:translateX(-50%) rotate(0deg) translateY(-2px); z-index:2; }
.theme-card--time.s3 .mini:nth-child(3){ transform:translateX(-50%) rotate(2deg) translateY(-4px); z-index:1; }
.theme-card--time.s3:hover .mini:nth-child(1){ transform:translateX(calc(-50% - 60px)) rotate(-14deg) translateY(-10px); }
.theme-card--time.s3:hover .mini:nth-child(2){ transform:translateX(-50%) rotate(0deg) translateY(-22px); }
.theme-card--time.s3:hover .mini:nth-child(3){ transform:translateX(calc(-50% + 60px)) rotate(14deg) translateY(-10px); }
/* s7 — На неделю теперь 7 карт (анимация прежней s365) */
.theme-card--time.s7 .mini:nth-child(1){ transform:translateX(-50%) rotate(-4deg) translateY(0); z-index:7; }
.theme-card--time.s7 .mini:nth-child(2){ transform:translateX(-50%) rotate(-2deg) translateY(-2px); z-index:6; }
.theme-card--time.s7 .mini:nth-child(3){ transform:translateX(-50%) rotate(0deg) translateY(-4px); z-index:5; }
.theme-card--time.s7 .mini:nth-child(4){ transform:translateX(-50%) rotate(2deg) translateY(-6px); z-index:4; }
.theme-card--time.s7 .mini:nth-child(5){ transform:translateX(-50%) rotate(4deg) translateY(-8px); z-index:3; }
.theme-card--time.s7 .mini:nth-child(6){ transform:translateX(-50%) rotate(6deg) translateY(-10px); z-index:2; }
.theme-card--time.s7 .mini:nth-child(7){ transform:translateX(-50%) rotate(8deg) translateY(-12px); z-index:1; }
.theme-card--time.s7:hover .mini:nth-child(1){ transform:translateX(calc(-50% - 130px)) rotate(-30deg) translateY(0); }
.theme-card--time.s7:hover .mini:nth-child(2){ transform:translateX(calc(-50% - 90px)) rotate(-20deg) translateY(-10px); }
.theme-card--time.s7:hover .mini:nth-child(3){ transform:translateX(calc(-50% - 45px)) rotate(-10deg) translateY(-18px); }
.theme-card--time.s7:hover .mini:nth-child(4){ transform:translateX(-50%) rotate(0deg) translateY(-22px); }
.theme-card--time.s7:hover .mini:nth-child(5){ transform:translateX(calc(-50% + 45px)) rotate(10deg) translateY(-18px); }
.theme-card--time.s7:hover .mini:nth-child(6){ transform:translateX(calc(-50% + 90px)) rotate(20deg) translateY(-10px); }
.theme-card--time.s7:hover .mini:nth-child(7){ transform:translateX(calc(-50% + 130px)) rotate(30deg) translateY(0); }
/* s30 — На квартал теперь 3 карты (анимация прежней s7) */
.theme-card--time.s30 .mini:nth-child(1){ transform:translateX(-50%) rotate(-2deg) translateY(0); z-index:3; }
.theme-card--time.s30 .mini:nth-child(2){ transform:translateX(-50%) rotate(0deg) translateY(-2px); z-index:2; }
.theme-card--time.s30 .mini:nth-child(3){ transform:translateX(-50%) rotate(2deg) translateY(-4px); z-index:1; }
.theme-card--time.s30 .mini:nth-child(4),
.theme-card--time.s30 .mini:nth-child(5){ display:none; }
.theme-card--time.s30:hover .mini:nth-child(1){ transform:translateX(calc(-50% - 60px)) rotate(-14deg) translateY(-10px); }
.theme-card--time.s30:hover .mini:nth-child(2){ transform:translateX(-50%) rotate(0deg) translateY(-22px); }
.theme-card--time.s30:hover .mini:nth-child(3){ transform:translateX(calc(-50% + 60px)) rotate(14deg) translateY(-10px); }
/* s365 — На полгода теперь 6 карт (6-card fan) */
.theme-card--time.s365 .mini:nth-child(1){ transform:translateX(-50%) rotate(-4deg) translateY(0); z-index:6; }
.theme-card--time.s365 .mini:nth-child(2){ transform:translateX(-50%) rotate(-2deg) translateY(-2px); z-index:5; }
.theme-card--time.s365 .mini:nth-child(3){ transform:translateX(-50%) rotate(-0.5deg) translateY(-4px); z-index:4; }
.theme-card--time.s365 .mini:nth-child(4){ transform:translateX(-50%) rotate(1deg) translateY(-6px); z-index:3; }
.theme-card--time.s365 .mini:nth-child(5){ transform:translateX(-50%) rotate(3deg) translateY(-8px); z-index:2; }
.theme-card--time.s365 .mini:nth-child(6){ transform:translateX(-50%) rotate(5deg) translateY(-10px); z-index:1; }
.theme-card--time.s365 .mini:nth-child(7){ display:none; }
.theme-card--time.s365:hover .mini:nth-child(1){ transform:translateX(calc(-50% - 110px)) rotate(-26deg) translateY(-4px); }
.theme-card--time.s365:hover .mini:nth-child(2){ transform:translateX(calc(-50% - 70px)) rotate(-15deg) translateY(-14px); }
.theme-card--time.s365:hover .mini:nth-child(3){ transform:translateX(calc(-50% - 25px)) rotate(-5deg) translateY(-22px); }
.theme-card--time.s365:hover .mini:nth-child(4){ transform:translateX(calc(-50% + 25px)) rotate(5deg) translateY(-22px); }
.theme-card--time.s365:hover .mini:nth-child(5){ transform:translateX(calc(-50% + 70px)) rotate(15deg) translateY(-14px); }
.theme-card--time.s365:hover .mini:nth-child(6){ transform:translateX(calc(-50% + 110px)) rotate(26deg) translateY(-4px); }
/* ============ Поднимаем кнопку «Подробнее о …» ближе к слайдеру (mobile) ============ */
@media (max-width:580px){
.bg-shell .arc-section{ gap:8px !important; }
.bg-shell .arc-slider{ margin-bottom:0 !important; }
.bg-shell .arc-slider-viewport{ padding-top:8px !important; padding-bottom:8px !important; }
.bg-shell .arc-section .arc-more-btn,
.bg-shell .arc-section .arc-more-btn--lg{ margin-top:0 !important; }
}
/* ============ «Подробнее о …» — мобильный вид: белая компактная кнопка ============ */
@media (max-width:580px){
.bg-shell .arc-section .arc-more-btn,
.bg-shell .arc-section .arc-more-btn--lg{
align-self:flex-start !important;
width:auto !important;
padding:12px 22px !important;
background:#f4f1e6 !important;
color:#1a1518 !important;
border:1px solid #f4f1e6 !important;
border-radius:999px !important;
font-weight:600 !important;
}
.bg-shell .arc-section .arc-more-btn::after,
.bg-shell .arc-section .arc-more-btn--lg::after{
color:#1a1518 !important;
}
.bg-shell .arc-section .arc-more-btn:hover,
.bg-shell .arc-section .arc-more-btn--lg:hover{
background:#ffffff !important;
color:#1a1518 !important;
border-color:#ffffff !important;
}
}
/* Под «Младшие Арканы» — без слайдера, кнопка прямо после описания.
Добавляем чуть больше воздуха между .sub и кнопкой. */
@media (max-width:580px){
.bg-shell #mladshie .arc-more-btn--lg{ margin-top:20px !important; }
}
/* ============ Хлебные крошки + отступ до hero — ближе к эталону ============ */
.bg-shell .crumbs.wrap{
padding-top:12px !important;
padding-bottom:0 !important;
}
.bg-shell .hero{ padding-top:36px !important; }
@media (max-width:580px){
.bg-shell .crumbs.wrap{
padding-top:10px !important;
padding-bottom:0 !important;
font-size:1.4rem !important;
}
.bg-shell .hero{ padding-top:22px !important; }
}
/* ============ Меньше пустоты между hero ↔ section и между section'ами ============ */
.bg-shell .hero{ padding-bottom:24px !important; }
.bg-shell .seo-block{ padding-top:8px !important; padding-bottom:48px !important; }
@media (max-width:580px){
.bg-shell .hero{ padding-bottom:16px !important; }
.bg-shell .seo-block{ padding-top:0 !important; padding-bottom:32px !important; }
}