/* SHIFT7 MacBook mockup animation, staged 2026-11-14.
   Homepage: scroll-scrubbed CSS 3D MacBook (js/mockup-anim.js adds .mb-on).
   Tool pages: scroll-linked rise and glass sheen on the existing device images.
   Reduced motion: nothing here runs; the static mockups stay as they are. */

/* ---------- Homepage 3D MacBook ---------- */
/* body overflow-x:hidden makes body a scroll box, which stops position:sticky; clip keeps the same look without that */
body:has(.mb-on){overflow-x:clip}
.mb-on .flow-stage,.mb-on .flow-ui{display:none !important}
.mb-track{position:relative;height:calc(100svh + 430vh);margin:var(--s-3) 0 0}
.mb-sticky{position:sticky;top:var(--mb-top,84px);height:calc(100svh - var(--mb-top,84px));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);overflow:visible}
.mb-scene{--w:min(760px,86vw,calc((100svh - var(--mb-top,84px) - 258px) / 0.84));position:relative;width:var(--w);height:calc(var(--w) * 0.83);perspective:4200px;perspective-origin:50% 62%;flex:0 0 auto}
.mb{position:absolute;left:0;right:0;top:calc(var(--w) * 0.035);margin:0 auto;width:var(--w);height:calc(var(--w) * 0.635);transform-style:preserve-3d;transform-origin:50% 100% calc(var(--w) * 0.3);will-change:transform}
.mb-lid{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 100%;will-change:transform}
.mb-lid-front,.mb-lid-back{position:absolute;inset:0;border-radius:calc(var(--w) * 0.028) calc(var(--w) * 0.028) calc(var(--w) * 0.008) calc(var(--w) * 0.008);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mb-lid-front{background:#0b0c0e;box-shadow:inset 0 0 0 1px #3a3d42,inset 0 0 0 2px #131417}
.mb-lid-back{transform:rotateY(180deg) translateZ(1px);background:linear-gradient(160deg,#4a4d52 0%,#37393c 45%,#2b2d30 100%);box-shadow:inset 0 0 0 1px rgba(234,242,251,0.10)}
.mb-cam{position:absolute;top:calc(var(--w) * 0.012);left:50%;width:calc(var(--w) * 0.008);height:calc(var(--w) * 0.008);margin-left:calc(var(--w) * -0.004);border-radius:50%;background:#1d2a3a;box-shadow:0 0 0 1px #050607}
.mb-screen{position:absolute;left:2.3%;right:2.3%;top:3.6%;bottom:4.2%;overflow:hidden;background:#05080d;border-radius:2px}
.mb-shot{position:absolute;inset:0;visibility:hidden;will-change:transform;transform-origin:50% 30%;box-shadow:0 -10px 30px rgba(3,10,24,0.35)}
.mb-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.mb-chip{position:absolute;right:2%;bottom:3%;font-family:var(--font-mono);font-size:max(9px,calc(var(--w) * 0.013));letter-spacing:0.06em;text-transform:uppercase;color:#EAF2FB;background:rgba(9,22,39,0.86);border:1px solid #1E3A5E;border-radius:4px;padding:0.35em 0.7em}
.mb-off{position:absolute;inset:0;z-index:4;background:#05080d;pointer-events:none}
.mb-band{position:absolute;z-index:5;left:0;right:0;top:0;height:22%;background:linear-gradient(180deg,rgba(185,207,230,0) 0%,rgba(185,207,230,0.16) 70%,rgba(234,242,251,0.28) 100%);opacity:0;pointer-events:none;will-change:transform,opacity}
.mb-glass{position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(112deg,rgba(234,242,251,0) 34%,rgba(234,242,251,0.085) 44%,rgba(234,242,251,0.025) 52%,rgba(234,242,251,0) 60%);background-size:260% 100%;background-repeat:no-repeat;will-change:background-position}
.mb-base{position:absolute;left:-1.2%;right:-1.2%;top:100%;height:calc(var(--w) * 0.6);transform-origin:50% 0;transform:rotateX(90deg);border-radius:0 0 calc(var(--w) * 0.03) calc(var(--w) * 0.03);background:linear-gradient(180deg,#26282b 0%,#3a3d41 5%,#383b3f 55%,#303337 100%);box-shadow:inset 0 0 0 1px rgba(234,242,251,0.07)}
.mb-hinge{position:absolute;left:0;right:0;top:0;height:3.5%;background:linear-gradient(180deg,#141518,#2a2c30)}
.mb-keys{position:absolute;left:9%;right:9%;top:8%;height:46%;border-radius:4px;background:#25272a;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.35)}
.mb-keys:before{content:"";position:absolute;inset:2.5%;border-radius:2px;background:repeating-linear-gradient(90deg,#1b1c1f 0 6.0%,transparent 6.0% 6.66%);-webkit-mask:repeating-linear-gradient(180deg,#000 0 14.2%,transparent 14.2% 16.66%);mask:repeating-linear-gradient(180deg,#000 0 14.2%,transparent 14.2% 16.66%)}
.mb-grille{position:absolute;top:8%;height:46%;width:5%;background:radial-gradient(circle,rgba(0,0,0,0.45) 0.6px,transparent 1px) 0 0/5px 5px}
.mb-grille.l{left:2.5%}.mb-grille.r{right:2.5%}
.mb-pad{position:absolute;left:30%;right:30%;top:59%;bottom:6%;border-radius:6px;background:linear-gradient(180deg,#3c3f43,#36393d);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.28),inset 0 1px 0 rgba(234,242,251,0.05)}
.mb-spill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(185,207,230,0.16) 0%,rgba(185,207,230,0.04) 40%,rgba(185,207,230,0) 70%);opacity:0;pointer-events:none}
.mb-lip{position:absolute;left:-1.2%;right:-1.2%;top:100%;height:calc(var(--w) * 0.022);transform-origin:50% 0;border-radius:0 0 calc(var(--w) * 0.02) calc(var(--w) * 0.02);background:linear-gradient(180deg,#6a6e74 0%,#3a3d41 30%,#232427 100%);transform:translateZ(calc(var(--w) * 0.6))}
.mb-lip:after{content:"";position:absolute;left:44%;right:44%;top:0;height:45%;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#26282b,#3a3d41)}
.mb-floor{position:absolute;left:-8%;right:-8%;top:100%;height:calc(var(--w) * 0.8);transform-origin:50% 0;transform:rotateX(90deg) translateY(calc(var(--w) * -0.07)) translateZ(calc(var(--w) * -0.024));background:radial-gradient(50% 42% at 50% 46%,rgba(3,10,24,0.75),rgba(3,10,24,0) 100%);pointer-events:none}
.mb-copy{display:flex;flex-direction:column;align-items:center;gap:6px;will-change:opacity}
.mb-hud{display:flex;align-items:center;gap:var(--s-2);font-family:var(--font-mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.mb-count{min-width:5.5em;display:inline-flex;justify-content:flex-end;align-items:center;color:var(--bright);white-space:pre}
.mb-roll{display:inline-block;height:1.5em;line-height:1.5em;overflow:hidden}
.mb-col{display:flex;flex-direction:column;transition:transform 0.55s cubic-bezier(0.2,0.8,0.2,1);will-change:transform}
.mb-col span{display:block;height:1.5em}
.mb-of{color:var(--muted);line-height:1.5em}
.mb-ticks{display:flex;gap:4px}
.mb-ticks button{appearance:none;border:0;background:transparent;padding:12px 0;width:44px;cursor:pointer;display:block;position:relative}
.mb-fill{position:absolute;left:0;right:0;top:12px;height:2px;border-radius:2px;background:var(--bright);transform-origin:0 50%;transform:scaleX(0);will-change:transform;pointer-events:none}
.mb-ticks button.is-past .mb-fill{background:var(--muted)}
.mb-ticks button:before{content:"";display:block;height:2px;border-radius:2px;background:var(--border)}
.mb-ticks button:focus-visible{outline:2px solid var(--bright);outline-offset:2px}
.mb-cp{transition:transform 0.34s cubic-bezier(0.2,0.8,0.2,1) var(--d,0ms),opacity 0.3s ease var(--d,0ms)}
.mb-out-up .mb-cp,.mb-out-down .mb-cp{opacity:0;transition-duration:0.18s;transition-delay:calc(var(--d,0ms) * 0.5)}
.mb-out-up .mb-cp{transform:translateY(-12px)}
.mb-out-down .mb-cp{transform:translateY(12px)}
.mb-in-from .mb-cp,.mb-in-from-up .mb-cp{opacity:0;transition:none}
.mb-in-from .mb-cp{transform:translateY(14px)}
.mb-in-from-up .mb-cp{transform:translateY(-14px)}
.mb-on .flow-caption{margin-top:0;min-height:10.6em;max-width:44em;padding:0 var(--s-2)}
.mb-on .flow-caption h3{margin-bottom:4px}
.mb-on .flow-caption .tag{margin-bottom:4px}
@media (max-width:900px){
  .mb-track{height:calc(100svh + 360vh)}
  .mb-scene{--w:min(86vw,calc((100svh - var(--mb-top,72px) - 330px) / 0.84))}
  .mb-ticks button{width:30px}
  .mb-on .flow-caption{font-size:16px;min-height:13.3em}
  .mb-on .flow-caption .cap{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
  .mb-track{display:none !important}
}

/* ---------- Tool pages and explorer: rise and sheen on device images ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference) {
    .shot-frame:has(img.device) picture,.explorer-frame:has(img.device) picture{display:block;position:relative}
    .shot-frame img.device,.explorer-frame img.device{transform-origin:50% 92%;animation:mb-rise linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
    .shot-frame:has(img.device) picture::after,.explorer-frame:has(img.device) picture::after{content:"";position:absolute;left:5.94%;width:88.06%;top:8.26%;height:76.4%;pointer-events:none;background:linear-gradient(112deg,rgba(234,242,251,0) 38%,rgba(234,242,251,0.12) 47%,rgba(234,242,251,0.03) 53%,rgba(234,242,251,0) 60%);background-size:280% 100%;background-repeat:no-repeat;animation:mb-sheen linear both;animation-timeline:view();animation-range:entry 30% exit 70%}
    @keyframes mb-rise{
      from{transform:perspective(1600px) rotateX(26deg) translateY(48px) scale(0.92);opacity:0.25}
      70%{opacity:1}
      to{transform:perspective(1600px) rotateX(0deg) translateY(0) scale(1);opacity:1}
    }
    /* captions and controls under the static mockups: slide up and fade in on scroll-in, staggered */
    .shot-frame:has(img.device) figcaption,.run-item:has(.shot-frame img.device) > div > *,.explorer:has(img.device) .modules,.explorer:has(img.device) .explorer-caption,.explorer:has(img.device) .see-btn-wrap{animation:mb-up linear both;animation-timeline:view();animation-range:entry 5% cover 28%}
    .run-item:has(.shot-frame img.device) > div > :nth-child(2),.explorer:has(img.device) .explorer-caption{animation-range:entry 12% cover 33%}
    .run-item:has(.shot-frame img.device) > div > :nth-child(n+3),.explorer:has(img.device) .see-btn-wrap{animation-range:entry 18% cover 38%}
    @keyframes mb-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
    @keyframes mb-sheen{from{background-position:100% 0}to{background-position:0% 0}}
  }
}