.demo-bar{background:#1d3557;color:#fff;padding:14px 20px;display:flex;justify-content:center;gap:12px;align-items:center;flex-wrap:wrap;font-size:14px}.demo-bar a,.demo-bar button{font:inherit;color:inherit;border:1px solid #ffffff80;background:transparent;padding:8px 14px;cursor:pointer}.demo-bar [aria-current=page]{background:#fdf8e1;color:#512e11}.demo-bar p{flex-basis:100%;text-align:center;font-size:13px}.cinema-stage{margin:22px;position:relative}.cinema-hero{height:480px;display:grid;grid-template-columns:1fr 340px 1fr;direction:ltr;background:#ede6df;position:relative;overflow:hidden;align-items:center}.cinema-signature{position:relative;z-index:2;direction:rtl;text-align:center;align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#ede6df;padding:28px 12px;color:#512e11}.signature-copy p{font-size:56px;line-height:1.15;margin:22px 0 15px}.signature-copy h1{font-size:25px;font-weight:400;line-height:1.4}.film-window{overflow:hidden;padding:30px 0;direction:ltr}.film-track{display:flex;gap:12px;width:max-content;padding:20px 12px;background:#24221f;position:relative;transform:translateX(var(--strip-x,0px))}.film-track:before,.film-track:after{content:'';height:8px;position:absolute;left:0;right:0;background:repeating-linear-gradient(90deg,transparent 0 10px,#ede6df 10px 19px,transparent 19px 29px)}.film-track:before{top:5px}.film-track:after{bottom:5px}.film-frame{margin:0;width:170px;flex:none;position:relative}.film-frame img{width:100%;height:285px;object-fit:cover;display:block}.film-frame figcaption{font-size:9px;letter-spacing:.12em;color:#d7b77b;padding:5px 2px 0;text-align:left}.film-left{transform:rotate(-3deg) scale(1.05)}.film-right{transform:rotate(3deg) scale(1.05)}.camera{width:132px;height:95px;position:relative;direction:ltr;filter:drop-shadow(0 5px 4px #0002)}.camera-body{position:absolute;inset:20px 0 0;background:#353532;border:3px solid #9b9181;border-radius:9px}.camera-top{position:absolute;top:10px;left:40px;width:48px;height:20px;background:#353532;border:3px solid #9b9181;border-radius:5px 5px 0 0}.camera-flash{position:absolute;left:10px;top:13px;width:20px;height:9px;background:#ac8955;border-radius:3px}.camera-brand{position:absolute;top:5px;left:6px;font-size:8px;color:#e4dac8;letter-spacing:.1em}.camera-grip{position:absolute;right:6px;top:10px;width:15px;bottom:8px;border-radius:3px;background:#232522}.camera-lens{position:absolute;width:63px;height:63px;border:5px solid #817969;border-radius:50%;left:35px;top:3px;background:#101b22;box-shadow:inset 0 0 0 4px #262b2a;overflow:hidden}.lens-glass{position:absolute;inset:12px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#a9c9c9,#304b58 35%,#10212c 65%)}.shutter{position:absolute;inset:0;background:#141412;clip-path:circle(0%)}.exposure{position:absolute;inset:0;background:#fff9e9;opacity:0;pointer-events:none;z-index:3}.sequence-label{font-size:12px;min-height:22px;margin-top:18px;color:#725b41}.scroll-cue{display:none}.demo-camera.play .shutter{animation:shutter-click .45s .8s ease-in-out}.demo-camera.play .camera{animation:camera-press .45s .8s}.demo-camera.play .exposure{animation:exposure .55s 1s}.demo-camera.play .film-frame img{animation:develop 3s 1.25s both}.demo-camera.play .film-frame:nth-child(even) img{animation-delay:1.55s}.demo-camera.play .signature-copy{animation:signature-arrive 1s 1s both}.demo-camera.play .film-left .film-track{animation:feed-left 1.3s 1.1s both}.demo-camera.play .film-right .film-track{animation:feed-right 1.3s 1.1s both}@keyframes shutter-click{50%{clip-path:circle(75%)}100%{clip-path:circle(0%)}}@keyframes camera-press{50%{transform:scale(.94)}}@keyframes exposure{25%{opacity:.38}100%{opacity:0}}@keyframes develop{0%{filter:brightness(.15) grayscale(1) blur(5px)}45%{filter:brightness(.8) grayscale(1) blur(1px)}100%{filter:none}}@keyframes signature-arrive{from{opacity:.2;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes feed-left{from{transform:translateX(-120px)}to{transform:translateX(0)}}@keyframes feed-right{from{transform:translateX(90px)}to{transform:translateX(0)}}.demo-table.cinema-stage{height:1250px}.demo-table .cinema-hero{position:sticky;top:100px}.demo-table .camera,.demo-table .sequence-label{display:none}.demo-table .film-window{transform:none}.demo-table .film-track{will-change:transform}.demo-table .scroll-cue{display:block;position:absolute;bottom:15px;left:0;right:0;text-align:center;font-size:13px;color:#512e11}.demo-table .signature-copy p{margin-top:0}
@media(max-width:700px){.cinema-stage{margin:10px}.cinema-hero{height:530px;grid-template-columns:1fr 1fr;grid-template-rows:270px 260px;gap:0}.cinema-signature{grid-column:1/-1;grid-row:1;padding:15px}.signature-copy p{font-size:43px;margin:10px 0}.signature-copy h1{font-size:21px}.camera{transform:scale(.72);margin:-12px 0}.sequence-label{margin-top:7px}.film-window{padding:15px 0;grid-row:2}.film-frame{width:135px}.film-frame img{height:190px}.film-track{gap:8px;padding-inline:8px}.demo-table .cinema-hero{top:82px;height:470px;grid-template-rows:210px 260px}.demo-table.cinema-stage{height:1000px}.demo-table .scroll-cue{bottom:5px;font-size:11px;background:#ede6df}.demo-bar{gap:8px}.demo-bar strong{width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){.cinema-stage *{animation:none!important;transition:none!important}.demo-table.cinema-stage{height:auto}.demo-table .cinema-hero{position:relative;top:0}.film-track{transform:none!important}.scroll-cue{display:none!important}}
/* Photoreal camera with film physically feeding outward from behind its body. */
.demo-camera .cinema-hero{height:620px;display:block}
.demo-camera .cinema-signature{position:absolute;inset:0;background:transparent;display:block;padding:0;pointer-events:none}
.demo-camera .camera{position:absolute;top:58px;left:50%;width:350px;height:auto;aspect-ratio:3/2;transform:translateX(-50%);z-index:4;filter:drop-shadow(0 13px 10px #271c1833);margin:0}
.camera-real{display:block;width:100%;height:auto}
.lens-glint{position:absolute;width:37%;height:55%;top:35%;left:35%;border-radius:50%;background:radial-gradient(circle,#fff9e8 0%,#ecdfc266 30%,transparent 70%);opacity:0}
.demo-camera .signature-copy{position:absolute;top:370px;left:12px;right:12px}
.demo-camera .signature-copy p{font-size:60px;margin:0 0 15px}
.demo-camera .signature-copy h1{font-size:27px}
.demo-camera .sequence-label{position:absolute;top:530px;left:0;right:0;margin:0}
.demo-camera .film-window{position:absolute;top:90px;width:calc(50% - 115px);padding:0;transform:none;z-index:1;overflow:hidden}
.demo-camera .film-left{left:0;transform-origin:right center}
.demo-camera .film-right{right:0;transform-origin:left center}
.demo-camera .film-track{padding-block:19px;gap:10px}
.demo-camera .film-frame{width:165px}
.demo-camera .film-frame img{height:205px}
.demo-camera.play .camera{animation:real-camera-click .55s .9s both}
.demo-camera.play .lens-glint{animation:lens-exposure .7s 1s both}
.demo-camera.play .exposure{animation:exposure .7s 1.1s}
.demo-camera.play .film-left{animation:unroll-left 2.5s 1.4s cubic-bezier(.16,1,.3,1) both}
.demo-camera.play .film-right{animation:unroll-right 2.5s 1.4s cubic-bezier(.16,1,.3,1) both}
.demo-camera.play .film-left .film-track{animation:transport-left 2.5s 1.4s cubic-bezier(.16,1,.3,1) both}
.demo-camera.play .film-right .film-track{animation:transport-right 2.5s 1.4s cubic-bezier(.16,1,.3,1) both}
.demo-camera.play .film-frame img{animation:develop-print 3.8s 2s both}
.demo-camera.play .film-frame:nth-child(even) img{animation-delay:2.4s}
.demo-camera.play .signature-copy{animation:signature-arrive 1.2s 3.6s both}
@keyframes real-camera-click{0%,100%{transform:translateX(-50%) scale(1)}45%{transform:translateX(-50%) scale(.975)}}
@keyframes lens-exposure{30%{opacity:.85}100%{opacity:0}}
@keyframes unroll-left{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes unroll-right{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes transport-left{from{transform:translateX(350px)}to{transform:translateX(0)}}
@keyframes transport-right{from{transform:translateX(-350px)}to{transform:translateX(0)}}
@keyframes develop-print{0%,15%{filter:brightness(.12) sepia(1) blur(3px)}50%{filter:brightness(.65) grayscale(1) blur(.5px)}100%{filter:none}}
@media(max-width:700px){.demo-camera .cinema-hero{height:540px}.demo-camera .camera{width:220px;top:40px}.demo-camera .film-window{top:90px;width:calc(50% - 65px)}.demo-camera .film-frame{width:105px}.demo-camera .film-frame img{height:150px}.demo-camera .film-track{padding-block:17px;gap:6px}.demo-camera .signature-copy{top:320px}.demo-camera .signature-copy p{font-size:46px}.demo-camera .signature-copy h1{font-size:24px}.demo-camera .sequence-label{top:470px}}
@media(prefers-reduced-motion:reduce){.demo-camera .film-window{clip-path:none}.demo-camera .camera{transform:translateX(-50%)}.demo-camera .signature-copy{opacity:1}.demo-camera .film-frame img{filter:none}}