/* ===== Motion : la page s'éveille au scroll ===== */

/* Révélations : seulement quand le JS et le mouvement sont actifs. */
html.motion .reveal{opacity:0;transform:translateY(28px) scale(.985);filter:blur(6px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1),filter .9s ease;
  transition-delay:calc(var(--i,0) * 80ms);will-change:opacity,transform}
html.motion .reveal.in{opacity:1;transform:none;filter:none}

/* Héros : éveil au chargement, ligne par ligne, puis effacement doux au scroll. */
html.motion .wake{opacity:0;transform:translateY(22px);filter:blur(8px);animation:wake 1.2s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.15s + var(--i,0) * 120ms)}
@keyframes wake{to{opacity:1;transform:none;filter:none}}
html.motion .hero-fade{transform:translateY(calc(var(--hp,0) * -60px)) scale(calc(1 - var(--hp,0) * .04));opacity:calc(1 - var(--hp,0) * .9)}

/* ===== Scène MacBook Air épinglée ===== */
section.mac-scene{position:relative;height:var(--scene-h,320vh);padding:0;border-top:0;background:var(--bg)}
.mac-sticky{--W:min(820px,76vw,calc((100svh - 330px) * 1.22));position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;align-items:center;padding:92px 16px 26px;gap:12px}
.mac-caps{display:grid;text-align:center;place-items:end center;font-size:clamp(28px,4.4vw,54px);min-height:2.25em;font-family:Sora,Inter,sans-serif;z-index:2}
.mac-caps .cap{grid-area:1/1;margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.08;font-size:1em;max-width:18ch;text-wrap:balance;
  opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 18px));filter:blur(calc((1 - var(--o,0)) * 8px))}
