:root{ --night:#0B0806;--panel:#1A120C;--panel-2:#22170F; --gold:#C9A24B;--gold-soft:#A8873E;--ivory:#EDE6D6;--muted:#FFFFFF;--crimson:#6B3A1F; --line:rgba(196,150,90,.38); --disp:'Cinzel','Forum','EB Garamond',serif;--body:'EB Garamond',serif; --grad-gold:linear-gradient(160deg,#F6E9C6 0%,#D9B45E 34%,#C9A24B 55%,#A8873E 100%); --spring:cubic-bezier(.34,1.56,.64,1); --ease-out:cubic-bezier(.22,.7,.2,1); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:radial-gradient(140% 100% at 50% -10%,#241810 0%,#160F0A 40%,#0B0806 100%) fixed #0B0806;color:var(--ivory);font-family:var(--body);font-size:20.9px;line-height:1.6;overflow-x:hidden} ::selection{background:var(--gold);color:var(--night)} /* фирменный скроллбар */ html{scrollbar-width:thin;scrollbar-color:var(--gold-soft) #16100B} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:linear-gradient(180deg,#16100B,#0D0906);border-left:1px solid rgba(201,162,75,.15)} ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#D9B45E,var(--gold-soft));border-radius:999px;border:2px solid #16100B;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)} ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#F6E9C6,var(--gold))} ::-webkit-scrollbar-corner{background:#0D0906} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;box-shadow:0 0 0 4px rgba(201,162,75,.18)} /* ═══ ЭКРАН 0: заставка-логотип ═══ */ #splash{position:fixed;inset:0;z-index:120;background:#0B0806;display:grid;place-items:center;overflow:hidden;transition:opacity .9s ease,visibility .9s} #splash.gone{opacity:0;visibility:hidden} #spHint{position:absolute;left:0;right:0;bottom:30px;text-align:center;font-family:var(--disp);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:rgba(201,162,75,.75);opacity:0;transition:opacity 1s;margin:0;pointer-events:none;animation:spPulse 2.6s ease-in-out infinite} #spHint.show{opacity:1} #spHint .sp-tap{display:inline-block;margin-right:8px;font-size:11px} @keyframes spPulse{0%,100%{letter-spacing:.32em}50%{letter-spacing:.38em}} #splash{cursor:pointer} #splash .sp-glow{position:absolute;left:50%;top:50%;width:70vmin;height:70vmin;margin:-35vmin 0 0 -35vmin;border-radius:50%;background:radial-gradient(circle,rgba(201,162,75,.22),rgba(141,100,63,.08) 40%,transparent 70%);opacity:0;animation:spGlow 2900ms ease-in-out forwards} @keyframes spGlow{0%{opacity:0;transform:scale(.6)}55%{opacity:1;transform:scale(1)}100%{opacity:.8;transform:scale(1.08)}} #splash .sp-stack{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(34px,7vh,64px)} #splash .sp-logo{position:relative;width:min(300px,52vw);height:auto;opacity:0;-webkit-backface-visibility:hidden;transform:translateZ(0);animation:spLogo 2900ms cubic-bezier(.2,.7,.2,1) forwards} #splash .sp-word{position:relative;width:min(400px,68vw);height:auto;opacity:0;animation:spWord 2900ms cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.25s} @keyframes spWord{0%{opacity:0;transform:translateY(14px)}45%{opacity:1;transform:none}100%{opacity:1;transform:none}} @keyframes spLogo{0%{opacity:0;transform:scale(.92) translateY(8px)}40%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:1;transform:scale(1)}} #splash .sp-line{position:absolute;left:50%;top:calc(50% + min(240px,40vw));width:0;height:1px;margin-left:0;background:linear-gradient(90deg,transparent,#C9A24B,transparent);animation:spLine 2900ms ease-in-out forwards} @keyframes spLine{0%{width:0;margin-left:0;opacity:0}50%{width:min(260px,50vw);margin-left:calc(min(260px,50vw)/-2);opacity:.9}100%{width:min(260px,50vw);margin-left:calc(min(260px,50vw)/-2);opacity:.9}} #loader{position:fixed;inset:0;background:radial-gradient(90% 70% at 72% 18%,rgba(120,85,54,.30),transparent 62%),radial-gradient(85% 65% at 22% 88%,rgba(89,49,29,.32),transparent 62%),radial-gradient(60% 45% at 50% 50%,rgba(201,162,75,.07),transparent 65%),radial-gradient(140% 100% at 50% 0%,#291E15 0%,#1B140E 45%,#0C0906 100%);z-index:100;overflow:hidden;transition:opacity .8s ease,visibility .8s} #introCam{position:absolute;inset:0;-webkit-perspective:1100px;perspective:1100px;-webkit-perspective-origin:50% 50%;perspective-origin:50% 50%} #loader.gone{opacity:0;visibility:hidden} #introStage{position:absolute;inset:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform} .icard{position:absolute;left:50%;top:50%;width:clamp(46px,10.5vmin,76px);height:calc(clamp(46px,10.5vmin,76px)*122/76);margin:calc(clamp(46px,10.5vmin,76px)*-61/76) 0 0 calc(clamp(46px,10.5vmin,76px)/-2);border-radius:8px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-backface-visibility:hidden;will-change:transform,opacity} .icard .inner{position:absolute;inset:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d} #loader .loadword{position:absolute;left:0;right:0;bottom:46px;text-align:center;font-family:var(--disp);font-size:13.2px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);animation:loadp 2.2s ease-in-out infinite} @keyframes loadp{0%,100%{opacity:.5}50%{opacity:1}} #loaderHint{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-family:var(--body);font-size:14.85px;font-style:italic;letter-spacing:.06em;text-transform:none;color:var(--muted);animation:none;opacity:0;transition:opacity .6s;cursor:pointer} #loaderHint.show{opacity:.85} #loaderHint:hover{color:var(--gold)} #gateSigil{position:absolute;left:50%;top:calc(50% - 104px);transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s} #gateSigil img{width:150px;height:150px;display:block;filter:drop-shadow(0 0 30px rgba(201,162,75,.3))} #gateSigil.show{opacity:1;visibility:visible} #enterWrap{position:absolute;left:0;right:0;top:calc(50% + 14px);text-align:center;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s;z-index:2} #enterWrap.show{opacity:1;visibility:visible} #enterNote{margin-top:34px;font-size:clamp(22px,4.2vw,32px);font-style:italic;color:var(--ivory);letter-spacing:.02em;text-shadow:0 0 18px rgba(201,162,75,.25)} /* hero entrance after intro */ body.introing .hero-inner>*,body.introing .player,body.introing #cartBtn{opacity:0} @keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} body.arrived .hero-inner>*{animation:heroIn 1s cubic-bezier(.2,.7,.2,1) both} body.arrived .hero-inner>*:nth-child(1){animation-delay:.05s} body.arrived .hero-inner>h1{animation:heroIn 1s .18s cubic-bezier(.2,.7,.2,1) both,sheen 7s linear infinite} body.arrived .hero-inner>*:nth-child(3){animation-delay:.34s} body.arrived .hero-inner>*:nth-child(4){animation-delay:.48s} body.arrived .hero-inner>*:nth-child(5){animation-delay:.62s} body.arrived .player,body.arrived #cartBtn{transition:opacity 1.2s ease .9s;opacity:1} #ambienceBtn.hint{animation:candleHint 1.7s ease-in-out 3} .player.on #ambienceBtn.hint{animation:none} @keyframes candleHint{0%,100%{box-shadow:0 0 0 rgba(201,162,75,0)}50%{box-shadow:0 0 20px rgba(201,162,75,.55);color:var(--gold);border-color:var(--gold)}} nav{position:fixed;top:16px;left:0;right:0;margin:0 auto;z-index:60;display:flex;align-items:center;gap:12px;padding:14px 16px 14px 24px;width:min(1180px,calc(100% - 28px));background:linear-gradient(180deg,rgba(26,19,13,.72),rgba(13,9,6,.62));backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(201,162,75,.22);border-radius:999px;box-shadow:0 14px 40px -14px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03) inset,0 1px 0 rgba(255,255,255,.06) inset;transition:box-shadow .5s,background .5s,border-color .5s} nav.scrolled{background:linear-gradient(180deg,rgba(26,19,13,.92),rgba(13,9,6,.86));border-color:rgba(201,162,75,.4);box-shadow:0 18px 46px -16px rgba(0,0,0,.8),0 0 26px -14px rgba(201,162,75,.4),0 1px 0 rgba(255,255,255,.07) inset} .brand{display:flex;align-items:center;gap:12px;flex-shrink:0} .brand:hover{transform:scale(1.05)} .brand img{height:80px;width:auto;display:block;filter:drop-shadow(0 0 14px rgba(201,162,75,.4))} @media (max-width:900px){.brand img{height:64px}} .nav-mid{display:flex;align-items:center;gap:6px;margin:0 auto} .nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0} #burger{display:none} footer .flogo{height:180px;width:auto;margin:0 auto 16px;display:block;filter:drop-shadow(0 0 26px rgba(201,162,75,.2))} .brand .sigil{width:34px;height:34px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:16.5px} .brand b{font-family:'Cinzel',serif;font-weight:700;font-size:15.4px;letter-spacing:.22em} .brand small{display:block;font-size:11px;letter-spacing:.3em;color:var(--muted);font-family:var(--disp)} .nav-links{display:flex;align-items:center;gap:6px;font-family:var(--disp);font-size:15.95px;letter-spacing:.16em;text-transform:uppercase} .nav-links a{position:relative;opacity:.85;padding:13px 22px;border-radius:999px;transition:color .25s,opacity .25s,background .3s} .nav-links a::after{content:"";position:absolute;left:50%;bottom:5px;width:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transition:width .35s var(--ease-out),left .35s var(--ease-out)} .nav-links a:hover{opacity:1;color:var(--gold);background:rgba(201,162,75,.06)} .nav-links a:hover::after{width:60%;left:20%} .nav-links a.current{color:var(--gold);opacity:1} .nav-links a.current::after{width:60%;left:20%} .langs{position:relative;display:flex;align-items:center} .lang-cur{display:flex;align-items:center;gap:8px;background:var(--grad-gold);color:#20130A;border:none;border-radius:999px;padding:9px 14px 9px 16px;font-family:var(--disp);font-size:14.3px;font-weight:700;letter-spacing:.08em;box-shadow:0 2px 8px -2px rgba(201,162,75,.6);transition:transform .3s var(--spring),box-shadow .3s} .lang-cur:hover{box-shadow:0 4px 14px -3px rgba(201,162,75,.8)} .lang-cur:active{transform:scale(.94)} .lang-chev{width:7px;height:7px;border-right:1.6px solid #20130A;border-bottom:1.6px solid #20130A;transform:rotate(45deg) translateY(-2px);transition:transform .3s} .langs.open .lang-chev{transform:rotate(-135deg) translateY(-1px)} .lang-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:168px;padding:6px;background:linear-gradient(180deg,rgba(26,19,13,.97),rgba(13,9,6,.96));backdrop-filter:blur(18px);border:1px solid rgba(201,162,75,.3);border-radius:14px;box-shadow:0 22px 50px -16px rgba(0,0,0,.8);display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .28s,transform .35s var(--spring),visibility .28s;z-index:95} .langs.open .lang-menu{opacity:1;visibility:visible;transform:none} .lang-menu button{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;background:none;border:none;color:var(--ivory);font-family:var(--disp);font-size:14px;letter-spacing:.08em;padding:10px 12px;border-radius:9px;transition:background .25s,color .25s} .lang-menu button small{font-family:var(--body);font-style:italic;font-size:13px;color:var(--muted);letter-spacing:0;text-transform:none} .lang-menu button:hover{background:rgba(201,162,75,.12);color:var(--gold)} .lang-menu button.active{color:var(--gold)} .lang-menu button.active::after{content:"✦";margin-left:auto;font-size:11px} #cartBtn{position:fixed;bottom:26px;right:26px;z-index:59;background:linear-gradient(180deg,rgba(26,19,13,.92),rgba(13,9,6,.88));backdrop-filter:blur(12px);border:1px solid var(--gold-soft);border-radius:999px;color:var(--ivory);padding:14px 26px;font-family:var(--disp);font-size:15.95px;letter-spacing:.12em;display:flex;gap:10px;align-items:center;box-shadow:0 14px 34px -12px rgba(0,0,0,.8),0 0 22px -10px rgba(201,162,75,.5);transition:transform .4s var(--spring),border-color .3s,color .3s,box-shadow .4s} #cartBtn:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px);box-shadow:0 8px 20px -10px rgba(201,162,75,.6)} #cartBtn:active{transform:scale(.96);transition-duration:.08s} #cartCount{min-width:26px;height:26px;border-radius:50%;background:var(--grad-gold);color:#20130A;font-weight:700;display:grid;place-items:center;font-size:14.3px;transition:transform .4s var(--spring)} #cartCount.bump{animation:cbump .5s var(--spring)} @keyframes cbump{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}} header{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:120px 20px 70px;overflow:hidden} #stars{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.8} .hero-frame{position:absolute;inset:26px;border:1px solid var(--line);pointer-events:none;z-index:1} .hero-frame::before,.hero-frame::after{content:none} .hero-inner{position:relative;z-index:2;max-width:840px} .eyebrow{font-family:var(--disp);font-size:13.2px;letter-spacing:.38em;text-transform:uppercase;color:var(--gold);margin-bottom:22px} h1{font-family:var(--disp);font-weight:900;font-size:clamp(46.2px,9.9vw,101.2px);line-height:1.02;letter-spacing:.04em} h1 .thin{display:block;font-weight:500;font-size:.4em;letter-spacing:.32em;color:var(--muted);margin-bottom:10px} .hero-quote{font-style:italic;font-size:clamp(20.9px,2.86vw,26.4px);color:var(--muted);margin:26px auto 8px;max-width:560px} .hero-years{display:flex;gap:18px;justify-content:center;align-items:center;margin:18px 0 34px;font-family:var(--disp);letter-spacing:.3em;color:var(--gold);font-size:15.4px} .hero-years i{font-style:normal;color:var(--muted)} .cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--disp);font-size:14.3px;letter-spacing:.18em;text-transform:uppercase;padding:16px 30px;border-radius:3px;border:1px solid var(--gold);isolation:isolate;transition:transform .5s var(--spring),box-shadow .45s var(--ease-out),color .35s,border-color .35s,background .35s} .btn-gold{background:var(--grad-gold);color:#20130A;font-weight:700;border-color:transparent;box-shadow:0 2px 0 rgba(255,255,255,.35) inset,0 -3px 8px rgba(120,80,20,.35) inset,0 10px 26px -8px rgba(201,162,75,.55),0 3px 10px rgba(0,0,0,.4)} .btn-gold:hover{transform:translateY(-3px);box-shadow:0 2px 0 rgba(255,255,255,.45) inset,0 -3px 8px rgba(120,80,20,.3) inset,0 18px 40px -10px rgba(201,162,75,.75),0 6px 16px rgba(0,0,0,.45)} .btn-gold:active{transform:translateY(-1px) scale(.98);transition-duration:.08s} .btn-ghost{background:rgba(201,162,75,.04);color:var(--gold);backdrop-filter:blur(2px);box-shadow:0 4px 18px rgba(0,0,0,.25)} .btn-ghost:hover{transform:translateY(-3px);background:rgba(201,162,75,.1);border-color:#F6E9C6;color:#F6E9C6;box-shadow:0 14px 32px -12px rgba(201,162,75,.5),0 0 0 1px rgba(201,162,75,.25) inset} .btn-ghost:active{transform:translateY(-1px) scale(.98);transition-duration:.08s} /* ═══ плеер-свеча ═══ */ .player{position:fixed;left:auto;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:0;height:46px;padding:0 4px;border-radius:999px;background:linear-gradient(180deg,rgba(26,19,13,.78),rgba(13,9,6,.72));backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(201,162,75,.24);box-shadow:0 14px 34px -14px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.05) inset;transition:border-color .5s,box-shadow .5s,padding .45s var(--spring)} .player.on{border-color:rgba(201,162,75,.5);box-shadow:0 14px 34px -14px rgba(0,0,0,.75),0 0 28px -8px rgba(201,162,75,.45)} #ambienceBtn{position:relative;width:36px;height:36px;border-radius:50%;flex-shrink:0;overflow:visible;background:radial-gradient(circle at 50% 35%,rgba(201,162,75,.18),rgba(201,162,75,.04) 60%,transparent 70%);border:1px solid rgba(201,162,75,.35);display:grid;place-items:center;transition:transform .35s var(--spring),border-color .4s,box-shadow .5s} #ambienceBtn:hover{transform:scale(1.06);border-color:var(--gold)} #ambienceBtn:active{transform:scale(.92)} .player.on #ambienceBtn{border-color:var(--gold);box-shadow:0 0 22px -4px rgba(232,180,80,.55),inset 0 0 12px rgba(232,180,80,.12)} .player.on .player.on .pl-body{display:flex;flex-direction:column;justify-content:center;gap:3px;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .5s var(--ease-out),opacity .4s,margin .5s;margin-left:0} .pl-title{font-family:var(--disp);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory);display:flex;align-items:center;gap:7px} .pl-star{color:var(--gold);font-size:9px} #plEq{display:block;width:60px;height:16px;opacity:.9} .player:hover @media (pointer:coarse){.player .player .pl-body{max-width:230px;opacity:1;margin-left:12px}} .marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:14px 0;background:#0B0806} .marquee-track{display:flex;width:max-content;min-width:200%;will-change:transform;-webkit-animation:mar 57s linear infinite;animation:mar 57s linear infinite;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);font-family:var(--disp);font-size:14.3px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);white-space:nowrap} .marquee-track .mq{display:inline-flex;flex:none;align-items:center;gap:44px;padding-right:44px;white-space:nowrap} .marquee-track .mq>span,.marquee-track .mq>i{display:inline-block;white-space:nowrap} .marquee-track b{color:var(--gold);font-weight:500} @-webkit-keyframes mar{to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}} @keyframes mar{to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}} section{padding:110px 20px;position:relative} .wrap{max-width:1080px;margin:0 auto} .sec-eyebrow{font-family:var(--disp);font-size:13.2px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);margin-bottom:16px} #about .sec-eyebrow{font-weight:700} h2{font-family:var(--disp);font-weight:700;font-size:clamp(30.8px,5.5vw,55px);line-height:1.15;margin-bottom:26px} h2 em{font-style:normal;color:var(--gold)} .lead{font-size:23.1px;color:var(--muted);max-width:660px} .lead b{color:var(--ivory);font-weight:500} .moon-divider{display:flex;justify-content:center;gap:20px;color:var(--gold);opacity:.7;font-size:16.5px;padding:0 0 60px;letter-spacing:8px} .about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center} .stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)} .stat{padding:26px 14px;text-align:center;border-right:1px solid var(--line)} .stat:last-child{border-right:0} .stat b{font-family:var(--disp);font-size:clamp(24.2px,3.3vw,35.2px);color:var(--gold);display:block;font-weight:700} .stat span{letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-family:var(--disp);font-size:11px} #reading{background:none} .table-cloth{border:1px solid var(--line);background:linear-gradient(180deg,#1F1710,#120D09);padding:46px 26px;position:relative} .table-cloth::before{content:"";position:absolute;inset:8px;border:1px solid rgba(201,162,75,.14);pointer-events:none} /* ritual header */ .rite-head{text-align:center;margin-bottom:44px} .rite-fan{display:flex;justify-content:center;margin-bottom:20px} .rite-fan span{width:30px;height:48px;border-radius:4px;border:1px solid var(--gold-soft);background:linear-gradient(160deg,#412415,var(--crimson));box-shadow:0 4px 12px rgba(0,0,0,.45);position:relative} .rite-fan span::after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;color:var(--gold);font-size:12.1px} .rite-fan span:nth-child(1){transform:rotate(-16deg) translate(6px,4px)} .rite-fan span:nth-child(2){transform:translateY(-3px);z-index:1} .rite-fan span:nth-child(3){transform:rotate(16deg) translate(-6px,4px)} .rite-title{position:relative;display:inline-block;padding:0 26px} .rite-title::before,.rite-title::after{content:"";position:absolute;top:55%;width:72px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))} .rite-title::before{right:100%} .rite-title::after{left:100%;background:linear-gradient(270deg,transparent,var(--gold))} .rite-steps{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;margin-top:16px} .rstep{display:flex;align-items:center;gap:12px;font-size:19.8px;font-style:italic;color:var(--muted)} .rstep i{font-style:normal;font-family:var(--disp);font-size:13.2px;color:var(--gold);width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:rgba(201,162,75,.06);box-shadow:0 0 14px -6px rgba(201,162,75,.5)} .spread-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px} .spread-card{position:relative;overflow:hidden;background:var(--panel-2);border:1px solid var(--line);padding:26px 20px;text-align:center;transition:transform .5s var(--spring),border-color .3s,box-shadow .45s;color:var(--ivory)} .spread-card::before{content:"";position:absolute;inset:0;background:radial-gradient(300px circle at 50% -20%,rgba(201,162,75,.16),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none} .spread-card:hover{border-color:var(--gold);transform:translateY(-6px);box-shadow:0 20px 44px -14px rgba(0,0,0,.55),0 0 24px -6px rgba(201,162,75,.3)} .spread-card:hover::before{opacity:1} .spread-card:active{transform:translateY(-2px) scale(.99);transition-duration:.1s} .spread-card .glyph{font-size:26.4px;color:var(--gold);letter-spacing:6px;display:block;margin-bottom:12px} .spread-card b{font-family:var(--disp);font-size:16.5px;letter-spacing:.12em;display:block;margin-bottom:8px} .spread-card span{font-size:17.6px;color:var(--muted);font-style:italic} .stage-note{text-align:center;font-style:italic;color:var(--muted);margin:24px 0 6px;min-height:26px;font-size:20.9px} .deck-area{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:26px 0 10px;min-height:150px} .tcard{width:66px;height:106px;border-radius:7px;position:relative;perspective:700px;background:none;border:none;padding:0;transition:transform .35s ease,opacity .4s} .tcard .inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,.1,.2,1)} .tcard.flipped .inner{transform:rotateY(180deg)} .tface,.tback{position:absolute;inset:0;border-radius:7px;backface-visibility:hidden;overflow:hidden} .tback{background:#0B0806 url(/assets/img/f32c0008aa.webp) center/cover no-repeat;border:1px solid var(--gold-soft);display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.5)} .tface{background:linear-gradient(180deg,#271D14,var(--panel));border:1px solid var(--gold);transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:7px 4px;color:var(--gold)} .tface .num{font-family:var(--disp);font-size:11px;letter-spacing:.1em} .tface svg{width:34px;height:34px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .tface .nm{font-family:var(--disp);font-size:7.92px;letter-spacing:.05em;text-transform:uppercase;text-align:center;color:var(--ivory);line-height:1.25} .tcard.rev .tface{transform:rotateY(180deg) rotate(180deg)} .pool .tcard:hover{transform:translateY(-10px)} .pool .tcard.taken{opacity:0;pointer-events:none;transform:translateY(-26px) scale(.8)} .slots{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;padding:16px 0 6px} .slot{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:86px} .slot label{font-family:var(--disp);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:center} .slot .tcard{cursor:pointer} .slot .tcard:not(.flipped):hover{transform:translateY(-6px)} .reading-out{max-width:680px;margin:26px auto 0;display:flex;flex-direction:column;gap:18px} .rline{border:1px solid var(--line);border-left:3px solid var(--gold);background:var(--panel-2);padding:18px 20px;animation:rise .6s ease both} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .rline h4{font-family:var(--disp);font-size:14.3px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:6px} .rline h4 i{font-style:normal;color:var(--muted);letter-spacing:.12em} .rline h4 .revtag{color:var(--crimson);letter-spacing:.08em} .rline .kw{font-style:italic;color:var(--muted);display:block;margin-bottom:4px} .locked{position:relative;margin-top:8px;display:grid;place-items:center} .lk-txt{filter:blur(7px);user-select:none;pointer-events:none;opacity:.5;grid-area:1/1;width:100%} .lk-btn{grid-area:1/1;z-index:1;font-size:12.1px;padding:12px 22px;letter-spacing:.14em} .reading-actions{text-align:center;padding-top:30px} .closing{font-style:italic;text-align:center;color:var(--muted);max-width:560px;margin:26px auto 0;font-size:22px} .upsell{margin-top:18px;font-style:italic;color:var(--muted)} .upsell a{color:var(--gold)} .hidden{display:none!important} .pan-wrap{position:relative} .pantheon-grid{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;padding:12px 6px 26px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-padding:0 16px;scrollbar-width:thin;scrollbar-color:var(--gold) #16100B;-webkit-mask-image:linear-gradient(90deg,transparent,#000000 5%,#000000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000000 5%,#000000 95%,transparent);cursor:grab} .pantheon-grid.dragging{cursor:grabbing;scroll-snap-type:none} .pantheon-grid::-webkit-scrollbar{height:10px} .pantheon-grid::-webkit-scrollbar-track{background:#16100B;border:1px solid var(--gold-soft);border-radius:999px} .pantheon-grid::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#D9B45E,var(--gold),#D9B45E);border-radius:999px;border:1px solid #16100B} .pan-arr{position:absolute;top:calc(50% - 40px);z-index:2;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:rgba(26,19,13,.85);backdrop-filter:blur(8px);color:var(--gold);font-size:28.6px;display:grid;place-items:center;transition:transform .4s var(--spring),border-color .3s,box-shadow .4s} #panPrev{left:-10px} #panNext{right:-10px} .pan-arr:hover{border-color:var(--gold);transform:scale(1.12);box-shadow:0 10px 26px -10px rgba(201,162,75,.6)} .pan-arr:active{transform:scale(.94)} @media (max-width:900px){.pan-arr{display:none}} .g-card{position:relative;flex:0 0 200px;scroll-snap-align:center;aspect-ratio:76/122;border:1px solid var(--gold-soft);border-radius:10px;background:linear-gradient(180deg,#271D14,var(--panel));display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:16px 8px;color:var(--gold);cursor:pointer;transition:transform .5s var(--spring),box-shadow .45s,border-color .3s;will-change:transform} .g-card::after{content:"";position:absolute;inset:6px;border:1px solid rgba(201,162,75,.35);border-radius:7px;pointer-events:none} .g-card::before{content:"";position:absolute;inset:0;border-radius:10px;background:radial-gradient(200px circle at var(--mx,50%) var(--my,0%),rgba(246,233,198,.14),transparent 60%);opacity:0;transition:opacity .35s;pointer-events:none} .g-card:hover{border-color:var(--gold);transform:translateY(-8px) scale(1.03);box-shadow:0 22px 44px -14px rgba(0,0,0,.6),0 0 26px -8px rgba(201,162,75,.45)} .g-card:hover::before{opacity:1} .g-card.g-img{padding:0;overflow:hidden} .g-card.g-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:9px} .g-card.g-img::after{display:none} .tface-img{padding:0;overflow:hidden} .tface-img img{width:100%;height:100%;object-fit:cover;display:block} .cm-card.cm-img{padding:0;overflow:hidden} .cm-card.cm-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:11px} .g-card .num{font-family:var(--disp);font-size:13.2px;letter-spacing:.15em} .g-card svg{width:46%;height:auto;aspect-ratio:1;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .g-card b{font-family:var(--disp);font-size:12.1px;letter-spacing:.08em;color:var(--ivory);text-align:center;line-height:1.3;text-transform:uppercase} /* card viewer modal */ #cardModal{position:fixed;inset:0;z-index:85;display:none;align-items:center;justify-content:center;padding:20px} #cardModal.open{display:flex} #cardModal .cm-back{position:absolute;inset:0;background:rgba(5,4,2,.75);backdrop-filter:blur(6px)} .cm-box{position:relative;display:flex;gap:30px;align-items:center;max-width:720px;width:100%;background:linear-gradient(180deg,rgba(26,19,13,.97),rgba(13,9,6,.97));border:1px solid var(--gold);border-radius:14px;padding:32px;box-shadow:0 30px 80px -20px rgba(0,0,0,.9),0 0 40px -10px rgba(201,162,75,.35);animation:cmIn .5s var(--spring)} @keyframes cmIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}} .cm-card{flex-shrink:0;width:190px;aspect-ratio:76/122;border:1px solid var(--gold);border-radius:12px;background:linear-gradient(180deg,#271D14,var(--panel));display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px 10px;color:var(--gold);box-shadow:0 14px 40px rgba(0,0,0,.5)} .cm-card .num{font-family:var(--disp);font-size:15.4px;letter-spacing:.2em} .cm-card svg{width:84px;height:84px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .cm-card b{font-family:var(--disp);font-size:14.3px;color:var(--ivory);text-align:center;text-transform:uppercase;letter-spacing:.08em} .cm-info h3{font-family:var(--disp);font-size:22px;letter-spacing:.06em;margin-bottom:4px;color:var(--gold)} .cm-info .kw{font-style:italic;color:var(--muted);display:block;margin-bottom:12px} .cm-info p{font-size:18.7px;line-height:1.55;margin-bottom:12px} .cm-info .revl{font-family:var(--disp);font-size:12.1px;letter-spacing:.14em;text-transform:uppercase;color:#9A7867;display:block;margin-bottom:4px} #cmClose{position:absolute;top:10px;right:14px;background:none;border:none;color:var(--muted);font-size:28.6px;transition:color .25s,transform .3s var(--spring)} #cmClose:hover{color:var(--gold);transform:rotate(90deg)} @media (max-width:700px){.cm-box{flex-direction:column;gap:18px;max-height:86vh;overflow:auto}.cm-card{width:150px}} .p-card{position:relative;background:var(--panel);border:1px solid var(--line);padding:16px 10px 14px;text-align:center;transition:border-color .3s,box-shadow .4s;transform-style:preserve-3d;will-change:transform} .p-card:hover{border-color:var(--gold);box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 22px rgba(201,162,75,.18)} .p-card>*{transform:translateZ(20px)} .p-card::after{content:"";position:absolute;inset:0;background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),rgba(246,233,198,.16),transparent 60%);opacity:0;transition:opacity .35s;pointer-events:none} .p-card:hover::after{opacity:1} .p-card svg{width:40px;height:40px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin:6px auto 10px;display:block} .p-card .num{font-family:var(--disp);font-size:11px;color:var(--muted);letter-spacing:.2em} .p-card b{font-family:var(--disp);font-size:12.65px;letter-spacing:.08em;display:block;color:var(--ivory);margin-top:2px;font-weight:700} .p-card span{font-size:15.4px;font-style:italic;color:var(--muted);display:block;margin-top:5px;line-height:1.35} #shop{display:none;background:linear-gradient(180deg,rgba(13,9,6,0),rgba(26,19,13,.6) 140%)} body.shop-page #shop{display:block;padding-top:180px;min-height:100vh} body.shop-page header,body.shop-page .marquee,body.shop-page #about,body.shop-page #reading,body.shop-page #pantheon{display:none} body.shop-page .nav-links a[href="/shop"]{color:var(--gold);opacity:1} .back-home{display:inline-block;font-style:italic;font-size:17.6px;color:var(--muted);margin-bottom:18px;transition:color .25s} .back-home:hover{color:var(--gold)} .filters{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 34px} .chip{background:none;border:1px solid var(--line);color:var(--muted);font-family:var(--disp);font-size:12.1px;letter-spacing:.16em;text-transform:uppercase;padding:9px 18px;border-radius:999px;transition:.25s} .chip:hover{color:var(--gold);border-color:var(--gold)} .chip.active{background:var(--gold);border-color:var(--gold);color:var(--night)} .shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px} .prod{position:relative;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .3s,box-shadow .4s,transform .3s;transform-style:preserve-3d;will-change:transform} .prod:hover{border-color:var(--gold);box-shadow:0 20px 46px rgba(0,0,0,.5),0 0 28px rgba(201,162,75,.16)} .prod::after{content:"";position:absolute;inset:0;background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(246,233,198,.12),transparent 55%);opacity:0;transition:opacity .35s;pointer-events:none} .prod:hover::after{opacity:1} .prod-art{height:170px;display:grid;place-items:center;border-bottom:1px solid var(--line);position:relative;overflow:hidden} .prod-art::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(201,162,75,.14),transparent 60%)} .prod-art svg{width:78px;height:78px;stroke:var(--gold);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;position:relative} .prod-art .tag{position:absolute;top:12px;left:12px;font-family:var(--disp);font-size:9.9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700} .prod-body{padding:18px;display:flex;flex-direction:column;gap:12px;flex:1} .prod-body h3{font-family:var(--disp);font-size:16.5px;letter-spacing:.06em;font-weight:700} .prod-body .price{font-family:var(--disp);color:var(--gold);font-size:18.7px} .pdesc{font-size:17.6px;font-style:italic;color:var(--muted);line-height:1.5} .add-btn{margin-top:auto;background:rgba(201,162,75,.05);border:1px solid var(--gold);color:var(--gold);font-family:var(--disp);font-size:12.1px;letter-spacing:.18em;text-transform:uppercase;padding:13px;border-radius:3px;transition:transform .45s var(--spring),background .3s,color .3s,box-shadow .4s} .add-btn:hover{background:var(--grad-gold);color:#20130A;font-weight:700;border-color:transparent;transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(201,162,75,.7),0 2px 0 rgba(255,255,255,.35) inset} .add-btn:active{transform:translateY(0) scale(.97);transition-duration:.08s} .ship-note{margin-top:34px;font-size:18.7px;color:var(--muted);text-align:center;font-style:italic} .ship-note b{color:var(--ivory);font-style:normal} #cartDrawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);background:var(--panel);border-left:1px solid var(--line);z-index:80;transform:translateX(105%);visibility:hidden;transition:transform .45s cubic-bezier(.4,.1,.2,1),visibility 0s .45s;display:flex;flex-direction:column} #cartDrawer.open{visibility:visible;transition:transform .45s cubic-bezier(.4,.1,.2,1),visibility 0s} #cartDrawer.open{transform:none} .cart-head{display:flex;justify-content:space-between;align-items:center;padding:22px;border-bottom:1px solid var(--line)} .cart-head h3{font-family:var(--disp);letter-spacing:.18em;font-size:16.5px} #closeCart{background:none;border:none;color:var(--muted);font-size:24.2px} #cartItems{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:16px} .cart-empty{color:var(--muted);font-style:italic;text-align:center;margin-top:46px;line-height:1.7} .citem{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px} .citem b{font-family:var(--disp);font-size:13.75px;letter-spacing:.06em;display:block} .citem small{color:var(--muted);font-size:15.4px} .citem .qty{display:flex;gap:10px;align-items:center;margin-top:6px} .citem .qty button{width:26px;height:26px;border-radius:6px;background:rgba(201,162,75,.06);border:1px solid var(--line);color:var(--ivory);transition:transform .3s var(--spring),border-color .25s,color .25s,background .25s} .citem .qty button:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,162,75,.14)} .citem .qty button:active{transform:scale(.85)} .citem .rm{transition:transform .3s var(--spring),color .25s} .citem .rm:hover{color:var(--crimson);transform:rotate(90deg)} .citem .rm{background:none;border:none;color:var(--muted);font-size:17.6px;align-self:flex-start} .cart-foot{padding:22px;border-top:1px solid var(--line)} .promo-row{display:flex;gap:8px;margin-bottom:12px} #promoIn{flex:1;background:rgba(201,162,75,.05);border:1px solid var(--line);border-radius:3px;color:var(--ivory);font-family:var(--body);font-size:16.5px;padding:10px 14px;outline:none;transition:border-color .25s} #promoIn:focus{border-color:var(--gold)} #promoBtn{width:46px;background:rgba(201,162,75,.08);border:1px solid var(--gold-soft);border-radius:3px;color:var(--gold);font-size:17.6px;transition:background .25s,transform .3s var(--spring)} #promoBtn:hover{background:var(--grad-gold);color:#20130A} #promoBtn:active{transform:scale(.92)} #promoMsg{font-size:15.4px;font-style:italic;color:var(--muted);margin-bottom:10px;min-height:20px} #promoMsg.ok{color:var(--gold)} .cart-total s{color:var(--muted);font-weight:400;margin-right:8px} .cart-total{display:flex;justify-content:space-between;font-family:var(--disp);letter-spacing:.12em;margin-bottom:14px} .cart-total b{color:var(--gold)} .checkout{width:100%;background:var(--grad-gold);border:1px solid transparent;color:#20130A;font-weight:700;font-family:var(--disp);letter-spacing:.18em;font-size:13.2px;text-transform:uppercase;padding:16px;border-radius:3px;transition:transform .45s var(--spring),box-shadow .4s;box-shadow:0 2px 0 rgba(255,255,255,.35) inset,0 10px 24px -10px rgba(201,162,75,.6)} .checkout:hover{transform:translateY(-2px);box-shadow:0 2px 0 rgba(255,255,255,.45) inset,0 16px 34px -10px rgba(201,162,75,.8)} .checkout:active{transform:translateY(0) scale(.98);transition-duration:.08s} .stripe-note{text-align:center;font-size:15.4px;color:var(--muted);margin-top:10px;font-style:italic} #overlay{position:fixed;inset:0;background:rgba(5,4,2,.6);z-index:70;opacity:0;visibility:hidden;transition:.4s} #overlay.show{opacity:1;visibility:visible} #toast{position:fixed;bottom:26px;left:50%;pointer-events:none;transform:translate(-50%,80px);background:var(--panel-2);border:1px solid var(--gold);color:var(--ivory);padding:13px 26px;font-family:var(--disp);font-size:13.2px;letter-spacing:.12em;z-index:90;transition:.4s;opacity:0} #toast.show{transform:translate(-50%,0);opacity:1} footer{position:relative;z-index:2;border-top:1px solid var(--line);padding:60px 20px 40px;text-align:center;background:#16100B} footer .sigil{width:44px;height:44px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);margin:0 auto 16px;font-size:19.8px} footer .fq{font-style:italic;color:var(--muted);max-width:440px;margin:0 auto 18px} footer .ig{font-family:var(--disp);font-size:13.2px;letter-spacing:.2em;color:var(--gold)} footer .made{margin-top:26px;font-size:16.5px;color:var(--muted)} footer .made a{color:var(--gold)} /* ===== enchantments (v4) ===== */ section>.wrap{position:relative;z-index:1} .reveal{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} .reveal.rv-l{transform:translateX(-40px)} .reveal.rv-r{transform:translateX(40px)} .reveal.rv-sc{transform:scale(.94)} .reveal.rv-l.in,.reveal.rv-r.in,.reveal.rv-sc.in{transform:none} /* scroll progress bar */ #progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--gold-soft),var(--gold),#F6E9C6);z-index:65;box-shadow:0 0 10px rgba(201,162,75,.6);transition:width .1s linear} /* nebula / smoke / filigree background system */ .veil{position:fixed;inset:-22%;z-index:0;pointer-events:none;mix-blend-mode:screen;will-change:transform} #veil1{background:radial-gradient(40% 32% at 30% 30%,rgba(120,85,54,.22),transparent 70%);animation:neb1 85s ease-in-out infinite alternate} #veil2{background:radial-gradient(36% 30% at 74% 64%,rgba(89,49,29,.26),transparent 70%);animation:neb2 65s ease-in-out infinite alternate} #veil3{background:radial-gradient(28% 24% at 58% 16%,rgba(201,162,75,.10),transparent 70%);animation:neb3 105s ease-in-out infinite alternate} @keyframes neb1{from{transform:translate(-4%,-2%) scale(1) rotate(0deg)}to{transform:translate(5%,4%) scale(1.2) rotate(7deg)}} @keyframes neb2{from{transform:translate(3%,2%) scale(1.12)}to{transform:translate(-5%,-4%) scale(.94)}} @keyframes neb3{from{transform:translate(0,3%) scale(1)}to{transform:translate(4%,-4%) scale(1.28)}} /* button micro-interactions */ .btn,.add-btn,.checkout,.chip,#cartBtn,.spread-card{will-change:transform} .btn:active,.add-btn:active,.checkout:active,#cartBtn:active{transform:scale(.96)} .add-btn:hover{box-shadow:0 0 18px rgba(201,162,75,.3)} .prod-art svg{transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .4s} .prod:hover .prod-art svg{transform:scale(1.12) rotate(-2deg);filter:drop-shadow(0 0 12px rgba(201,162,75,.5))} .p-card svg{transition:transform .4s,filter .4s} .p-card:hover svg{transform:scale(1.15);filter:drop-shadow(0 0 8px rgba(201,162,75,.55))} .sigil{transition:transform .5s,box-shadow .5s} footer .sigil:hover{transform:rotate(90deg);box-shadow:0 0 22px rgba(201,162,75,.4)} h1{background:linear-gradient(100deg,var(--ivory) 20%,var(--gold) 42%,#F6E9C6 50%,var(--gold) 58%,var(--ivory) 80%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sheen 7s linear infinite} h1 .thin{background:none;-webkit-text-fill-color:var(--muted);color:var(--muted)} @keyframes sheen{to{background-position:-220% 0}} #dust{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.55} .spark{position:fixed;z-index:95;color:var(--gold);pointer-events:none;transform:translate(-50%,-50%);animation:sparkfade .9s ease-out forwards} /* ── brand cursor v3: мгновенный, точный ── */ @media (pointer:fine){ *{cursor:none!important} #mcur{position:fixed;left:0;top:0;width:32px;height:32px;pointer-events:none;z-index:220;color:#E9C878;transition:color .5s,opacity .3s;opacity:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.75)) drop-shadow(0 0 5px rgba(233,200,120,.3))} #mcur.on{opacity:1} #mcur .rotor{width:100%;height:100%;transition:transform .18s ease-out,scale .25s var(--spring)} #mcur img{width:100%;height:100%;display:block;transition:filter .5s} #mcur.hot{filter:drop-shadow(0 1px 2px rgba(0,0,0,.75)) drop-shadow(0 0 10px rgba(233,200,120,.9)) brightness(1.15)} #mcur.hot .rotor{scale:1.18} #mcur.press .rotor{scale:.82} #mcur.violet img{filter:hue-rotate(215deg) saturate(.9) brightness(1.15)}#mcur.crimson img{filter:hue-rotate(-40deg) saturate(1.2)} .cring{position:fixed;pointer-events:none;z-index:219;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:2px solid currentColor;opacity:.95;animation:cring .5s ease-out forwards} @keyframes cring{to{transform:scale(6);opacity:0;border-width:1px}} } @media (pointer:coarse){#mcur,.cring{display:none}} @keyframes sparkfade{0%{opacity:.9;transform:translate(-50%,-50%) scale(1) rotate(0deg)}100%{opacity:0;transform:translate(-50%,-90%) scale(.3) rotate(70deg)}} .pool .tcard.idle{animation:cardfloat 3.4s ease-in-out infinite} @keyframes cardfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} .pool .tcard.idle:hover{filter:drop-shadow(0 0 10px rgba(201,162,75,.55));animation:none} .pool .tcard.taken{animation:none} .tcard.flipped .tface{animation:facewake 1.1s ease} @keyframes facewake{0%{box-shadow:0 0 0 rgba(201,162,75,0)}40%{box-shadow:0 0 26px rgba(201,162,75,.65)}100%{box-shadow:0 0 0 rgba(201,162,75,0)}} .btn{overflow:hidden} .btn::after{content:"";position:absolute;top:0;left:-75%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .7s var(--ease-out);pointer-events:none;z-index:2} .btn:hover::after{left:135%} .add-btn,.checkout{position:relative;overflow:hidden} .add-btn::after,.checkout::after{content:"";position:absolute;top:0;left:-75%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .7s var(--ease-out);pointer-events:none} .add-btn:hover::after,.checkout:hover::after{left:135%} .moon-divider{transition:opacity .6s} .tcard:not(.flipped) .tback::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,rgba(246,233,198,.4) 50%,transparent 68%);transform:translateX(-130%) skewX(-15deg);animation:glint 5.5s ease-in-out infinite;animation-delay:var(--gd,0s);pointer-events:none} @keyframes glint{0%,58%{transform:translateX(-130%) skewX(-15deg)}74%,100%{transform:translateX(130%) skewX(-15deg)}} @media (max-width:900px){ .brand small{display:none} .about-grid{grid-template-columns:1fr;gap:40px} .spread-choices{grid-template-columns:1fr} section{padding:80px 16px} /* burger reveal */ #burger{display:flex;order:10;flex-direction:column;align-items:flex-start;justify-content:center;padding-left:12px;width:46px;height:44px;flex-shrink:0;background:linear-gradient(160deg,rgba(201,162,75,.16),rgba(201,162,75,.03));border:1px solid var(--gold-soft);border-radius:14px;box-shadow:0 6px 16px -8px rgba(201,162,75,.5),0 1px 0 rgba(255,255,255,.08) inset;transition:transform .4s var(--spring),border-color .3s,box-shadow .4s} .langs{margin-left:auto} #cartBtn{bottom:20px;right:16px} #burger:hover{border-color:var(--gold)} #burger:active{transform:scale(.88)} #burger span{display:block;width:20px;height:1.8px;background:var(--grad-gold);border-radius:2px;box-shadow:0 0 6px rgba(201,162,75,.5);transition:transform .45s var(--spring),opacity .3s,width .35s} #burger span+span{margin-top:4.6px} #burger span:nth-child(2){width:12px} nav.menu-open #burger span:nth-child(1){transform:translateY(6.4px) rotate(45deg)} nav.menu-open #burger span:nth-child(2){opacity:0;transform:translateX(8px)} nav.menu-open #burger span:nth-child(3){transform:translateY(-6.4px) rotate(-45deg)} .nav-mid{position:fixed;top:78px;left:50%;translate:-50% 0;flex-direction:column;gap:14px;width:min(360px,calc(100% - 28px));padding:22px;background:#160F0A;backdrop-filter:none;border:1px solid rgba(201,162,75,.28);border-radius:20px;box-shadow:0 24px 60px -18px rgba(0,0,0,.8);opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transform-origin:top center;transition:opacity .35s,transform .4s var(--spring),visibility .35s} nav.menu-open .nav-mid{opacity:1;visibility:visible;transform:none} .nav-links{flex-direction:column;gap:6px;width:100%;font-size:15.4px} .nav-links a{width:100%;text-align:center;padding:12px} .nav-links a::after{display:none} .langs{margin-top:4px} } @media (min-width:901px){#burger{display:none}} /* ── responsive polish ── */ html{-webkit-text-size-adjust:100%} img,svg,video,canvas{max-width:100%} @media (max-width:900px){ nav{top:10px;gap:8px;padding:10px 10px 10px 14px;width:calc(100% - 20px)} .brand img{height:52px} .lang-cur{padding:8px 11px 8px 13px;font-size:13px} #cartBtn{bottom:20px;right:16px} .hero-frame{inset:14px} .hero-inner{padding:0 6px} h1{font-size:clamp(40px,12.5vw,72px)} .cta-row{flex-direction:column;align-items:stretch;gap:12px;max-width:320px;margin:0 auto} .cta-row .btn,.cta-row a,.cta-row button{width:100%;justify-content:center;text-align:center} .stats{grid-template-columns:1fr;max-width:100%} .stat{border-right:0;border-bottom:1px solid var(--line);padding:20px 12px} .stat:last-child{border-bottom:0} .table-cloth{padding:30px 14px} .cm-box{width:calc(100% - 20px);max-width:none;margin:0 auto} #toast{bottom:auto;top:84px;width:calc(100% - 32px);max-width:420px;text-align:center;transform:translate(-50%,-80px);z-index:55} #toast.show{transform:translate(-50%,0)} section{padding:64px 14px} .marquee{padding:10px 0} footer{padding-bottom:110px} } @media (max-width:380px){ nav{padding:6px 6px 6px 8px;gap:4px;width:calc(100% - 12px)} .brand img{height:40px} .langs{margin-left:auto} .lang-cur{padding:7px 9px 7px 11px;font-size:12px;letter-spacing:.04em} #burger{width:38px;height:38px;padding-left:9px} .nav-mid{width:calc(100% - 20px)} h1{font-size:clamp(34px,12vw,52px)} .sec-eyebrow{letter-spacing:.14em;font-size:11px} h2{font-size:clamp(26px,8.5vw,36px)} } @media (min-width:1600px){ .wrap{max-width:1180px} nav{width:min(1280px,calc(100% - 28px))} } @media (max-height:520px) and (orientation:landscape){ #cartBtn{bottom:12px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important} html{scroll-behavior:auto} } /* ═══ плавные переходы между страницами ═══ */ #pgfade{position:fixed;inset:0;background:#050302;z-index:9999;pointer-events:none;opacity:1;transition:opacity 1.1s cubic-bezier(.4,0,.2,1)} html.pg-in #pgfade{opacity:0} html.pg-out #pgfade{opacity:1;transition:opacity .9s cubic-bezier(.4,0,.6,1);pointer-events:auto} /* ═══ плеер 2.0: canvas-пламя, вспышка, реактивная капсула ═══ */ .flameC{position:absolute;left:50%;top:50%;width:72px;height:72px;max-width:none;margin:-36px 0 0 -36px;pointer-events:none} #ambienceBtn .ring{position:absolute;inset:-2px;border-radius:50%;border:1.5px solid rgba(246,233,198,.9);opacity:0;pointer-events:none} #ambienceBtn.lit .ring{animation:plRing .8s cubic-bezier(.2,.6,.3,1) forwards} @keyframes plRing{0%{transform:scale(.6);opacity:.95}100%{transform:scale(2.6);opacity:0}} .player{--beat:0;box-shadow:0 14px 34px -14px rgba(0,0,0,.75),0 0 calc(10px + var(--beat)*34px) calc(-6px + var(--beat)*4px) rgba(232,180,80,calc(.15 + var(--beat)*.5))} .player.on{border-color:rgba(232,180,80,calc(.4 + var(--beat)*.5))} #plEq{filter:drop-shadow(0 0 4px rgba(232,180,80,.45))} /* ═══ галерея на телефоне: нативный инерционный скролл, карты по 2 в ряд, точки-индикатор ═══ */ @media (max-width:900px){ .pantheon-grid{gap:14px;padding:10px 16px 18px;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none} .pantheon-grid::-webkit-scrollbar{display:none} .g-card{flex:0 0 min(62vw,240px);scroll-snap-align:start} .pan-dots{display:flex;justify-content:center;gap:6px;margin-top:6px} .pan-dots i{width:5px;height:5px;border-radius:50%;background:rgba(201,162,75,.28);transition:width .3s,background .3s} .pan-dots i.on{width:16px;border-radius:3px;background:var(--gold)} .pan-hint{text-align:center;font-family:var(--body);font-style:italic;font-size:14px;color:var(--muted);margin-top:8px} } @media (min-width:901px){.pan-dots,.pan-hint{display:none}} /* ═══ значок музыки на кнопке плеера ═══ */ .player.on .player.on .player.on .player:not(.on) #ambienceBtn .wave{position:absolute;inset:-3px;border-radius:50%;border:1.2px solid rgba(232,180,80,.55);opacity:0;pointer-events:none;z-index:1} .player.on #ambienceBtn .w1{animation:mwave 2.4s ease-out infinite} .player.on #ambienceBtn .w2{animation:mwave 2.4s ease-out 1.2s infinite} @keyframes mwave{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.75);opacity:0}} .flameC{opacity:.9;border-radius:50%} /* прокрутка страницы под модалкой заблокирована */ body.no-scroll{position:fixed;left:0;right:0;width:100%;overflow:hidden;overscroll-behavior:none} #cardModal .cm-box{overscroll-behavior:contain} #cartDrawer{overscroll-behavior:contain} /* ═══ без системных артефактов: выделение, перетаскивание картинок, подсветка тапа, рамка фокуса по клику ═══ */ html{-webkit-tap-highlight-color:transparent} *{-webkit-tap-highlight-color:transparent} img,svg,canvas,video{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none} nav,nav *,footer .flogo,.brand,.brand *,#burger,#burger *,.langs,.langs *,.player,.player *,#ambienceBtn,#ambienceBtn *,#cartBtn,#cartBtn *, button,.btn,.g-card,.g-card *,.tcard,.tcard *,.prod-art,.prod-art *,.pan-arr,.pan-dots,.spread-card,.spread-card *, #splash,#splash *,#loader,#loader *,.marquee,.marquee *,.hero-frame,#mcur,#mcur *,.cring,#pgfade,.icard,.icard *,.sp-stack,.sp-stack *, .cm-card,.cm-card *,.citem img,.stat b,.sec-eyebrow,h1,h2{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} /* фокус: только с клавиатуры */ :focus:not(:focus-visible){outline:none;box-shadow:none} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;box-shadow:0 0 0 4px rgba(201,162,75,.18)} /* Firefox: убрать внутреннюю пунктирную рамку */ button::-moz-focus-inner{border:0} /* поле промокода — рамка при фокусе остаётся, но без outline */ #promoIn:focus{outline:none} /* ═══ свеча рядом с кнопкой музыки ═══ */ .player{padding-right:4px} .nav-mid /* ═══ legal: футер-ссылки, страница privacy, cookie-баннер ═══ */ footer .legal{margin-top:14px;font-family:var(--disp);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:center;gap:12px;align-items:center} footer .legal a{color:var(--muted);transition:color .3s} footer .legal a:hover{color:var(--gold)} #privacy{padding:180px 20px 90px;min-height:100vh;position:relative;z-index:1} .legal-wrap{max-width:820px} .legal-body{margin-top:26px;color:var(--ivory)} .legal-body h3{font-family:var(--disp);color:var(--gold);font-size:22px;letter-spacing:.06em;margin:38px 0 12px} .legal-body h3:first-child{margin-top:8px} .legal-body p{margin:0 0 14px;line-height:1.7;font-size:18.5px} .legal-body ul{margin:0 0 14px 20px;line-height:1.7;font-size:18.5px} .legal-body .upd{color:var(--muted);font-style:italic;font-size:15px;margin-top:30px} #ckBanner{position:fixed;left:50%;bottom:22px;translate:-50% 0;z-index:96;width:min(720px,calc(100% - 28px));display:flex;gap:16px;align-items:center;padding:16px 18px 16px 22px;border-radius:18px;background:linear-gradient(180deg,rgba(26,19,13,.96),rgba(13,9,6,.94));backdrop-filter:blur(18px);border:1px solid rgba(201,162,75,.35);box-shadow:0 24px 60px -18px rgba(0,0,0,.85);opacity:0;transform:translateY(16px);visibility:hidden;transition:opacity .5s,transform .5s var(--spring),visibility .5s} #ckBanner.show{opacity:1;transform:none;visibility:visible} #ckBanner p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ivory);flex:1} #ckBanner p a{color:var(--gold);text-decoration:underline;text-underline-offset:3px} #ckBanner .ck-ok{flex-shrink:0;padding:11px 20px;border-radius:999px;background:var(--grad-gold);color:#20130A;font-family:var(--disp);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:none;box-shadow:0 6px 18px -6px rgba(201,162,75,.7)} @media (max-width:640px){#ckBanner{flex-direction:column;align-items:stretch;text-align:center;bottom:14px}#ckBanner .ck-ok{width:100%}} @media (max-width:900px){#privacy{padding-top:130px}.legal-body p,.legal-body ul{font-size:17px}} #toast.lift{bottom:120px} @media (max-width:640px){#toast.lift{bottom:auto}} /* ═══ hero v2: кинематографичный заголовок в одну строку ═══ */ .hero-inner{max-width:1280px;width:100%} h1.h-cine{display:flex;justify-content:center;align-items:baseline;gap:.3em;flex-wrap:nowrap;font-weight:700;font-size:clamp(34px,5.6vw,92px);line-height:1;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;margin:0;width:100%} h1.h-cine span{display:inline-block} h1.h-cine .w1{font-weight:500;letter-spacing:.2em} h1.h-cine .w2{font-weight:900} .h-rule{display:flex;align-items:center;justify-content:center;gap:16px;margin:26px auto 0;width:min(560px,80%);color:var(--gold);font-size:14px} .h-rule i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,75,.75),transparent)} .h-rule span{filter:drop-shadow(0 0 8px rgba(201,162,75,.7))} .hero-quote{max-width:600px;margin-top:22px} body.arrived .hero-inner>.h-rule{animation:heroIn 1s .3s cubic-bezier(.2,.7,.2,1) both} @media (max-width:900px){ h1.h-cine{flex-direction:column;align-items:center;gap:.06em;white-space:normal;font-size:clamp(34px,11.5vw,64px);letter-spacing:.14em} h1.h-cine .w1{letter-spacing:.18em} } /* ═══ иконки плеера: нота (картинка) + свеча (две картинки, кроссфейд) ═══ */ #ambienceBtn .noteI{position:relative;z-index:2;width:20px;height:20px;max-width:none;object-fit:contain;opacity:.62;filter:grayscale(.35) brightness(.9);transform:translateY(2px);transition:opacity .45s,filter .45s,transform .35s var(--spring)} .player.on #ambienceBtn .noteI{opacity:1;filter:drop-shadow(0 0 6px rgba(255,214,120,.85)) brightness(1.08);transform:translateY(2px)} .candleW{position:relative;display:grid;place-items:center;width:36px;height:36px;margin-left:4px;border-radius:50%;flex-shrink:0;pointer-events:none;align-self:center;background:radial-gradient(circle at 50% 35%,rgba(201,162,75,.18),rgba(201,162,75,.04) 60%,transparent 70%);border:1px solid rgba(201,162,75,.35);transition:border-color .5s,box-shadow .5s} .player.on .candleW{border-color:var(--gold);box-shadow:0 0 22px -4px rgba(232,180,80,.5),inset 0 0 12px rgba(232,180,80,.1)} .candleW .cnd{position:absolute;left:50%;top:50%;height:30px;width:auto;max-width:none;translate:-50% -50%;transition:opacity .7s ease;object-fit:contain} .candleW .cnd.on{opacity:0;filter:drop-shadow(0 0 6px rgba(255,200,110,.75))} .candleW .cnd.off{opacity:.8} .player.on .candleW .cnd.on{opacity:1;animation:cndFl 1.8s ease-in-out infinite} .player.on .candleW .cnd.off{opacity:0} @keyframes cndFl{0%,100%{filter:drop-shadow(0 0 5px rgba(255,200,110,.7)) brightness(1)}50%{filter:drop-shadow(0 0 10px rgba(255,214,120,.95)) brightness(1.12)}} /* ═══ плеер на телефоне: правый нижний угол ═══ */ @media (max-width:900px){ .player{left:auto;right:14px;bottom:16px} #cartBtn{bottom:16px;right:14px} body[data-page="shop"] .player{bottom:74px} } /* ═══ навбар: полностью статичен — без сдвигов, масштабов и переходов ═══ */ nav{transition:none!important;transform:none!important;translate:none!important;will-change:auto;top:max(16px,env(safe-area-inset-top))} nav.scrolled{transition:none} nav .brand,nav .brand img,nav .brand:hover,nav .brand:hover img{transform:none!important;transition:none!important} @media (max-width:900px){nav{top:max(10px,env(safe-area-inset-top))}} @media (max-width:380px){nav{top:max(8px,env(safe-area-inset-top))}} /* плеер справа; в магазине корзина справа внизу — плеер над ней */ body[data-page="shop"] .player{bottom:84px} @media (max-width:900px){body[data-page="shop"] .player{bottom:74px}} /* ═══ дерево: тонкая текстура волокон поверх фона ═══ */ body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.10;background: repeating-linear-gradient(92deg,rgba(255,200,140,.05) 0 1px,transparent 1px 7px), repeating-linear-gradient(88deg,rgba(0,0,0,.18) 0 2px,transparent 2px 11px), repeating-linear-gradient(90deg,rgba(255,215,160,.03) 0 3px,transparent 3px 23px); mix-blend-mode:overlay} .table-cloth,.spread-card,.prod,.cm-box,#cartDrawer,.lang-menu,#ckBanner,footer{background-image:linear-gradient(180deg,rgba(255,205,150,.035),rgba(0,0,0,0) 40%),repeating-linear-gradient(90deg,rgba(255,200,140,.025) 0 1px,transparent 1px 9px)} /* дерево: чуть заметнее контуры панелей, тёплая кромка */ .spread-card,.prod,.table-cloth,.stat,.stats{border-color:rgba(196,150,90,.34)} .spread-card,.prod{box-shadow:0 12px 30px -16px rgba(0,0,0,.9),0 1px 0 rgba(255,220,170,.06) inset} /* ═══ HERO «инкрустация золотом» ═══ */ .h-crest{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold);margin-bottom:22px;opacity:.9} .h-crest .hc-line{width:min(120px,18vw);height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,75,.8))} .h-crest .hc-line:last-child{background:linear-gradient(90deg,rgba(201,162,75,.8),transparent)} .h-crest .hc-moon{font-size:22px;line-height:1;filter:drop-shadow(0 0 8px rgba(201,162,75,.6))} .h-crest .hc-star{font-size:11px;margin-left:-8px;margin-top:-16px;filter:drop-shadow(0 0 6px rgba(201,162,75,.8))} h1.h-lux{position:relative;display:flex;justify-content:center;align-items:baseline;gap:.28em;font-family:var(--disp);font-weight:700;font-size:clamp(25.5px,4.2vw,69px);line-height:1;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;margin:0; background:linear-gradient(105deg,transparent 38%,rgba(255,248,225,.9) 50%,transparent 62%),linear-gradient(180deg,#F7E7B8 0%,#E6C77A 22%,#B88A2E 46%,#F3DEA0 52%,#C9A24B 64%,#8A6521 82%,#E2C173 100%);background-size:240% 100%,100% 100%;background-position:120% 0,0 0; -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; filter:drop-shadow(0 2px 0 rgba(60,38,10,.9)) drop-shadow(0 6px 14px rgba(0,0,0,.65));animation:luxSheen 9s ease-in-out infinite!important} @keyframes luxSheen{0%,25%{background-position:120% 0,0 0}65%,100%{background-position:-120% 0,0 0}} h1.h-lux .w1{font-weight:500;letter-spacing:.2em} h1.h-lux .w2{font-weight:900} .h-rule2{display:flex;align-items:center;justify-content:center;gap:12px;margin:26px auto 0;width:min(620px,84%)} .h-rule2 i{flex:1;height:2px;background:linear-gradient(90deg,transparent,rgba(201,162,75,.7) 40%,rgba(201,162,75,.7) 60%,transparent);position:relative} .h-rule2 i::after{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,75,.35),transparent)} .h-rule2 b{width:9px;height:9px;background:var(--grad-gold);transform:rotate(45deg);box-shadow:0 0 12px rgba(201,162,75,.8)} .h-tag{margin:18px 0 0;font-family:var(--disp);font-size:11.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);opacity:.85} .hero-quote{margin-top:22px} @media (max-width:900px){ h1.h-lux{flex-direction:column;align-items:center;gap:.06em;white-space:normal;font-size:clamp(25.5px,8.6vw,48px);letter-spacing:.14em} h1.h-lux .w1{letter-spacing:.18em} .h-tag{letter-spacing:.28em;font-size:10.5px} .h-crest{margin-bottom:16px} } /* мобильное меню — плотный непрозрачный фон */ @media (max-width:900px){.nav-mid{background:#160F0A!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-image:none!important} } /* навбар: капсула, закреплён; iOS-безопасно (без transform/translate, без overflow на html) */ nav{position:fixed!important;top:max(16px,env(safe-area-inset-top))!important;left:0!important;right:0!important;margin:0 auto!important;width:min(1180px,calc(100% - 28px))!important;border-radius:999px!important;border-top:1px solid rgba(201,162,75,.22)!important;-webkit-transform:none!important;transform:none!important;will-change:auto;backface-visibility:hidden} @media (max-width:900px){nav{top:max(10px,env(safe-area-inset-top))!important;width:calc(100vw - 20px)!important;left:10px!important;right:auto!important;margin:0!important}} @media (max-width:380px){nav{top:max(8px,env(safe-area-inset-top))!important;width:calc(100vw - 12px)!important;left:6px!important}} @media (min-width:1600px){nav{width:min(1280px,calc(100% - 28px))!important}} body{overflow-x:clip} /* без горизонтального расползания страницы (clip не ломает fixed на iOS) */ html,body{overflow-x:clip} section,header,footer{overflow-x:clip} /* ═══ hero: арка — тёмная (свеча погашена) / золотая (свеча зажжена) ═══ */ header{position:relative} .hero-bg{position:absolute;inset:0;z-index:0;background-position:center 38%;background-size:cover;background-repeat:no-repeat;transition:opacity 1.6s ease;pointer-events:none} .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,8,6,.55) 0%,rgba(11,8,6,.15) 30%,rgba(11,8,6,.15) 60%,rgba(11,8,6,.92) 100%)} .hero-bg-dark{background-image:url(/assets/img/hero_dark.webp);opacity:1} .hero-bg-lit{background-image:url(/assets/img/hero_lit.webp);opacity:0} body.lit .hero-bg-dark{opacity:0} body.lit .hero-bg-lit{opacity:1} @media (max-width:900px){.hero-bg-dark{background-image:url(/assets/img/hero_dark_m.webp)}.hero-bg-lit{background-image:url(/assets/img/hero_lit_m.webp)}.hero-bg{background-position:center 30%}} .hero-embers{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.6s ease} body.lit .hero-embers{opacity:1} #embers{width:100%;height:100%;display:block} header #stars{z-index:1} header .hero-inner{z-index:2} /* первый экран: весь текст, кроме заголовка, −10% */ header .h-tag{font-size:10.35px} header .hero-quote{font-size:clamp(18.8px,2.57vw,23.8px)} header .hero-years{font-size:calc(15.4px * .9)} header .cta-row .btn{font-size:12.9px} @media (max-width:900px){header .h-tag{font-size:9.45px}} .h-tag{margin-top:26px} /* первый экран: контент чуть ниже */ header .hero-inner{transform:translateY(clamp(90px,19vh,190px))} @media (max-width:900px){header .hero-inner{transform:translateY(clamp(60px,13vh,120px))}} header{padding-bottom:40px} /* десктоп: горизонтальные арки, на весь экран */ @media (min-width:901px){ .hero-bg{background-size:cover;background-position:center 40%;-webkit-mask-image:none;mask-image:none} .hero-bg-dark{background-image:url(/assets/img/hero_dark_w.webp)} .hero-bg-lit{background-image:url(/assets/img/hero_lit_w3.webp)} .hero-bg::after{background:linear-gradient(180deg,rgba(11,8,6,.45) 0%,rgba(11,8,6,.08) 30%,rgba(11,8,6,.08) 62%,rgba(11,8,6,.92) 100%)} } /* ===== NAV: desktop 15% thinner/longer + light animation (no movement) ===== */ @media (min-width:901px){ nav{width:min(1360px,calc(100% - 28px))!important;padding:11px 16px 11px 22px} .brand img{height:68px} .nav-links a{padding:11px 22px} } nav{isolation:isolate} nav::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1; background:linear-gradient(100deg,transparent 0 38%,rgba(201,162,75,.15) 45%,rgba(240,214,150,.95) 50%,rgba(201,162,75,.15) 55%,transparent 62% 100%); background-size:260% 100%;background-position:120% 0; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude; animation:navSheen 7s cubic-bezier(.4,0,.2,1) 1.4s infinite} nav::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1; background:linear-gradient(100deg,transparent 0 40%,rgba(201,162,75,.07) 50%,transparent 60% 100%); background-size:260% 100%;background-position:120% 0;animation:navSheen 7s cubic-bezier(.4,0,.2,1) 1.4s infinite} @keyframes navSheen{0%{background-position:120% 0}55%,100%{background-position:-140% 0}} @keyframes navLinkIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media (min-width:901px){ body.arrived .nav-links a,body:not(.introing) .nav-links a{animation:navLinkIn .7s cubic-bezier(.2,.7,.2,1) both} .nav-links a:nth-child(1){animation-delay:.15s}.nav-links a:nth-child(2){animation-delay:.27s}.nav-links a:nth-child(3){animation-delay:.39s}.nav-links a:nth-child(4){animation-delay:.51s} .brand img{transition:filter .5s} nav:hover .brand img{filter:drop-shadow(0 0 20px rgba(201,162,75,.65))} } @media (prefers-reduced-motion:reduce){nav::before,nav::after,.nav-links a{animation:none!important}} .nav-links,.nav-links a{font-weight:700;font-synthesis:weight} /* частицы/эффекты всегда позади текста и кнопок */ #dust{z-index:0!important} .spark{z-index:0!important} header{position:relative;isolation:isolate} header .hero-inner{position:relative;z-index:3} section>.wrap,.marquee,.mq-wrap,footer{position:relative;z-index:1} /* навбар стоит наверху страницы и уезжает вместе с ней при скролле (не следует за экраном) */ html body nav{position:absolute!important} /* ===== BIRTH KEY ===== */ #birthkey{padding-top:90px;padding-bottom:100px;background:linear-gradient(180deg,transparent,rgba(201,162,75,.04) 50%,transparent)} .bk-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start} .bk-form{margin-top:26px} .bk-form label{display:block;font-family:var(--disp);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:10px} .bk-row{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch} #bkDate{flex:1 1 200px;min-width:0;background:rgba(0,0,0,.35);border:1px solid var(--line);color:var(--ivory);padding:14px 16px;font-family:var(--body);font-size:18px;border-radius:2px;color-scheme:dark;outline:none;transition:border-color .3s,box-shadow .3s} #bkDate:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.15)} .bk-out{min-height:120px;opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease} .bk-out.show{opacity:1;transform:none} .bk-cards{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:center} .bk-card{margin:0;text-align:center} .bk-flip{position:relative;width:200px;aspect-ratio:2/3.35;perspective:1200px;margin:0 auto} .bk-flip>div{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform 1.4s cubic-bezier(.2,.7,.2,1);box-shadow:0 22px 50px -18px rgba(0,0,0,.8),0 0 40px -10px rgba(201,162,75,.35)} .bk-back{background:url(/assets/img/f32c0008aa.webp) center/cover;transform:rotateY(0)} .bk-face{transform:rotateY(180deg);overflow:hidden;background:#000} .bk-face img{width:100%;height:100%;object-fit:cover;display:block} .bk-flip.on .bk-back{transform:rotateY(-180deg)} .bk-flip.on .bk-face{transform:rotateY(0)} .bk-card figcaption{margin-top:14px;display:grid;gap:4px} .bk-card figcaption span,.bk-fact span{font-family:var(--disp);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)} .bk-card figcaption b,.bk-fact b{font-family:var(--disp);font-size:17px;color:var(--gold);letter-spacing:.06em} .bk-card figcaption i,.bk-fact i{font-style:italic;color:var(--muted);font-size:15px} .bk-side{display:grid;gap:18px} .bk-fact{border:1px solid var(--line);padding:16px 18px;display:grid;gap:4px;background:rgba(0,0,0,.25)} .bk-fact b em{font-style:normal;font-size:22px;margin-right:6px;vertical-align:-2px} .bk-read{margin-top:24px;font-style:italic;font-size:19px;line-height:1.55;color:var(--ivory)} .bk-offer{margin-top:26px;border:1px solid rgba(201,162,75,.45);padding:22px 24px;background:linear-gradient(135deg,rgba(201,162,75,.10),rgba(0,0,0,.25));position:relative} .bk-offer::before{content:"";position:absolute;inset:6px;border:1px solid rgba(201,162,75,.18);pointer-events:none} .bk-found{font-family:var(--disp);font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:10px} .bk-offer p{color:var(--ivory)} .bk-offer .cta-row{margin-top:18px;justify-content:flex-start} @media (max-width:900px){ .bk-grid{grid-template-columns:1fr;gap:34px} .bk-cards{grid-template-columns:1fr;justify-items:center;text-align:center} .bk-side{width:100%} .bk-offer .cta-row{justify-content:center} #birthkey{padding-top:64px;padding-bottom:70px} } /* ===== SHOP · flagship ===== */ .prod.flag{grid-column:1/-1;flex-direction:row;border-color:rgba(201,162,75,.6);box-shadow:0 0 0 1px rgba(201,162,75,.15) inset,0 30px 70px -30px rgba(0,0,0,.9),0 0 60px -20px rgba(201,162,75,.35)} .prod.flag .prod-art{width:38%;height:auto;min-height:260px;border-bottom:0;border-right:1px solid var(--line);background:radial-gradient(circle at 50% 40%,rgba(201,162,75,.22),transparent 60%)} .prod.flag .prod-art svg{width:120px;height:120px} .prod.flag .prod-art .tag{color:var(--gold)} .flag-seal{position:absolute;right:14px;bottom:12px;font-family:var(--disp);font-size:11px;letter-spacing:.24em;color:var(--gold);border:1px solid rgba(201,162,75,.5);padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.35)} .prod.flag .prod-body{padding:28px 30px;justify-content:center;gap:14px} .prod.flag h3{font-size:30px} .prod .price s{color:var(--muted);font-weight:400;margin-left:8px;font-size:.8em} .prod .price .save{font-style:normal;font-family:var(--disp);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-left:10px;border:1px solid rgba(201,162,75,.45);padding:3px 8px;border-radius:999px;vertical-align:middle} .flag-num{font-family:var(--disp);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);opacity:.85} @media (max-width:900px){.prod.flag{flex-direction:column}.prod.flag .prod-art{width:100%;min-height:190px;border-right:0;border-bottom:1px solid var(--line)}.prod.flag h3{font-size:24px}} /* ═══ ТРИ НАПРАВЛЕНИЯ ═══ */ /* герой: три равные кнопки-направления */ .cta-trio{gap:14px;width:min(820px,100%);margin:0 auto;flex-wrap:nowrap} .btn-pillar{flex:1 1 0;min-width:0;padding:15px 12px;letter-spacing:.14em;white-space:nowrap;gap:11px} .btn-pillar svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--spring)} .btn-pillar:hover{background:var(--grad-gold);color:#20130A;border-color:transparent;box-shadow:0 2px 0 rgba(255,255,255,.35) inset,0 -3px 8px rgba(120,80,20,.3) inset,0 18px 40px -10px rgba(201,162,75,.7),0 6px 16px rgba(0,0,0,.45)} .btn-pillar:hover svg{transform:scale(1.15) rotate(-6deg)} body.arrived .cta-trio .btn{animation:heroIn .9s cubic-bezier(.2,.7,.2,1) both} body.arrived .cta-trio .btn:nth-child(1){animation-delay:.7s} body.arrived .cta-trio .btn:nth-child(2){animation-delay:.82s} body.arrived .cta-trio .btn:nth-child(3){animation-delay:.94s} @media (max-width:900px){.cta-trio{flex-direction:column;max-width:340px;gap:12px}.cta-trio .btn-pillar{flex:0 0 auto;padding:15px 18px}} /* маркер направления: I · ТАРО — между разделами */ .pillar{position:relative;z-index:1;width:min(1080px,100%);margin:-40px auto 0;padding:0 20px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;scroll-margin-top:36px} .pillar-row{display:flex;align-items:center;justify-content:center;gap:22px;width:100%} .pillar-row::before,.pillar-row::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,75,.6))} .pillar-row::after{background:linear-gradient(270deg,transparent,rgba(201,162,75,.6))} .pillar-num{font-family:var(--disp);font-size:13px;letter-spacing:.14em;color:var(--gold);width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;flex:none;background:rgba(201,162,75,.06);box-shadow:0 0 18px -6px rgba(201,162,75,.6)} .pillar-name{font-family:var(--disp);font-weight:700;font-size:clamp(17px,2.1vw,25px);letter-spacing:.22em;text-transform:uppercase;color:var(--ivory);white-space:nowrap} .pillar-sub{font-style:italic;color:var(--muted);font-size:18px;margin:0} .pillar+section{padding-top:70px} @media (max-width:900px){.pillar{margin-top:-16px;padding:0 14px;scroll-margin-top:90px}.pillar-row{gap:14px}.pillar+section{padding-top:44px}.pillar-name{letter-spacing:.16em}} /* небо сегодня */ #sky{background:linear-gradient(180deg,transparent,rgba(201,162,75,.04) 50%,transparent)} .sky-grid{display:grid;grid-template-columns:minmax(260px,.85fr) 1.15fr;gap:56px;align-items:start;margin-top:40px} .sky-moon{text-align:center} .moon-svg{width:min(230px,66vw);height:auto;display:block;margin:0 auto 20px;filter:drop-shadow(0 0 44px rgba(201,162,75,.22)) drop-shadow(0 18px 30px rgba(0,0,0,.6))} .moon-dark{fill:#14100B;stroke:rgba(201,162,75,.3);stroke-width:1} .moon-lit{fill:url(#moonGrad)} .moon-rim{fill:none;stroke:rgba(201,162,75,.5);stroke-width:1} .sky-phase{margin:0} .sky-phase b{display:block;font-family:var(--disp);font-size:21px;letter-spacing:.12em;color:var(--gold);text-transform:uppercase;font-weight:700} .sky-phase span{font-family:var(--disp);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)} .sky-moonsign{margin:18px 0 0;display:grid;gap:4px} .sky-moonsign span{font-family:var(--disp);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)} .sky-moonsign b{font-family:var(--disp);font-size:17.5px;letter-spacing:.06em;color:var(--ivory);font-weight:500} .sky-advice{margin:18px auto 0;max-width:340px;font-style:italic;color:var(--muted);font-size:18px;line-height:1.55} .sky-advice em{display:block;color:var(--ivory);margin-bottom:8px} .sky-date{font-family:var(--disp);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0 0 14px} .planet-table{width:100%;border-collapse:collapse;border:1px solid var(--line);background:rgba(0,0,0,.28)} .planet-table th{font-family:var(--disp);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:500} .planet-table td{padding:10px 16px;border-bottom:1px solid rgba(196,150,90,.16);font-size:17.5px;color:var(--ivory);white-space:nowrap} .planet-table tr:last-child td{border-bottom:0} .planet-table td:last-child,.planet-table th:last-child{text-align:right;font-family:var(--disp);font-size:13.5px;letter-spacing:.08em} .planet-table .pg,.planet-table .zg{font-style:normal;color:var(--gold);display:inline-block;width:26px;font-size:18px;line-height:1} .planet-table .rx{font-style:normal;color:#9A7867;margin-left:8px;font-size:13px;letter-spacing:.1em} @media (max-width:900px){.sky-grid{grid-template-columns:1fr;gap:36px}.planet-table td,.planet-table th{padding:9px 12px}.planet-table td{font-size:16px}} /* переход к платному внутри направления */ .pillar-cta{margin-top:46px;border:1px solid rgba(201,162,75,.45);padding:24px 26px;background:linear-gradient(135deg,rgba(201,162,75,.10),rgba(0,0,0,.25));display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative} .pillar-cta::before{content:"";position:absolute;inset:6px;border:1px solid rgba(201,162,75,.18);pointer-events:none} .pillar-cta p{margin:0;font-style:italic;color:var(--ivory);font-size:19px;max-width:640px;line-height:1.5} .pillar-cta .btn{flex:none} @media (max-width:900px){.pillar-cta{flex-direction:column;align-items:stretch;text-align:center}.pillar-cta .btn{justify-content:center}} /* мини-натальная карта */ #chart{padding-top:40px} .chart-out{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease} .chart-out.show{opacity:1;transform:none} .chart-grid{display:grid;grid-template-columns:minmax(280px,.95fr) 1.05fr;gap:50px;align-items:center;margin-top:40px} .chart-idle{align-items:center} .wheel{width:100%;max-width:440px;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 0 40px rgba(201,162,75,.16)) drop-shadow(0 20px 30px rgba(0,0,0,.6))} .w-bg{fill:rgba(13,9,6,.6)} .w-ring{fill:none;stroke:rgba(201,162,75,.6);stroke-width:1} .w-faint{stroke:rgba(201,162,75,.18)} .w-tick{stroke:rgba(201,162,75,.4);stroke-width:1} .w-sep{stroke:rgba(201,162,75,.75)} .w-sign{fill:#D9B45E;font-size:17px;text-anchor:middle;dominant-baseline:central;font-family:'EB Garamond','Segoe UI Symbol','Apple Symbols','Noto Sans Symbols',serif} .w-pdot{fill:var(--gold)} .w-pline{stroke:rgba(201,162,75,.38);stroke-width:1} .w-planet{fill:var(--ivory);font-size:19px;text-anchor:middle;dominant-baseline:central;font-family:'EB Garamond','Segoe UI Symbol','Apple Symbols','Noto Sans Symbols',serif} .w-rx{fill:#9A7867;font-size:9px;font-family:var(--disp)} .w-center{fill:var(--gold);font-size:22px;text-anchor:middle;dominant-baseline:central} .w-date{fill:var(--muted);font-size:10.5px;letter-spacing:.18em;text-anchor:middle;font-family:var(--disp)} .chart-idle .wheel{opacity:.5} .chart-empty{font-style:italic;color:var(--muted);font-size:19px;text-align:center;max-width:360px;margin:0 auto;line-height:1.55} .chart-note{margin:12px 0 0;font-style:italic;color:var(--muted);font-size:15.5px;min-height:1em} .chart-reads{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px} .cread{border:1px solid var(--line);border-top:3px solid var(--gold);background:var(--panel-2);padding:22px 22px 24px} .cread h4{font-family:var(--disp);font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 10px;font-weight:700} .cread p{margin:0;font-size:18px;line-height:1.55;color:var(--ivory)} .elem-bars{display:grid;gap:8px;margin:4px 0 16px} .elem-bars div{display:grid;grid-template-columns:74px 1fr 22px;align-items:center;gap:10px;font-family:var(--disp);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .elem-bars i{height:4px;background:rgba(201,162,75,.14);border-radius:2px;position:relative;overflow:hidden} .elem-bars i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);background:var(--grad-gold);border-radius:2px;transition:width 1.2s cubic-bezier(.2,.7,.2,1)} .elem-bars b{font-weight:400;color:var(--gold);text-align:right} @media (max-width:900px){.chart-grid{grid-template-columns:1fr;gap:34px}.chart-reads{grid-template-columns:1fr}#chart{padding-top:24px}} /* ключ рождения: дата + необязательное время */ .bk-fields{display:grid;grid-template-columns:1.15fr .85fr;gap:12px;align-items:end} .bk-fields label{white-space:normal} .bk-fields>div{min-width:0} #bkDate,#bkTime{width:100%;flex:none;background:rgba(0,0,0,.35);border:1px solid var(--line);color:var(--ivory);padding:14px 16px;font-family:var(--body);font-size:18px;border-radius:2px;color-scheme:dark;outline:none;transition:border-color .3s,box-shadow .3s} #bkDate:focus,#bkTime:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.15)} .bk-form .bk-row{margin-top:14px} .bk-ready{margin-top:18px;font-family:var(--disp);font-size:12px;letter-spacing:.2em;text-transform:uppercase} .bk-ready a{color:var(--gold);transition:color .3s} .bk-ready a:hover{color:#F6E9C6} @media (max-width:480px){.bk-fields{grid-template-columns:1fr}} /* магазин: карточка, на которую пришли по ссылке */ .prod{scroll-margin-top:120px} .prod:target{border-color:var(--gold);box-shadow:0 0 0 1px rgba(201,162,75,.35) inset,0 30px 70px -30px rgba(0,0,0,.9),0 0 60px -14px rgba(201,162,75,.6)} /* телефон: с тремя кнопками контент героя чуть выше, чтобы не упираться в плеер */ @media (max-width:900px){header .hero-inner{transform:translateY(clamp(24px,6vh,60px))}} @media (max-width:900px) and (max-height:720px){ header .hero-inner{transform:translateY(10px)} .cta-trio{gap:8px;max-width:300px} .cta-trio .btn-pillar{padding:11px 14px;font-size:12px} header .hero-quote{font-size:17px;margin-top:14px} header .hero-years{margin:10px 0 20px} } /* герой: три кнопки — жирным */ .btn-pillar{font-weight:700} /* ═══ СПРОСИТЕ КАРТЫ: темы, ответ, печать исхода, полное толкование ═══ */ .ask-lead{margin:0 0 22px} .theme-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .theme-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 16px 24px} .theme-card svg{width:46px;height:46px;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--spring),filter .4s} .theme-card:hover svg{transform:scale(1.12) rotate(-4deg);filter:drop-shadow(0 0 10px rgba(201,162,75,.6))} .theme-card b{margin:4px 0 0} .theme-card span{font-size:15.5px;line-height:1.35} @media (max-width:900px){.theme-choices{grid-template-columns:repeat(2,1fr);gap:10px}.theme-card{padding:20px 12px 18px}} @media (max-width:420px){.theme-choices{grid-template-columns:1fr}} /* печать на карте Исхода */ .slot .tcard.sealed .inner{transform:none} .slot .tcard .seal{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:7px;background:radial-gradient(circle at 50% 40%,rgba(201,162,75,.28),rgba(11,8,6,.55) 70%);color:var(--gold);font-size:22px;text-shadow:0 0 14px rgba(201,162,75,.9);border:1px solid rgba(201,162,75,.7);box-shadow:0 0 22px -4px rgba(201,162,75,.7) inset,0 0 18px -4px rgba(201,162,75,.6);pointer-events:none;transition:transform .45s var(--spring),box-shadow .4s} .slot .tcard.sealed .seal{display:flex} .slot .tcard .seal i{font-style:normal;font-family:var(--disp);font-size:8px;letter-spacing:.24em;text-transform:uppercase;color:var(--ivory)} .slot .tcard.sealed:hover{transform:translateY(-6px)} .slot .tcard.sealed:hover .seal{box-shadow:0 0 28px -4px rgba(201,162,75,.9) inset,0 0 26px -2px rgba(201,162,75,.8)} /* ответ */ .answer,.full-reading{max-width:680px;margin:26px auto 0} .ans-title{font-family:var(--disp);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);text-align:center;margin:0 0 16px} .ans-line{border:1px solid var(--line);border-left:3px solid var(--gold);background:var(--panel-2);padding:18px 22px;margin-bottom:14px;animation:rise .6s ease both} .ans-lab{display:block;font-family:var(--disp);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .ans-card{display:block;font-family:var(--disp);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px} .ans-line p{margin:0;font-size:20px;line-height:1.55;color:var(--ivory);font-style:italic} .closing-line{font-style:italic;text-align:center;color:var(--muted);font-size:20px;line-height:1.55;margin:22px auto 0;max-width:560px} /* полное толкование — панель оплаты */ .paywall{max-width:680px;margin:30px auto 0;border:1px solid rgba(201,162,75,.5);background:linear-gradient(135deg,rgba(201,162,75,.10),rgba(0,0,0,.28));padding:26px 26px 22px;position:relative;animation:rise .6s ease both} .paywall::before{content:"";position:absolute;inset:6px;border:1px solid rgba(201,162,75,.18);pointer-events:none} .pw-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px} .pw-eyebrow{font-family:var(--disp);font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)} .pw-price{font-family:var(--disp);font-size:26px;color:var(--ivory);letter-spacing:.06em} .pw-free{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#20130A;background:var(--grad-gold);padding:7px 14px;border-radius:999px;box-shadow:0 4px 14px -4px rgba(201,162,75,.7)} .pw-list{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:8px} .pw-list li{font-size:18px;color:var(--ivory);padding-left:22px;position:relative;line-height:1.45} .pw-list li::before{content:"✦";position:absolute;left:0;top:2px;color:var(--gold);font-size:12px} .pw-preview{border-top:1px solid rgba(201,162,75,.25);padding-top:14px;margin-bottom:18px} .pw-preview .lk-txt{margin:0;font-size:19px;font-style:italic;color:var(--ivory);filter:blur(6px);opacity:.55;user-select:none;pointer-events:none} .pw-form{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1} #pwEmail{flex:1 1 220px;min-width:0;background:rgba(0,0,0,.35);border:1px solid var(--line);color:var(--ivory);padding:14px 16px;font-family:var(--body);font-size:18px;border-radius:2px;outline:none;transition:border-color .3s,box-shadow .3s} #pwEmail:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.15)} .pw-form .btn{flex:none} .pw-form .btn[disabled]{opacity:.7;cursor:wait;transform:none} .pw-note{margin:14px 0 0;font-size:15px;font-style:italic;color:var(--muted);line-height:1.5} .pw-msg{margin:8px 0 0;font-size:15px;min-height:1em} .pw-msg.bad{color:#C97A5A} .letter-status{text-align:center;margin:22px 0 0;font-family:var(--disp);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.8} .letter-status .ls-ok{color:var(--gold)} .letter-status .ls-ok b{color:var(--ivory);text-transform:none;letter-spacing:.04em;font-family:var(--body);font-size:16px} .letter-status .ls-fail{color:#C97A5A;display:block} .letter-status .ls-mailto{color:var(--gold);text-decoration:underline;text-underline-offset:4px} @media (max-width:900px){.paywall{padding:20px 16px 18px}.pw-form .btn{width:100%;justify-content:center}} /* ═══ мини-формы «на почту · бесплатно» ═══ */ .mail-block{max-width:680px;margin:26px auto 0;border:1px solid rgba(201,162,75,.4);background:linear-gradient(135deg,rgba(201,162,75,.08),rgba(0,0,0,.24));padding:20px 22px;position:relative} .mail-block::before{content:"";position:absolute;inset:5px;border:1px solid rgba(201,162,75,.16);pointer-events:none} .mail-title{margin:0 0 12px;font-family:var(--disp);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)} .mail-block .pw-form input[type=email]{flex:1 1 220px;min-width:0;background:rgba(0,0,0,.35);border:1px solid var(--line);color:var(--ivory);padding:13px 15px;font-family:var(--body);font-size:17px;border-radius:2px;outline:none;transition:border-color .3s,box-shadow .3s} .mail-block .pw-form input[type=email]:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.15)} .mail-block .letter-status{margin-top:10px} #skyMailSlot .mail-block{margin-top:22px} #cartDrawer .mail-block{max-width:none;margin:12px 0 0;padding:14px 14px} #cartDrawer .mail-block .pw-form input[type=email]{flex:1 1 140px} #cartDrawer .mail-title{font-size:10.5px;letter-spacing:.18em} @media (max-width:900px){.mail-block{padding:16px 14px}.mail-block .pw-form .btn{width:100%;justify-content:center}} /* карта темы ждёт загрузку текстов расклада */ .theme-card.wait{opacity:.55;pointer-events:none} .theme-card.wait svg{animation:tcpulse 1.1s ease-in-out infinite} @keyframes tcpulse{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}} /* ============ ACCOUNTS · nav button ============ */ .acct{display:flex;align-items:center;margin-left:6px} .acct-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 10px;border-radius:999px;border:1px solid rgba(201,162,75,.35);background:linear-gradient(160deg,rgba(201,162,75,.14),rgba(201,162,75,.03));color:var(--gold);font-family:var(--disp);font-size:13.2px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,box-shadow .3s,transform .3s var(--spring)} .acct-btn:hover{border-color:var(--gold);box-shadow:0 6px 18px -10px rgba(201,162,75,.7)} .acct-btn:active{transform:scale(.95)} .acct-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round} .acct-me{padding-left:4px;text-transform:none;letter-spacing:.04em;font-family:var(--body,inherit);font-size:14px} .acct-me.current{border-color:var(--gold)} .acc-av{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 35% 30%,#F1DFA8,#9C7B36);color:#20130A;font-family:var(--disp);font-weight:700;font-size:14px;flex-shrink:0;box-shadow:0 0 0 1px rgba(201,162,75,.5)} .acc-av img{width:100%;height:100%;object-fit:cover;display:block} .acct-av{display:inline-flex;width:26px;height:26px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 35% 30%,#F1DFA8,#9C7B36);color:#20130A;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:12px} .acct-av img{width:100%;height:100%;object-fit:cover} .acct-nm{max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media (max-width:900px){.acct-btn{padding:0 8px;height:36px}.acct-nm{display:none}.acct-btn svg{margin:0}} /* ============ ACCOUNTS · auth modal ============ */ .auth-veil{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(6,4,3,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s} .auth-veil.open{opacity:1;visibility:visible} .auth-box{position:relative;width:min(440px,100%);max-height:92vh;overflow:auto;padding:34px 30px 26px;border:1px solid rgba(201,162,75,.4);border-radius:22px;background:linear-gradient(180deg,#1A130D,#0F0A07);box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03) inset;transform:translateY(14px) scale(.98);transition:transform .45s var(--spring)} .auth-veil.open .auth-box{transform:none} .auth-box::before{content:"";position:absolute;inset:8px;border:1px solid rgba(201,162,75,.18);border-radius:16px;pointer-events:none} .auth-x{position:absolute;top:12px;right:14px;width:36px;height:36px;border:none;background:transparent;color:var(--gold);font-size:26px;line-height:1;cursor:pointer;opacity:.7} .auth-x:hover{opacity:1} .auth-box h3{font-family:var(--disp);font-size:24px;letter-spacing:.08em;margin:4px 0 16px;color:#F1E6CF} .auth-tabs{display:flex;gap:4px;padding:4px;margin-bottom:18px;border:1px solid rgba(201,162,75,.25);border-radius:999px} .auth-tabs button{flex:1;padding:9px 6px;border:none;border-radius:999px;background:transparent;color:rgba(241,230,207,.7);font-family:var(--disp);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s} .auth-tabs button.on{background:var(--grad-gold);color:#20130A} .auth-f{display:flex;flex-direction:column;gap:6px;margin-bottom:12px} .auth-f span{font-family:var(--disp);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);opacity:.85} .auth-f input{width:100%;padding:12px 14px;border:1px solid rgba(201,162,75,.3);border-radius:12px;background:rgba(0,0,0,.35);color:#F1E6CF;font-size:16px;outline:none;transition:border-color .3s,box-shadow .3s} .auth-f input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.15)} .auth-submit{width:100%;margin-top:4px} .auth-msg{min-height:20px;margin:10px 0 0;font-size:14px;line-height:1.4;text-align:center} .auth-msg.bad{color:#E39C8C}.auth-msg.ok{color:#CFE3B5} .auth-or{display:flex;align-items:center;gap:12px;margin:14px 0;color:rgba(241,230,207,.5);font-size:13px} .auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,75,.35),transparent)} .auth-google{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px} .auth-google svg{width:18px;height:18px;fill:currentColor} .auth-links{display:flex;justify-content:center;gap:16px;margin-top:14px} .auth-link{border:none;background:transparent;color:var(--gold);font-size:13.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;opacity:.85} .auth-link:hover{opacity:1} .auth-why{margin:16px 0 0;text-align:center;font-size:13px;color:rgba(241,230,207,.55);font-style:italic} /* ============ ACCOUNTS · cabinet page ============ */ body.acc-page section.acc{padding-top:150px} .acc-wait{text-align:center;color:var(--gold);font-size:28px;padding:40px 0;animation:tcpulse 1.2s ease-in-out infinite} .acc-guest{max-width:560px;margin:0 auto;text-align:center} .acc-guest p{font-size:18px;line-height:1.6;margin-bottom:22px;font-style:italic} .acc-body{display:grid;grid-template-columns:250px 1fr;gap:28px;align-items:start;margin-top:26px;text-align:left} .acc-side{position:sticky;top:120px;padding:22px 18px;border:1px solid rgba(201,162,75,.3);border-radius:20px;background:linear-gradient(180deg,rgba(26,19,13,.8),rgba(15,10,7,.8))} .acc-me{display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:18px;margin-bottom:14px;border-bottom:1px solid rgba(201,162,75,.2);text-align:center} .acc-me .acc-av{width:72px;height:72px;font-size:28px} .acc-me b{font-family:var(--disp);font-size:17px;letter-spacing:.04em;color:#F1E6CF} .acc-me small{font-size:12.5px;color:rgba(241,230,207,.55);word-break:break-all} .acc-tabs{display:flex;flex-direction:column;gap:4px} .acc-tabs button,.acc-tabs a{display:block;width:100%;padding:11px 14px;border:none;border-radius:12px;background:transparent;color:rgba(241,230,207,.8);font-family:var(--disp);font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-align:left;cursor:pointer;transition:background .3s,color .3s} .acc-tabs button:hover,.acc-tabs a:hover{background:rgba(201,162,75,.08);color:var(--gold)} .acc-tabs button.on{background:rgba(201,162,75,.16);color:var(--gold)} .acc-tabs a{color:var(--gold);opacity:.8} .acc-out{width:100%;margin-top:16px;padding:10px;border:1px solid rgba(227,120,100,.45);border-radius:12px;background:transparent;color:#E36B54;font-weight:700;font-size:13px;letter-spacing:.08em;cursor:pointer} .acc-out:hover{border-color:#E36B54;color:#FF8A6E;box-shadow:0 0 18px -8px rgba(227,107,84,.6)} .acc-panel{min-width:0} .acc-tab{display:none}.acc-tab.on{display:block;animation:fadeUp .5s var(--ease-out) both} @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .acc-tab h3{font-family:var(--disp);font-size:26px;letter-spacing:.08em;margin:0 0 6px;color:#F1E6CF} .acc-tab h4{font-family:var(--disp);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 14px} .acc-lead{font-style:italic;color:rgba(241,230,207,.7);margin:0 0 22px;line-height:1.6} .acc-list{display:flex;flex-direction:column;gap:14px} .acc-empty{font-style:italic;color:rgba(241,230,207,.6);margin:0 0 16px} .acc-order{padding:18px 20px;border:1px solid rgba(201,162,75,.28);border-radius:18px;background:rgba(0,0,0,.25)} .acc-order-h{display:flex;justify-content:space-between;font-family:var(--disp);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);opacity:.85;margin-bottom:10px} .acc-item{padding:12px 0;border-top:1px solid rgba(201,162,75,.14)} .acc-item:first-of-type{border-top:none} .acc-item-main{display:flex;align-items:center;flex-wrap:wrap;gap:10px} .acc-item-main b{font-family:var(--disp);font-size:16px;letter-spacing:.03em;color:#F1E6CF} .acc-item-main em{font-style:normal;color:rgba(241,230,207,.6)} .acc-badge{margin-left:auto;padding:4px 10px;border-radius:999px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--disp)} .acc-badge.ready{background:rgba(160,200,120,.14);color:#CFE3B5;border:1px solid rgba(160,200,120,.35)} .acc-badge.pending{background:rgba(201,162,75,.12);color:var(--gold);border:1px solid rgba(201,162,75,.35);animation:tcpulse 2.4s ease-in-out infinite} .acc-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .btn.sm,.acc-files .btn{padding:8px 14px;font-size:12px} .acc-read{border:1px solid rgba(201,162,75,.28);border-radius:18px;background:rgba(0,0,0,.25);overflow:hidden} .acc-read-h{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:14px 18px} .acc-read-h b{font-family:var(--disp);font-size:15px;letter-spacing:.03em;color:#F1E6CF;flex:1 1 220px;min-width:0} .acc-read-h small{color:rgba(241,230,207,.55);font-size:12.5px} .acc-kind{padding:4px 10px;border-radius:999px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--disp);border:1px solid rgba(201,162,75,.35);color:var(--gold)} .acc-minis{display:inline-flex;gap:4px} .acc-minis img{width:26px;height:39px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(201,162,75,.4)} .acc-read-btns{display:flex;align-items:center;gap:12px;margin-left:auto} .acc-read-body{padding:6px 18px 20px;border-top:1px solid rgba(201,162,75,.14)} .acc-read-body .planet-table{margin:10px 0 14px} .acc-link{border:none;background:transparent;color:rgba(241,230,207,.6);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer} .acc-link:hover{color:#E39C8C} .acc-form{padding:20px 22px;margin-bottom:16px;border:1px solid rgba(201,162,75,.28);border-radius:18px;background:rgba(0,0,0,.25)} .acc-form.glow{border-color:var(--gold);box-shadow:0 0 30px -12px rgba(201,162,75,.7)} .acc-form .auth-f{max-width:420px} .acc-avatar-row{display:flex;align-items:center;gap:20px;margin-bottom:18px} .acc-av.big{width:96px;height:96px;font-size:36px} .acc-avatar-btns{display:flex;flex-direction:column;align-items:flex-start;gap:8px} .acc-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px} .acc-msg{font-size:13.5px}.acc-msg.ok{color:#CFE3B5}.acc-msg.bad{color:#E39C8C} .acc-danger{border-color:rgba(227,156,140,.3)} .acc-danger h4{color:#E39C8C} .acc-danger p{color:rgba(241,230,207,.65);font-size:14px;margin:0 0 14px} .btn.danger{border-color:rgba(227,156,140,.5);color:#E39C8C} .btn.btn-gold.danger{background:linear-gradient(135deg,#C97A66,#8E3F32);color:#fff} .ord-open{display:inline-flex;margin-top:12px} .pw-gate{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px} .pw-gate .btn{min-width:260px} .save-block .pw-form{justify-content:center} @media (max-width:900px){.acc-body{grid-template-columns:1fr}.acc-side{position:static}.acc-tabs{flex-direction:row;flex-wrap:wrap}.acc-tabs button,.acc-tabs a{width:auto;flex:1 1 40%;text-align:center;padding:10px 8px;font-size:12px}.acc-me{flex-direction:row;text-align:left;justify-content:flex-start}.acc-me .acc-av{width:56px;height:56px}.acc-badge{margin-left:0}} /* ============ ADMIN ============ */ .ad-stats{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0} .ad-stats span{padding:10px 16px;border:1px solid rgba(201,162,75,.28);border-radius:12px;font-size:13px;color:rgba(241,230,207,.7)} .ad-stats b{font-family:var(--disp);font-size:18px;color:var(--gold);margin-right:8px} .ad-filters{display:flex;gap:6px;margin-bottom:16px} .ad-filters button{padding:8px 14px;border:1px solid rgba(201,162,75,.3);border-radius:999px;background:transparent;color:rgba(241,230,207,.7);font-size:13px;cursor:pointer} .ad-filters button.on{background:var(--grad-gold);color:#20130A;border-color:transparent} .ad-item{padding:14px 18px;border:1px solid rgba(201,162,75,.28);border-radius:16px;background:rgba(0,0,0,.25)} .ad-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px;font-size:13px;color:rgba(241,230,207,.65)} .ad-meta a{color:var(--gold)} .ad-id{font-family:monospace;opacity:.6} .ad-file{font-size:13px;color:#CFE3B5} .ad-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:12px} @media (max-width:900px){.acct{margin-left:auto}.langs{margin-left:6px}} /* форма данных рождения в корзине и кабинете */ .ord-meta{display:flex;flex-direction:column;gap:4px;padding:14px 2px 4px} .ord-meta .auth-f input,#cartDrawer .ord-meta input{background:rgba(0,0,0,.35)} .acc-meta-form{display:flex;flex-direction:column;gap:4px;width:100%;padding-top:8px} .acc-gen{align-items:center}