[data-phone]{transform-style:preserve-3d}.phone{--w:272px;--r:46px;width:var(--w);aspect-ratio:9/19.5;transform-style:preserve-3d;position:relative}.phone-slice{border-radius:var(--r);background:linear-gradient(90deg,#6f757d,#d9dde2 18%,#a9afb7 50%,#e4e7eb 82%,#6f757d);position:absolute;inset:0}.phone-front{border-radius:var(--r);background:#0b0d10;padding:9px;position:absolute;inset:0;transform:translateZ(.6px);box-shadow:inset 0 0 0 1.5px #3b4048,0 0 0 1.5px #c9cdd3}.phone-screen{border-radius:calc(var(--r) - 9px);isolation:isolate;background:#000;height:100%;position:relative;overflow:hidden}.phone-island{z-index:5;background:#000;border-radius:20px;width:84px;height:24px;position:absolute;top:19px;left:50%;transform:translate(-50%)}.phone-glare{z-index:6;border-radius:calc(var(--r) - 9px);pointer-events:none;background:linear-gradient(110deg,#ffffff29,#fff0 38%);position:absolute;inset:9px}.phone-shadow{filter:blur(6px);background:radial-gradient(closest-side,#0c1e3c52,#0000);border-radius:50%;height:36px;position:absolute;bottom:-46px;left:8%;right:8%;transform:translateZ(-40px)rotateX(90deg)}.notif{color:#0c0e10;background:#f3f5f8f0;border-radius:20px;padding:10px 12px;box-shadow:0 6px 18px #081e3c1f}.marquee{width:max-content;animation:60s linear infinite marquee;display:flex}@keyframes marquee{to{transform:translate(-50%)}}.marquee-mask{-webkit-mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000);mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000)}@media (prefers-reduced-motion:reduce){.marquee{animation:none}}@media (prefers-reduced-motion:no-preference){[data-rise=wait]{opacity:0;transform:translateY(36px)}[data-rise=in]{transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}[data-straighten]{transition:transform 1.6s cubic-bezier(.16,1,.3,1);transform:perspective(1400px)translateY(0)rotateX(0)rotate(0)}[data-straighten=wait]{transform:perspective(1400px)translateY(60px)rotateX(28deg)rotate(-9deg)}[data-words] [data-word]{transition:color .5s ease calc(var(--i) * 32ms)}[data-words=wait] [data-word]:not([data-chip]){color:#555b63}[data-words] [data-chip]{transition:opacity .5s ease calc(var(--i) * 32ms), transform .6s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i) * 32ms)}[data-words=wait] [data-chip]{opacity:.25;transform:scale(.7)}[data-slide]{animation:40s linear infinite alternate slide}}@keyframes slide{0%{transform:translate(4%)}to{transform:translate(-46%)}}[data-stage] [data-phone]{transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity .6s,visibility .6s}[data-stage] [data-phone=lock]{transform:perspective(1800px)translateY(70px)rotateY(-32deg)rotateX(12deg)}[data-stage] [data-phone=mail],[data-stage] [data-phone=detail]{opacity:0;visibility:hidden;transform:perspective(1800px)translate3d(0,70px,-160px)rotateY(-32deg)rotateX(12deg)}[data-stage="1"] [data-phone=lock]{transform:perspective(1800px)translate(0,0)rotateY(-14deg)rotateX(5deg)}[data-stage="2"] [data-phone=lock],[data-stage="3"] [data-phone=lock]{transform:perspective(1800px)translate(0,0)rotateY(-8deg)rotateX(3deg)}[data-stage="2"] [data-phone=mail],[data-stage="3"] [data-phone=mail]{opacity:1;visibility:visible;transform:perspective(1800px)translate3d(calc(-1*min(25vw,330px)),0,-70px)rotateY(26deg)rotateX(0)}[data-stage="2"] [data-phone=detail],[data-stage="3"] [data-phone=detail]{opacity:1;visibility:visible;transform:perspective(1800px)translate3d(min(25vw,330px),0,-70px)rotateY(-26deg)rotateX(0)}[data-stage] [data-notif]{opacity:0;transition:opacity .45s,transform .6s cubic-bezier(.34,1.56,.64,1);transform:translateY(-26px)scale(.94)}[data-stage] [data-notif]:nth-child(2){transition-delay:.3s}[data-stage] [data-notif]:nth-child(3){transition-delay:.6s}[data-stage="1"] [data-notif],[data-stage="2"] [data-notif],[data-stage="3"] [data-notif]{opacity:1;transform:none}[data-stage] [data-step]{border-color:#e2e4e8;transition:border-color .3s}[data-stage] [data-step-title]{color:#555b63;transition:color .3s}[data-stage="1"] [data-step="0"],[data-stage="2"] [data-step="1"],[data-stage="3"] [data-step="2"]{border-color:#0c0e10}[data-stage="1"] [data-step="0"] [data-step-title],[data-stage="2"] [data-step="1"] [data-step-title],[data-stage="3"] [data-step="2"] [data-step-title]{color:#0c0e10}
