/* Mockup A — "Soft Editorial".
   Calm, magazine-like motion. Words of the title rise one by one,
   the hero image unmasks, every block below fades up with a short
   stagger, and section titles draw a short underline. Only transform
   and opacity move, so phones stay smooth. */

:root{--ease:cubic-bezier(.2,.7,.2,1)}

/* --- Hero entrance ------------------------------------------------ */
.anim .hero h1{animation:none;opacity:1}
.anim .hero h1 .w{display:inline-block;opacity:0;transform:translateY(.55em);
  animation:a-word .9s var(--ease) forwards;animation-delay:calc(.1s + var(--i)*.08s)}
@keyframes a-word{to{opacity:1;transform:none}}

.anim .hero small{animation:a-fade .8s var(--ease) both}
.anim .hero p,.anim .hero .btns,.anim .chip,.anim .hero-visual-note{
  animation:a-fade .9s var(--ease) both}
.anim .hero-visual-note{animation-delay:.6s}
.anim .hero p{animation-delay:.75s}
.anim .hero .btns{animation-delay:.9s}
.anim .chip{animation-delay:calc(1.05s + var(--i,0)*.1s)}
@keyframes a-fade{from{opacity:0;transform:translateY(16px)}}

/* The main picture sits in a fixed frame. The frame unmasks on load,
   and the picture moves a little inside it on scroll, so it never
   moves over the text below. */
.anim .a-frame{overflow:hidden;max-width:1000px;margin:35px auto 0;border:7px solid #fff8ea;
  border-radius:32px;box-shadow:0 16px 35px #345d5020;animation:a-img 1.4s var(--ease) both .35s}
/* height:auto cancels the height="1024" attribute, so the 3:2 shape
   applies. Without it, the picture is 1024px tall on a phone. */
.anim .a-frame .hero-visual{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  margin:0;border:0;border-radius:0;box-shadow:none;
  transform:translateY(calc(var(--py,0)*1px)) scale(1.12);will-change:transform}
@keyframes a-img{
  from{opacity:0;transform:scale(1.04) translateY(18px);clip-path:inset(10% 6% round 32px)}
  to{opacity:1;transform:none;clip-path:inset(0 round 32px)}}
@media(max-width:600px){.anim .a-frame{border-width:4px;border-radius:24px;margin-top:24px}}

/* --- Hero drawing: mother and baby, drawn line by line ------------- */
.anim .a-draw{display:block;width:min(230px,62%);height:auto;margin:30px auto 0;overflow:visible}
.anim .a-draw .bg{fill:#e0ede6}
.anim .a-draw .ln{fill:none;stroke:#2b6f61;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.anim .a-draw .ln.soft{stroke:#7fae9f;stroke-width:2}
.anim .a-draw .dot{fill:#e9a597;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.anim .a-draw.in .ln{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease);transition-delay:calc(.15s + var(--i)*.12s)}
.anim .a-draw.in .dot{opacity:1;transform:none;transition:opacity .6s,transform .7s cubic-bezier(.34,1.6,.64,1);transition-delay:calc(1.6s + var(--i)*.1s)}

/* --- About: the new portrait is tall, so the frame is tall too ----- */
.anim .about .portrait{width:min(360px,82%);height:auto;aspect-ratio:4/5;object-position:50% 40%}

/* --- Prices: quiet line at the bottom of each card ----------------- */
.anim .pk{display:flex;flex-direction:column}
.anim .pk ul{margin-bottom:22px}
.anim .pk .price{order:10;margin:auto 0 0;padding-top:16px;border-top:1px solid #c9d8c9;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:24px;font-weight:500;color:var(--ink);letter-spacing:-.2px;line-height:1.3}
.anim .pk .price:before{font-size:14px;font-weight:400;color:var(--mute);letter-spacing:.03em}
.anim #he .pk .price:before{content:"מחיר"}
.anim #ru .pk .price:before{content:"Стоимость"}
.anim .pk .price .cur{font-size:.68em;color:var(--mute)}

/* --- Scroll reveals ------------------------------------------------ */
.anim .rv{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.anim .rv.img{transform:translateY(22px) scale(.96)}
.anim .rv.in{opacity:1;transform:none}
/* Cards keep their quick hover after they are in. */
.anim .card.rv.in{transition:transform .25s,box-shadow .25s}

/* Section titles draw a short underline. */
.anim h2{position:relative}
.anim h2:after{content:"";display:block;width:0;height:3px;border-radius:3px;
  background:var(--accent);margin:12px auto 0;transition:width .9s var(--ease) .2s}
.anim h2.in:after{width:54px}
.anim .gift h2:after{display:none}

/* The check list ticks appear one by one. */
.anim .ck li.rv:before{transform:scale(0);transition:transform .5s var(--ease) .35s}
.anim .ck li.rv.in:before{transform:scale(1)}

/* --- Micro feedback ------------------------------------------------ */
.anim .btn:active{transform:scale(.97)}
.anim .lang:active{transform:scale(.95)}
.anim .faq summary{transition:color .25s}
.anim .faq[open] summary{color:var(--accent)}

/* Reduced motion: show everything at once. */
@media (prefers-reduced-motion:reduce){
  .anim .rv,.anim .hero h1 .w,.anim .ck li.rv:before{opacity:1;transform:none}
  .anim .a-draw .ln{stroke-dashoffset:0}.anim .a-draw .dot{opacity:1;transform:none}
  .anim h2:after{width:54px}}