/* MYSTICA v8 — «Сегодня»: hero with the 3D card fan, answer, moon, hubs, Stas. Plus checkout and FX bits. */
.hero{position:relative;min-height:calc(var(--app-h) - 56px - var(--sat));display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 0 18px;overflow:hidden}
body.immersive .hero{min-height:calc(var(--app-h) - 58px - var(--sat))}
.hero.is-drawn{min-height:0;padding-bottom:6px}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-mask:radial-gradient(80% 62% at 50% 50%,#000 30%,transparent 78%);mask:radial-gradient(80% 62% at 50% 50%,#000 30%,transparent 78%);opacity:.32}
.hero-bg img{width:100%;height:100%;object-fit:cover;transform:translate3d(calc(var(--px,0) * -1.4),calc(var(--py,0) * -1.4),0) scale(1.08)}
.hero-bg .hb-d{display:none}
.hero-top{position:relative;z-index:2;padding-top:4px}
.hero-top h1{margin:8px 0 8px;text-shadow:0 2px 30px rgba(198,156,97,.25)}
.hero-top .lead{max-width:420px;margin:0 auto;font-size:15.5px}

.stage{position:relative;flex:1;width:100%;min-height:clamp(300px,52vh,520px);display:flex;align-items:center;justify-content:center;perspective:1100px;perspective-origin:50% 30%;touch-action:none}
.hero.is-drawn .stage{min-height:clamp(320px,50vh,500px)}
/* the fan */
.fan{position:relative;width:100%;height:100%;min-height:inherit;transform-style:preserve-3d;transform:rotateX(14deg) translateY(4%);transition:opacity .6s,transform .8s var(--ease)}
.fcard{position:absolute;left:50%;top:50%;width:var(--cw);aspect-ratio:7/12;margin-left:calc(var(--cw) / -2);margin-top:calc(var(--cw) * -12 / 14);border-radius:calc(var(--cw) * .07);transform-origin:50% 120%;transition:transform .55s var(--spring),filter .3s,box-shadow .3s;box-shadow:0 18px 30px rgba(0,0,0,.55),0 0 0 1px rgba(198,156,97,.35);background:#120E1A;cursor:grab;will-change:transform;--cw:clamp(118px,31vw,176px)}
.fcard img{width:100%;height:100%;object-fit:cover;border-radius:inherit;pointer-events:none;user-select:none;-webkit-user-drag:none}
.fcard::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,240,210,.18) 45%,transparent 60%);opacity:0;transition:opacity .3s}
.fcard.hover,.fcard:focus-visible{filter:brightness(1.12)}
.fcard.hover::after,.fcard.lift::after{opacity:1}
.fcard.lift{z-index:20;cursor:grabbing;box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 30px rgba(230,198,142,.4),0 0 0 1px rgba(230,198,142,.8);transition:transform .12s linear,box-shadow .3s}
.fan:not(.done) .fcard{animation:breathe 4.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes breathe{0%,100%{translate:0 0}50%{translate:0 -7px}}
.stage.picked .fan{opacity:0;transform:rotateX(30deg) translateY(28%) scale(.9);pointer-events:none}
/* the 3D card */
.c3d-wrap{position:absolute;left:50%;top:50%;width:clamp(170px,48vw,260px);aspect-ratio:7/12;margin-left:calc(clamp(170px,48vw,260px) / -2);margin-top:calc(clamp(170px,48vw,260px) * -6 / 7);transform-style:preserve-3d;cursor:grab;touch-action:none;transition:translate .75s var(--ease),scale .75s var(--ease);will-change:transform}
.c3d-wrap.grab{cursor:grabbing}
.c3d{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.c3d .face{position:absolute;inset:0;border-radius:7%/4.1%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(198,156,97,.55)}
.c3d .face img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
.c3d .front{transform:rotateY(180deg)}
.c3d .front.rev img{transform:rotate(180deg)}
.c3d-wrap::before{content:"";position:absolute;inset:-18%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(230,198,142,.38),rgba(198,156,97,.12) 55%,transparent 75%);transform:translateZ(-40px);animation:halo 3.4s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.55;scale:.96}50%{opacity:1;scale:1.04}}
.shine{position:absolute;inset:0;border-radius:7%/4.1%;pointer-events:none;background:linear-gradient(105deg,transparent calc(var(--sx,50%) - 22%),rgba(255,245,220,.16) var(--sx,50%),transparent calc(var(--sx,50%) + 22%));mix-blend-mode:screen;transform:translateZ(1px)}
.hint{min-height:24px;margin:4px 0 0;font-size:14.5px;color:var(--gold2);display:flex;align-items:center;justify-content:center;gap:8px}
.hint-arrow{display:inline-block;animation:upArrow 1.6s ease-in-out infinite}
@keyframes upArrow{0%,100%{transform:translateY(2px);opacity:.5}50%{transform:translateY(-5px);opacity:1}}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--gold2);box-shadow:0 0 0 0 rgba(230,198,142,.7);animation:pdot 1.6s infinite}
@keyframes pdot{0%{box-shadow:0 0 0 0 rgba(230,198,142,.6)}100%{box-shadow:0 0 0 14px rgba(230,198,142,0)}}
.birth{position:relative;z-index:2;margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:14.5px}
.birth-row{display:flex;gap:8px}
.birth .input{min-height:44px;font-size:16px;width:178px;color-scheme:dark}
.birth-line{margin-top:8px;font-size:14.5px;color:var(--muted)}

