/* MassageCo · Новый год 2027 · первый экран страницы «Сертификат на массаж на Новый год».
   Префикс ny27. Шрифты и цвета из темы. Анимации на transform/opacity, стартуют сразу из CSS (без ожидания скрипта).
   H1 виден с первого кадра, поэтому скорость загрузки (LCP) не страдает. При prefers-reduced-motion — сразу финальный кадр. */
.ny27-hero{padding:clamp(10px,1.6vw,20px) 0 clamp(28px,4vw,52px)}
@media (max-width:600px){.ny27-hero>.wrap{padding-inline:8px}}

.ny27{
  --n-night:#06170F; --n-pine:#0F3D2A; --n-leaf:#1C7A4C;
  --n-gold:#F2A23A; --n-gold-hi:#FFD27A; --n-gold-pale:#FFEBC2;
  --n-berry:#E8317A; --n-ice:#F2FAF6;
  --n-mist:rgba(226,241,233,.8); --n-dim:rgba(226,241,233,.58);
  --n-display:"Unbounded","Unbounded Fallback","Unbounded Fallback B","Unbounded Fallback R","Arial Black",system-ui,sans-serif;
  --n-font:"Manrope","Manrope Fallback","Manrope Fallback R",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --n-ease:cubic-bezier(.2,.75,.15,1);
  --n-spring:cubic-bezier(.34,1.56,.64,1);
  --sec:calc(100vw - 16px); --stg:var(--sec);
  --u1:calc(var(--sec)/100); --u:calc(var(--stg)/100);
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:clamp(22px,3vw,32px);
  color:var(--n-ice);font:400 16px/1.55 var(--n-font);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(90% 70% at 88% 0%,rgba(28,122,76,.55),transparent 62%),
    radial-gradient(70% 55% at 0% 100%,rgba(232,49,122,.14),transparent 60%),
    linear-gradient(165deg,#0C2E20 0%,#071A12 52%,#040F0A 100%);
  box-shadow:0 50px 90px -50px rgba(4,15,10,.75);
}
@media (min-width:601px){.ny27{--sec:min(calc(100vw - 2*var(--gut,32px)),1320px)}}
@media (min-width:944px){.ny27{--stg:calc(var(--sec)*.58 - 6px)}}
.ny27 *,.ny27 *::before,.ny27 *::after{box-sizing:border-box}
.ny27 :where(h1,p,ul,li,figure,picture){margin:0;padding:0}
.ny27 ul{list-style:none}
.ny27 img{max-width:100%;display:block}
.ny27 a{color:inherit}
.ny27__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ny27__defs{position:absolute;width:0;height:0;overflow:hidden}

/* Фон всего экрана: сияние и снег — заголовок находится внутри анимации */
.ny27__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ny27__bg i{position:absolute;width:calc(var(--u1)*70);aspect-ratio:1;border-radius:50%;will-change:transform}
.ny27__bg i:nth-child(1){left:calc(var(--u1)*-18);top:calc(var(--u1)*-26);background:radial-gradient(closest-side,rgba(28,122,76,.45),transparent);animation:ny27-drift2 19s ease-in-out infinite alternate}
.ny27__bg i:nth-child(2){left:calc(var(--u1)*-10);bottom:calc(var(--u1)*-30);background:radial-gradient(closest-side,rgba(242,162,58,.16),transparent);animation:ny27-drift1 23s ease-in-out infinite alternate}
.ny27__fx{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
/* Снег: два слоя точек едут на видеокарте (без скрипта и без перерисовки) */
.ny27__snow{position:absolute;left:0;right:0;top:0;height:min(100%,1100px);z-index:1;overflow:hidden;pointer-events:none}
.ny27__snow i{position:absolute;left:-12px;right:-12px;bottom:0;background-repeat:repeat;will-change:transform}
.ny27__snow i:nth-child(1){top:-240px;background-size:240px 240px;background-image:radial-gradient(circle at 172px 128px,rgba(255,255,255,0.79) 2.1px,transparent 3.2px),radial-gradient(circle at 56px 24px,rgba(255,255,255,0.75) 1.6px,transparent 2.7px),radial-gradient(circle at 91px 70px,rgba(255,255,255,0.74) 1.8px,transparent 2.9px),radial-gradient(circle at 52px 69px,rgba(255,255,255,0.65) 2.2px,transparent 3.3px),radial-gradient(circle at 24px 192px,rgba(255,255,255,0.67) 2.2px,transparent 3.3px),radial-gradient(circle at 26px 162px,rgba(255,255,255,0.73) 2.2px,transparent 3.3px),radial-gradient(circle at 195px 19px,rgba(255,255,255,0.8) 2.0px,transparent 3.1px);animation:ny27-snow1 16s linear infinite}
.ny27__snow i:nth-child(2){top:-150px;background-size:150px 150px;background-image:radial-gradient(circle at 9px 128px,rgba(255,255,255,0.36) 0.8px,transparent 1.9px),radial-gradient(circle at 92px 64px,rgba(255,255,255,0.34) 1.1px,transparent 2.2px),radial-gradient(circle at 31px 106px,rgba(255,255,255,0.43) 1.1px,transparent 2.2px),radial-gradient(circle at 15px 141px,rgba(255,255,255,0.33) 0.7px,transparent 1.8px),radial-gradient(circle at 44px 73px,rgba(255,255,255,0.23) 1.0px,transparent 2.1px),radial-gradient(circle at 9px 121px,rgba(255,255,255,0.3) 1.1px,transparent 2.2px);animation:ny27-snow2 21s linear infinite}
@keyframes ny27-snow1{0%{transform:translate(0,0)}25%{transform:translate(9px,60px)}50%{transform:translate(0,120px)}75%{transform:translate(-9px,180px)}100%{transform:translate(0,240px)}}
@keyframes ny27-snow2{0%{transform:translate(0,0)}25%{transform:translate(-5px,37.5px)}50%{transform:translate(0,75px)}75%{transform:translate(5px,112.5px)}100%{transform:translate(0,150px)}}

/* ---------- Сетка: телефон по умолчанию, компьютер — от 880px ширины блока ---------- */
.ny27__in{
  --ny-pad:20px;
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"head" "stage" "body";
  padding:26px var(--ny-pad) 30px;
}
.ny27__head{grid-area:head;position:relative;z-index:3;min-width:0}
.ny27__body{grid-area:body;position:relative;z-index:3;min-width:0;display:flex;flex-direction:column;gap:20px}
.ny27__stage{
  grid-area:stage;position:relative;
  margin:6px calc(var(--ny-pad)*-1) 6px;aspect-ratio:1/1.12;
  overflow:hidden;perspective:calc(var(--u1)*190);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  --card-wn:84; --card-w:calc(var(--card-wn)*1%); --card-x:50%; --card-y:57%; --yr-top:5%; --gift-w:calc(var(--u)*38); --gift-top:calc(var(--u)*12); --from-y:52%;
}
@media (min-width:944px){
  .ny27__in{
    --ny-pad:clamp(36px,calc(var(--u1)*4),56px);
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto 1fr;
    grid-template-areas:"head stage" "body stage";
    column-gap:12px;
    padding:var(--ny-pad);
  }
  .ny27__head{align-self:end}
  .ny27__body{margin-top:20px;align-self:start;gap:16px}
  .ny27__stage{
    aspect-ratio:auto;min-height:600px;
    margin:calc(var(--ny-pad)*-1) calc(var(--ny-pad)*-1) calc(var(--ny-pad)*-1) calc(var(--u1)*-8);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);
            mask-image:linear-gradient(90deg,transparent 0,#000 16%);
    perspective:1100px;
    --card-wn:66; --card-w:calc(var(--card-wn)*1%); --card-x:56%; --card-y:53%; --yr-top:9%; --gift-w:calc(var(--u)*28); --gift-top:calc(var(--u)*12); --from-y:55%;
  }
  .ny27__list{grid-template-columns:1fr 1fr;column-gap:18px}
}

/* ---------- Заголовок H1 ---------- */
.ny27__eyebrow{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font:700 12.5px/1.3 var(--n-font);letter-spacing:.15em;text-transform:uppercase;color:var(--n-gold-hi)}
.ny27__eyebrow svg{width:15px;height:15px;flex:none;fill:currentColor}
.ny27__eb2::before{content:"·";margin-right:10px}
@media (max-width:495px){.ny27__eyebrow{display:grid;grid-template-columns:auto 1fr;column-gap:10px}.ny27__eb2{grid-column:2}.ny27__eb2::before{display:none}}
.ny27__title{margin-top:14px;font:700 clamp(29px,calc(var(--u1)*4),50px)/1.05 var(--n-display);letter-spacing:-.045em;color:#fff;text-wrap:balance}
.ny27__w{display:inline-block;transform-origin:0 100%}
.ny27__gold{display:block;margin-top:.1em;font-size:1.2em;line-height:1.02;letter-spacing:-.055em;white-space:nowrap;transform-origin:0 80%}
@media (max-width:376px){.ny27__gold{font-size:1.08em}}
.ny27__gold .ny27__w{
  padding-bottom:.08em;
  color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(100deg,#FFE7A8 0%,#F2A23A 28%,#FFD27A 46%,#FFF4D6 52%,#E88A1A 70%,#FFE7A8 100%);
  background-size:220% 100%;background-position:0 0;will-change:transform;
  filter:drop-shadow(0 .026em 0 #C46E12) drop-shadow(0 .026em 0 #8F4C08) drop-shadow(0 .026em 0 #6B3805);
}

/* ---------- Текст, цена, выгоды ---------- */
.ny27__lead{font-size:clamp(15.5px,calc(var(--u1)*1.3),16.5px);line-height:1.58;color:var(--n-mist);max-width:31.72em}
.ny27__price{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.ny27__sum{display:flex;align-items:baseline;gap:.22em;font:700 clamp(38px,calc(var(--u1)*4),52px)/1 var(--n-display);letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.ny27__num{display:inline-flex;align-items:flex-end;white-space:nowrap}
.ny27__rub{font-size:.62em;color:var(--n-gold-hi)}
.ny27__dg{display:inline-block;height:1.1em;overflow:hidden;line-height:1.1em;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.ny27__col{display:block;transform:translateY(0)}
.ny27__col::before{content:attr(data-s);display:block;white-space:pre;line-height:1.1em}
.ny27__sp{display:inline-block;width:.28em}
.ny27.is-price .ny27__col{transform:translateY(calc(var(--to)*-1.1em));transition:transform 1.5s cubic-bezier(.16,.84,.24,1) calc(var(--i)*90ms)}
.ny27__per{margin-top:8px;font-size:13px;color:var(--n-dim)}
.ny27__chip{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:rgba(255,210,122,.1);border:1px solid rgba(255,210,122,.34);font-size:14.5px;line-height:1.2;color:var(--n-gold-pale)}
.ny27__chip b{color:#fff;font:700 15px/1 var(--n-display);letter-spacing:-.02em}
.ny27__chip s{position:relative;text-decoration:none;color:var(--n-dim);white-space:nowrap}
.ny27__chip s::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:2px;border-radius:2px;background:var(--n-berry);transform-origin:0 50%;rotate:-9deg}
.ny27__list{display:grid;gap:10px}
.ny27__list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.4;color:#E6F2EB}
.ny27__list b{color:#fff;font-weight:700}
.ny27__list svg{flex:none;width:22px;height:22px;margin-top:-1px}
.ny27__list circle{fill:rgba(255,210,122,.12);stroke:rgba(255,210,122,.45);stroke-width:1}
.ny27__list path{fill:none;stroke:var(--n-gold-hi);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15;stroke-dashoffset:0}

/* Обратный отсчёт */
.ny27__count[hidden]{display:none}
.ny27__count{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:13.5px;color:var(--n-mist)}
.ny27__count-l{position:relative;display:inline-flex;align-items:center;gap:8px}
.ny27__count-l::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--n-berry)}
.ny27__count-l::after{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:rgba(232,49,122,.65);animation:ny27-live 1.8s ease-out infinite}
.ny27__cd{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px}
.ny27__cd b{display:inline-block;width:2.5em;height:calc(1em + 14px);padding:7px 0;contain:strict;border-radius:9px;text-align:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);font:600 15px/1 var(--n-display);color:#fff;font-variant-numeric:tabular-nums}
.ny27__cd i{font-style:normal;font-size:12px;color:var(--n-dim);margin-right:6px}
.ny27__cd .ny27__od{display:inline-block;height:1em;overflow:hidden;vertical-align:top}
.ny27__cd .ny27__odc{display:block;line-height:1;transition:transform .5s cubic-bezier(.2,.75,.15,1)}
.ny27__cd .ny27__odc::before{content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";white-space:pre}

/* Кнопки */
.ny27__cta{display:flex;flex-wrap:wrap;gap:10px}
.ny27__btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:1 1 220px;min-height:58px;padding:0 24px;border-radius:999px;font:800 15.5px/1.1 var(--n-font);text-decoration:none;text-align:center;transition:transform .25s var(--n-ease),background .25s,box-shadow .25s,border-color .25s;cursor:pointer}
.ny27__btn svg{width:19px;height:19px;flex:none}
.ny27__btn:active{transform:scale(.97)}
.ny27__btn:focus-visible{outline:3px solid var(--n-gold-hi);outline-offset:3px}
.ny27__btn--gold{background:linear-gradient(180deg,#FFCB66 0%,#F2A23A 100%);color:#3A2203;box-shadow:0 16px 36px -14px rgba(242,162,58,.9),inset 0 1px 0 rgba(255,255,255,.55)}
.ny27__btn--gold:hover{transform:translateY(-2px);box-shadow:0 22px 40px -14px rgba(242,162,58,1),inset 0 1px 0 rgba(255,255,255,.55)}
.ny27__btn--gold svg{fill:currentColor}
.ny27__btn--gold::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-2;background:rgba(255,200,97,.55);opacity:0;animation:ny27-pulse 2.6s ease-out 3.4s infinite}
.ny27__shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:-1;pointer-events:none}
.ny27__shine::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-22deg) translateX(-160%);animation:ny27-shine 4.4s ease-in-out 2.9s infinite}
.ny27__btn--glass{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);color:#fff}
.ny27__btn--glass:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34)}
.ny27__btn--glass svg{fill:#5FC3F2}
.ny27__phone{font-size:14px;line-height:1.55;color:var(--n-dim)}
.ny27__phone a{color:#fff;font-weight:700;text-decoration:none;white-space:nowrap;border-bottom:1px dashed rgba(255,255,255,.4)}

/* ---------- Сцена ---------- */
.ny27__stage>*{position:absolute}
.ny27__aurora{inset:0;z-index:0;pointer-events:none}
.ny27__aurora i{position:absolute;width:80%;aspect-ratio:1;border-radius:50%;will-change:transform}
.ny27__aurora i:nth-child(1){left:30%;top:-14%;background:radial-gradient(closest-side,rgba(242,162,58,.3),transparent);animation:ny27-drift1 17s ease-in-out infinite alternate}
.ny27__aurora i:nth-child(2){left:-24%;top:42%;background:radial-gradient(closest-side,rgba(232,49,122,.22),transparent);animation:ny27-drift2 21s ease-in-out infinite alternate}
.ny27__aurora i:nth-child(3){left:44%;top:48%;background:radial-gradient(closest-side,rgba(53,200,232,.15),transparent);animation:ny27-drift3 25s ease-in-out infinite alternate}
.ny27__stage::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Год 2026 → 2027 */
.ny27__year{left:0;right:0;top:var(--yr-top);z-index:1;display:flex;justify-content:center;pointer-events:none;user-select:none;
  font:700 calc(var(--u)*24)/1 var(--n-display);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:max(1px,calc(var(--u)*.22)) rgba(255,214,140,.5)}
.ny27__year>span{display:inline-block}
.ny27__roll{height:1em;overflow:hidden}
.ny27__roll>span{display:flex;flex-direction:column;transform:translateY(-50%)}
.ny27__roll b{display:block;height:1em;font-weight:inherit}
.ny27__roll b:last-child{-webkit-text-stroke:0;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(180deg,#FFF3D1 0%,#FFD27A 38%,#F2A23A 72%,#C46A12 100%);
  filter:drop-shadow(0 .012em 0 #B9600E) drop-shadow(0 .012em 0 #9A4E0B) drop-shadow(0 .012em 0 #7E3F08) drop-shadow(0 0 .09em rgba(255,190,90,.55))}

/* Лучи и лента */
.ny27__rays{left:var(--card-x);top:var(--card-y);z-index:2;width:calc(var(--u)*135);aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 16%,transparent 72%);mask-image:radial-gradient(closest-side,#000 16%,transparent 72%)}
.ny27__rays i{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,214,140,.2) 0deg 5deg,rgba(255,214,140,0) 5deg 15deg);animation:ny27-spin 80s linear infinite}
.ny27__tape{left:-12%;right:-12%;bottom:5%;z-index:3;rotate:-4deg;overflow:hidden;pointer-events:none;
  background:linear-gradient(90deg,#E8901F,#FFD27A 50%,#E8901F);color:#0B2A1D;
  font:700 max(10.5px,calc(var(--u)*2.25))/1 var(--n-display);letter-spacing:.05em;text-transform:uppercase;
  padding:.9em 0;box-shadow:0 14px 30px -12px rgba(0,0,0,.7)}
.ny27__track{display:flex;width:max-content;animation:ny27-marquee 30s linear infinite}
.ny27__track>span{display:flex;align-items:center;gap:1.1em;padding-right:1.1em;white-space:nowrap}
.ny27__track svg{width:.9em;height:.9em;fill:currentColor;flex:none}

/* Подарочная коробка (только во вступлении) */
.ny27__gift{left:var(--card-x);top:calc(var(--card-y) + var(--gift-top));z-index:7;width:var(--gift-w);translate:-50% 0;pointer-events:none;opacity:0;transform-origin:50% 100%}
.ny27__gift-in{position:relative;transform-origin:50% 100%}
.ny27__gift svg{display:block;width:100%;height:auto;overflow:visible}
.ny27__lid{position:absolute;left:0;top:0;transform-origin:50% 40%}
.ny27__glow{position:absolute;left:5%;right:5%;top:12%;height:42%;border-radius:50%;opacity:0;background:radial-gradient(closest-side,rgba(255,236,180,.95),rgba(255,190,90,.45) 45%,transparent)}

/* Сертификат */
.ny27__tilt{left:var(--card-x);top:var(--card-y);z-index:5;width:var(--card-w);translate:-50% -50%;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--n-ease)}
.ny27__sway{position:relative;transform-style:preserve-3d;--sw:6deg}
@media (hover:none){.ny27__sway{--sw:12deg}.ny27__tilt{transition-duration:.35s}}
.ny27__float{position:relative;transform-style:preserve-3d}
.ny27__card{position:relative;aspect-ratio:1795/1205;transform-style:preserve-3d;transform:rotateZ(-3deg);--T:max(5px,calc(var(--u)*1.2));--ring:max(4px,calc(var(--u)*.75))}
.ny27__edge{position:absolute;inset:calc(var(--ring)*-1);border-radius:calc(calc(var(--u)*2.2) + var(--ring));background:#F2A23A;transform:translateZ(calc(var(--T)*((var(--k) + .5)/6 - .5)))}
.ny27__edge:nth-child(1){--k:0;background:#A85A0C;box-shadow:0 calc(var(--u)*3.2) calc(var(--u)*6) calc(var(--u)*-1.2) rgba(0,0,0,.7),0 0 calc(var(--u)*9) rgba(255,190,90,.28)}
.ny27__edge:nth-child(2){--k:1;background:#C46E12}
.ny27__edge:nth-child(3){--k:2;background:#E08A22}
.ny27__edge:nth-child(4){--k:3;background:#F2A23A}
.ny27__edge:nth-child(5){--k:4;background:#FFC45E}
.ny27__edge:nth-child(6){--k:5;background:#FFE3A0}
.ny27__face{position:absolute;inset:0;border-radius:calc(var(--u)*2.2);overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ny27__front{background:#2bb3d6;transform:translateZ(calc(var(--T)/2));box-shadow:0 0 0 var(--ring) #fff}
.ny27__front img{width:100%;height:100%;object-fit:cover}
.ny27__front::before{content:"";position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .5s;mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.9),rgba(255,255,255,0) 46%)}
.ny27__stage:hover .ny27__front::before{opacity:1}
@media (hover:none){.ny27__front::before{inset:auto;left:0;top:0;width:160%;height:160%;opacity:.7;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 30%);transform:translate(-18.75%,-15%)}}
.ny27__front::after{content:"";position:absolute;left:0;top:0;bottom:0;width:260%;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.5) 47%,rgba(255,255,255,.12) 53%,rgba(255,255,255,0) 61%);
  transform:translateX(-80%)}
.ny27__back{transform:rotateY(180deg) translateZ(calc(var(--T)/2));display:grid;place-items:center;text-align:center;color:var(--n-gold-hi);
  background:radial-gradient(circle at 50% 38%,rgba(255,210,122,.32),transparent 58%),linear-gradient(140deg,#14583A,#0A2419);
  box-shadow:0 0 0 var(--ring) var(--n-gold-hi)}
.ny27__back-in{display:grid;justify-items:center;gap:calc(var(--u)*1.2)}
.ny27__flake{width:calc(var(--u)*9);height:calc(var(--u)*9)}
.ny27__back b{font:700 calc(var(--u)*4.6)/1 var(--n-display);letter-spacing:-.03em;color:#FFF1CC}
.ny27__back span{font:600 calc(var(--u)*1.9)/1 var(--n-font);letter-spacing:.2em;text-transform:uppercase}

/* Значок и стикеры — висят над карточкой (параллакс при наклоне) */
.ny27__badge{position:absolute;left:-7%;top:-17%;width:22%;aspect-ratio:1;--z:44px;--r:-10deg;transform:translateZ(var(--z)) rotate(var(--r));filter:drop-shadow(0 calc(var(--u)*1.2) calc(var(--u)*1.6) rgba(0,0,0,.45))}
.ny27__badge svg,.ny27__ring{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.ny27__ring{animation:ny27-spin 16s linear infinite}
.ny27__sticker{position:absolute;z-index:3;padding:.62em 1em .58em;border-radius:.7em;white-space:nowrap;
  font:700 max(10px,calc(var(--u)*2))/1 var(--n-display);letter-spacing:.02em;text-transform:uppercase;
  box-shadow:0 0 0 max(2.5px,calc(var(--u)*.45)) #fff,calc(var(--u)*.5) calc(var(--u)*.8) 0 max(2.5px,calc(var(--u)*.45)) rgba(0,0,0,.35);
  transform:translateZ(var(--z)) rotate(var(--r))}
.ny27__sticker--a{left:3%;bottom:-6%;--z:60px;--r:-6deg;background:var(--n-berry);color:#fff}
.ny27__sticker--b{right:6%;top:-6%;--z:52px;--r:4deg;background:#fff;color:#0B2A1D}

/* Ёлочные шары */
.ny27__orn{inset:0 0 auto;height:0;z-index:6;pointer-events:none}
.ny27__orn span{position:absolute;top:0;width:var(--s)}
.ny27__orn b{display:block;transform-origin:50% 0;animation:ny27-swing var(--t,4.8s) ease-in-out infinite alternate}
.ny27__orn b::before{content:"";display:block;width:max(1px,calc(var(--u)*.2));height:var(--h);margin-inline:auto;background:linear-gradient(rgba(255,214,140,0),rgba(255,214,140,.75))}
.ny27__orn svg{display:block;width:100%;height:auto;margin-top:-1px;filter:drop-shadow(0 calc(var(--u)*1) calc(var(--u)*1.4) rgba(0,0,0,.45))}
.ny27__orn span:nth-child(1){left:9%;--s:calc(var(--u)*6.5);--h:calc(var(--u)*5);--t:5.2s}
.ny27__orn span:nth-child(2){right:28%;--s:calc(var(--u)*5.5);--h:calc(var(--u)*2.5);--t:4.4s}
.ny27__orn span:nth-child(2) b{animation-delay:-1.4s}
.ny27__orn span:nth-child(3){right:2.5%;--s:calc(var(--u)*8);--h:calc(var(--u)*13);--t:5.8s}
.ny27__orn span:nth-child(3) b{animation-delay:-2.6s}

/* Искры */
.ny27__spks{inset:0;z-index:6;pointer-events:none}
.ny27__spks i{position:absolute;width:calc(var(--u)*3.2);aspect-ratio:1;opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFE3A0' d='M12 0C13 7 17 11 24 12 17 13 13 17 12 24 11 17 7 13 0 12 7 11 11 7 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat}
.ny27__spks i:nth-child(1){left:9%;top:34%}
.ny27__spks i:nth-child(2){left:88%;top:31%;width:calc(var(--u)*2.4)}
.ny27__spks i:nth-child(3){left:6%;top:74%;width:calc(var(--u)*2.2)}
.ny27__spks i:nth-child(4){left:91%;top:70%}
.ny27__spks i:nth-child(5){left:57%;top:16%;width:calc(var(--u)*2)}

.ny27__shadow{left:var(--card-x);top:calc(var(--card-y) + var(--card-wn)*calc(var(--u)*1)/2.98 + calc(var(--u)*5));z-index:4;width:calc(var(--card-wn)*calc(var(--u)*.8));height:calc(var(--u)*6);translate:-50% -50%;pointer-events:none}
.ny27__shadow::before{content:"";position:absolute;inset:0;background:radial-gradient(closest-side,rgba(0,0,0,.62),rgba(0,0,0,.25) 55%,rgba(0,0,0,0))}

/* ================= Вступление: стартует сразу, без ожидания скрипта =================
   Заголовок и подзаголовок видны с первого кадра (только «наводятся на резкость»). */
.ny27__eyebrow{animation:ny27-up .6s var(--n-ease) .05s backwards}
.ny27__title .ny27__w{animation:ny27-h1 .85s var(--n-ease) var(--d,0s) backwards}
.ny27__title>.ny27__w:nth-child(1){--d:.04s}
.ny27__title>.ny27__w:nth-child(2){--d:.11s}
.ny27__title>.ny27__w:nth-child(3){--d:.18s}
.ny27__title>.ny27__w:nth-child(4){--d:.24s}
.ny27__gold{animation:ny27-gold 1s var(--n-spring) .34s backwards}
.ny27__lead{animation:ny27-in .8s var(--n-ease) .3s backwards}
.ny27__price{animation:ny27-up .7s var(--n-ease) .75s backwards}
.ny27__chip{animation:ny27-up .6s var(--n-ease) 1.15s backwards}
.ny27__chip s::after{animation:ny27-strike .45s var(--n-ease) 1.7s backwards}
.ny27__list li{animation:ny27-up .55s var(--n-ease) var(--d) backwards}
.ny27__list path{animation:ny27-draw .5s ease calc(var(--d) + .2s) backwards}
.ny27__list li:nth-child(1){--d:.95s}
.ny27__list li:nth-child(2){--d:1.03s}
.ny27__list li:nth-child(3){--d:1.11s}
.ny27__list li:nth-child(4){--d:1.19s}
.ny27__count{animation:ny27-up .6s var(--n-ease) 1.3s backwards}
.ny27__cta{animation:ny27-up .7s var(--n-spring) 1.42s backwards}
.ny27__phone{animation:ny27-up .6s var(--n-ease) 1.55s backwards}

.ny27__year>span{animation:ny27-digit .75s var(--n-ease) .1s backwards}
.ny27__year>span:nth-child(2){animation-delay:.17s}
.ny27__year>span:nth-child(3){animation-delay:.24s}
.ny27__year>span:nth-child(4){animation-delay:.31s}
.ny27__roll>span{animation:ny27-roll .5s cubic-bezier(.7,0,.25,1) .72s backwards}
.ny27__roll b:last-child{animation:ny27-seven 1.4s ease-out 1.17s backwards}

.ny27__orn span{animation:ny27-orn .9s var(--n-spring) var(--od,.2s) backwards}
.ny27__orn span:nth-child(2){--od:.32s}
.ny27__orn span:nth-child(3){--od:.44s}

.ny27__gift{animation:ny27-drop .6s linear .55s both,ny27-gift-out .45s ease-in 1.95s forwards}
.ny27__gift-in{animation:ny27-wiggle .5s ease-in-out 1.2s both}
.ny27__lid{animation:ny27-lid .75s cubic-bezier(.2,.7,.3,1) 1.65s both}
.ny27__glow{animation:ny27-glow .9s ease-out 1.6s both}
.ny27__rays{animation:ny27-rays .9s var(--n-ease) 1.7s backwards}

.ny27__card{animation:ny27-card 1.05s cubic-bezier(.22,.9,.26,1) 1.72s backwards}
.ny27__float{animation:ny27-float 7s ease-in-out 2.85s infinite}
.ny27__sway{animation:ny27-sway 9s ease-in-out 2.85s infinite}
.ny27__shadow{animation:ny27-shadow-in .6s ease 2.4s backwards}
.ny27__shadow::before{animation:ny27-shadow 7s ease-in-out 3s infinite}
@media (hover:none){.ny27__front::before{animation:ny27-foil 9s ease-in-out 2.85s infinite}}
.ny27__front::after{animation:ny27-glare 6.5s ease-in-out 2.7s infinite}
.ny27__badge{animation:ny27-pop .65s var(--n-spring) 2.6s backwards}
.ny27__sticker--a{animation:ny27-pop .6s var(--n-spring) 2.75s backwards}
.ny27__sticker--b{animation:ny27-pop .6s var(--n-spring) 2.88s backwards}
.ny27__tape{animation:ny27-tape .8s var(--n-ease) 2.7s backwards}
.ny27__spks i{animation:ny27-twinkle 2.6s ease-in-out infinite}
.ny27__spks i:nth-child(1){animation-delay:2.85s}
.ny27__spks i:nth-child(2){animation-delay:3.25s}
.ny27__spks i:nth-child(3){animation-delay:3.75s}
.ny27__spks i:nth-child(4){animation-delay:3.05s}
.ny27__spks i:nth-child(5){animation-delay:4.25s}

/* После вступления коробка убирается совсем (класс ставит скрипт). Повтор вступления (превью) и пауза, когда экран прокручен */
.ny27.is-done .ny27__gift{display:none}
.ny27.is-hold *,.ny27.is-hold *::before,.ny27.is-hold *::after{animation:none!important}
.ny27.is-off *,.ny27.is-off *::before,.ny27.is-off *::after{animation-play-state:paused!important}

@keyframes ny27-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ny27-in{from{opacity:.3;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ny27-h1{from{opacity:.25;transform:translateY(.32em) rotate(4deg);filter:blur(9px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes ny27-gold{0%{opacity:.25;transform:translateY(.25em) scale(.72) rotate(-5deg);filter:blur(9px)}60%{opacity:1;transform:scale(1.05) rotate(.8deg);filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes ny27-strike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ny27-draw{from{stroke-dashoffset:15}to{stroke-dashoffset:0}}
@keyframes ny27-live{0%{opacity:1;transform:scale(1)}70%,100%{opacity:0;transform:scale(3.2)}}
@keyframes ny27-pulse{0%{opacity:1;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.1,1.5)}}
@keyframes ny27-shine{0%{transform:skewX(-22deg) translateX(-160%)}32%,100%{transform:skewX(-22deg) translateX(330%)}}

@keyframes ny27-digit{from{opacity:0;transform:translateY(.22em) scale(.82);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes ny27-roll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes ny27-seven{0%{filter:drop-shadow(0 0 0 rgba(185,96,14,0)) drop-shadow(0 0 0 rgba(154,78,11,0)) drop-shadow(0 0 0 rgba(126,63,8,0)) drop-shadow(0 0 0 rgba(255,190,90,0))}25%{filter:drop-shadow(0 .012em 0 #B9600E) drop-shadow(0 .012em 0 #9A4E0B) drop-shadow(0 .012em 0 #7E3F08) drop-shadow(0 0 .25em rgba(255,200,100,1))}100%{filter:drop-shadow(0 .012em 0 #B9600E) drop-shadow(0 .012em 0 #9A4E0B) drop-shadow(0 .012em 0 #7E3F08) drop-shadow(0 0 .09em rgba(255,190,90,.55))}}
@keyframes ny27-orn{from{opacity:0;translate:0 -110%}to{opacity:1;translate:0 0}}
@keyframes ny27-swing{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}

@keyframes ny27-drop{
  0%{opacity:0;transform:translateY(-130%) scale(.9,1.12);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  50%{opacity:1;transform:translateY(0) scale(1.12,.86);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  70%{transform:translateY(-7%) scale(.95,1.06)}
  86%{transform:translateY(0) scale(1.03,.97)}
  100%{opacity:1;transform:none}}
@keyframes ny27-wiggle{0%,100%{transform:none}15%{transform:rotate(-7deg) translateY(-4%)}32%{transform:rotate(6deg)}50%{transform:rotate(-5deg) translateY(-3%)}68%{transform:rotate(4deg)}84%{transform:rotate(-2deg)}}
@keyframes ny27-lid{0%{opacity:1;transform:none}30%{opacity:1;transform:translate(8%,-60%) rotate(12deg)}100%{opacity:0;transform:translate(70%,-170%) rotate(55deg)}}
@keyframes ny27-glow{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(1.7)}}
@keyframes ny27-gift-out{to{opacity:0;transform:translateY(28%) scale(.82)}}
@keyframes ny27-rays{from{opacity:0;transform:scale(.25)}to{opacity:1;transform:none}}
@keyframes ny27-spin{to{transform:rotate(360deg)}}

@keyframes ny27-card{
  0%{visibility:hidden;transform:translateY(var(--from-y)) scale(.24) rotateY(-540deg) rotateZ(0deg)}
  1%{visibility:visible}
  72%{transform:translateY(-6%) scale(1.05) rotateY(-14deg) rotateZ(-6deg)}
  100%{visibility:visible;transform:translateY(0) scale(1) rotateY(0deg) rotateZ(-3deg)}}
@keyframes ny27-float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-3%) rotate(.7deg)}}
@keyframes ny27-sway{0%,100%{transform:rotateY(0deg) rotateX(0deg)}25%{transform:rotateY(var(--sw)) rotateX(calc(var(--sw)*-.3))}75%{transform:rotateY(calc(var(--sw)*-1)) rotateX(calc(var(--sw)*.35))}}
@keyframes ny27-shadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.84);opacity:.65}}
@keyframes ny27-shadow-in{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes ny27-foil{0%,100%{transform:translate(-18.75%,-15%)}25%{transform:translate(-3.75%,-11.25%)}75%{transform:translate(-33.75%,-22.5%)}}
@keyframes ny27-glare{0%{transform:translateX(-80%)}20%,100%{transform:translateX(21.5%)}}
@keyframes ny27-pop{0%{opacity:0;transform:translateZ(var(--z)) scale(0) rotate(calc(var(--r) - 50deg))}70%{opacity:1;transform:translateZ(var(--z)) scale(1.12) rotate(var(--r))}100%{opacity:1;transform:translateZ(var(--z)) scale(1) rotate(var(--r))}}
@keyframes ny27-tape{from{opacity:0;transform:translateX(-30%)}to{opacity:1;transform:none}}
@keyframes ny27-marquee{to{transform:translateX(-50%)}}
@keyframes ny27-twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes ny27-drift1{to{transform:translate(-18%,14%) scale(1.1)}}
@keyframes ny27-drift2{to{transform:translate(22%,-12%) scale(.92)}}
@keyframes ny27-drift3{to{transform:translate(-14%,-18%) scale(1.12)}}

@media (prefers-reduced-motion:reduce){
  .ny27 *,.ny27 *::before,.ny27 *::after{animation:none!important;transition:none!important}
  .ny27__fx,.ny27__snow{display:none}
}