/* MYSTICA v8 — «Сегодня»: hero with the card fan, the 3D card of the day, answer, moon, hubs, Stas. Plus checkout and FX bits.
   Phone first. Animated: only transform / opacity. Shadows are static (or a pseudo-element whose opacity changes).
   Heights come from --app-h (100svh, or the Telegram viewport set by telegram.js), never from raw vh. */
.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;overflow:clip;max-width:100vw}
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 picture{display:block;width:100%;height:100%}
.hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.hero-top{position:relative;z-index:2;padding-top:4px;min-width:0}
.hero-top .eyebrow{overflow-wrap:anywhere;padding:0 4px}
.hero-top h1{margin:8px 0 8px;font-size:clamp(27px,8.2vw,56px);overflow-wrap:anywhere;text-shadow:0 2px 30px rgba(198,156,97,.25)}
.hero-top .lead{max-width:420px;margin:0 auto;font-size:15.5px}

/* stage: --cw = card width in the fan, --bw = width of the big card; both bounded by width AND app height */
.stage{--cw:clamp(84px,min(31vw,calc(var(--app-h) * .25)),176px);--bw:clamp(128px,min(48vw,calc((var(--app-h) - 260px) * .58)),260px);position:relative;flex:1 0 auto;width:100%;min-height:clamp(220px,calc(var(--app-h) * .5),520px);touch-action:pan-y}
.hero.is-drawn .stage{min-height:calc(var(--bw) * 12 / 7 + 48px)}

/* the fan: 2D transforms only (no preserve-3d), the arc is fitted by FX.fan to the stage */
.fan{position:absolute;inset:0;transition:opacity .45s var(--ease),transform .5s var(--ease)}
.fcard{position:absolute;left:50%;top:50%;width:var(--cw);height:calc(var(--cw) * 12 / 7);margin:calc(var(--cw) * -6 / 7) 0 0 calc(var(--cw) / -2);padding:0;border-radius:calc(var(--cw) * .07);touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;opacity:0;animation:fanIn .5s var(--ease) forwards;animation-delay:var(--fi,0s)}
@keyframes fanIn{from{opacity:0}to{opacity:1}}
.fcard .fc-in{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:#120E1A;box-shadow:0 10px 18px rgba(0,0,0,.5),0 0 0 1px rgba(198,156,97,.38);animation:breathe 4.2s ease-in-out infinite;animation-delay:var(--d,0s)}
.fcard img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.fcard .fc-in::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,240,210,.18) 45%,transparent 60%);opacity:0;transition:opacity .3s}
.fcard::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 26px rgba(230,198,142,.42),0 0 0 1.5px rgba(230,198,142,.85);opacity:0;transition:opacity .25s;pointer-events:none}
@media (hover:hover) and (pointer:fine){.fcard:hover .fc-in::after{opacity:1}}
.fcard:focus-visible .fc-in::after,.fcard.lift .fc-in::after{opacity:1}
.fcard.lift{z-index:30;cursor:grabbing}
.fcard.lift::after{opacity:1}
.fcard.lift .fc-in{animation:none}
.fcard.active{will-change:transform}
@keyframes breathe{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-6px,0)}}
.fan.off .fc-in,.fan.dragging .fc-in{animation-play-state:paused}
.fan.done{pointer-events:none}
.stage.picked .fan{opacity:0;transform:translate3d(0,12%,0) scale(.94);pointer-events:none}

/* the 3D card: wrap (flight) > tilt (float, perspective) > c3d (rotation) > faces */
.c3d-wrap{position:absolute;left:50%;top:50%;width:var(--bw);height:calc(var(--bw) * 12 / 7);margin:calc(var(--bw) * -6 / 7) 0 0 calc(var(--bw) / -2);border-radius:7%/4.1%;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline-offset:6px}
.c3d-wrap[hidden]{display:none}
.c3d-wrap.grab{cursor:grabbing}
.c3d-wrap.flying{will-change:transform}
.c3d-wrap::before{content:"";position:absolute;inset:-18%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(230,198,142,.36),rgba(198,156,97,.12) 55%,transparent 75%);animation:halo 3.4s ease-in-out infinite;pointer-events:none}
.c3d-wrap::after{content:"";position:absolute;left:10%;right:10%;bottom:-6%;height:8%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none}
@keyframes halo{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
.c3d-tilt{position:absolute;inset:0;perspective:1000px;animation:floaty 5.2s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-6px,0)}}
.c3d-wrap.off::before,.c3d-wrap.off .c3d-tilt,.c3d-wrap.grab .c3d-tilt{animation-play-state:paused}
.c3d{position:absolute;inset:0;transform-style:preserve-3d}
.c3d-wrap.active .c3d{will-change:transform}
.c3d .face{position:absolute;inset:0;border-radius:7%/4.1%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#120E1A;box-shadow:0 0 0 1px rgba(198,156,97,.55)}
.c3d .face img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.c3d .face::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,245,220,0) 35%,rgba(255,245,220,.10) 48%,rgba(255,245,220,0) 60%);pointer-events:none}
.c3d .front{transform:rotateY(180deg)}
.c3d .front.rev img{transform:rotate(180deg)}

