/* Expressive motion is contained in this demonstration surface. */
.effects-lab{position:relative;width:min(1440px,calc(100% - 48px));margin:28px auto;border-radius:44px;background:var(--ink);color:var(--white);overflow:hidden;isolation:isolate}
.effects-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:60px;align-items:center;padding-block:clamp(54px,7vw,94px)}
.effects-copy{position:relative;z-index:1;min-width:0}
.effects-copy .eyebrow{color:color-mix(in srgb,var(--white) 68%,transparent);font-size:11px}
.effects-copy .eyebrow::before{background:var(--lime)}
.effects-copy h2{margin:22px 0;font-size:clamp(38px,4.6vw,66px);font-weight:600;line-height:1.04;letter-spacing:-.055em;text-wrap:balance}
.effects-copy h2 span{color:var(--lime)}
.effects-copy p{max-width:350px;margin:0;color:color-mix(in srgb,var(--white) 74%,transparent);font-size:16px;line-height:1.75}
.effects-modes{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.effects-modes button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 17px;background:transparent;color:color-mix(in srgb,var(--white) 86%,transparent);border:1px solid color-mix(in srgb,var(--white) 28%,transparent);border-radius:100px;font:600 12px/1.3 var(--body);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.effects-modes button:hover{background:color-mix(in srgb,var(--white) 8%,transparent);border-color:color-mix(in srgb,var(--white) 50%,transparent)}
.effects-modes button[aria-pressed=true]{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.effects-presentation{min-width:0;position:relative;z-index:1}
.effects-stage{--effect-rx:0deg;--effect-ry:0deg;--effect-pan-x:0px;--effect-pan-y:0px;--effect-sweep:-120%;--effect-light:0;--effect-reveal:100%;--effect-aura-x:0px;--effect-aura-y:0px;position:relative;display:grid;place-items:center;aspect-ratio:1.16;min-height:330px;border-radius:36px;outline-offset:5px;isolation:isolate;touch-action:pan-y pinch-zoom;cursor:grab;perspective:1200px}
.effects-stage:active{cursor:grabbing}
.effects-stage:focus-visible{outline-color:var(--lime)}
.effects-atmosphere{position:absolute;inset:-12% -10%;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--lime) 15%,transparent),transparent 65%);transform:translate3d(var(--effect-aura-x),var(--effect-aura-y),0)}
.effects-atmosphere::before,.effects-atmosphere::after{content:"";position:absolute;inset:6% 4%;border:1px solid color-mix(in srgb,var(--lime) 13%,transparent);border-radius:50%;transform:rotate(-23deg) scaleY(.8)}
.effects-atmosphere::after{inset:16% -7%;transform:rotate(25deg) scaleY(.8);border-color:color-mix(in srgb,var(--white) 10%,transparent)}
.effects-frame{position:relative;width:100%;height:100%;overflow:hidden;border-radius:30px;border:1px solid color-mix(in srgb,var(--white) 55%,transparent);background:var(--paper);box-shadow:0 24px 65px #00000028;transform:rotateX(var(--effect-rx)) rotateY(var(--effect-ry));transform-style:preserve-3d;isolation:isolate}
.effects-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:translate3d(var(--effect-pan-x),var(--effect-pan-y),0) scale(1.055);pointer-events:none;user-select:none;-webkit-user-drag:none}
.effects-shine{position:absolute;inset:-12%;z-index:2;background:linear-gradient(110deg,transparent 28%,#ffffff06 40%,#ffffff6b 49%,#ffffff08 58%,transparent 72%);opacity:var(--effect-light);transform:translate3d(var(--effect-sweep),0,0);mix-blend-mode:screen;pointer-events:none}
.effects-curtain{position:absolute;inset:0;z-index:3;background:var(--ink);clip-path:inset(0 0 0 var(--effect-reveal));pointer-events:none;overflow:hidden}
.effects-curtain::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 70%,color-mix(in srgb,var(--lime) 18%,transparent),transparent 65%)}
.effects-stage[data-effect=depth] .effects-shine,.effects-stage[data-effect=depth] .effects-curtain,.effects-stage[data-effect=light] .effects-curtain{display:none}
.effects-stage[data-effect=reveal] .effects-shine{display:none}
.effects-stage[data-effect=reveal] .effects-curtain::before{content:"";position:absolute;top:0;bottom:0;left:var(--effect-reveal);width:1px;background:color-mix(in srgb,var(--lime) 70%,transparent)}
.effects-bottom{display:flex;justify-content:flex-end;padding:16px 2px 0;min-height:58px}
.effects-replay{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:9px 16px;border:1px solid color-mix(in srgb,var(--white) 28%,transparent);border-radius:100px;background:transparent;color:var(--white);font:600 12px/1.3 var(--body);cursor:pointer;transition:background .2s,color .2s}
.effects-replay:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.effects-replay:disabled{opacity:.5;cursor:default}
.effects-replay:disabled:hover{background:transparent;color:var(--white);border-color:color-mix(in srgb,var(--white) 28%,transparent)}
.effects-replay svg{width:14px;height:14px;flex:none}
.effects-lab :focus-visible{outline-color:var(--lime)}
.effects-instructions,.effects-status{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:1100px){.effects-layout{gap:34px;grid-template-columns:.85fr 1.15fr}.effects-modes{gap:6px}.effects-modes button{padding-inline:13px}.effects-stage{min-height:320px}}
@media(max-width:900px){.effects-layout{grid-template-columns:1fr;gap:32px}.effects-copy h2{max-width:600px;font-size:clamp(38px,6.4vw,60px)}.effects-copy p{max-width:520px}.effects-modes{margin-top:23px}.effects-stage{aspect-ratio:1.5;min-height:300px;max-height:580px}.effects-photo{object-position:50% 54%}}
@media(max-width:680px){.effects-lab{width:calc(100% - 24px);border-radius:30px;margin-block:20px}.effects-layout{padding-block:42px;gap:26px}.effects-copy .eyebrow{font-size:11px}.effects-copy h2{font-size:clamp(35px,9vw,48px);margin-block:18px}.effects-copy p{font-size:14px;line-height:1.75}.effects-modes{gap:7px}.effects-modes button{min-height:44px;padding:10px 13px;font-size:12px}.effects-stage{aspect-ratio:1.1;min-height:260px;border-radius:25px}.effects-frame{border-radius:23px}.effects-bottom{padding-top:12px;min-height:56px}}
@media(max-width:360px){.effects-modes{gap:6px}.effects-modes button{padding-inline:10px}.effects-stage{min-height:230px}}
@media(prefers-reduced-motion:reduce){.effects-modes button,.effects-replay{transition:none}.effects-frame,.effects-photo,.effects-atmosphere{transform:none!important}.effects-shine,.effects-curtain{display:none!important}}