.oqc{position:relative;height:var(--oqc-height, 600vh);background:transparent;--oqc-ratio: 1.586;--oqc-w: min(var(--oqc-w-desktop, 33vw), 56vh, 620px);--oqc-h: calc(var(--oqc-w) / var(--oqc-ratio));--oqc-r: calc(var(--oqc-w) * .0372);--oqc-face: #0e0e10;--oqc-edge: #3a3a42}.oqc-pin{position:sticky;top:0;height:100vh;width:100%;background:transparent;overflow:clip}.oqc-aura{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:0;opacity:var(--oqc-aura-o, .4);will-change:opacity}.oqc-glow{position:absolute;border-radius:50%;filter:blur(72px);opacity:.5;mix-blend-mode:screen}.oqc-glow--blue{width:46vw;height:46vw;background:var(--oqc-blue);left:4%;top:10%;transform:translate(calc(var(--oqc-gx, 0) * -1vw),calc(var(--oqc-gy, 0) * 1vh))}.oqc-glow--cyan{width:38vw;height:38vw;background:var(--oqc-cyan);left:16%;bottom:4%;transform:translate(calc(var(--oqc-gx, 0) * 1vw),calc(var(--oqc-gy, 0) * -1vh))}.oqc-glow--purple{width:52vw;height:52vw;background:var(--oqc-purple);right:2%;top:2%;transform:translate(calc(var(--oqc-gx, 0) * 1vw),calc(var(--oqc-gy, 0) * -1vh))}.oqc-glow--magenta{width:42vw;height:42vw;background:var(--oqc-magenta);right:8%;bottom:0%;transform:translate(calc(var(--oqc-gx, 0) * -1vw),calc(var(--oqc-gy, 0) * 1vh))}.oqc-smoke{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:0}.oqc-plume{position:absolute;border-radius:50%;filter:blur(64px);mix-blend-mode:screen;opacity:.42;will-change:transform}.oqc-plume--1{width:62vw;height:62vw;left:-10%;top:2%;background:radial-gradient(closest-side,#9ea2adf2,#9ea2ad00 70%);animation:oqc-drift-a 26s ease-in-out infinite}.oqc-plume--2{width:54vw;height:54vw;right:-8%;top:22%;background:radial-gradient(closest-side,#787c8ae6,#787c8a00 70%);animation:oqc-drift-b 33s ease-in-out infinite}.oqc-plume--3{width:48vw;height:48vw;left:26%;bottom:-14%;background:radial-gradient(closest-side,#565a66d9,#565a6600 70%);animation:oqc-drift-c 39s ease-in-out infinite}@keyframes oqc-drift-a{0%,to{transform:translate(0) scale(1)}50%{transform:translate(6vw,-4vh) scale(1.14)}}@keyframes oqc-drift-b{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-5vw,4vh) scale(1.1)}}@keyframes oqc-drift-c{0%,to{transform:translate(0) scale(1)}50%{transform:translate(4vw,-6vh) scale(1.16)}}.oqc-ash{position:absolute;top:-6vh;right:0;bottom:-6vh;left:0;pointer-events:none;z-index:0;opacity:.55;background-repeat:no-repeat;background-image:radial-gradient(1.5px 1.5px at 12% 22%,rgba(222,224,232,.55),transparent 60%),radial-gradient(1.5px 1.5px at 78% 14%,rgba(222,224,232,.45),transparent 60%),radial-gradient(2px 2px at 40% 66%,rgba(200,203,214,.42),transparent 60%),radial-gradient(1px 1px at 62% 82%,rgba(222,224,232,.5),transparent 60%),radial-gradient(1.5px 1.5px at 88% 52%,rgba(200,203,214,.42),transparent 60%),radial-gradient(1px 1px at 26% 46%,rgba(222,224,232,.48),transparent 60%),radial-gradient(2px 2px at 8% 74%,rgba(200,203,214,.4),transparent 60%),radial-gradient(1px 1px at 54% 30%,rgba(222,224,232,.5),transparent 60%),radial-gradient(1.5px 1.5px at 34% 88%,rgba(210,213,222,.42),transparent 60%),radial-gradient(1px 1px at 70% 60%,rgba(222,224,232,.46),transparent 60%);animation:oqc-ash-rise 30s linear infinite}@keyframes oqc-ash-rise{0%{transform:translateY(5vh)}to{transform:translateY(-5vh)}}.oqc-stage{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;perspective:1800px;perspective-origin:50% 45%;z-index:1}.oqc-shadow{position:absolute;left:50%;top:50%;width:calc(var(--oqc-w) * 1.15);height:calc(var(--oqc-w) * .34);background:radial-gradient(closest-side,#000000d9,#0000 70%);pointer-events:none;z-index:0;will-change:transform,opacity}.oqc-card{position:relative;width:var(--oqc-w);height:var(--oqc-h);transform-style:preserve-3d;will-change:transform}.oqc-f{position:absolute;left:50%;top:50%;backface-visibility:hidden}.oqc-front,.oqc-back{width:var(--oqc-w);height:var(--oqc-h);border-radius:var(--oqc-r);background:var(--oqc-face);overflow:hidden}.oqc-front{transform:translate(-50%,-50%) translateZ(calc(var(--oqc-d, 4px) / 2))}.oqc-back{transform:translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--oqc-d, 4px) / 2));background:#0b0b0d}.oqc-face-img,.oqc-logo{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.oqc-eh,.oqc-ev{background:var(--oqc-edge)}.oqc-eh{width:calc(var(--oqc-w) - var(--oqc-r) * 2);height:var(--oqc-d, 4px)}.oqc-ev{width:var(--oqc-d, 4px);height:calc(var(--oqc-h) - var(--oqc-r) * 2)}.oqc-e-top{transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--oqc-h) / 2));box-shadow:inset 0 0 0 99px #ffffff38}.oqc-e-bottom{transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--oqc-h) / 2));box-shadow:inset 0 0 0 99px #00000061}.oqc-e-left{transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--oqc-w) / 2));box-shadow:inset 0 0 0 99px #ffffff12}.oqc-e-right{transform:translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--oqc-w) / 2));box-shadow:inset 0 0 0 99px #0003}.oqc-layer{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--oqc-r);pointer-events:none}.oqc-shade{background:#000;opacity:var(--oqc-shade, .2)}.oqc-grad{background:linear-gradient(var(--oqc-light, 132deg),rgba(255,255,255,.055) 0%,rgba(255,255,255,.012) 38%,rgba(0,0,0,0) 62%,rgba(0,0,0,.1) 100%)}.oqc-grain{opacity:.45;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E")}.oqc-rim{box-shadow:inset 0 1px #ffffff12,inset 0 -1px #00000029,inset 0 0 12px 1px var(--oqc-rim, rgba(120,150,255,0)),0 0 22px 2px var(--oqc-rim, rgba(120,150,255,0))}.oqc-copy{position:absolute;top:50%;transform:translateY(-50%);width:min(33vw,450px);z-index:3;pointer-events:none}.oqc-copy--left{left:4.5vw}.oqc-copy--right{right:4.5vw;text-align:right}.oqc-copy--intro{left:50%;top:10vh;transform:translate(-50%);width:min(90vw,640px);text-align:center}.oqc-copy--final{left:50%;top:auto;bottom:9vh;transform:translate(-50%);width:min(90vw,640px);text-align:center}.oqc-copy-in{opacity:0;visibility:hidden;will-change:opacity,transform}.oqc-eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:#a8abbb;margin:0 0 16px}.oqc-heading{margin:0 0 16px;font-size:clamp(30px,3.7vw,54px);font-weight:600;letter-spacing:-.015em;line-height:1.08;color:#f5f5f2;text-shadow:0 2px 30px rgba(0,0,0,.7),0 1px 4px rgba(0,0,0,.5)}.oqc-desc{margin:0;font-size:clamp(16px,1.5vw,21px);line-height:1.55;color:#d0d1db;text-shadow:0 2px 20px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.5)}.oqc-btn{display:inline-block;margin-top:24px;padding:15px 32px;border-radius:999px;background:#fff;color:#0a0a0f;font-size:15px;font-weight:600;text-decoration:none;box-shadow:0 10px 40px #2f6bff4d;transition:transform .18s ease,box-shadow .25s ease}.oqc-btn:hover{transform:translateY(-2px);box-shadow:0 14px 48px #a855f766}.oqc-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}@media(max-width:760px){.oqc{--oqc-w: min(var(--oqc-w-mobile, 76vw), 44vh, 440px)}.oqc-stage{align-items:flex-start;padding-top:12vh}.oqc-shadow{top:33%}.oqc-copy,.oqc-copy--left,.oqc-copy--right{left:50%;right:auto;top:auto;bottom:6vh;transform:translate(-50%);width:min(92vw,460px);text-align:center}.oqc-copy--intro{top:4vh;bottom:auto}.oqc-copy--final{bottom:5vh}.oqc-glow{filter:blur(46px)}.oqc-plume{filter:blur(42px);opacity:.34}.oqc-ash{opacity:.4}.oqc-heading{font-size:clamp(25px,6.6vw,34px)}.oqc-desc{font-size:clamp(15px,4.2vw,18px)}}@media(prefers-reduced-motion:reduce){.oqc{height:auto}.oqc-pin{position:static;height:auto;padding:10vh 0 6vh}.oqc-stage{position:relative;inset:auto;padding:0 0 6vh;align-items:center}.oqc-card{transform:rotateX(-6deg) rotateY(-14deg);margin:0 auto}.oqc-shadow{display:none}.oqc-aura{position:absolute;opacity:.35}.oqc-plume,.oqc-ash{animation:none!important}.oqc-ash{opacity:.3}.oqc-copy,.oqc-copy--left,.oqc-copy--right,.oqc-copy--intro,.oqc-copy--final{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:min(90vw,560px);margin:0 auto 7vh;text-align:center}.oqc-copy-in{opacity:1!important;visibility:visible!important;transform:none!important;filter:none!important;pointer-events:auto!important}.oqc-btn{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/77/assets/optiq-cinematic-scroll-card.css.map */