/* Шрифты из ТЗ экранов 3–4: Playfair Display — заголовки и цены, Manrope — текст (локальные файлы) */
@font-face{font-family:'Playfair Display';src:url(assets/PlayfairDisplay.woff2);font-weight:400 900;font-display:swap}
@font-face{font-family:'Playfair Display';src:url(assets/PlayfairDisplay-Italic.woff2);font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:Manrope;src:url(assets/Manrope.woff2);font-weight:200 800;font-display:swap}
/* Экран 2 — дизайн Марии 28.10.2026 (три кадра: конверт → билет выходит → билет над конвертом).
   Конверт и билет — фрагменты её макета assets/gift-design-*.jpg; билет поднимается от прокрутки. */
@supports (overflow:clip){html,body{overflow-x:clip}}
.envl{--navh:84px;--g:#d9b46c;--g2:#f4dea6;overflow:clip;color:#eef0f7;padding:96px max(5%,16px) 96px;
  background:radial-gradient(1100px 700px at 75% 45%,#16264f 0%,#0c1838 50%,#070e24 100%)}
.envl:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60px 60px at 47% 14%,#f3d79a55 0,#f3d79a00 70%),radial-gradient(90px 90px at 96% 22%,#e8c47e44 0,#e8c47e00 70%),
  radial-gradient(40px 40px at 54% 70%,#f6e2b04d 0,#f6e2b000 70%),radial-gradient(120px 120px at 99% 78%,#d9b46c33 0,#d9b46c00 70%),
  radial-gradient(70px 70px at 6% 92%,#f3d79a26 0,#f3d79a00 70%),radial-gradient(50px 50px at 40% 8%,#e8c47e33 0,#e8c47e00 70%),
  radial-gradient(30px 30px at 33% 40%,#f6e2b02a 0,#f6e2b000 70%),linear-gradient(180deg,#0000 78%,#05091a99)}
.envl-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;max-width:1240px;margin:0 auto;align-items:start}
.envl-copy{position:sticky;top:var(--navh);min-height:calc(100svh - var(--navh));display:flex;flex-direction:column;justify-content:center;padding:24px 0}
.envl-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 22px;color:var(--g);font:600 12px Manrope,Inter,sans-serif;letter-spacing:.26em;text-transform:uppercase}
.envl-eyebrow:before,.envl-eyebrow:after{content:'';width:34px;height:1px;background:#d9b46c99}
.envl h2{margin:0;color:#fbf7ee;font:700 clamp(44px,5vw,74px)/1.04 'Playfair Display',Editorial,serif;letter-spacing:-.5px;text-shadow:0 2px 18px #0006}
.envl h2 em{font-style:italic;font-weight:800;color:#ebc77f}
.envl .intro{margin:24px 0 0;color:#e6e9f2;font:400 clamp(16px,1.35vw,19px)/1.55 Manrope,Inter,sans-serif;max-width:440px}
.envl-list{list-style:none;counter-reset:n;padding:0;margin:0 0 30px;display:none}
.envl-list li{counter-increment:n;display:flex;align-items:center;gap:16px;padding:7px 0;font:400 16px/1.4 Manrope,Inter,sans-serif;color:#eef0f7}
.envl-list li:before{content:counter(n);flex:0 0 32px;height:32px;border-radius:50%;border:1.5px solid var(--g);display:grid;place-items:center;color:var(--g2);font:500 15px 'Playfair Display',serif}
.envl-cta{display:inline-flex;align-items:center;justify-content:center;gap:16px;width:min(100%,400px);min-height:62px;margin-top:34px;padding:0 30px;border-radius:40px;text-decoration:none;
  background:linear-gradient(180deg,#f6dfa5 0%,#e3bd72 48%,#c79a4f 100%);color:#16182a;font:600 21px 'Playfair Display',Editorial,serif;
  box-shadow:0 0 0 1px #f7e2ae66 inset,0 10px 30px #d9a85033,0 0 40px #e9c98322;transition:opacity .35s,transform .35s,box-shadow .2s}
.envl-cta:hover{box-shadow:0 0 0 1px #fff3 inset,0 12px 36px #d9a8505c,0 0 50px #e9c98344}
.envl-cta:focus-visible{outline:3px solid #fff;outline-offset:4px}
.envl-cta span{font:400 22px Manrope,sans-serif}
.envl-date{margin:24px 0 0;color:var(--g);font:600 12px Manrope,Inter,sans-serif;letter-spacing:.26em;text-transform:uppercase}
.envl-date .m{display:none}
.envl-again{margin-top:14px;min-height:48px;padding:0 18px;border:1px solid #d9b46c88;border-radius:26px;background:none;color:var(--g2);font:14px Manrope,Inter,sans-serif}
.envl-stage{position:relative;height:240vh}
.envl-scene{position:sticky;top:var(--navh);height:calc(100svh - var(--navh));display:grid;place-items:center}
.envl-box{position:relative;width:calc(523px * var(--s,1));height:calc(389px * var(--s,1))}
.envl-in{position:absolute;left:0;top:0;width:523px;height:389px;transform:scale(var(--s,1));transform-origin:0 0}
/* слои: фон с конвертом, билет, передняя стенка конверта поверх билета (тот же кадр, вырезан по краю кармана) */
.g-bg,.g-front{position:absolute;left:0;top:0;width:523px;height:389px;background:url(assets/gift-design-desktop.jpg) -330px 0/853px 1280px no-repeat;
  -webkit-mask-image:linear-gradient(90deg,#0000 0,#000 80px,#000 calc(100% - 50px),#0000),linear-gradient(180deg,#0000 0,#000 60px,#000 calc(100% - 40px),#0000);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#0000 0,#000 80px,#000 calc(100% - 50px),#0000),linear-gradient(180deg,#0000 0,#000 60px,#000 calc(100% - 40px),#0000);mask-composite:intersect}
.g-bg{z-index:1}
/* размытое продолжение того же кадра вокруг — чтобы край фрагмента не читался */
.envl-in:before{content:'';position:absolute;left:-90px;top:-70px;width:703px;height:529px;z-index:0;pointer-events:none;opacity:.75;filter:blur(16px);
  background:url(assets/gift-design-desktop.jpg) -444px 0/1147px auto no-repeat;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,#0000);mask-image:radial-gradient(closest-side,#000 55%,#0000)}
.g-front{-webkit-mask-image:none;mask-image:none}.g-front{clip-path:polygon(17px 131px,32px 133px,70px 150px,120px 167px,170px 184px,188px 193px,317px 193px,335px 182px,370px 174px,420px 160px,460px 145px,488px 134px,491px 352px,17px 352px);z-index:3}
.g-tk{position:absolute;left:26.5px;top:0;width:454px;height:178px;z-index:2;transform-origin:50% 100%;
  background:url(assets/gift-design-desktop.jpg) -351px -840px/853px 1280px no-repeat;
  clip-path:polygon(8px 0,284px 0,286px 4px,291px 6px,296px 4px,298px 0,446px 0,454px 8px,454px 170px,446px 178px,298px 178px,296px 174px,291px 172px,286px 174px,284px 178px,8px 178px,0 170px,0 8px);
  filter:drop-shadow(0 14px 20px #0008)}
.g-sheen{position:absolute;top:-20%;bottom:-20%;left:0;width:30%;background:linear-gradient(100deg,#fff0,#fff6 50%,#fff0);transform:translateX(-140%) skewX(-18deg);opacity:0}
.envl.live .g-tk,.envl.live .g-sheen{will-change:transform,opacity}
.envl-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--g2);font:600 11px Manrope,Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;transition:opacity .4s;animation:envlHint 1.6s ease-in-out infinite}
.envl-hint svg{width:18px;height:18px}
.envl.moved .envl-hint{opacity:0;animation:none}
@keyframes envlHint{50%{opacity:.45;transform:translate(-50%,5px)}}
.envl.cta-on .envl-cta{animation:envlPulse 1.4s ease-out 1}
@keyframes envlPulse{0%{box-shadow:0 0 0 0 #e9c98399}100%{box-shadow:0 0 0 18px #e9c98300}}
/* запасной вариант (слабые устройства) и статичный кадр — без длинной сцены */
.envl.lite .envl-stage,.envl.static .envl-stage{height:auto}
.envl.lite .envl-scene,.envl.static .envl-scene{position:relative;top:0;height:auto;padding:40px 0 20px}
.envl.lite .envl-copy,.envl.static .envl-copy{position:relative;top:0;min-height:0}
.envl.lite .envl-hint,.envl.static .envl-hint,.envl.static .envl-again,.envl.scroll .envl-again{display:none}
@media(max-width:900px){
  .envl{--navh:76px;padding:64px 6% 56px;text-align:center}
  .envl-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .envl-copy{display:contents}
  .envl-top{order:1}.envl-stage{order:2;height:200svh;margin:0 -6%}.envl-bottom{order:3}
  .envl-eyebrow{justify-content:center;font-size:11px;letter-spacing:.22em}
  .envl h2{font-size:clamp(40px,11.5vw,56px)}
  .envl .intro{margin:18px auto 0;font-size:16px;max-width:330px}
  .envl-scene{place-items:center}
  .envl-list{display:block;width:max-content;max-width:100%;margin:6px auto 26px;text-align:left}
  .envl-list li{font-size:15px}
  .envl-cta{width:100%;margin-top:0;font-size:20px}
  .envl-date{margin-top:22px;font-size:11px;letter-spacing:.22em}
  .envl-date .d{display:none}.envl-date .m{display:inline}
  .g-tk{left:45.5px;width:416px;height:158px;background:url(assets/gift-design-mobile.jpg) -1028.5px -364px/1479px auto no-repeat;
    clip-path:polygon(9px 0,244px 0,246px 4px,251px 6px,256px 4px,258px 0,407px 0,416px 9px,416px 149px,407px 158px,130px 158px,0 112px,0 9px)}
}
@media(prefers-reduced-motion:reduce){.envl-hint{animation:none}.envl.cta-on .envl-cta{animation:none}.envl-cta{transition:none}}