.mac-caps .cap small{display:block;font:600 13px Inter,sans-serif;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.mac-caps .cap em{font-style:normal;color:var(--blue)}
html:not(.motion) .mac-caps .cap:last-child{opacity:1}
.mac-cta{display:flex;justify-content:center;opacity:var(--ctaO,1);transform:translateY(calc((1 - var(--ctaO,1)) * 10px))}

/* Le MacBook Air en 3D */
.mb-stage{position:relative;width:100%;display:grid;place-items:center;perspective:calc(var(--W) * 3.4);perspective-origin:50% 30%;min-height:0;padding-bottom:calc(var(--W) * .1)}
.mb{position:relative;width:var(--W);aspect-ratio:1.47;transform-style:preserve-3d;
  transform:translateY(-6%) rotateX(-8deg) rotateY(0deg);will-change:transform}
.mb-lid{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 100%;transform:rotateX(12deg)}
.mb-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:3.1% 3.1% .9% .9% / 4.6% 4.6% 1.3% 1.3%}
/* Écran : cadre noir fin, liseré aluminium gris sidéral. */
.mb-front{background:#050506;box-shadow:0 0 0 calc(var(--W) * .0042) #7a7c81,0 0 0 calc(var(--W) * .0058) #4a4c50,inset 0 0 0 calc(var(--W) * .0016) #1d1e21;padding:2.1% 2.1% 4.1%}
.mb-front::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4.1%;border-radius:0 0 .9% .9% / 0 0 30% 30%;
  background:linear-gradient(#17181b,#0c0c0e 70%,#1d1e21)}
.mb-back{transform:translateZ(calc(var(--W) * -.011)) rotateY(180deg);background:
  radial-gradient(110% 80% at 30% 15%,rgba(255,255,255,.16),transparent 60%),
  linear-gradient(160deg,#8a8c91 0%,#76787d 45%,#64666b 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.mb-display{position:relative;width:100%;height:100%;border-radius:1.15% / 1.75%;overflow:hidden;background:#000;container-type:size}
.mb-wall{position:absolute;inset:0;background:#000 center/cover no-repeat;opacity:var(--light,1)}
.mb-glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 38%);mix-blend-mode:screen}
.mb-menubar{position:absolute;inset:0 0 auto 0;height:3.35cqh;display:flex;align-items:center;justify-content:space-between;padding:0 1.5cqw;
  color:#fff;font:600 .9cqw/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,sans-serif;opacity:var(--bar,1);text-shadow:0 0 .2cqw rgba(0,0,0,.25)}
.mb-menubar .l,.mb-menubar .r{display:flex;gap:1.35cqw;align-items:center}
.mb-menubar .l span:not(:first-child){font-weight:500}
.mb-menubar .r{gap:1.1cqw;font-weight:500}
.mb-menubar svg{height:1.05cqw;width:auto;display:block}
.mb-notch{position:absolute;left:50%;top:0;transform:translateX(-50%);width:12.6cqw;height:3.35cqh;background:#000;border-radius:0 0 .75cqw .75cqw;z-index:3}
.mb-isl{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:4;
  width:calc(12.6cqw + (49.8cqw - 12.6cqw) * var(--open,1));height:calc(3.35cqh + (16.7cqh - 3.35cqh) * var(--open,1))}
.mb-isl::before{content:"";position:absolute;inset:0;background:#000;border-radius:0 0 calc(.75cqw + 1.05cqw * var(--open,1)) calc(.75cqw + 1.05cqw * var(--open,1));
  box-shadow:0 calc(1cqw * var(--open,1)) calc(2.6cqw * var(--open,1)) calc(-.8cqw * var(--open,1)) rgba(0,0,0,.55)}
.mb-isl img{position:absolute;top:0;left:50%;width:51.7cqw;height:16.7cqh;max-width:none;transform:translateX(-50%) scale(calc(.97 + .03 * var(--show,1)));transform-origin:50% 0;opacity:var(--show,1)}
.mb-cursor{position:absolute;z-index:6;width:.95cqw;height:auto;opacity:var(--curO,0);filter:drop-shadow(0 .1cqw .15cqw rgba(0,0,0,.35));
  left:calc(66cqw - (66cqw - 51.2cqw) * var(--cur,0));top:calc(60cqh - (60cqh - 1.2cqh) * var(--cur,0))}
/* Base : dessus en gris sidéral, clavier noir, trackpad. */
.mb-base{position:absolute;left:0;top:100%;width:100%;height:69%;transform-origin:50% 0;transform:rotateX(90deg);transform-style:preserve-3d}
.mb-deck{position:absolute;inset:0;border-radius:.6% .6% 3.4% 3.4% / .9% .9% 5% 5%;
  background:radial-gradient(80% 55% at 50% 10%,rgba(255,255,255,.10),transparent 70%),linear-gradient(#85878c,#76787d 55%,#6c6e73);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);opacity:var(--deck,1)}
.mb-hinge{position:absolute;left:11%;right:11%;top:0;height:2%;background:linear-gradient(#3b3d41,#5d5f63);border-radius:0 0 4px 4px}
.mb-kb{position:absolute;left:4.8%;right:4.8%;top:7.5%;height:50%;background:rgba(40,42,46,.55);border-radius:1%/2%;padding:.55% .5%;display:flex;flex-direction:column;gap:1.1%;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.mb-row{display:flex;gap:.55%;flex:1}
.mb-row.f{flex:.62}
.mb-row i{flex:var(--w,1);background:linear-gradient(#232427,#141517);border-radius:10%/16%;box-shadow:0 1px 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05)}
.mb-row i.ar{display:flex;flex-direction:column;gap:6%;background:none;box-shadow:none}
.mb-row i.ar b{flex:1;background:linear-gradient(#232427,#141517);border-radius:10%/22%}
.mb-pad{position:absolute;left:29%;width:42%;top:61.5%;height:35.5%;border-radius:2.4%/4%;
  background:linear-gradient(#7c7e83,#74767b);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.12)}
.mb-lip{position:absolute;left:0;right:0;bottom:0;height:3.5%;transform-origin:50% 100%;transform:rotateX(-90deg);
  background:linear-gradient(#a3a5aa 0%,#7d7f84 22%,#5f6166 65%,#46484c 100%);border-radius:0 0 2.2% 2.2% / 0 0 60% 60%}
.mb-lip::after{content:"";position:absolute;left:42.5%;right:42.5%;top:0;height:42%;background:linear-gradient(#55575c,#8a8c91);border-radius:0 0 40% 40% / 0 0 100% 100%;box-shadow:inset 0 1px 1px rgba(0,0,0,.35)}
.mb-side{position:absolute;top:0;bottom:0;width:calc(var(--W) * .024);background:linear-gradient(90deg,#8a8c91,#55575c)}
.mb-side.l{left:0;transform-origin:0 50%;transform:rotateY(-90deg)}
.mb-side.r{right:0;transform-origin:100% 50%;transform:rotateY(90deg)}
.mb-edge{position:absolute;background:linear-gradient(#9c9ea3,#5f6166)}
.mb-edge.t{left:3%;right:3%;top:0;height:calc(var(--W) * .011);transform-origin:50% 0;transform:rotateX(-90deg)}
.mb-edge.l{left:0;top:4.5%;bottom:1.5%;width:calc(var(--W) * .011);transform-origin:0 50%;transform:rotateY(90deg)}
.mb-edge.r{right:0;top:4.5%;bottom:1.5%;width:calc(var(--W) * .011);transform-origin:100% 50%;transform:rotateY(-90deg)}
.mb-shadow{position:absolute;left:-6%;right:-6%;top:-4%;bottom:-10%;transform:translateZ(-2px);
  background:radial-gradient(50% 50% at 50% 55%,rgba(10,15,25,.45),rgba(10,15,25,0) 70%);filter:blur(14px);opacity:var(--deck,1)}
.mb-fallback{width:min(860px,90vw);height:auto;border-radius:12px}
.mb-built .mb-fallback{display:none}

@media (prefers-reduced-motion: reduce){
  section.mac-scene{height:auto}
  .mac-sticky{position:relative;height:auto;padding:64px 16px;gap:24px}
  .mac-caps .cap{opacity:0}
  .mac-caps .cap:last-child{opacity:1;transform:none;filter:none}
}