/* Экраны 3–4 — визуал Марии 28.10.2026 + «ТЗ_Механика_экранов_3_и_4»: колода программ и конверты инструментов,
   печать «Выгода». Анимируются только transform и opacity. */
.sc{--navh:84px;--g:#d9b46c;--g2:#f4dea6;--g3:#8d6c30;--cream:#fbf5e6;position:relative;isolation:isolate;color:#eef0f7;scroll-margin-top:var(--navh);
  background:radial-gradient(1200px 700px at 50% 40%,#132451 0%,#0b1636 55%,#060c20 100%);overflow:clip}
.sc:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70px 70px at 4% 20%,#f3d79a40 0,#f3d79a00 70%),radial-gradient(110px 110px at 97% 12%,#e8c47e3a 0,#e8c47e00 70%),
  radial-gradient(50px 50px at 93% 48%,#f6e2b033 0,#f6e2b000 70%),radial-gradient(130px 130px at 2% 70%,#d9b46c2e 0,#d9b46c00 70%),
  radial-gradient(90px 90px at 98% 88%,#f3d79a33 0,#f3d79a00 70%),radial-gradient(40px 40px at 10% 94%,#e8c47e40 0,#e8c47e00 70%)}
.sc-pin{padding:56px max(4%,16px) 40px}
.sc-head{max-width:1180px;margin:0 auto 34px;text-align:center}
.sc-eyebrow{margin:0 0 12px;color:var(--g);font:600 12px Manrope,Inter,sans-serif;letter-spacing:.26em;text-transform:uppercase}
.sc h2{margin:0;color:#fbf7ee;font:700 clamp(34px,4vw,56px)/1.08 'Playfair Display',Editorial,serif;letter-spacing:-.3px}
.sc-bars{display:none}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* карточка */
.pc{position:relative;width:100%;max-width:440px;margin:0 auto 34px}
.pc-in{position:relative;height:100%;overflow:hidden;border-radius:16px;padding:12px 12px 22px;text-align:center;
  background:linear-gradient(180deg,#111f45 0%,#0a1531 100%);border:1.5px solid #c39a55;box-shadow:0 0 0 1px #00000040,0 0 26px #d9b46c2e,0 22px 40px #0007}
.pc-ban{border-radius:10px;overflow:hidden;background:#0a1531;aspect-ratio:16/9}
.pc-ban img{display:block;width:100%;height:100%;object-fit:contain}
.pc-body{padding:16px 10px 0}
.pc-tag{margin:0 0 6px;color:#e3bd72;font:600 16px/1.3 'Playfair Display',Editorial,serif}
.pc-tag.up{font:700 13px/1.3 Manrope,Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.pc h3{margin:0 0 10px;color:#fff;font:700 clamp(25px,2.1vw,30px)/1.15 'Playfair Display',Editorial,serif}
.pc-desc{margin:0 auto 14px;max-width:340px;color:#d6dbe8;font:400 15px/1.5 Manrope,Inter,sans-serif}
.pc-row{display:flex;justify-content:center;align-items:baseline;gap:10px 28px;flex-wrap:wrap;font:500 17px 'Playfair Display',serif;font-variant-numeric:lining-nums}
.pc-old{position:relative;color:#b8bfd0;font-variant-numeric:tabular-nums}
.pc-old:after{content:'';position:absolute;left:-3px;right:-3px;top:54%;height:2px;background:#d9a85a;transform-origin:0 50%;transform:scaleX(1)}
.sc-js .pc-old:after{transform:scaleX(0);transition:transform .5s ease}
.sc-js .pc-old.struck:after{transform:scaleX(1)}
.sc-js .pc-old.inst:after{transition:none}
.pc-save{color:#e9c47c;font-weight:600}
.pc-new{margin:2px 0 6px;font:800 clamp(38px,3.4vw,46px)/1.1 'Playfair Display',Editorial,serif;font-variant-numeric:tabular-nums lining-nums;
  background:linear-gradient(180deg,#fbe7b6,#e5bf73 55%,#c89a4c);-webkit-background-clip:text;background-clip:text;color:transparent}
.pc-gift{margin:0 0 16px;color:#f2f3f8;font:500 15px Manrope,Inter,sans-serif}
.pc-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 20px;border-radius:30px;text-decoration:none;
  background:linear-gradient(180deg,#f6dfa5 0%,#e3bd72 50%,#c79a4f 100%);color:#16182a;font:600 16px/1.2 'Playfair Display',Editorial,serif;
  box-shadow:0 0 0 1px #f7e2ae66 inset,0 8px 22px #d9a85033;transition:box-shadow .2s}
.pc-btn:hover{box-shadow:0 0 0 1px #fff4 inset,0 10px 28px #d9a85066}
.pc-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.pc-btn span{font:500 15px Manrope,sans-serif}
.pc-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(120% 90% at 85% 0%,#ffe7aa,#e9c27a88 45%,#e9c27a00 80%)}
.pc.flash .pc-flash{animation:pcFlash .72s ease-out 1}
@keyframes pcFlash{0%{opacity:0}18%{opacity:.65}100%{opacity:0}}
.pc.shake .pc-in{animation:pcShake .34s linear 1}
@keyframes pcShake{20%{transform:translate(-4px,2px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-3px,3px)}80%{transform:translate(3px,-1px)}}
.pc-badge{animation:pcPulse 2.4s ease-in-out infinite}
@keyframes pcPulse{50%{opacity:.62}}
/* печать «Выгода» */
/* у карточек с баннером сверху печать поднята над краем, чтобы не закрывать баннер; в колоде (баннер слева) — по ТЗ: −30/−14 */
.seal{position:absolute;z-index:4;top:calc(var(--seal,150px) * -.62);right:-10px;width:var(--seal,150px);height:var(--seal,150px);pointer-events:none;opacity:0;transform:rotate(-10deg);
  filter:drop-shadow(0 6px 10px #0009) drop-shadow(0 0 16px #e6bd6a55)}
.seal svg{display:block;width:100%;height:100%;overflow:visible}
.seal .rot{transform-box:view-box;transform-origin:100px 100px;animation:sealSpin 26s linear infinite}
@keyframes sealSpin{to{transform:rotate(360deg)}}
.pc.stamped .seal{opacity:1}
.pc.hit .seal{animation:sealHit .62s cubic-bezier(.2,.9,.25,1) both}
@keyframes sealHit{0%{opacity:0;transform:scale(2.6) rotate(-34deg)}55%{opacity:1;transform:scale(.88) rotate(-5deg)}78%{transform:scale(1.08) rotate(-13deg)}100%{opacity:1;transform:scale(1) rotate(-10deg)}}
.seal-fx{position:absolute;left:50%;top:50%;width:0;height:0}
.seal-fx .ring{position:absolute;left:calc(var(--seal,150px) * -.5);top:calc(var(--seal,150px) * -.5);width:var(--seal,150px);height:var(--seal,150px);border-radius:50%;border:3px solid #f4dea6;opacity:0;animation:sealRing .85s ease-out .3s 1 both}
@keyframes sealRing{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(2.5)}}
.seal-fx .sp{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#fff1c4;box-shadow:0 0 8px #f4d48a;opacity:0;animation:spark var(--d,.8s) cubic-bezier(.15,.7,.3,1) .12s 1 both}
.seal-fx .sp.ray{width:16px;height:2px;border-radius:2px;left:-8px;top:-1px;transform:rotate(var(--a))}
@keyframes spark{0%{opacity:1;translate:0 0}100%{opacity:0;translate:var(--x) var(--y)}}
/* колода и конверты — только в режиме закрепления (компьютер), иначе — колонка */
.sc-deck,.env-row{position:relative}
@media(min-width:821px){
  .sc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;max-width:1240px;margin:0 auto}
  .pc{max-width:none;margin:0}
  /* конверты без закрепления (невысокий экран ноутбука): полный размер, два в ряд, открываются при заходе в экран */
  .sc-tools:not(.pin) .sc-cards{display:flex;justify-content:center;gap:40px;max-width:1240px;padding-top:64px}
  .sc-tools:not(.pin) .tenv{width:min(540px,calc(50% - 20px));height:var(--envh,820px)}
  .sc-tools:not(.pin) .tenv .pc{--seal:150px}
  .sc-prog:not(.pin) .sc-cards{padding-top:80px}
}
.sc.pin .sc-track{height:400vh}
.sc-tools.pin .sc-track{height:300vh}
.sc.pin .sc-pin{position:sticky;top:var(--navh);height:calc(100svh - var(--navh));display:flex;flex-direction:column;justify-content:center;padding:18px max(4%,16px) 18px;box-sizing:border-box}
.sc-prog.pin .sc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;max-width:1120px;width:100%;text-align:left;margin-bottom:46px}
.sc.pin h2{font-size:clamp(32px,3.2vw,46px)}
.sc-prog.pin .sc-bars{display:flex;gap:12px;margin:0 0 6px;padding:0;list-style:none}
.sc-bars li{width:120px;color:#cfd5e4;font:600 11px Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.sc-bars i{display:block;height:3px;margin-bottom:9px;border-radius:2px;background:#ffffff26;overflow:hidden}
.sc-bars i:before{content:'';display:block;height:100%;background:linear-gradient(90deg,#c89a4c,#f4dea6);transform-origin:0 50%;transform:scaleX(var(--f,0))}
.sc-prog.pin .sc-cards{display:block;position:relative;max-width:1120px;width:100%;height:460px;margin:0 auto;perspective:1500px}
.sc-prog.pin .pc{position:absolute;inset:0;max-width:none;margin:0;--seal:176px;transform-origin:50% 100%}
.sc-prog.pin .seal{top:-30px;right:-14px}
.sc-prog.pin .pc-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:8px;padding:22px}
.sc-prog.pin .pc-ban{height:auto;align-self:center}
.sc-prog.pin .pc-body{padding:0 52px 0 10px;align-self:end}/* под печатью в правом верхнем углу — свободно */
.sc-prog.pin .pc-btn{max-width:420px;margin:0 auto}
@media(min-width:821px) and (max-height:780px){.sc-prog.pin .pc-desc{display:none}.sc-prog.pin .sc-cards{height:400px}.sc-prog.pin .sc-head{margin-bottom:34px}}
/* конверты инструментов */
.sc-tools.pin .sc-head{margin-bottom:50px}/* место под печать над карточкой */
.sc-tools.pin .sc-cards{display:flex;justify-content:center;gap:40px;max-width:none;width:100%;height:var(--sceneh,600px)}
.tenv{position:relative;flex:0 0 auto}
.sc-tools.pin .tenv{width:540px;height:var(--envh,820px);transform:scale(var(--s,1));transform-origin:50% 0}
.tenv-slot{position:absolute;left:0;right:0;top:-400px;bottom:0;clip-path:inset(0 -60px 0 -60px);z-index:3}
.tenv .pc{position:absolute;left:40px;right:40px;top:400px;width:auto;max-width:none;margin:0;--seal:150px}
.tenv-back,.tenv-front,.tenv-flap{position:absolute;left:0;right:0;bottom:0;height:230px;pointer-events:none}
.tenv-back{z-index:1;border-radius:8px;background:linear-gradient(180deg,#e9dcbc,#f4ead2);box-shadow:0 26px 40px #0008}
.tenv-flap{z-index:5;bottom:auto;top:calc(100% - 230px);height:150px;transform-origin:50% 0;
  clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(180deg,#fbf5e6,#efe3c4)}
.tenv-flap:after{content:'';position:absolute;inset:0;background:#3a2d12;opacity:var(--dark,0)}
.tenv.back .tenv-flap{z-index:2}
.tenv-front{z-index:4;clip-path:polygon(0 0,50% 64px,100% 0,100% 100%,0 100%);border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,#fdf8ec,#f2e7cb 70%,#e8dab8)}
.tenv-front:before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom right,#0000 calc(50% - 1px),#c9a35c calc(50% - 1px),#c9a35c calc(50% + 1px),#0000 calc(50% + 1px)) left top/50% 64px no-repeat,linear-gradient(to bottom left,#0000 calc(50% - 1px),#c9a35c calc(50% - 1px),#c9a35c calc(50% + 1px),#0000 calc(50% + 1px)) right top/50% 64px no-repeat}
.tenv-front:after{content:'';position:absolute;inset:0;border:2px solid #c9a35c;border-top:0;border-radius:0 0 8px 8px}
/* телефон: колонка, конверт под карточкой */
@media(max-width:820px){
  .sc{--navh:76px}
  .sc-pin{padding:56px 6% 30px}
  .sc-head{margin-bottom:26px}
  .sc h2{font-size:clamp(32px,9vw,42px)}
  .pc{--seal:128px}
  .tenv{width:100%;max-width:440px;margin:0 auto 30px;height:var(--envh,700px)}
  .tenv .pc{left:5%;right:5%;--seal:112px}
  .tenv-back,.tenv-front{height:150px}
  .tenv-flap{top:calc(100% - 150px);height:100px}
  .tenv-front{clip-path:polygon(0 0,50% 44px,100% 0,100% 100%,0 100%)}
  .tenv-front:before{background-size:50% 44px}
  .seal{right:-6px}
  .pc{margin-bottom:96px}
  .sc-prog .pc:first-child{margin-top:64px}
}
@media(prefers-reduced-motion:reduce){.seal .rot,.pc-badge{animation:none}.pc.hit .seal{animation:none}.seal-fx{display:none}}