/* Concept D "Pages assembling" as a reusable home-page hero. Mount with window.mountAssembleHero(el).
   The scene is designed at 1100×620 and scaled to cover its stage (--s); on narrow stages --ws shrinks the world. */
.hero-assemble{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow),0 0 0 1px var(--line)}
.hero-assemble.stage--narrow{aspect-ratio:4/3;--ws:.86}
.hero-assemble .scene{position:absolute;left:50%;top:50%;width:1100px;height:620px;margin:-310px 0 0 -550px;transform:scale(var(--s,.5));perspective:1400px;perspective-origin:50% 42%}
.hero-assemble .world{position:absolute;inset:0;transform-style:preserve-3d}
.hero-assemble.is-off .scene *{animation-play-state:paused}
.hero-assemble{background:
  radial-gradient(50% 60% at 20% 80%,rgba(25,179,148,.12),transparent 70%),
  radial-gradient(50% 60% at 80% 10%,rgba(106,76,255,.18),transparent 70%),
  linear-gradient(180deg,#f6f3fb 0%,#faf9f6 100%)}
.d-world{transform:scale(var(--ws,1))}
.d-page{position:absolute;left:150px;top:74px;width:640px;height:470px;border-radius:14px;background:#fff;transform:rotateX(14deg) rotateY(-18deg);transform-style:preserve-3d;box-shadow:0 50px 90px -30px rgba(22,19,31,.35),0 0 0 1px var(--line)}
.d-page::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;transform:translateZ(-1px)}
.d-piece{position:absolute;transform-style:preserve-3d;animation-duration:9s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:linear;animation-delay:var(--d-seek,0s)}
.d-nav{left:18px;top:18px;width:604px;height:40px;display:flex;align-items:center;gap:12px;padding:0 6px;animation-name:d-nav}
.d-logo{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.d-links{display:flex;gap:8px;margin-left:6px}.d-links i{width:34px;height:7px;border-radius:4px;background:#e5e1ee}
.d-cta{margin-left:auto;font:700 10px/22px var(--font-body);color:#fff;background:var(--ink);border-radius:11px;padding:0 10px}
.d-hero{left:18px;top:72px;width:604px;height:156px;display:grid;grid-template-columns:1fr 240px;gap:24px;align-items:center;animation-name:d-hero}
.d-text{display:grid;gap:9px}
.d-h1{height:16px;border-radius:6px;background:var(--ink);width:92%}.d-h1.short{width:62%}
.d-p{height:8px;border-radius:4px;background:#e5e1ee;width:80%}.d-p.short{width:58%}
.d-btn{margin-top:6px;width:max-content;font:700 10px/26px var(--font-body);color:#fff;background:var(--accent);border-radius:13px;padding:0 12px}
.d-img{height:156px;border-radius:12px;background:linear-gradient(140deg,#efe9ff 0%,#ffd9cc 100%);position:relative;overflow:hidden}
.d-img::before{content:"";position:absolute;left:50%;top:50%;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));opacity:.85}
.d-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(180deg,transparent,rgba(106,76,255,.22))}
.d-card{top:244px;width:202px;height:108px;border-radius:10px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 18px rgba(22,19,31,.08);padding:8px;display:grid;gap:7px;align-content:start}
.d-card--1{left:18px;animation-name:d-card1}.d-card--2{left:219px;animation-name:d-card2}.d-card--3{left:420px;animation-name:d-card3}
.d-thumb{height:52px;border-radius:7px}
.d-card--1 .d-thumb{background:linear-gradient(135deg,#c8b8ff,#8f78ff)}.d-card--2 .d-thumb{background:linear-gradient(135deg,#ffc6b4,#ff7a59)}.d-card--3 .d-thumb{background:linear-gradient(135deg,#9fe7d6,#19b394)}
.d-line{height:8px;border-radius:4px;background:#e5e1ee;width:70%}.d-line.short{width:45%}
.d-cal{left:18px;top:368px;width:340px;height:84px;border-radius:10px;background:var(--surface-2);padding:8px 10px;display:grid;grid-template-rows:auto 1fr;gap:6px;animation-name:d-cal}
.d-cal-head{display:flex;align-items:center;justify-content:space-between;font:700 9px/1 var(--font-body);color:var(--ink);letter-spacing:.06em;text-transform:uppercase}
.d-cal-head i{width:28px;height:6px;border-radius:3px;background:rgba(106,76,255,.35)}
.d-days{display:grid;grid-template-columns:repeat(14,1fr);gap:4px}
.d-days i{height:16px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px rgba(106,76,255,.12)}
.d-days i.busy{background:#e3ddf7}
.d-days i.pick{background:var(--accent);box-shadow:0 4px 10px rgba(106,76,255,.4)}
.d-book{left:404px;top:378px;width:218px;height:62px;border-radius:31px;background:var(--accent);color:#fff;font:700 18px/62px var(--font-body);text-align:center;box-shadow:0 14px 30px rgba(106,76,255,.4),inset 0 -2px 0 rgba(0,0,0,.12);animation-name:d-book}
.d-book::after{content:"";position:absolute;inset:-10px;border-radius:inherit;border:2px solid var(--accent);opacity:0;animation:d-ring 9s linear infinite;animation-delay:var(--d-seek,0s)}
.d-shadow{position:absolute;left:150px;top:74px;width:640px;height:470px;border-radius:14px;transform:rotateX(14deg) rotateY(-18deg) translateZ(-60px) translate(20px,40px);background:radial-gradient(ellipse at 50% 50%,rgba(22,19,31,.28),transparent 70%)}

/* the phone version slides in beside the page at the end */
.d-phone{position:absolute;left:822px;top:120px;width:200px;height:410px;border-radius:30px;background:#141218;transform:rotateY(-18deg) rotateX(6deg);transform-style:preserve-3d;box-shadow:0 40px 70px -20px rgba(22,19,31,.45),inset 0 0 0 2px #3a3744,inset 0 0 0 3px #0c0b10;animation:d-phone 9s linear infinite both;animation-delay:var(--d-seek,0s)}
.d-phone::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#221f2a;transform:translateZ(-8px)}
.d-phone::after{content:"";position:absolute;left:50%;top:12px;width:56px;height:14px;margin-left:-28px;border-radius:7px;background:#000;z-index:2}
.d-pscreen{position:absolute;inset:8px;border-radius:23px;background:#fff;overflow:hidden;padding:30px 10px 10px;display:grid;gap:9px;align-content:start}
.d-pnav{display:flex;align-items:center;gap:6px}.d-pnav .d-logo{width:16px;height:16px;border-radius:5px}.d-pnav i{width:14px;height:2px;background:var(--ink);border-radius:1px;display:block;box-shadow:0 4px 0 var(--ink),0 -4px 0 var(--ink);margin-left:auto;margin-right:4px}
.d-phero{display:grid;gap:6px}
.d-phero .d-h1{height:11px;width:96%}.d-phero .d-h1.short{width:60%}.d-phero .d-p{height:6px}
.d-phero .d-btn{font:700 8px/20px var(--font-body);border-radius:10px;padding:0 9px;margin-top:2px}
.d-pimg{height:64px;border-radius:9px;background:linear-gradient(140deg,#efe9ff,#ffd9cc);position:relative;overflow:hidden}
.d-pimg::before{content:"";position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));opacity:.85}
.d-pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.d-pcards i{display:block;height:40px;border-radius:7px}
.d-pcards i:nth-child(1){background:linear-gradient(135deg,#c8b8ff,#8f78ff)}.d-pcards i:nth-child(2){background:linear-gradient(135deg,#ffc6b4,#ff7a59)}.d-pcards i:nth-child(3){background:linear-gradient(135deg,#9fe7d6,#19b394)}
.d-pcal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:6px;border-radius:8px;background:var(--surface-2)}
.d-pcal i{height:9px;border-radius:2px;background:#fff}.d-pcal i.busy{background:#e3ddf7}.d-pcal i.pick{background:var(--accent)}
.d-pbook{height:30px;border-radius:15px;background:var(--accent);color:#fff;font:700 11px/30px var(--font-body);text-align:center;box-shadow:0 8px 16px rgba(106,76,255,.35)}

/* one 9-second timeline; the resting state (no transform) is the assembled page, so reduced-motion shows the finished frame */
@keyframes d-nav{0%,2%{opacity:0;transform:translate3d(0,-140px,-360px) rotateX(-50deg)}12%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.7,.2,1)}90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translate3d(0,-30px,-160px)}}
@keyframes d-hero{0%,8%{opacity:0;transform:translate3d(-260px,40px,-420px) rotateY(50deg)}20%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.7,.2,1)}90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translate3d(-60px,0,-160px)}}
@keyframes d-card1{0%,16%{opacity:0;transform:translate3d(-120px,240px,-300px) rotateX(60deg)}26%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.7,.2,1)}90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translate3d(0,60px,-160px)}}
@keyframes d-card2{0%,20%{opacity:0;transform:translate3d(0,300px,-200px) rotateX(70deg)}30%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.7,.2,1)}90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translate3d(0,60px,-160px)}}
@keyframes d-card3{0%,24%{opacity:0;transform:translate3d(140px,240px,-300px) rotateX(60deg) rotateY(-30deg)}34%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.7,.2,1)}90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translate3d(0,60px,-160px)}}
@keyframes d-cal{0%,30%{opacity:0;transform:translate3d(-320px,120px,-240px) rotateZ(-14deg)}40%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.7,.2,1)}90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translate3d(-40px,40px,-160px)}}
@keyframes d-book{0%,36%{opacity:0;transform:translate3d(0,0,520px) scale(1.5)}44%{opacity:1;transform:translate3d(0,0,-8px) scale(.94);animation-timing-function:cubic-bezier(.2,.7,.2,1)}48%{transform:none;animation-timing-function:ease-out}90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translate3d(0,40px,-160px)}}
@keyframes d-ring{0%,44%{opacity:.8;transform:scale(.75)}56%{opacity:0;transform:scale(1.25)}100%{opacity:0;transform:scale(1.25)}}
@keyframes d-phone{0%,52%{opacity:0;transform:translate3d(160px,30px,-260px) rotateY(-60deg) rotateX(6deg)}64%{opacity:1;transform:rotateY(-18deg) rotateX(6deg);animation-timing-function:cubic-bezier(.2,.7,.2,1)}90%{opacity:1;transform:rotateY(-18deg) rotateX(6deg)}96%,100%{opacity:0;transform:translate3d(60px,20px,-160px) rotateY(-18deg) rotateX(6deg)}}