.logo-gallery{padding:55px 0;border-top:1px solid #dce0e6;scroll-margin-top:110px}.logo-gallery>header{max-width:760px;margin-bottom:30px}.logo-gallery h2{font-size:clamp(30px,4vw,48px);margin:14px 0}.logo-gallery>header p{line-height:1.8}.logo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}.logo-card{background:white;border:1px solid #fff;border-radius:24px;overflow:hidden;scroll-margin-top:115px;box-shadow:0 15px 45px #17203308}.logo-stage{height:300px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;isolation:isolate;overflow:hidden;background:#f3f1ed}.logo-stage:before{content:'';position:absolute;inset:16px;border:1px solid #fff9;border-radius:12px;z-index:-1}.logo-stage .motion-mark{width:72%;height:auto;aspect-ratio:3934/614;object-fit:contain;position:relative;z-index:2;max-width:420px;filter:none}.logo-stage .signature{position:absolute;top:calc(50% + 40px);font-size:10px;letter-spacing:.19em;color:#4e5460;text-align:center;padding:0 20px}.logo-stage .stage-label{position:absolute;left:27px;top:25px;font-size:9px;letter-spacing:.14em;color:#737b85}.logo-copy{padding:25px}.logo-copy h3{font-size:23px;margin:5px 0 12px}.logo-copy p{font-size:13px;line-height:1.8}.logo-copy small{display:block;font-size:11px;color:#626b79;margin-bottom:15px}.logo-controls{display:flex;gap:8px;flex-wrap:wrap}.logo-controls button{border:0;border-radius:25px;padding:10px 15px;background:#171b24;color:white;cursor:pointer;font:500 12px Poppins,Arial,sans-serif}.logo-controls button:first-child{background:#e9214e}.logo-controls button:disabled{opacity:.4;cursor:default}.logo-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:12px}.logo-links a:first-child{color:#cf1739;font-weight:600}.logo-status{min-height:20px;margin-top:10px;font-size:10px;color:#626b79}.logo-stage>*{animation-fill-mode:both!important}.logo-stage.paused *{animation-play-state:paused!important}.motion-paused .logo-stage *{animation-play-state:paused!important}.logo-stage .accent-line{position:absolute;width:72%;height:3px;background:#ff2855;top:calc(50% + 29px);transform-origin:left}.logo-stage .halo{position:absolute;width:220px;height:220px;border-radius:50%;border:1px solid #f3264c60;z-index:-1}.logo-stage .halo:after{content:'';position:absolute;width:10px;height:10px;background:#ff2855;border-radius:50%;top:27px;left:27px;box-shadow:0 0 0 8px #ff285514}.logo-stage .halo.two{width:265px;height:265px;transform:rotate(90deg);border-style:dashed;border-color:#d3c8c9}.logo-stage .light-pass{position:absolute;inset:-70%;background:linear-gradient(110deg,transparent 43%,#fff9 49%,#fff 50%,#fff9 51%,transparent 57%);transform:translateX(70%);z-index:3;pointer-events:none;opacity:0}.logo-stage .curtain{position:absolute;inset:0;background:#ff2855;z-index:4;transform:translateX(101%)}.logo-stage .dot{position:absolute;width:12px;height:12px;border-radius:50%;background:#ff2855;top:calc(50% + 36px);transform:scale(0)}
.logo-mask{background:linear-gradient(135deg,#f7f3ef,#f9e8ed)}.logo-mask.run .motion-mark{animation:lm-mask 2.4s cubic-bezier(.2,.7,.2,1)}.logo-mask.run .curtain{animation:lm-curtain 2.4s ease}.logo-mask.run .signature{animation:lm-caption 2.4s ease}
@keyframes lm-mask{0%,18%{clip-path:inset(0 100% 0 0);transform:translateX(-16px)}70%,100%{clip-path:inset(0);transform:none}}@keyframes lm-curtain{0%{transform:translateX(-101%)}30%{transform:translateX(0)}65%,100%{transform:translateX(101%)}}
.logo-kinetic{background:linear-gradient(130deg,#e6ecf1,#fafbfc)}.logo-kinetic.run .motion-mark{animation:lm-kinetic 2.4s cubic-bezier(.2,.8,.2,1)}.logo-kinetic.run .accent-line{animation:lm-line 2.4s ease}.logo-kinetic.run .signature{animation:lm-caption 2.4s ease}
@keyframes lm-kinetic{0%{transform:translateY(70px) scale(.75);opacity:0;filter:blur(8px)}45%{transform:translateY(-9px) scale(1.03);opacity:1;filter:blur(0)}70%,100%{transform:none;opacity:1;filter:blur(0)}}@keyframes lm-line{0%,38%{transform:scaleX(0)}75%,100%{transform:scaleX(1)}}
.logo-light{background:linear-gradient(140deg,#dddde2,#fff 50%,#e8e9ec)}.logo-light.run .motion-mark{animation:lm-focus 3s ease}.logo-light.run .light-pass{animation:lm-sweep 3s ease}.logo-light.run .signature{animation:lm-caption 3s ease}
@keyframes lm-focus{0%{opacity:0;filter:blur(10px)}40%,100%{opacity:1;filter:blur(0)}}@keyframes lm-sweep{0%,20%{opacity:0;transform:translateX(-65%)}30%{opacity:1}80%{opacity:1;transform:translateX(65%)}100%{opacity:0;transform:translateX(70%)}}
.logo-orbit{background:radial-gradient(circle,#fff 0%,#fff7f8 55%,#ede7ea)}.logo-orbit.run .halo{animation:lm-orbit 3.2s ease}.logo-orbit.run .halo.two{animation:lm-orbit-two 3.2s ease}.logo-orbit.run .motion-mark{animation:lm-orbit-logo 3.2s ease}.logo-orbit.run .signature{animation:lm-caption 3.2s ease}
@keyframes lm-orbit{0%{transform:rotate(-180deg) scale(.4);opacity:0}30%{opacity:1}100%{transform:rotate(0) scale(1);opacity:1}}@keyframes lm-orbit-two{0%{transform:rotate(270deg) scale(.5);opacity:0}30%{opacity:1}100%{transform:rotate(90deg) scale(1);opacity:1}}@keyframes lm-orbit-logo{0%,15%{opacity:0;transform:scale(.85)}65%,100%{opacity:1;transform:scale(1)}}
.logo-depth{perspective:850px;background:linear-gradient(140deg,#ece5df,#fdfcfb)}.logo-depth:after{content:'';position:absolute;bottom:66px;width:55%;height:15px;border-radius:50%;background:#24212b18;filter:blur(8px);z-index:-1}.logo-depth.run .motion-mark{animation:lm-depth 3s cubic-bezier(.2,.7,.2,1)}.logo-depth.run .signature{animation:lm-caption 3s ease}
@keyframes lm-depth{0%{transform:rotateY(-80deg) translateZ(-90px);opacity:0}55%{transform:rotateY(12deg) translateZ(25px);opacity:1}85%,100%{transform:rotateY(0) translateZ(0);opacity:1}}
.logo-signature{background:linear-gradient(135deg,#faf9f5,#f8eaee)}.logo-signature.run .motion-mark{animation:lm-sign 3.4s ease}.logo-signature.run .accent-line{animation:lm-sign-line 3.4s ease}.logo-signature.run .signature{animation:lm-sign-caption 3.4s ease}
@keyframes lm-sign{0%,12%{opacity:0;transform:translateY(16px)}45%,100%{opacity:1;transform:none}}@keyframes lm-sign-line{0%,35%{transform:scaleX(0)}65%,100%{transform:scaleX(1)}}@keyframes lm-sign-caption{0%,55%{opacity:0;transform:translateY(10px)}85%,100%{opacity:1;transform:none}}@keyframes lm-caption{0%,55%{opacity:0;transform:translateY(10px)}90%,100%{opacity:1;transform:none}}
@media(max-width:700px){.logo-grid{grid-template-columns:1fr}.logo-stage{height:255px}.logo-copy{padding:22px}.logo-stage .motion-mark{width:80%}.logo-stage .halo{width:180px;height:180px}.logo-stage .halo.two{width:220px;height:220px}.logo-stage .signature{font-size:8px;letter-spacing:.12em}}
@media(prefers-reduced-motion:reduce){.logo-stage *{animation:none!important;transition:none!important}}