.clip{position:relative;height:clamp(560px,88vh,800px);background:#0b2530;overflow:hidden;color:#fff}
.clip:before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 140px rgba(0,0,0,.4)}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s,visibility .9s}.scene.on{opacity:1;visibility:visible;z-index:2}
.art-wrap{position:absolute;top:0;bottom:0;right:0;width:76%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.art-wrap .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,28,38,.92) 0,rgba(8,28,38,.45) 34%,rgba(8,28,38,0) 58%)}
.cap{position:absolute;left:0;right:0;top:50%;transform:translateY(-52%);padding:0 22px;z-index:3}.cap>*{max-width:520px}
.cap h1,.cap h2{font-size:clamp(2.2rem,4.8vw,3.9rem);font-weight:800;letter-spacing:-.02em;max-width:13ch;margin-bottom:.35em;text-shadow:0 4px 24px rgba(0,0,0,.45)}
.cap p{font-size:1.15rem;opacity:.94;margin:0 0 28px}
.scene.on .cap>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}.scene.on .cap p{animation-delay:.15s}.scene.on .cap .btn{animation-delay:.3s}@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.ctl{position:absolute;z-index:4;left:0;right:0;bottom:64px;display:flex;gap:10px;align-items:center;padding:0 22px}
.pp{width:38px;height:38px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.25);color:#fff;font-size:.7rem;cursor:pointer}
.ctl .bar{flex:0 1 120px;height:22px;background:none;border:0;padding:9px 0;cursor:pointer}
.ctl .bar i{display:block;height:4px;background:rgba(255,255,255,.3);position:relative;border-radius:2px}
.ctl .bar i:after{content:"";position:absolute;inset:0;background:var(--sun);transform:scaleX(0);transform-origin:left;border-radius:2px}
.ctl .bar.on i:after{animation:fill 9s linear forwards}@keyframes fill{to{transform:scaleX(1)}}
.pp:focus-visible,.ctl .bar:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.clip.paused *,.clip.paused *:after{animation-play-state:paused!important}.clip.single .ctl .bar,.clip.single .pp{display:none}

/* Scena 1: fațada reală, roletele coboară peste ferestre */
.kb{transform-origin:860px 520px}.on .kb{animation:kb 12s ease-out forwards}@keyframes kb{from{transform:scale(1)}to{transform:scale(1.1)}}
.rl{transform:scaleY(0)}.on .rl{animation:rl 3s cubic-bezier(.45,0,.25,1) forwards}@keyframes rl{to{transform:scaleY(1)}}

/* Scena 2: produsul real, decupat în straturi */
.pr{background:radial-gradient(ellipse at 52% 46%,#215d78 0,#123a4c 42%,#0b2530 72%)}
.stage{position:absolute;inset:0;display:grid;place-items:center}
.pbox{position:relative;height:92%;aspect-ratio:1}.pbox>img{position:absolute;inset:0;width:100%;height:100%}
.p-frame{filter:drop-shadow(0 26px 24px rgba(0,0,0,.5))}
.floor{position:absolute;left:28%;width:46%;top:93%;height:5%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);filter:blur(5px)}
.p-fab{clip-path:polygon(30.89% 21.11%,61.56% 14.22%,61.56% 9.33%,30.89% 16.44%)}
.p-bar{clip-path:polygon(30.9% 59.2%,61.4% 62.7%,61.4% 67.9%,30.9% 64.2%);transform-origin:31% 59.2%;transform:translateY(-42.9%) skewY(-19.2deg)}
.on .p-fab{animation:fabdn 3.4s .9s cubic-bezier(.45,0,.25,1) forwards}.on .p-bar{animation:bardn 3.4s .9s cubic-bezier(.45,0,.25,1) forwards}
@keyframes fabdn{to{clip-path:polygon(30.89% 21.11%,61.56% 14.22%,61.56% 63.56%,30.89% 60%)}}@keyframes bardn{to{transform:none}}
.p-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.p-lines path{stroke:var(--sun);stroke-width:1.3;fill:none;stroke-dasharray:140;stroke-dashoffset:140}.p-lines circle{fill:var(--sun);opacity:0}
.on .p-lines path{animation:draw .6s var(--d) forwards}.on .p-lines circle{animation:dot .3s var(--d) forwards}@keyframes draw{to{stroke-dashoffset:0}}@keyframes dot{to{opacity:1}}
.p-lines g{}
.chip{position:absolute;width:max-content;max-width:190px;transform:translate(-10px,-50%);opacity:0;background:rgba(8,28,38,.78);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);border-left:3px solid var(--sun);padding:8px 12px;border-radius:6px;font-weight:600;font-size:.92rem;line-height:1.3;box-shadow:0 14px 26px -10px rgba(0,0,0,.7);z-index:2}
.chip.l{border-left:1px solid rgba(255,255,255,.2);border-right:3px solid var(--sun);text-align:right}
.on .chip{animation:chipin .6s var(--d) forwards}@keyframes chipin{to{opacity:1;transform:translate(0,-50%)}}

/* Scena 3 / media proprie */
.ph{transform-origin:84% 55%}.on .ph{animation:kb2 12s ease-out forwards}@keyframes kb2{from{transform:scale(1.02)}to{transform:scale(1.22)}}

.clip.static *{animation:none!important}.clip.static .rl{transform:none}.clip.static .p-fab{clip-path:polygon(30.89% 21.11%,61.56% 14.22%,61.56% 63.56%,30.89% 60%)}.clip.static .p-bar{transform:none}
.clip.static .chip{opacity:1;transform:translate(0,-50%)}.clip.static .p-lines path{stroke-dashoffset:0}.clip.static .p-lines circle{opacity:1}.clip.static .ctl{display:none}
@media(max-width:800px){
 .art-wrap{width:100%;height:60%;bottom:auto;-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 28%);mask-image:linear-gradient(0deg,transparent 0,#000 28%)}
 .shade{background:linear-gradient(0deg,rgba(8,28,38,.97) 36%,rgba(8,28,38,0) 66%)}.cap{top:auto;bottom:96px;transform:none}.cap h1,.cap h2{font-size:1.9rem}.cap p{font-size:1rem;margin-bottom:18px}
 .chip,.p-lines{display:none}.pbox{height:100%}.ctl{bottom:50px}}