/* ORDMIND «Ровный шов»: фирменный слой движения поверх общего motion.css.
   Идея: знак ORDMIND — овал из четырёх частей, разделённых швом крест-накрест со звездой в центре.
   Всё движение — это герметик: золотой валик ложится ровно и закрывает шов.
   Правила срабатывают только при html.om-on (его ставит om-brand.js, если движение не отключено в системе). */
:root{--m-accent:#F2B03F;--m-accent2:#FFD780;--m-glow:rgba(242,176,63,.32);--om-bead:linear-gradient(180deg,#FFD780 0%,#F2B03F 45%,#A8741C 100%)}

/* общий прогресс-бар motion.js заменён валиком под шапкой */
.m-progress{display:none}

/* ── знак: части сходятся, шов закрывается ── */
.logo .m-p,.mark .m-p{transform-box:fill-box;transform-origin:center}
.om-seam{fill:none;stroke:#F2B03F;stroke-linecap:round;stroke-width:2.6;pointer-events:none}
.brand:hover .m-star{animation:om-spin .9s cubic-bezier(.3,1.4,.5,1)}
@keyframes om-spin{to{transform:rotate(90deg)}}

/* ── шапка сжимается при прокрутке, под ней валик чтения ── */
.hdr .wrap{transition:min-height .35s cubic-bezier(.2,.8,.2,1)}
.hdr .logo{transition:height .35s cubic-bezier(.2,.8,.2,1)}
.brand small{transition:opacity .25s,max-height .35s,margin .35s;max-height:14px;overflow:hidden}
.hdr.om-compact .wrap{min-height:58px}
.hdr.om-compact .logo{height:22px}
.hdr.om-compact .brand small{opacity:0;max-height:0;margin-top:-4px}
.om-read{position:absolute;left:0;right:0;bottom:-2px;height:3px;pointer-events:none}
.om-read i{position:absolute;left:0;top:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:var(--om-bead);border-radius:0 2px 2px 0}
.om-read b{position:absolute;top:-2.5px;left:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#FFD780;box-shadow:0 0 10px rgba(242,176,63,.9);opacity:0;transition:opacity .3s}
.om-read.on b{opacity:1}

/* ── золотая черта под заголовком выдавливается из носика ── */
html.om-on .goldline{position:relative;overflow:visible;transform-origin:left;animation:om-extrude 1.3s cubic-bezier(.6,0,.2,1) .9s both}
html.om-on .goldline::after{content:"";position:absolute;right:-3px;top:-2.5px;width:8px;height:8px;border-radius:50%;background:#FFD780;box-shadow:0 0 12px rgba(242,176,63,.9);animation:om-dot 1.8s ease .9s both}
@keyframes om-extrude{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes om-dot{0%{opacity:1}70%{opacity:1}100%{opacity:0}}

/* полоса под первым экраном — шов вдоль всей ширины */
html.om-on .band-gold{transform-origin:left;animation:om-extrude 1.6s cubic-bezier(.6,0,.2,1) .4s both}

/* ── подписи разделов: перед текстом ложится короткий валик ── */
html.om-on .sec-h .eyebrow,html.om-on .hero-txt .eyebrow{display:inline-flex;align-items:center;gap:10px}
html.om-on .sec-h .eyebrow::before,html.om-on .hero-txt .eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--om-bead);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.6,0,.2,1) .1s}
html.om-on .om-in.eyebrow::before{transform:scaleX(1)}

/* ── упаковки в первом экране встают на место с лёгким весом ── */
html.om-on .hero-packs .pack{animation:om-drop 1.2s cubic-bezier(.2,1.25,.4,1) both;transform-origin:50% 100%}
html.om-on .hero-packs .pack:nth-child(1){animation-delay:.35s}
html.om-on .hero-packs .pack:nth-child(2){animation-delay:.5s}
html.om-on .hero-packs .pack:nth-child(3){animation-delay:.65s}
html.om-on .prod-pic .pack{animation:om-drop 1.2s cubic-bezier(.2,1.25,.4,1) .2s both;transform-origin:50% 100%}
@keyframes om-drop{0%{opacity:0;transform:translateY(-60px) scaleY(1.04)}60%{opacity:1}78%{transform:translateY(0) scaleY(.97)}100%{opacity:1;transform:none}}

/* ── карточка товара: по краю картинки бежит валик, упаковка чуть приподнимается ── */
.om-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.om-trace rect{fill:none;stroke:#F2B03F;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.6,0,.2,1)}
.pcard .pic .pack{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .pcard:hover .om-trace rect{stroke-dashoffset:0}
  .pcard:hover .pic .pack{transform:translateY(-6px) rotate(-2deg)}
}

/* ── капля в корзину ── */
.om-drop{position:fixed;z-index:70;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50% 50% 50% 0;background:var(--om-bead);box-shadow:0 0 14px rgba(242,176,63,.8);pointer-events:none}
.om-pop{animation:om-pop .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes om-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

/* уведомление: снизу ложится валик на время показа */
.toast{overflow:hidden}
.toast::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--om-bead);transform:scaleX(0);transform-origin:left}
.toast.show::after{animation:om-extrude 2.6s linear both}

/* ── полоса «Для бизнеса»: верхний шов прокладывается при появлении ── */
html.om-on .cta-band{border-top-color:transparent}
html.om-on .cta-band::before{content:"";position:absolute;left:0;right:0;top:-4px;height:4px;background:var(--om-bead);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.6,0,.2,1)}
html.om-on .cta-band.om-in::before{transform:scaleX(1)}

/* ── подвал: крупный знак, под ним шов ── */
.om-foot{display:flex;flex-direction:column;gap:18px;padding:56px 0 0}
.om-foot .logo{height:auto;width:min(100%,760px)}
.om-foot .om-foot-bead{display:block;height:4px;border-radius:2px;background:var(--om-bead);width:min(100%,760px);transform-origin:left}
html.om-on .om-foot .om-foot-bead{transform:scaleX(0);transition:transform 1.8s cubic-bezier(.6,0,.2,1) .5s}
html.om-on .om-foot.om-in .om-foot-bead{transform:scaleX(1)}
.om-foot small{font:500 11px/1 var(--f-h);letter-spacing:.28em;color:var(--band-muted)}
.sf .grid{padding-top:40px}

/* ── 404: шов разошёлся ── */
.om-404 text{transition:opacity .6s}.om-404.om-closed .t-open{opacity:0}.om-404.om-closed .t-closed{opacity:1}
.om-404{display:block;width:100%;max-width:640px;height:auto;margin:0 0 6px;border-radius:var(--r-s);background:var(--band)}

@media (prefers-reduced-motion:reduce){
  .brand:hover .m-star{animation:none}
  .toast.show::after{animation:none}
}