.gop-p3d{--p3d-body: #2b2b2e;isolation:isolate}.gop-p3d:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:radial-gradient(42% 55% at 28% 52%,rgba(var(--gop-accent-rgb),.1),transparent 72%),radial-gradient(30% 40% at 82% 18%,rgba(var(--gop-accent-rgb),.05),transparent 70%);pointer-events:none}.gop-p3d__inner{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:"stage ." "stage head" "stage panel" "stage .";column-gap:clamp(3.2rem,5vw,7.2rem)}.gop-p3d__head{grid-area:head}.gop-p3d__title{font-size:clamp(3.4rem,3.6vw,5.2rem);text-align:left;text-wrap:balance}.gop-p3d__text{margin-left:0}.gop-p3d__stage{position:relative;grid-area:stage;min-width:0;height:clamp(52rem,82vh,78rem);isolation:isolate;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.gop-p3d__glow{position:absolute;left:50%;top:47%;z-index:-1;width:min(96%,66rem);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(var(--gop-accent-rgb),.24),rgba(var(--gop-accent-rgb),.07) 55%,transparent);filter:blur(8px);pointer-events:none}.gop-p3d__canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;opacity:0;cursor:grab;touch-action:pan-y;outline:none;transition:opacity .9s var(--gop-ease)}.gop-p3d__canvas:focus-visible{outline:2px solid var(--gop-accent);outline-offset:-2px;border-radius:var(--gop-radius)}.gop-p3d__stage.is-ready .gop-p3d__canvas{opacity:1}.gop-p3d__stage.is-grabbing .gop-p3d__canvas{cursor:grabbing}.gop-p3d__fallback{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none;transition:opacity .6s var(--gop-ease),visibility .6s}.gop-p3d__stage.is-ready .gop-p3d__fallback{opacity:0;visibility:hidden}.gop-p3d__img{display:block;width:auto;max-width:90%;height:auto;max-height:86%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}html.gop-js .gop-p3d__stage:not(.is-fallback) .gop-p3d__img,.gop-p3d__stage--img.is-fallback .gop-p3d__phone,html:not(.gop-js) .gop-p3d__stage--img .gop-p3d__phone{display:none}.gop-p3d__phone{position:relative;height:74%;aspect-ratio:776 / 1634;border-radius:14.7%/7%;background:linear-gradient(115deg,#ffffff42,#fff0 36%,#00000029 70%,#ffffff1a),var(--p3d-body);box-shadow:inset 0 0 0 1px #fff3,inset 0 0 0 3px #00000029,0 40px 60px -30px #000c,0 0 60px rgba(var(--gop-accent-rgb),.14);transition:background-color .5s ease}.gop-p3d__phone>span{position:absolute;display:block}.gop-p3d__phone-plateau{inset:0 0 auto;height:25.7%;border-radius:14.7% 14.7% 6% 6%/27% 27% 10% 10%;background:linear-gradient(180deg,#ffffff29,#0000001a),var(--p3d-body);box-shadow:0 3px 6px #0000004d,inset 0 1px #ffffff3d}.gop-p3d__phone-glass{top:27.2%;right:4%;bottom:1.9%;left:4%;border-radius:11%/6%;background:linear-gradient(160deg,#ffffff1f,#ffffff05),var(--p3d-body);box-shadow:inset 0 0 0 1px #00000024}.gop-p3d__phone-lens,.gop-p3d__phone-flash,.gop-p3d__phone-lidar{aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%)}.gop-p3d__phone-lens{width:20.4%;background:radial-gradient(circle,#04050a 0 26%,#1c1a3a 40%,#07080d 58%,#020203 66%,transparent 67%),radial-gradient(circle at 35% 30%,#fff9,#00000059 70%),var(--p3d-body);box-shadow:0 2px 4px #00000073}.gop-p3d__phone-lens--1{left:15.2%;top:7.3%}.gop-p3d__phone-lens--2{left:15.2%;top:18.6%}.gop-p3d__phone-lens--3{left:36.3%;top:12.9%}.gop-p3d__phone-flash{left:84.3%;top:7.7%;width:8.8%;background:radial-gradient(circle,#fffaf0,#eadcb0 65%,#b9a36e)}.gop-p3d__phone-lidar{left:84.3%;top:18%;width:8%;background:radial-gradient(circle at 40% 35%,#2c2a44,#050507 62%)}html.gop-js .gop-p3d__stage:not(.is-ready):not(.is-fallback) .gop-p3d__phone{--p3d-body: #1a2422;box-shadow:inset 0 0 0 1px rgba(var(--gop-accent-rgb),.18),0 0 60px rgba(var(--gop-accent-rgb),.1);overflow:hidden}html.gop-js .gop-p3d__stage:not(.is-ready):not(.is-fallback) .gop-p3d__phone:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(100deg,transparent 30%,rgba(var(--gop-accent-rgb),.16) 45%,rgba(255,255,255,.14) 50%,transparent 65%);background-size:260% 100%;animation:gop-p3d-shimmer 1.8s linear infinite}@keyframes gop-p3d-shimmer{0%{background-position:130% 0}to{background-position:-130% 0}}.gop-p3d .gop-p3d__views{position:absolute;left:50%;bottom:1.6rem;z-index:2;display:inline-flex;gap:.4rem;padding:.4rem;border-radius:999px;transform:translate(-50%)}.gop-p3d__view{min-width:9.6rem;min-height:4rem;padding:0 1.8rem;border:0;border-radius:999px;font-family:var(--font-heading-family);font-size:1.2rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gop-muted);background:transparent;cursor:pointer;transition:color .25s,background .25s,box-shadow .25s;-webkit-tap-highlight-color:transparent}.gop-p3d__view[aria-pressed=true]{color:var(--gop-ink);background:linear-gradient(135deg,#7ffff0,var(--gop-accent) 60%);box-shadow:0 6px 18px -6px rgba(var(--gop-accent-rgb),.7)}@media(hover:hover){.gop-p3d__view[aria-pressed=false]:hover{color:var(--gop-text)}}.gop-p3d__hint{position:absolute;left:50%;bottom:7rem;z-index:2;display:inline-flex;align-items:center;gap:.7rem;margin:0;font-size:1.2rem;font-weight:600;letter-spacing:.04em;white-space:nowrap;color:var(--gop-muted);transform:translate(-50%);pointer-events:none}.gop-p3d__hint svg{width:1.5rem;height:1.5rem;color:var(--gop-accent)}.gop-p3d .gop-p3d__views,.gop-p3d__hint{opacity:0;visibility:hidden;transition:opacity .6s var(--gop-ease),visibility .6s}.gop-p3d .gop-p3d__stage.is-ready .gop-p3d__views,.gop-p3d__stage.is-ready .gop-p3d__hint{opacity:1;visibility:visible}.gop-p3d__stage.is-ready.is-touched .gop-p3d__hint{opacity:0;visibility:hidden}.gop-p3d__panel{grid-area:panel;display:grid;gap:2.2rem;margin-top:2.8rem;padding:2.6rem}.gop-p3d__label{display:flex;align-items:baseline;gap:1rem;margin:0 0 1.2rem;font-family:var(--font-heading-family);font-size:1.2rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gop-muted)}.gop-p3d__label strong{font-size:1.5rem;letter-spacing:.04em;text-transform:none;color:var(--gop-text)}.gop-p3d__swatches,.gop-p3d__chips{display:flex;flex-wrap:wrap;gap:1rem}.gop-p3d__swatches{gap:1.4rem}.gop-p3d__swatch{position:relative;width:4.4rem;height:4.4rem;padding:0;border:0;border-radius:50%;background:var(--sw);background:radial-gradient(circle at 32% 26%,#ffffff8c,#fff0 45%),linear-gradient(150deg,color-mix(in srgb,var(--sw) 78%,#fff),var(--sw) 52%,color-mix(in srgb,var(--sw) 70%,#000));box-shadow:inset 0 0 0 1px #ffffff38,0 4px 12px -4px #0009;cursor:pointer;transition:transform .25s var(--gop-ease),box-shadow .25s;-webkit-tap-highlight-color:transparent}.gop-p3d__swatch[aria-pressed=true]{box-shadow:inset 0 0 0 1px #ffffff38,0 0 0 3px var(--gop-bg),0 0 0 5px var(--gop-accent),0 0 18px rgba(var(--gop-accent-rgb),.45)}@media(hover:hover){.gop-p3d__swatch:hover{transform:translateY(-2px)}}.gop-p3d__chip{min-width:8.4rem;min-height:4.4rem;padding:0 1.6rem;border:1px solid rgba(255,255,255,.12);border-radius:1.4rem;font-family:var(--font-body-family);font-size:1.4rem;font-weight:600;color:var(--gop-text);background:#ffffff0a;cursor:pointer;transition:border-color .25s,background .25s,box-shadow .25s,color .25s;-webkit-tap-highlight-color:transparent}.gop-p3d__chip[aria-pressed=true]{border-color:var(--gop-accent);background:rgba(var(--gop-accent-rgb),.12);box-shadow:inset 0 0 0 1px var(--gop-accent),0 0 18px -6px rgba(var(--gop-accent-rgb),.7)}@media(hover:hover){.gop-p3d__chip[aria-pressed=false]:hover{border-color:rgba(var(--gop-accent-rgb),.45)}}.gop-p3d__swatch:focus-visible,.gop-p3d__chip:focus-visible,.gop-p3d__view:focus-visible{outline:2px solid var(--gop-accent);outline-offset:3px}.gop-p3d__buy{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1.6rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.08)}.gop-p3d__summary{margin:0;font-size:1.4rem;font-weight:600;color:var(--gop-muted)}.gop-p3d__price{margin:0;font-family:var(--font-heading-family);font-size:2.4rem;font-weight:800;color:var(--gop-accent)}.gop-p3d__cta{width:100%;min-height:5.6rem;padding:1rem 2.4rem;line-height:1.25;text-align:center}.gop-p3d__benefits{display:flex;flex-wrap:wrap;gap:.8rem;margin:0;padding:0;list-style:none}.gop-p3d__benefits li{display:inline-flex;align-items:center;gap:.7rem;padding:.7rem 1.2rem;font-size:1.25rem;font-weight:600;color:var(--gop-text);background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:999px}.gop-p3d__benefits svg{width:1.5rem;height:1.5rem;flex:none;color:var(--gop-accent)}@media screen and (max-width:989px){.gop-p3d__inner{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "stage" "panel"}.gop-p3d__head,.gop-p3d__title{text-align:center}.gop-p3d__text{margin-left:auto}.gop-p3d__stage{height:60vh;height:60svh;min-height:40rem;max-height:68rem;margin-top:.8rem}.gop-p3d__panel{width:100%;max-width:60rem;margin:1.2rem auto 0}}@media screen and (max-width:749px){.gop-p3d{padding-top:4.8rem}.gop-p3d__stage{margin-inline:-1.5rem}.gop-p3d__panel{gap:2rem;padding:2rem}.gop-p3d__swatches{gap:1.2rem}.gop-p3d__chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.6rem,1fr));gap:.8rem}.gop-p3d__chip{min-width:0;padding:0 .6rem;font-size:1.35rem}.gop-p3d__cta{font-size:1.3rem;letter-spacing:.06em}}html.gop-light .gop-p3d__chip,html.gop-light .gop-p3d__benefits li{background:#fff;border-color:#0a18151f}html.gop-light .gop-p3d__buy{border-top-color:#0a18151a}html.gop-light .gop-p3d__swatch{box-shadow:inset 0 0 0 1px #0a181524,0 4px 12px -6px #0a181566}html.gop-light .gop-p3d__swatch[aria-pressed=true]{box-shadow:inset 0 0 0 1px #0a181524,0 0 0 3px var(--gop-bg),0 0 0 5px var(--gop-accent)}@media(prefers-reduced-motion:reduce){html.gop-js .gop-p3d__stage:not(.is-ready):not(.is-fallback) .gop-p3d__phone:after{animation:none}.gop-p3d__canvas,.gop-p3d__fallback{transition:none}}.gop-p3d__unbox{position:absolute;left:50%;bottom:1.6rem;z-index:3;display:inline-flex;align-items:center;gap:1rem;min-height:4.8rem;padding:0 2.2rem 0 1.6rem;border:1px solid rgba(var(--gop-accent-rgb),.45);border-radius:999px;font-family:var(--font-heading-family);font-size:1.3rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--gop-text);cursor:pointer;transform:translate(-50%);box-shadow:0 0 28px -6px rgba(var(--gop-accent-rgb),.55);opacity:0;visibility:hidden;transition:opacity .5s var(--gop-ease),visibility .5s;animation:gop-p3d-pulse 2.2s ease-in-out infinite}.gop-p3d__stage.is-ready.is-boxed:is([data-box=front],[data-box=seal]) .gop-p3d__unbox{opacity:1;visibility:visible}.gop-p3d__unbox-arrows{display:inline-flex}.gop-p3d__unbox-arrows i{width:.9rem;height:.9rem;margin-right:-.2rem;border-top:2.5px solid var(--gop-accent);border-right:2.5px solid var(--gop-accent);transform:rotate(45deg);animation:gop-p3d-arrow 1.2s ease-in-out infinite}.gop-p3d__unbox-arrows i:nth-child(2){animation-delay:.15s}.gop-p3d__unbox-arrows i:nth-child(3){animation-delay:.3s}@keyframes gop-p3d-arrow{0%,to{opacity:.25;translate:0 0}50%{opacity:1;translate:.4rem 0}}@keyframes gop-p3d-pulse{0%,to{box-shadow:0 0 22px -8px rgba(var(--gop-accent-rgb),.5)}50%{box-shadow:0 0 34px -4px rgba(var(--gop-accent-rgb),.85)}}.gop-p3d__stage.is-boxed .gop-p3d__views,.gop-p3d__stage.is-boxed .gop-p3d__hint{opacity:0!important;visibility:hidden!important}.gop-p3d__stage.is-unboxing .gop-p3d__glow{animation:gop-p3d-reveal 1.6s var(--gop-ease)}@keyframes gop-p3d-reveal{0%{opacity:1;scale:1}35%{opacity:1;scale:1.25;filter:blur(8px) brightness(2.2)}to{opacity:1;scale:1}}@media(prefers-reduced-motion:reduce){.gop-p3d__unbox,.gop-p3d__unbox-arrows i{animation:none}}.gop-p3d__unbox-t--seal,.gop-p3d__stage[data-box=seal] .gop-p3d__unbox-t--front{display:none}.gop-p3d__stage[data-box=seal] .gop-p3d__unbox-t--seal{display:inline}.gop-p3d__glow{background:radial-gradient(closest-side,color-mix(in srgb,color-mix(in srgb,var(--p3d-body) 60%,#fff) 26%,transparent),color-mix(in srgb,var(--p3d-body) 8%,transparent) 55%,transparent);transition:background .6s}.gop-p3d:before{background:radial-gradient(42% 55% at 28% 52%,color-mix(in srgb,color-mix(in srgb,var(--p3d-body) 70%,#fff) 14%,transparent),transparent 72%),radial-gradient(30% 40% at 82% 18%,color-mix(in srgb,var(--p3d-body) 12%,transparent),transparent 70%);animation:gop-p3d-drift 16s ease-in-out infinite alternate}@keyframes gop-p3d-drift{0%{translate:-3% 0}to{translate:3% -2%}}@media(prefers-reduced-motion:reduce){.gop-p3d:before{animation:none}}
/*# sourceMappingURL=/cdn/shop/t/20/assets/gop-phone3d.css.map */