/* R3 / local expressive motion: cinematic copper light, no library. */
.master .hero,.master .demonstrations,.master .offer-section{isolation:isolate;position:relative}
.master .story-sticky{isolation:isolate}
.master .studio-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:paint;--studio-progress:0}
.studio-backdrop i{position:absolute;display:block;pointer-events:none;animation-play-state:paused!important}
.studio-hero{border-radius:0 0 40px 40px;background:linear-gradient(110deg,#f2ece1 12%,#f2ece1 40%,#e8c4a1 75%,#cc8c62)}
.studio-hero .studio-beam{width:75%;height:180%;left:43%;top:-52%;background:linear-gradient(90deg,transparent 10%,#fffbdfb3 40%,#fff4c5db 48%,#ffddad59 60%,transparent 78%);transform-origin:50% 0;animation:projector-sweep 6.8s cubic-bezier(.45,0,.55,1) infinite alternate;opacity:.9}
.studio-beam-cross{width:68%;height:170%;right:-22%;top:-40%;background:linear-gradient(100deg,transparent 22%,#9b3b214a 42%,#f8b3719c 48%,transparent 68%);transform-origin:50% 0;animation:projector-cross 8.4s cubic-bezier(.45,0,.55,1) infinite alternate}
.studio-pool{width:75%;height:70%;right:-12%;bottom:-30%;border-radius:50%;background:radial-gradient(ellipse,#fff6d4c9 0%,#f8b06b70 34%,transparent 68%);animation:projector-pool 5.6s ease-in-out infinite alternate}
.studio-hero .studio-aperture{width:70%;aspect-ratio:1;right:-20%;top:-4%;border:1px solid #91401c45;border-radius:50%;box-shadow:0 0 0 40px #f4c08a14,0 0 0 41px #a23f2655,0 0 0 98px #f9e2be20,0 0 0 99px #a23f2630;transform:translateY(calc(var(--studio-progress)*100px)) rotate(calc(var(--studio-progress)*35deg)) scale(calc(1 + var(--studio-progress)*.16))}
.studio-hero .studio-edge{height:2px;bottom:2%;left:5%;right:5%;background:linear-gradient(90deg,transparent,#a23f26 55%,#fff3d5,transparent);transform:scaleX(calc(.2 + var(--studio-progress)*.8));transform-origin:right}
.master .hero-art{filter:none;isolation:isolate}
.master .hero-art::before{content:'';position:absolute;inset:8% 0 2% 1%;z-index:-1;border-radius:48px;background:linear-gradient(145deg,#27382f,#4b3f2a 60%,#a65c36);box-shadow:inset 0 1px 0 #ffeed7b3,0 24px 48px #43281829;transform:rotate(-4deg)}
.master .hero-portrait{transform:translateY(calc(var(--studio-progress,0)*-10px))}
.studio-screen,.studio-story{background:radial-gradient(ellipse at 95% 20%,#974a263d,transparent 58%),linear-gradient(130deg,#112019,#263328 65%,#1a211b)}
.studio-screen .studio-beam,.studio-story .studio-beam{width:90%;height:190%;left:6%;top:-60%;background:linear-gradient(95deg,transparent 22%,#e5ad645e 40%,#ffe5a37a 48%,transparent 65%);transform-origin:50% 5%;animation:projector-sweep 8s ease-in-out infinite alternate;opacity:.55}
.studio-screen .studio-beam-cross,.studio-story .studio-beam-cross{background:linear-gradient(100deg,transparent 15%,#e5ad644a 48%,transparent 67%);right:-10%;opacity:.65}
.studio-screen .studio-pool,.studio-story .studio-pool{bottom:-40%;background:radial-gradient(ellipse,#e69a4c70,transparent 65%)}
.studio-screen .studio-aperture,.studio-story .studio-aperture{width:650px;aspect-ratio:1;border:1px solid #ffe5c542;border-radius:50%;right:-380px;top:20%;box-shadow:0 0 0 72px #ffffff03,0 0 0 73px #ffe5c52a,0 0 0 150px #ffffff01,0 0 0 151px #ffe5c51a;transform:translateY(calc(var(--studio-progress)*200px))}
.studio-screen .studio-edge,.studio-story .studio-edge{inset:0;background:linear-gradient(180deg,#080f0660,transparent 18%,transparent 82%,#080f0660)}
.master .story-stage{perspective:1400px}
.master .story-stage .scene{transform:rotateY(calc((var(--p) - .5)*4deg)) rotateX(calc((.5 - var(--p))*3deg));transform-origin:50% 60%;outline-color:#f8c98599}
.master .story-stage .scene::after{content:'';pointer-events:none;position:absolute;inset:0;z-index:6;border-radius:inherit;background:linear-gradient(115deg,transparent 34%,#fff9dc30 48%,transparent 62%);transform:translateX(calc((var(--p) - .5)*120%));opacity:.75}
.studio-offer{background:linear-gradient(120deg,#e0b785,#f1dfc1 56%,#ce8e5b)}
.studio-offer .studio-beam{width:85%;height:240%;left:30%;top:-70%;background:linear-gradient(90deg,transparent 18%,#fff9dfba 48%,transparent 70%);transform-origin:50% 20%;animation:projector-sweep 7.4s ease-in-out infinite alternate}
.studio-offer .studio-beam-cross{opacity:.5}
.studio-offer .studio-pool{opacity:.6}
.studio-offer .studio-edge{width:75%;height:2px;top:0;right:0;background:linear-gradient(90deg,transparent,#a23f26,#fff2d2);transform:scaleX(calc(.2 + var(--studio-progress)*.8));transform-origin:right}
.master .demonstrations>.wrap,.master .offer-section>.wrap{position:relative}
.master .studio-backdrop[data-active=true] i{animation-play-state:running!important}
@keyframes projector-sweep{from{transform:translateX(-18%) rotate(-22deg)}to{transform:translateX(15%) rotate(18deg)}}
@keyframes projector-cross{from{transform:translateX(13%) rotate(24deg)}to{transform:translateX(-22%) rotate(-17deg)}}
@keyframes projector-pool{from{transform:translateX(-22%) scale(.85);opacity:.55}to{transform:translateX(16%) scale(1.18);opacity:1}}
/* Short headline entrances, body copy never moves. Default remains readable without JS. */
.motion-heading .motion-word{display:inline-block;position:relative}
.motion-heading[data-heading-entered=true] .motion-word{animation:headline-arrive .72s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--word-index)*.045s);animation-play-state:paused}
.motion-heading[data-motion-visible=true] .motion-word{animation-play-state:running}
@keyframes headline-arrive{from{transform:translate3d(0,.7em,0) rotate(3deg);opacity:.2;clip-path:inset(0 0 70% 0)}to{transform:translate3d(0,0,0) rotate(0);opacity:1;clip-path:inset(-10% -4% -15% -4%)}}
.motion-heading .motion-accent::after{content:'';position:absolute;left:0;right:0;bottom:-.04em;height:.055em;background:var(--copper);transform:scaleX(1);transform-origin:left}
.motion-heading[data-motion-visible=true] .motion-accent::after{animation:title-mark 5.4s ease-in-out infinite}
.master .story-heading .motion-accent::after{background:var(--coral)}
@keyframes title-mark{0%,18%{transform:scaleX(.12);opacity:.55}48%,100%{transform:scaleX(1);opacity:1}}
/* Primary actions: a controlled light pass over the physical surface. */
.master .button,.master .watch-link{position:relative;isolation:isolate;overflow:hidden;background:#233027;color:#fff5e8;border:1px solid #bc8059;box-shadow:inset 0 1px 0 #f7d3a17a,0 7px 18px #1c2a2029;transition:background .22s,box-shadow .22s,transform .22s var(--ease)}
.master .watch-link{position:absolute}
.master .button::before,.master .watch-link::before{content:'';position:absolute;z-index:-1;inset:-80% auto -80% -60%;width:65%;background:linear-gradient(105deg,transparent,#fff3ca52,transparent);transform:translateX(-110%) rotate(10deg);animation:action-light 4.6s ease-in-out infinite;animation-play-state:paused;pointer-events:none}
.master .button[data-motion-visible=true]::before,.master .watch-link[data-motion-visible=true]::before{animation-play-state:running}
@keyframes action-light{0%,15%{transform:translateX(-110%) rotate(10deg)}65%,100%{transform:translateX(420%) rotate(10deg)}}
.master .button svg,.master .watch-link svg{animation:action-arrow 4.6s ease-in-out infinite;animation-play-state:paused;transition:translate .2s var(--ease)}
.master .button[data-motion-visible=true] svg,.master .watch-link[data-motion-visible=true] svg{animation-play-state:running}
@keyframes action-arrow{0%,55%,100%{transform:translateX(0)}68%,82%{transform:translateX(5px)}}
.master .button:hover,.master .button:focus-visible,.master .watch-link:hover,.master .watch-link:focus-visible{background:#304735;box-shadow:inset 0 1px 0 #ffe1ad,0 12px 26px #28332240;translate:0 -2px}
.master .button:hover svg,.master .button:focus-visible svg,.master .watch-link:hover svg{translate:3px 0}
.master .button:active,.master .watch-link:active{translate:0 1px;scale:.98}
.master.motion-paused *,.master.motion-paused *::before,.master.motion-paused *::after,.master[data-document-hidden=true] *,.master[data-document-hidden=true] *::before,.master[data-document-hidden=true] *::after{animation-play-state:paused!important}
.master.motion-paused .motion-heading .motion-word{animation:none;transform:none;opacity:1;clip-path:none}
/* Pause specificity exceeds the visible/active run rules, including all pseudo-elements. */
body.master.motion-paused [data-active] i,body.master[data-document-hidden=true] [data-active] i,
body.master.motion-paused [data-motion-visible]::before,body.master[data-document-hidden=true] [data-motion-visible]::before,
body.master.motion-paused [data-motion-visible] svg,body.master[data-document-hidden=true] [data-motion-visible] svg,
body.master.motion-paused .motion-heading .motion-accent::after,body.master[data-document-hidden=true] .motion-heading .motion-accent::after{animation-play-state:paused!important}

@media(max-width:650px){
 .studio-hero{border-radius:0 0 26px 26px;background:linear-gradient(155deg,#f2ece1 32%,#efddc5 55%,#d39465)}
 .studio-hero .studio-beam{width:150%;height:140%;left:8%;top:-18%;animation-duration:7.8s}
 .studio-hero .studio-beam-cross{width:130%;height:145%;right:-45%;top:8%;animation-duration:9s}
 .studio-hero .studio-pool{width:140%;height:52%;right:-30%;bottom:-10%}
 .studio-hero .studio-aperture{width:120%;top:48%;right:-58%}
 .master .hero-art::before{border-radius:32px;inset:9% 0 3%}
 .studio-screen .studio-aperture,.studio-story .studio-aperture{width:400px;right:-290px}
 .studio-screen .studio-beam,.studio-story .studio-beam{width:150%;left:-10%}
 .studio-offer .studio-beam{width:160%;left:-10%}
 .master .story-stage .scene{transform:rotateY(calc((var(--p) - .5)*2deg))}
}
@media(prefers-reduced-motion:reduce){
 .master .studio-backdrop i,.master .motion-word,.master .motion-accent::after,.master .button::before,.master .watch-link::before,.master .button svg,.master .watch-link svg{animation:none!important;transform:none!important;opacity:1;clip-path:none!important}
 .master .studio-beam{opacity:.45!important}.master .studio-beam-cross{opacity:.3!important}
 .master .studio-aperture,.master .studio-edge,.master .hero-portrait,.master .story-stage .scene,.master .story-stage .scene::after{transform:none!important}
 .master .button,.master .watch-link,.master .button:hover,.master .watch-link:hover,.master .button:active,.master .watch-link:active{transition:none;translate:none;scale:1}
}

/* Exact approved Instagram reference: no remote embed or invented media. */
.example-reference .reference-body{padding:26px 22px;border-radius:24px;background:var(--cream);box-shadow:0 12px 30px #35261516;line-height:1.65}
.example-reference .reference-body>p{font-size:16px;max-width:30ch}
.example-reference .reference-body .example-original{font-size:16px;font-weight:650;min-height:48px;margin:22px 0 16px;color:var(--copper)}
.example-reference .reference-body .reference-note{font-size:13px;color:var(--muted);margin:0}

/* Players are readable content, never conditional on animation or observer state. */
.master .film,.master .example-card,.master .film-player,.master .film-player video{visibility:visible;opacity:1}
.master .film-player video{display:block}
.master .hero-demo-shortcut{display:inline-flex;align-items:center;gap:16px;min-height:44px;margin-top:14px;font-size:14px;font-weight:650;text-decoration:none;border-bottom:1px solid var(--copper)}
.master .hero-demo-shortcut svg{width:20px;height:20px}
.no-js .master .studio-backdrop i{animation:none!important}

/* Luiz: four real examples in an exact balanced desktop 2x2, one column on mobile. */
.master .examples-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:960px;margin-inline:auto;gap:56px 64px;align-items:start}
.master .example-card{margin-inline:auto}
.master .example-heading{min-height:140px}
@media(max-width:650px){.master .examples-grid{grid-template-columns:1fr;gap:40px}.master .example-heading{min-height:0}}