/* burst */
.burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:30}
.burst i{position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#FFF4D8,#E6C68E 50%,rgba(198,156,97,0) 72%);transform:translate(-50%,-50%) scale(var(--s));animation:fly 1.25s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes fly{0%{opacity:1;translate:0 0}100%{opacity:0;translate:var(--dx) var(--dy)}}

/* answer */
.answer{padding:8px 16px 8px;text-align:left}
.answer-in{animation:viewIn .7s var(--ease) both}
.card-name{font-size:clamp(32px,8vw,48px);margin:6px 0 10px}
.kws{margin-bottom:6px}
.hook{font:italic 400 clamp(21px,5.4vw,26px)/1.3 var(--serif);color:var(--ivory2);margin:10px 0 12px}
.day{font-size:16.5px;line-height:1.6}
.full{margin-top:18px;display:grid;gap:16px}
.ab h4{font-size:20px;color:var(--gold2);margin-bottom:6px}
.ab p{line-height:1.6}
.advice{padding:18px;border-radius:var(--r);background:radial-gradient(120% 100% at 0% 0%,rgba(198,156,97,.16),rgba(23,18,33,.7));border:1px solid var(--line2)}
.advice .serif{font-size:21px;line-height:1.35;color:var(--ivory2);margin-top:6px}
.advice .q{margin-top:10px;font-size:14.5px}
.locked-text{margin-top:16px}
.locked-text h4{color:var(--gold2);font-size:19px;margin:10px 0 4px}
.lock-t{font-size:20px;color:var(--ivory2);max-width:420px}
.next{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:24px 0 6px}

/* sign result */
.sign-card .sr-h{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.sign-card .sr-img{width:76px;height:76px;border-radius:50%;flex:none;border:1px solid var(--line2)}
.sign-card .hook{font-size:20px;margin:12px 0 8px}
.sr-lock{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px;border-radius:14px;border:1px dashed var(--line2);font-size:14px;color:var(--muted)}
.sr-lock .ic{color:var(--gold2);flex:none}
.sr-lock span{flex:1}

/* moon */
.moon-box{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px;text-align:center;overflow:hidden}
.moon-stage{position:relative;display:grid;place-items:center;padding:8px}
.moon-stage canvas{position:relative;z-index:1;cursor:ew-resize;border-radius:50%;touch-action:pan-y}
.moon-glow{position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(closest-side,rgba(241,225,196,.18),rgba(198,156,97,.06) 60%,transparent 75%)}
.moon-txt h3{font-size:28px;margin:4px 0}
.moon-txt #moon-tip{margin:10px auto 6px;max-width:440px}
.moon-hint{font-size:13px;margin-bottom:12px}

/* hubs */
.hub{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--bg3);border:1px solid var(--line);color:var(--text);transition:transform .3s var(--ease),border-color .3s}
.hub:active{transform:scale(.98)}
.hub .media{aspect-ratio:4/5}
.hub-b{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1}
.hub-b h4{font-size:21px}
.hub-b p{font-size:13.5px;color:var(--muted);line-height:1.35}
.hub-b .badge{align-self:flex-start;margin-top:auto}

/* Stas */
.stas-teaser{display:grid;grid-template-columns:1fr;overflow:hidden;color:var(--text)}
.stas-photo{aspect-ratio:4/3}
.stas-photo .ph b{font-size:16px}
.st-b{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.st-b h2{font-size:34px}

/* upsell card */
.upsell{padding:18px}
.up-h{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.up-h img{width:52px;height:52px}
.upsell ul{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px}
.upsell li{display:flex;gap:9px;font-size:14.5px}
.upsell li .ic{color:var(--gold2);width:16px;height:16px;margin-top:2px}

/* paywall + checkout */
.pw-sub{margin:8px 0 14px;max-width:560px}
.pw-period{display:flex;justify-content:flex-start;margin:6px 0 2px}
.pw.center .pw-sub{margin-left:auto;margin-right:auto}
.pw-oneoff-price{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:12px 0 8px}
.pw-oneoff-price b{font:500 44px/1 var(--serif);color:var(--ivory2)}
.pw.center .btn-wide{margin-top:12px}
.co h2{margin:6px 0 14px}
.co-sum{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:10px}
.co-sum b{font:500 32px/1 var(--serif);color:var(--ivory2)}
.co-line{font-size:14px;margin:6px 0}
.co-line.ok,.ok{color:#B6E2BE}
.co-test{display:flex;gap:10px;align-items:flex-start;margin:14px 0 16px;padding:12px 14px;border-radius:14px;background:rgba(143,199,154,.08);border:1px solid rgba(143,199,154,.3);font-size:13.5px;color:var(--muted)}
.co-test .ic{color:#B6E2BE;flex:none;margin-top:2px}
.co-test b{color:var(--ivory2)}
.co-pay{margin-top:4px}
.co-fail{display:block;margin:8px auto 0}
.co-done{position:relative;text-align:center;padding:10px 0 4px}
.co-check{width:64px;height:64px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#3C5A42,#1C2A20);border:1px solid rgba(143,199,154,.6);color:#CFF3D5;animation:pop .5s var(--spring)}
.co-check .ic{width:30px;height:30px}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(26,18,9,.3);border-top-color:#1A1209;animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.tg-pay .co-pay{display:none}
.oneoffs{display:grid;gap:8px}
.oo{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(11,9,17,.5);text-align:left;font-size:14.5px;transition:border-color .2s,transform .15s}
.oo b{font:500 19px/1 var(--serif);color:var(--gold2);white-space:nowrap}
.oo:hover{border-color:var(--gold)}
.oo:active{transform:scale(.98)}

/* Telegram: compact first screen, MainButton instead of sticky CTA */
body.tg .ctabar{display:none}
body.tg{--cta-h:0px}
body.tg .topbar{padding-top:calc(6px + var(--sat));padding-bottom:6px}
body.tg .hero-top h1{font-size:clamp(26px,7vw,34px);margin:4px 0}
body.tg .hero-top .lead{font-size:14px}
body.tg .stage{min-height:clamp(250px,46vh,420px)}
html.tg-short body.tg .hero-top .lead{display:none}
html.tg-short body.tg .stage{min-height:clamp(220px,44vh,360px)}
html.tg-short body.tg .fcard{--cw:clamp(96px,26vw,140px)}
html.tg-short body.tg .c3d-wrap{width:clamp(140px,40vw,200px);margin-left:calc(clamp(140px,40vw,200px) / -2);margin-top:calc(clamp(140px,40vw,200px) * -6 / 7)}
.tg-local-main{position:fixed;left:0;right:0;bottom:0;z-index:200;height:56px;background:#C69C61;color:#1A1209;font:600 16px/1 var(--sans)}
body.tg-main-on .tabbar{bottom:56px}

@media (min-width:900px){
  .hero{min-height:min(860px,calc(100vh - 70px))}
  .hero-bg .hb-m{display:none}.hero-bg .hb-d{display:block}
  .hero-bg{opacity:.4}
  .fcard{--cw:178px}
  .c3d-wrap{width:270px;margin-left:-135px;margin-top:-231px}
  .stage{min-height:520px}
  .moon-box{flex-direction:row;text-align:left;padding:28px 36px;gap:36px}
  .stas-teaser{grid-template-columns:1.1fr 1fr}
  .stas-photo{aspect-ratio:auto;min-height:320px}
  .st-b{justify-content:center;padding:32px}
  .birth{flex-direction:row}
}