/* Three local logo treatments between the cinema hero and feature catalog. */
.platform-strip{--logo-width:146px;--logo-gap:64px;--loop-time:42s;position:relative;display:flex;align-items:center;min-height:220px;padding:64px 0;isolation:isolate;overflow:hidden;background:#050509}
.platform-strip+.feature-catalog{padding-top:24px}
.platform-window{position:relative;width:min(1240px,100%);margin:auto;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.platform-track{display:flex;align-items:center;width:max-content;animation:platform-flow var(--loop-time) linear infinite;will-change:transform}
.platform-group{display:flex;align-items:center;gap:var(--logo-gap);padding-right:var(--logo-gap);flex:none;width:max-content;list-style:none;margin:0;padding-block:0;padding-left:0}
.platform-logo{width:var(--logo-width);height:58px;flex:none;display:flex;align-items:center;justify-content:center;position:relative}
.platform-logo img{display:block;max-width:100%;width:auto;max-height:34px;height:auto;object-fit:contain;user-select:none;pointer-events:none}
.platform-logo[data-platform="youtube"] img{width:146px;max-height:50px}
.platform-logo[data-platform="chzzk"] img{width:110px;image-rendering:auto}
.platform-logo[data-platform="soop"] img{width:107px;max-height:52px}
.platform-logo[data-platform="twitch"] img{width:110px;max-height:37px}
.platform-logo[data-platform="funnation"] img{width:140px}
.platform-logo[data-platform="toonation"] img{width:136px}
.platform-logo[data-platform="tossbank"] img{width:132px}
.platform-logo[data-platform="toonation"] img,.platform-logo[data-platform="tossbank"] img{filter:brightness(0) invert(1)}
.platform-logo[data-platform="kbank"] img{width:114px;filter:brightness(0) invert(1)}
.platform-style-1 .platform-logo img{filter:brightness(0) invert(1);opacity:.9}
.platform-style-1 .platform-window:before,.platform-style-1 .platform-window:after{content:'';position:absolute;left:7%;right:7%;height:1px;background:linear-gradient(90deg,transparent,#8873af36,transparent);pointer-events:none;z-index:1}
.platform-style-1 .platform-window:before{top:0}.platform-style-1 .platform-window:after{bottom:0}
.platform-style-2{--logo-width:174px;--logo-gap:20px;--loop-time:39s;min-height:254px;padding-block:72px;background:radial-gradient(ellipse at center,#49227020,transparent 70%),#050509}
.platform-style-2 .platform-window{padding-block:8px;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.platform-style-2 .platform-logo{height:78px;padding:20px 18px;border-radius:18px;border:1px solid #9670c34d;background:linear-gradient(145deg,#362348b0,#1c142eab);box-shadow:inset 0 1px #e7caff0d,0 10px 24px #0003;backdrop-filter:blur(8px)}
.platform-style-2 .platform-logo img{max-width:100%}
.platform-style-3{--logo-width:152px;--logo-gap:52px;--loop-time:41s;min-height:240px;padding-block:65px;background:radial-gradient(ellipse at 18% 50%,#256bdb18,transparent 58%),radial-gradient(ellipse at 80% 50%,#8931db24,transparent 60%),#070812}
.platform-style-3:before,.platform-style-3:after{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 2%,#3f6bfa99 25%,#a260f0aa 72%,transparent 98%);box-shadow:0 0 16px #5f61f74d;z-index:-1}
.platform-style-3:before{top:31px}.platform-style-3:after{bottom:31px}
.platform-style-3 .platform-logo{height:74px}
.platform-style-3 .platform-logo:after{content:'';position:absolute;right:calc(var(--logo-gap)/-2);width:3px;height:3px;border-radius:50%;background:#a28bec;box-shadow:0 0 10px #8b6ff4}
.platform-style-3 .platform-logo img{max-height:38px}
@keyframes platform-flow{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.logo-preview-tools{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;align-items:center;gap:5px;padding:7px;border:1px solid #8e69b380;border-radius:12px;background:#140c21ee;backdrop-filter:blur(16px);box-shadow:0 6px 30px #0007;font-size:11px;color:#fff}
.logo-preview-tools a{padding:8px 11px;border-radius:7px;white-space:nowrap}
.logo-preview-tools a[aria-current="page"]{background:#7950df;font-weight:850}
.logo-preview-tools a:hover{background:#4e326b}
.logo-preview-tools>a:first-child{border-right:1px solid #8f69b34d;border-radius:0;padding-right:15px}
@media(max-width:760px){.platform-strip{--logo-width:122px;--logo-gap:38px;min-height:184px;padding-block:50px}.platform-strip+.feature-catalog{padding-top:26px}.platform-logo{height:54px}.platform-logo img{max-height:29px;max-width:114px!important}.platform-style-2{--logo-width:150px;--logo-gap:14px;min-height:214px;padding-block:57px}.platform-style-2 .platform-logo{height:68px;padding:17px}.platform-style-3{--logo-width:128px;--logo-gap:40px;min-height:208px}.platform-style-3 .platform-logo{height:66px}.platform-style-3:before{top:23px}.platform-style-3:after{bottom:23px}.logo-preview-tools{right:10px;bottom:10px;gap:2px;padding:5px;font-size:10px}.logo-preview-tools a{padding:7px 8px}}
@media(prefers-reduced-motion:reduce){.platform-track{animation-duration:62s}}
.platform-motion-paused .platform-track{animation-play-state:paused}
.logo-motion-toggle{font:inherit;border:1px solid #77558f;border-radius:7px;padding:7px 11px;background:#241432;color:#fff;cursor:pointer;white-space:nowrap}
.logo-motion-toggle:focus-visible{outline:3px solid #ba95ff;outline-offset:4px}
.comparison-header .logo-motion-toggle{margin-left:auto;font-size:11px}
.comparison-header .logo-motion-toggle+a:last-child{margin-left:0}
@media(max-width:760px){.comparison-header{flex-wrap:wrap}.comparison-header .logo-motion-toggle{font-size:10px;padding:8px}.platform-logo[data-platform="youtube"] img{max-height:39px}.platform-logo[data-platform="soop"] img{max-height:43px}}
