/* Shared Arcadem logo: entrance, idle expression and a brief greeting. */
.brand{--brand-type-width:114px;display:flex;align-items:center;align-self:center;gap:10px;width:max-content;flex-shrink:0}
.brand-wordmarks{display:flex;flex-direction:column;align-items:center;gap:7px}
.brand .brand-wordmark,.site-footer .brand .brand-wordmark,.learning-header .brand .brand-wordmark,.onboarding-header .brand .brand-wordmark{display:block;width:var(--brand-type-width);height:auto;object-fit:contain;flex-shrink:0}
.brand-inverse .brand-wordmark{filter:brightness(0) invert(1)}
.brand-mark{display:grid;place-items:center;width:36px;height:39px;flex-shrink:0}
.arcadem-mark{width:100%;height:100%;overflow:visible}
.mark-body{transform-box:fill-box;transform-origin:50% 100%;animation:mark-breathe 5.8s ease-in-out infinite}
.mark-step{transform-box:fill-box;transform-origin:center;animation:mark-glance 5.8s linear infinite}
.brand:hover .arcadem-mark,.brand:focus-visible .arcadem-mark{animation:brand-greet .65s cubic-bezier(.2,0,0,1) both}
.site-footer .brand{--brand-type-width:116px;align-self:start;justify-self:start;gap:12px}
.site-footer .brand .brand-wordmark-en{width:104px}
.site-footer .brand-mark{width:40px;height:44px}
.learning-header .brand{--brand-type-width:102px;gap:9px}
.learning-header .brand-mark{width:30px;height:33px}
.brand-showcase>img{width:320px;max-width:100%;height:auto}
.brand-lockups{grid-template-columns:repeat(2,minmax(0,1fr))}
.brand-lockups>div{align-content:center;gap:22px}
.brand-lockups img{width:260px;max-width:100%;height:auto;max-height:none}
.brand-lockup-caption{font-size:12px;color:#777}
.brand-lockups>.dark .brand-lockup-caption{color:#b9b9b9}

/* Keep all four level cards inside their section, including the lower corners. */
#your-level .feature-visual{height:auto;min-height:836px;padding-block:50px}
#your-level .level-art{position:relative;inset:auto;width:100%;max-width:660px;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:clamp(24px,4vw,52px) clamp(16px,3vw,40px)}
#your-level .level-tile{aspect-ratio:16/17;min-width:0;padding:clamp(12px,1.4vw,20px);font-size:clamp(12px,1.25vw,18px)}
#your-level .level-tile .course-art{width:min(225px,85%);height:auto;aspect-ratio:360/280;flex-shrink:0}
.welcome-mascot .arcadem-mark{width:108px;height:118px;animation:mark-arrive .9s cubic-bezier(.2,0,0,1) both}
.logo-motion-scene:not(.is-visible),.logo-motion-scene:not(.is-visible) *,
.brand-mark:not(.is-visible) *{animation-play-state:paused!important}

/* Curve, drawing head and result share the same duration and path. */
.descent-line{stroke-dasharray:1;stroke-dashoffset:0;animation:loss-reveal 9s linear infinite}
.loss-moving-dot{offset-distance:100%;animation:loss-travel 9s linear infinite}
.loss-label{opacity:1;animation:loss-result 9s linear infinite}
.loss-target{opacity:.35;animation:loss-target 9s linear infinite}
@keyframes loss-reveal{0%,12%{stroke-dashoffset:1}74%,100%{stroke-dashoffset:0}}
@keyframes loss-travel{0%,12%{offset-distance:0%}74%,100%{offset-distance:100%}}
@keyframes loss-result{0%,71%{opacity:0}78%,94%{opacity:1}100%{opacity:0}}
@keyframes loss-target{0%,70%{opacity:.2}78%,100%{opacity:1}}

/* A lift, a landing and a reset, all synchronized with the platform ripples. */
.mascot-hop{transform:translate(0,-12px);transform-origin:0 0;animation:mascot-route 9s linear infinite}
.mascot-squash{transform-origin:0 0;animation:mascot-landing 9s ease-in-out infinite}
.mascot-shadow{opacity:.15;transform-box:fill-box;transform-origin:center;animation:mascot-ground 9s linear infinite}
.landing-shadow{opacity:0;animation:mascot-next-ground 9s linear infinite}
.pace-ring{opacity:0;transform-box:fill-box;transform-origin:center;animation:platform-ripple 9s linear infinite}
.pace-ring-next{animation-delay:4.8s}
.pace-tip{animation:pace-tooltip 9s ease-in-out infinite}
@keyframes mascot-route{
 0%,12%{transform:translate(0,-12px);opacity:1}
 25%{transform:translate(0,-20px);opacity:1}
 34%{transform:translate(0,0);opacity:1}
 45%{transform:translate(117px,-215px) rotate(-7deg);opacity:1}
 57%{transform:translate(250px,-205px);opacity:1}
 68%{transform:translate(250px,-218px);opacity:1}
 77%{transform:translate(250px,-209px);opacity:1}
 82%{transform:translate(250px,-227px);opacity:0}
 83%,89%{transform:translate(0,-36px);opacity:0}
 96%,100%{transform:translate(0,-12px);opacity:1}
}
@keyframes mascot-landing{
 0%,30%,40%,52%,65%,100%{transform:scale(1)}
 34%{transform:scale(1.08,.91)}
 45%{transform:scale(.96,1.05)}
 57%{transform:scale(1.09,.9)}
}
@keyframes mascot-ground{0%,30%,96%,100%{opacity:.15;transform:scale(1)}40%,84%{opacity:0;transform:scale(.45)}}
@keyframes mascot-next-ground{0%,45%,83%,100%{opacity:0}57%,77%{opacity:.17}}
@keyframes platform-ripple{0%,8%{opacity:0;transform:scale(.82)}17%{opacity:.5}32%,100%{opacity:0;transform:scale(1.3)}}
@keyframes pace-tooltip{0%,28%,93%,100%{opacity:1;transform:translateY(0)}35%,84%{opacity:0;transform:translateY(7px)}}

/* The reference's compact animated logo stage, re-created with Arcadem's mark. */
.cta-action{display:flex;flex-direction:column;align-items:center;gap:8px;width:300px;max-width:100%}
.cta-action>.button{width:100%}
.cta-logo-motion{height:110px;width:250px;max-width:100%}
.cta-motion-svg{width:100%;height:100%;overflow:visible}
.cta-mark-actor{transform-origin:48px 104px;animation:cta-visitor 10s cubic-bezier(.2,0,0,1) infinite}
.cta-ground{transform-box:fill-box;transform-origin:center;animation:cta-ground 10s linear infinite}
.cta-sparkles{opacity:0;animation:cta-sparkle 10s linear infinite}
@keyframes cta-visitor{
 0%{transform:translate(-90px,-8px) rotate(-24deg);opacity:0}
 10%{opacity:1}
 24%{transform:translate(0,-30px) rotate(6deg);opacity:1}
 32%{transform:translate(0,0) scale(1.08,.92);opacity:1}
 42%,76%{transform:translate(0,-5px);opacity:1}
 88%{transform:translate(95px,-25px) rotate(22deg);opacity:0}
 89%,100%{transform:translate(-90px,-8px);opacity:0}
}
@keyframes cta-ground{0%,18%,88%,100%{opacity:0;transform:scale(.65)}32%,77%{opacity:.15;transform:scale(1)}}
@keyframes cta-sparkle{0%,31%,58%,100%{opacity:0}37%,49%{opacity:1}}
@keyframes mark-breathe{0%,100%{transform:scale(1)}45%{transform:scale(1.018,.982)}70%{transform:scale(.994,1.01)}}
@keyframes mark-glance{0%,30%,47%,76%,83%,100%{transform:translate(0,0) scaleY(1)}36%,42%{transform:translate(-1.5px,-1px)}79%,80%{transform:scaleY(.12)}}
@keyframes brand-greet{0%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}65%{transform:rotate(5deg)}}
@keyframes mark-arrive{0%{opacity:0;transform:translateY(20px) scale(.78) rotate(-12deg)}65%{opacity:1;transform:translateY(-5px) scale(1.03) rotate(3deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}

@media(max-width:767px){
 .site-header.scrolled .header-inner{padding-inline:16px;gap:12px}
 .site-header.scrolled .header-inner nav{gap:8px}
 .site-header.scrolled .header-inner .button{min-height:44px;padding-inline:14px;font-size:12px}
 .site-header.scrolled .header-start{gap:4px}
 #your-level .feature-visual{min-height:0;padding-block:32px 48px;margin-top:0}
 .brand{--brand-type-width:92px;gap:8px}
 .brand-mark{width:29px;height:32px}
 .learning-header .brand{--brand-type-width:86px;gap:8px}
 .learning-header .brand-mark{width:27px;height:30px}
 .brand-showcase{padding:42px 28px}
 .brand-showcase>img{width:250px;height:auto}
 .brand-lockups{grid-template-columns:1fr}
 .welcome-mascot .arcadem-mark{width:90px;height:100px}
 .cta-action{width:280px}.cta-logo-motion{height:100px;width:225px}
 .feature-visual>.streak-art{width:calc(100% + 72px)}
}
@media(min-width:768px) and (max-width:1200px){.feature-visual>.streak-art{left:auto;right:0;width:calc(100% + 52px)}}

@media(max-width:359px){.site-header.scrolled .header-start-label{display:none}}

@media(prefers-reduced-motion:reduce){
 .loss-target{opacity:1}
 .descent-line,.loss-moving-dot,.loss-label,.loss-target,.mascot-hop,.mascot-squash,.mark-body,.mark-step,.cta-mark-actor,.cta-ground,.cta-sparkles,.pace-ring,.pace-tip{animation:none!important}
}
.reduce-motion .loss-target{opacity:1}