/* optional packed 3D (M.s3d): the fan scrub on phones and the reveal flash */
.fan-s3d{position:absolute;inset:0;touch-action:none;transition:opacity .5s var(--ease)}
.fan-s3d.gone{opacity:0;pointer-events:none}
.s3d-flash{position:absolute;left:50%;top:50%;width:min(130vw,640px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:25}

.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;padding:0 12px}
.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{position:relative;width:9px;height:9px;border-radius:50%;background:var(--gold2);flex:none}
.pulse-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(230,198,142,.7);animation:pdot 1.6s ease-out infinite}
@keyframes pdot{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.8);opacity:0}}
.birth{position:relative;z-index:2;margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:14.5px;max-width:100%;padding:0 12px}
.birth-row{display:flex;gap:8px;max-width:100%}
.birth .input{min-height:44px;font-size:16px;width:178px;min-width:0;color-scheme:dark}
.birth-line{margin-top:8px;font-size:14.5px;color:var(--muted)}

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

/* 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}
/* glow around the main button: a pseudo-element whose opacity pulses (instead of an animated box-shadow) */
.glow-wrap{position:relative;display:inline-flex}
.glow-wrap::before{content:"";position:absolute;inset:-14px -18px;border-radius:999px;background:radial-gradient(closest-side,rgba(230,198,142,.5),rgba(230,198,142,0));opacity:.35;animation:glowOp 2.8s ease-in-out infinite;pointer-events:none}
@keyframes glowOp{0%,100%{opacity:.3}50%{opacity:.9}}

/* 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;min-width:184px;min-height:184px}
.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)}

/* while the fan is on screen the top bar does not blur the animated sky under it (a full-width blur every frame) */
body.immersive .topbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,rgba(11,9,17,.9),rgba(11,9,17,.5) 70%,rgba(11,9,17,0))}

/* 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(220px,calc(var(--app-h) * .46),420px)}
html.tg-short body.tg .hero-top .lead{display:none}
html.tg-short body.tg .hero{padding-top:2px}
html.tg-short body.tg .stage{min-height:clamp(210px,calc(var(--app-h) * .44),360px);--cw:clamp(84px,min(27vw,calc(var(--app-h) * .21)),140px);--bw:clamp(120px,min(42vw,calc((var(--app-h) - 230px) * .6)),200px)}
html.tg-short body.tg .birth{margin-top:4px}
html.tg-tiny body.tg .hero-top .eyebrow{display:none}
html.tg-tiny body.tg .hero-top h1{font-size:clamp(24px,6.6vw,30px);margin:2px 0}
html.tg-tiny body.tg .stage{min-height:clamp(190px,calc(var(--app-h) * .42),300px);--cw:clamp(80px,min(25vw,calc(var(--app-h) * .2)),124px);--bw:clamp(112px,min(40vw,calc((var(--app-h) - 210px) * .6)),180px)}
.birth-jump{margin-top:6px;font-size:14.5px}

@media (min-width:900px){
  .hero{min-height:min(860px,calc(100vh - 70px))}
  .hero-bg{opacity:.4}
  .hero-bg img{transform:translate3d(calc(var(--px,0px) * -1.4),calc(var(--py,0px) * -1.4),0) scale(1.08)}
  .stage{--cw:178px;--bw:270px;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}
}

/* static variant: no breathing, no float, no halo pulse (app.css shortens CSS animations; JS skips its own) */
@media (prefers-reduced-motion:reduce){
  .fcard,.fcard .fc-in,.c3d-tilt,.c3d-wrap::before,.hint-arrow,.pulse-dot::after,.glow-wrap::before{animation:none!important}
  .fcard{opacity:1}
}
body.rm .fcard,body.rm .fcard .fc-in,body.rm .c3d-tilt,body.rm .c3d-wrap::before,body.rm .hint-arrow,body.rm .pulse-dot::after,body.rm .glow-wrap::before{animation:none!important}
body.rm .fcard{opacity:1}