/* =========================================================
   Studio Display mockup, the reusable version of the
   studio-display.html concept. Drop a screenshot into
   .monitor__screen img; the display sizes to its container.
   Sizes are in cqw (percent of the mockup width) so the
   bezel and edges stay in proportion at any width.
   Tilt and light follow the pointer through --mx / --my /
   --light-x / --light-y, set by display-mockup.js.
   ========================================================= */
.display-mockup{--mx:0;--my:0;--light-x:64%;--light-y:12%;--tilt-x:3deg;--tilt-y:-16deg;position:relative;container-type:inline-size;perspective:1800px;perspective-origin:50% 42%}
.display-mockup__scene{position:relative;width:100%;aspect-ratio:1.39;transform-style:preserve-3d;transform:rotateX(calc(var(--tilt-x) + var(--my) * -3deg)) rotateY(calc(var(--tilt-y) + var(--mx) * 5deg))}
.display-mockup .monitor{position:absolute;inset:2% 2% 0;transform-style:preserve-3d;filter:drop-shadow(0 54px 48px rgba(0,0,0,.52))}
.display-mockup .monitor__front,.display-mockup .monitor__back{position:absolute;inset:0 0 21%;border-radius:1.1cqw;transform-style:preserve-3d}
.display-mockup .monitor__front{z-index:4;padding:.18cqw;background:linear-gradient(90deg,#77797b 0%,#dfe0e0 3%,#b8babb 15%,#ededed 48%,#a4a6a8 84%,#d7d8d9 97%,#747679 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.82),inset 0 -1px 0 rgba(18,19,21,.46),0 0 0 1px rgba(0,0,0,.42),0 3px 9px rgba(0,0,0,.28),0 22px 18px -17px rgba(0,0,0,.9);transform:translateZ(17px)}
.display-mockup .monitor__front::before{content:"";position:absolute;z-index:8;inset:0;padding:.18cqw;border-radius:inherit;background:radial-gradient(ellipse 23% 90% at var(--light-x) var(--light-y),rgba(255,255,255,.96),rgba(255,255,255,.2) 35%,transparent 72%);pointer-events:none;opacity:.62;mix-blend-mode:screen;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor}
.display-mockup .monitor__back{z-index:1;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 3px),linear-gradient(112deg,#747679 0%,#c9cbcc 18%,#a2a4a6 64%,#707275 100%);transform:translateZ(-12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.38)}
.display-mockup .monitor__edge{position:absolute;z-index:2;transform-origin:center;backface-visibility:hidden}
.display-mockup .monitor__edge--top{top:-1px;left:.9cqw;right:.9cqw;height:3cqw;background:linear-gradient(180deg,#f0f0f0 0%,#a7a9aa 35%,#66686a 100%);transform:translateZ(2px) rotateX(90deg);box-shadow:inset 0 1px rgba(255,255,255,.8)}
.display-mockup .monitor__edge--right{right:-1px;top:.9cqw;bottom:calc(21% + .9cqw);width:3cqw;background:linear-gradient(90deg,#696b6d 0%,#aaaeb0 48%,#d3d4d5 100%);transform:translateZ(2px) rotateY(90deg)}
.display-mockup .monitor__bezel{position:relative;width:100%;height:100%;overflow:hidden;border-radius:.7cqw;background:linear-gradient(118deg,#08090a 0%,#020303 56%,#0c0d0e 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.045),0 0 0 1px rgba(0,0,0,.82)}
.display-mockup .monitor__screen{position:absolute;z-index:1;inset:1.5cqw;overflow:hidden;border-radius:1px;background:#08090a;box-shadow:0 0 0 1px rgba(255,255,255,.025),inset 0 0 18px rgba(0,0,0,.3)}
.display-mockup .monitor__screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.display-mockup .monitor__camera{position:absolute;z-index:7;top:.55cqw;left:50%;width:.45cqw;height:.45cqw;border-radius:50%;background:radial-gradient(circle at 38% 34%,#2f3d49 0,#111923 23%,#030405 68%);box-shadow:0 0 0 1px rgba(255,255,255,.035);transform:translateX(-50%)}
.display-mockup .monitor__glass-reflection{position:absolute;z-index:6;inset:0;padding:1.5cqw;border-radius:inherit;background:radial-gradient(ellipse 25% 145% at var(--light-x) var(--light-y),rgba(255,255,255,.31) 0%,rgba(255,255,255,.11) 30%,transparent 67%),linear-gradient(112deg,rgba(255,255,255,.08),transparent 24%,transparent 75%,rgba(255,255,255,.035));pointer-events:none;mix-blend-mode:screen;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor}
.display-mockup .screen__glass{position:absolute;inset:0;background:radial-gradient(ellipse 20% 110% at var(--light-x) var(--light-y),rgba(255,255,255,.085),transparent 70%),linear-gradient(112deg,rgba(255,255,255,.05),transparent 18%,transparent 70%,rgba(255,255,255,.018));mix-blend-mode:screen;pointer-events:none}
.display-mockup .screen__glass::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 11%);opacity:.8}

.display-mockup .stand{position:absolute;z-index:0;top:75.2%;left:50%;width:24%;height:24.8%;transform:translateX(-50%) translateZ(-11px);transform-style:preserve-3d}
.display-mockup .stand__hinge{position:absolute;z-index:3;top:-3%;left:50%;width:24%;aspect-ratio:1;border-radius:50%;background:#060709;transform:translateX(-50%) rotateX(8deg) translateZ(2px);box-shadow:inset 0 3px 5px rgba(0,0,0,.9),inset 0 -1px rgba(255,255,255,.08),0 0 0 1px rgba(0,0,0,.38)}
.display-mockup .stand__neck{position:absolute;z-index:1;inset:5% 8% 12%;clip-path:polygon(3% 0,97% 0,99% 100%,1% 100%);background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 3px),linear-gradient(90deg,#57595b 0%,#a5a7a8 14%,#949697 54%,#747678 88%,#484a4c 100%);box-shadow:inset 1px 0 rgba(255,255,255,.32),inset -1px 0 rgba(0,0,0,.35)}
.display-mockup .stand__neck::before{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,rgba(2,3,4,.68) 0%,rgba(5,6,7,.42) 18%,rgba(8,9,10,.16) 48%,transparent 72%);box-shadow:inset 0 12px 15px -10px rgba(0,0,0,.92);pointer-events:none}
.display-mockup .stand__neck::after{content:"";position:absolute;z-index:3;inset:auto 0 0;height:3px;background:linear-gradient(90deg,#4c4e50,#97999b 18%,#707274 82%,#404244);box-shadow:0 -1px rgba(255,255,255,.28)}
.display-mockup .stand__foot{position:absolute;z-index:4;left:7%;right:7%;bottom:1%;height:8%;transform:translateZ(2px);transform-style:preserve-3d}
.display-mockup .stand__foot::before{content:"";position:absolute;inset:0 0 38%;border-radius:1px;background:linear-gradient(180deg,#858789 0%,#66686a 42%,#4d4f51 100%);transform-origin:50% 100%;transform:rotateX(74deg);box-shadow:inset 0 1px rgba(255,255,255,.22),0 8px 12px rgba(0,0,0,.42)}
.display-mockup .stand__foot::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:28%;height:3px;border-radius:0 0 2px 2px;background:linear-gradient(180deg,#77797b 0%,#4a4c4e 55%,#303234 100%);box-shadow:inset 0 1px rgba(255,255,255,.18),0 2px 3px rgba(0,0,0,.54)}
.display-mockup .stand__pad{position:absolute;z-index:3;bottom:17%;width:8%;height:2px;border-radius:0 0 2px 2px;background:#1f2022;box-shadow:0 2px 2px rgba(0,0,0,.5)}
.display-mockup .stand__pad--left{left:4%}
.display-mockup .stand__pad--right{right:4%}
.display-mockup__shadow{position:absolute;z-index:-1;left:20%;right:8%;bottom:10%;height:7%;border-radius:50%;background:rgba(0,0,0,.82);filter:blur(26px);transform:translateZ(-70px) rotateX(72deg)}

/* Hero with the Studio Display: copy left, the product on the display right,
   on a dark studio backdrop instead of a photo. The stats strip is optional:
   under the copy on desktop, under the display on narrower screens.
   Markup: section.hero.display-hero > .wrap.hero__inner > .display-hero__copy,
   .stat-strip.display-hero__stats (optional), .display-hero__media > .display-mockup */
.display-hero{align-items:center;background:radial-gradient(circle at 74% 38%,rgba(97,45,248,.16),transparent 42%),linear-gradient(145deg,#0d0e12 0%,#07080a 70%)}
.display-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 70%);mask-image:linear-gradient(to bottom,#000,transparent 70%);pointer-events:none}
.display-hero .hero__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);grid-template-areas:"copy media" "stats media";column-gap:clamp(32px,4vw,72px);align-items:center}
.display-hero__copy{grid-area:copy;align-self:end}
.display-hero .hero__inner:not(:has(.display-hero__stats)) .display-hero__copy{align-self:center}
.display-hero__media{grid-area:media;margin-right:calc(-1 * clamp(0px,3vw,56px))}
.display-hero .display-hero__stats{grid-area:stats;align-self:start;max-width:none}
@media (max-width:1100px){
  .display-hero .hero__inner{grid-template-columns:1fr;grid-template-areas:"copy" "media" "stats"}
  .display-hero__media{width:min(100%,760px);margin:clamp(40px,8vw,64px) auto 0}
  .display-hero .display-mockup{--tilt-y:-8deg}
  .display-hero .display-hero__stats{margin-top:clamp(24px,5vw,40px)}
}

/* Studio Display on its own inside a centred section, below the text: the
   product reveal after a cinematic video hero (LIVERECON, DCU, LIVETRAINING). */
.display-showcase{max-width:1040px;margin-top:clamp(48px,6vw,96px)}

/* Front-facing variant for light sections: the display faces the viewer and
   only tilts vertically with the pointer, the reflection only moves up and
   down, and it stands on a soft contact shadow instead of a drop shadow. */
.display-mockup--front{--tilt-x:2deg;--tilt-y:0deg}
.display-mockup--front .display-mockup__scene{transform:rotateX(calc(var(--tilt-x) + var(--my) * -4deg))}
.display-mockup--front .monitor{filter:drop-shadow(0 24px 32px rgba(10,12,16,.12))}
.display-mockup--front .monitor__edge--right,.display-mockup--front .stand__hinge{display:none}
.display-mockup--front .display-mockup__shadow{left:28%;right:28%;bottom:-1.5%;height:5%;border-radius:50%;background:radial-gradient(closest-side,rgba(10,12,16,.42),rgba(10,12,16,0));filter:blur(8px);transform:none}

@media (prefers-reduced-motion:reduce){
  .display-mockup__scene{transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}
}