/* The clients' real openings, rebuilt in the page instead of filmed, so they stay sharp on any screen and fit any window
   (owner, 6.11.2026: a video looked soft on his PC and was cut). The timings and eases are copied from each client's
   own code: apps/emiomer/theme/public/assets/site.css, apps/lash-room-shop/theme/public/assets/intro.css, the kit's
   split-hero and openings. Sizes follow the smaller of the window's width and height, so words never run off.
   Everything waits under html.js until .open-go (site.js: after the tapped photo has finished growing; boot.js: a
   failsafe). Hidden states are only the "from" end of animations. */
.js:not(.open-go) .so,
.js:not(.open-go) .so *,
.js:not(.open-go) .so *::before,
.js:not(.open-go) .so *::after{animation-play-state:paused!important}

.opening{position:relative;height:calc(100svh - var(--bar));min-height:500px;margin-top:var(--bar);overflow:hidden}
.so{--so-e:cubic-bezier(.16,1,.3,1);--so-mask:cubic-bezier(.77,0,.175,1);--so-curtain:cubic-bezier(.87,0,.13,1);--so-rise:cubic-bezier(.22,1,.36,1);
  position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
.so img{display:block}
.so-btn{display:inline-block;font-weight:600;font-size:1rem;line-height:1.2;padding:13px 26px;border-radius:99px;text-decoration:none;transition:transform .25s var(--so-e)}
.so-btn:active{transform:scale(.97)}
@keyframes so-rise{from{opacity:0;translate:0 22px}}
@keyframes so-fade{from{opacity:0}}
@keyframes so-spin{to{transform:rotate(360deg)}}

/* ---------- Emio Mèr: the full photo, her monogram big, then her logo letter by letter ---------- */
.so-emio{background:#2e2c29;color:#fff;grid-template-rows:1fr}
.so-emio picture{display:contents}
.so-emio>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%;animation:se-settle 2.6s var(--so-e) both}
.so-emio::after{content:"";position:absolute;inset:0;background:linear-gradient(#0000006b,#0000 26%),linear-gradient(#0000 38%,#00000026 55%,#00000085)}
.se-big{position:absolute;inset:0 0 14%;z-index:1;display:grid;place-items:center;opacity:0;pointer-events:none;animation:se-big 2.4s ease both}
.se-mono{display:block;height:min(64vw,50svh);aspect-ratio:458/555;background:currentColor;-webkit-mask:url(/assets/brand/monogram.svg) center/contain no-repeat;mask:url(/assets/brand/monogram.svg) center/contain no-repeat}
.se-in{position:absolute;z-index:1;inset:auto 0 clamp(24px,5svh,44px);text-align:center;padding-inline:var(--gutter)}
.se-mark{--mh:clamp(30px,min(11vw,10svh),90px);display:block;position:relative;margin-inline:auto;height:var(--mh);aspect-ratio:435/64;direction:ltr}
.se-mark i{position:absolute;inset-block:0;left:calc(var(--mh)*var(--x)/64);width:calc(var(--mh)*var(--w)/64);background:currentColor;
  -webkit-mask:url(/assets/brand/wordmark.svg) no-repeat;mask:url(/assets/brand/wordmark.svg) no-repeat;
  -webkit-mask-size:calc(var(--mh)*435/64) var(--mh);mask-size:calc(var(--mh)*435/64) var(--mh);
  -webkit-mask-position:calc(var(--mh)*var(--x)/-64) 0;mask-position:calc(var(--mh)*var(--x)/-64) 0;
  animation:se-ch 1.1s var(--so-e) both;animation-delay:calc(1.75s + var(--i)*.07s)}
.se-mark i:nth-child(1){--i:0;--x:0;--w:30}
.se-mark i:nth-child(2){--i:1;--x:50;--w:55}
.se-mark i:nth-child(3){--i:2;--x:128;--w:12}
.se-mark i:nth-child(4){--i:3;--x:162;--w:52}
.se-mark i:nth-child(5){--i:5;--x:267;--w:54}
.se-mark i:nth-child(6){--i:6;--x:345;--w:29}
.se-mark i:nth-child(7){--i:7;--x:396;--w:39}
.se-sub{font-size:clamp(1.05rem,min(4.6vw,3svh),1.3rem);margin:12px 0 16px;animation:so-rise 1s var(--so-e) 2.4s both}
.se-link{display:inline-block;color:inherit;font-size:1rem;text-decoration:none;border-block-end:1px solid currentColor;padding-block-end:2px;animation:so-rise 1s var(--so-e) 2.55s both}
@keyframes se-settle{from{scale:1.18}}
@keyframes se-big{0%{opacity:0;scale:1.07}35%{opacity:1;scale:1}68%{opacity:1;scale:.985}100%{opacity:0;scale:.9}}
@keyframes se-ch{from{opacity:0;translate:0 .4em}}

/* ---------- Lash Room: the stamp on LED light, then the two photos close in on one diagonal ---------- */
.so-lash{background:#131425;color:#f5f3ef}
.sl-media{--cy:50%;--lt:calc(50% + var(--cy)*.16);--lb:calc(50% - (100% - var(--cy))*.16);position:relative;overflow:hidden;
  background:radial-gradient(60% 45% at 50% var(--cy),#c9d2ff8c,#4a4fd159 45%,#13142500 80%),linear-gradient(180deg,#1c1d40,#131425)}
.sl-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,#131425 0,#13142580 8%,#13142500 22%)}
.sl-pane{position:absolute;inset-block:0;width:62%;overflow:hidden}
.sl-a{right:0;clip-path:polygon(calc((var(--lt) - 38%)/.62) 0,100% 0,100% 100%,calc((var(--lb) - 38%)/.62) 100%)}
.sl-b{left:0;clip-path:polygon(0 0,calc(var(--lt)/.62) 0,calc(var(--lb)/.62) 100%,0 100%)}
.sl-par{position:absolute;inset:0;overflow:hidden}
.sl-par img{width:100%;height:100%;object-fit:cover}
.sl-a img{object-position:58% 50%}
.sl-b img{object-position:40% 30%}
.sl-a .sl-par{animation:sl-from-right 1.6s var(--so-mask) .5s both}
.sl-b .sl-par{animation:sl-from-left 1.6s var(--so-mask) .62s both}
.sl-a img{animation:sl-zoom 1.6s var(--so-mask) .5s both}
.sl-b img{animation:sl-zoom 1.6s var(--so-mask) .62s both}
.sl-me{position:absolute;z-index:2;top:var(--cy);left:50%;width:clamp(58px,min(17vw,13svh),92px);aspect-ratio:1;translate:-50% -50%;animation:sl-stamp 1.7s both}
.sl-eye{position:absolute;inset:0;overflow:hidden;border-radius:50%;box-shadow:0 0 0 1px #d8c29d73}
.sl-eye img{width:100%;height:100%;object-fit:cover}
.sl-ring{position:absolute;top:-30%;left:-30%;width:160%;height:160%;overflow:visible;animation:so-spin 12s linear infinite}
.sl-ring text{direction:ltr;fill:#d8c29d;font:500 19px var(--body);letter-spacing:.02em}
.sl-copy{position:relative;z-index:2;text-align:center;padding:6px var(--gutter) clamp(20px,4svh,40px)}
.sl-title{font-family:"Open Bellefair",var(--display);font-size:clamp(1.65rem,min(7vw,6.4svh),4.4rem);line-height:1.14;max-width:21ch;margin-inline:auto;text-wrap:balance;animation:so-rise 1.4s var(--so-e) 2.35s both}
.sl-sub{font-size:clamp(.95rem,min(4vw,2.6svh),1.15rem);line-height:1.45;max-width:36em;margin:8px auto 14px;opacity:.86;animation:so-fade 1.2s var(--so-e) 2.65s both}
.sl-copy .so-btn{background:#d8c29d;color:#131425;animation:so-fade 1.2s var(--so-e) 2.75s both}
@keyframes sl-from-right{from{translate:100% 0}}
@keyframes sl-from-left{from{translate:-100% 0}}
@keyframes sl-zoom{from{transform:scale(1.6)}}
@keyframes sl-stamp{
  0%{opacity:0;transform:scale(1.44);animation-timing-function:var(--so-e)}
  26%{opacity:1;transform:scale(1.75);animation-timing-function:linear}
  33%{opacity:1;transform:scale(1.75);animation-timing-function:var(--so-mask)}
  100%{opacity:1;transform:none}
}

/* ---------- Sapir Adler: two photos slide in on a diagonal, then her mark and name ---------- */
.so-sapir{background:#f7f2ea;color:#15120f;--lt:57%;--lb:41%}
.ss-media{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 72%,#0000);mask-image:linear-gradient(180deg,#000 72%,#0000)}
.ss-pane{position:absolute;inset-block:0;width:62%;overflow:hidden}
.ss-a{right:0;clip-path:polygon(calc((var(--lt) - 38%)/.62) 0,100% 0,100% 100%,calc((var(--lb) - 38%)/.62) 100%)}
.ss-b{left:0;clip-path:polygon(0 0,calc(var(--lt)/.62) 0,calc(var(--lb)/.62) 100%,0 100%)}
.ss-par{position:absolute;inset:0}
.ss-par img{width:100%;height:100%;object-fit:cover}
.ss-a img{object-position:35% 0}
.ss-b img{object-position:65% 0}
.ss-a .ss-par{animation:sl-from-right 1.5s var(--so-e) .1s both}
.ss-b .ss-par{animation:sl-from-left 1.5s var(--so-e) .22s both}
.ss-copy{position:relative;text-align:center;padding:0 var(--gutter) clamp(18px,3.6svh,36px)}
.ss-seal{width:clamp(30px,6svh,46px);height:auto;margin:0 auto 4px;animation:so-rise 1s var(--so-e) .7s both}
.ss-name{font:italic 300 clamp(2.6rem,min(14vw,11svh),6rem)/1.02 "Open Cormorant",serif;direction:ltr;animation:so-rise 1.1s var(--so-e) .8s both}
.ss-kind{font-size:.9375rem;opacity:.72;margin-top:4px;animation:so-fade 1s var(--so-e) 1s both}
.ss-head{font-family:"Open Bellefair",var(--display);font-size:clamp(1.3rem,min(6vw,4.4svh),2rem);line-height:1.2;margin:4px 0 12px;animation:so-rise 1s var(--so-e) 1.05s both}
.ss-copy .so-btn{background:#15120f;color:#fff;animation:so-rise 1s var(--so-e) 1.15s both}

/* ---------- Yasmina Hairstyle: her gold curtain with the logo lifts off the photos ---------- */
.so-yas{background:#f8f3e9;color:#2c2620}
.sy-media{position:relative;overflow:hidden;isolation:isolate}
.sy-media::after{content:"";position:absolute;inset:auto 0 0;z-index:1;height:30%;background:linear-gradient(0deg,#f8f3e9,#f8f3e900);pointer-events:none}
.sy-cover{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:#7b5e2e;animation:so-lift 1.05s var(--so-curtain) 1s both,so-gone .15s linear 1.95s both}
.sy-word{display:block;overflow:hidden}
.sy-word img{width:auto;height:min(52svh,62vw);max-height:100%;animation:sy-line .7s var(--so-rise) .05s both}
.sy-frame{position:absolute;inset:0;display:grid;grid-template-columns:1fr;animation:sy-up 1.05s var(--so-curtain) 1s both}
.sy-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 0;min-width:0;animation:sy-settle 1.5s cubic-bezier(.165,.84,.44,1) 1s both}
.sy-frame .only-wide{display:none}
.sy-copy{position:relative;z-index:2;text-align:center;padding:0 var(--gutter) clamp(18px,3.6svh,36px)}
.sy-name{font-family:"Open Cardo",serif;font-size:clamp(2rem,min(9.6vw,8.6svh),4.4rem);line-height:1.08;direction:ltr;animation:so-rise 1.1s var(--so-e) 1.4s both}
.sy-kind{font-size:clamp(.95rem,min(3.8vw,2.6svh),1.1rem);opacity:.76;margin:4px 0 12px;animation:so-fade 1s var(--so-e) 1.6s both}
.sy-copy .so-btn{background:#7b5e2e;color:#fff;animation:so-rise 1s var(--so-e) 1.65s both}
@keyframes so-lift{to{transform:translate3d(0,-100%,0)}}
@keyframes so-gone{to{opacity:0}}
@keyframes sy-line{from{transform:translate3d(0,125%,0)}}
@keyframes sy-up{from{transform:translate3d(0,30%,0)}}
@keyframes sy-settle{from{transform:scale(1.1)}}

@media (min-width:900px){
  .so-emio>picture img{object-position:50% 68%}
  .sl-media{--cy:44%}
  .sl-a img{object-position:50% 42%}
  .sl-b img{object-position:50% 24%}
  .ss-par img,.ss-a img,.ss-b img{object-position:50% 0}
  .sy-frame{grid-template-columns:repeat(3,1fr);gap:6px}
  .sy-frame .only-wide{display:block}
}
@media (hover:hover){.so-btn:hover{transform:translateY(-2px)}}