/* Comic motion edition. Static styles remain usable without JavaScript. */
:root { --comic-spring: cubic-bezier(.22,1.35,.4,1); }
body .comic-intro h1 { font-family:var(--mc-font-pixel); font-weight:400; letter-spacing:.6px; font-size:clamp(35px,4.5vw,52px); }
body .comic-sticker { border-radius:4px 12px 4px 12px; box-shadow:4px 4px 0 #080e10,6px 6px 0 #f4cf59; }
body .mc-banner { background:repeating-linear-gradient(135deg,transparent 0 31px,#10171909 32px 34px),#f4cf59!important; }
body .mc-banner-title { text-shadow:2px 2px 0 #fff5; }
body .hero-tag { background:var(--surface);color:var(--text);border:0;transform:rotate(-2deg);padding:6px 10px; }
body .quick-link { border:2px solid var(--line);box-shadow:3px 3px 0 #344649; }
body .quick-icon { border:1px solid var(--line);transform:rotate(-5deg); }
body .quick-link:nth-child(even) .quick-icon { transform:rotate(5deg); }
body.comic-landing .feature { border:2px solid var(--line);box-shadow:5px 5px 0 #344649; }
body.comic-landing .feature:nth-child(2) { box-shadow:5px 5px 0 #537347; }
body.comic-landing .preview-label { border-radius:3px 9px 3px 9px;box-shadow:3px 3px 0 #080e10; }
body .mc-nav-item.active .mc-nav-icon { color:var(--text) !important; }
.comic-tap-burst { position:fixed;width:32px;height:32px;z-index:10001;pointer-events:none;background:#f4cf59;clip-path:polygon(50% 0,60% 30%,85% 10%,73% 40%,100% 50%,73% 60%,85% 90%,60% 73%,50% 100%,40% 73%,12% 90%,28% 60%,0 50%,28% 40%,12% 10%,40% 28%); }
.comic-motion-on body .mc-btn,.comic-motion-on body .btn,.comic-motion-on body .mc-topup-btn,.comic-motion-on body .mc-banner,.comic-motion-on body .quick-link,.comic-motion-on body .mc-service-card,.comic-motion-on body .mc-country-card,.comic-motion-on body .mc-server-card,.comic-motion-on body .feature,.comic-motion-on body .step { transition:transform .24s var(--comic-spring),border-color .2s ease,box-shadow .2s ease!important; }
.comic-motion-on .quick-icon,.comic-motion-on .feature-icon,.comic-motion-on .mc-nav-icon,.comic-motion-on .mc-banner-link>i { transition:transform .28s var(--comic-spring)!important; }
@media(hover:hover) and (pointer:fine) {
  .comic-motion-on body .quick-link:hover,.comic-motion-on body .mc-service-card:hover,.comic-motion-on body .mc-country-card:hover,.comic-motion-on body .mc-server-card:hover { transform:translate(-2px,-5px) rotate(-.6deg);border-color:#53dfad!important;box-shadow:5px 7px 0 #080e10; }
  .comic-motion-on body .quick-link:hover .quick-icon,.comic-motion-on body .feature:hover .feature-icon { transform:rotate(8deg) scale(1.12); }
  .comic-motion-on body .mc-banner:hover { transform:translateY(-4px) rotate(.5deg); }
  .comic-motion-on body .mc-banner:hover .mc-banner-link>i { transform:translateX(4px); }
  .comic-motion-on body .feature:hover,.comic-motion-on body .step:hover { transform:translateY(-6px) rotate(-.5deg); }
  .comic-motion-on body .mc-nav-item:hover .mc-nav-icon { transform:translateY(-4px) rotate(-8deg); }
}
.comic-motion-on body .mc-btn:active,.comic-motion-on body .btn:active,.comic-motion-on body .mc-topup-btn:active,.comic-motion-on body .quick-link:active,.comic-motion-on body .mc-service-card:active,.comic-motion-on body .mc-banner:active { transform:translate(2px,3px) scale(.975)!important;box-shadow:0 0 0 transparent!important;transition-duration:80ms!important; }
.comic-motion-on body .mc-nav-item:active .mc-nav-icon { transform:scale(.83) rotate(-10deg); }
@media(max-width:600px) { body .comic-intro h1 {font-size:36px;letter-spacing:.4px;} }
@media(max-width:360px) { body .comic-intro h1 {font-size:30px;} }
@media(prefers-reduced-motion:reduce) { .comic-tap-burst {display:none;} *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;} }