/* A moving frosting line follows the actual rounded outline of each card. */
.donut-motion-card{position:relative;isolation:isolate}.donut-edge{position:absolute;inset:1.5px;width:calc(100% - 3px);height:calc(100% - 3px);overflow:visible;pointer-events:none;z-index:5;color:var(--accent);opacity:0;transition:opacity .4s}.donut-edge rect{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:donut-frosting-lap 7s linear infinite;animation-delay:var(--donut-delay,0ms);animation-play-state:paused}.donut-edge-trail{stroke-dasharray:12 88;opacity:.22;filter:drop-shadow(0 0 3px var(--accent))}.donut-edge .donut-edge-tip{stroke-dasharray:1.2 98.8;stroke-width:2.5;filter:drop-shadow(0 0 4px var(--accent))}.donut-in-view>.donut-edge{opacity:.55}.donut-in-view>.donut-edge rect{animation-play-state:running}.donut-motion-card:hover>.donut-edge,.donut-motion-card:focus-visible>.donut-edge{opacity:1}.donut-motion-card:hover>.donut-edge rect{animation-duration:3s}
body:not(.motion-off) .donut-arrive{animation:donut-card-unfold .75s cubic-bezier(.16,1,.3,1) var(--donut-delay,0ms) both}.donut-word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}.donut-word>span{display:inline-block;animation:donut-type-rise .8s cubic-bezier(.16,1,.3,1) var(--word-delay,0ms) both}.intro-copy h1 .donut-word:last-child>span{animation-name:donut-type-rise,donut-word-light;animation-duration:.8s,1.3s;animation-delay:var(--word-delay,0ms),.7s}
body:not(.motion-off) .product-art img{animation:none;translate:var(--cutout-x,0px) var(--cutout-y,0px);transition:translate .35s cubic-bezier(.2,.8,.2,1),filter .3s;will-change:auto}body:not(.motion-off) .product-card:hover .character-art-image{filter:brightness(1.06) drop-shadow(0 4px 10px color-mix(in srgb,var(--accent) 13%,transparent))}body:not(.motion-off) :is(.welcome-actions .primary,.home-help .secondary){translate:var(--magnet-x,0px) var(--magnet-y,0px);transition:translate .22s cubic-bezier(.2,.8,.2,1),background .2s,box-shadow .2s}.category-card .category-icon{transition:rotate .5s cubic-bezier(.2,.8,.2,1),scale .4s,color .3s}.category-card:hover .category-icon{rotate:-8deg;scale:1.12;color:var(--accent)}.product-card .square-arrow svg,.category-card>svg:not(.donut-edge){transition:translate .35s cubic-bezier(.2,.8,.2,1)}.product-card:hover .square-arrow svg{translate:2px -2px}.category-card:hover>svg:not(.donut-edge){translate:4px 0}.art-corner-brand i{position:relative}.art-corner-brand i:after{content:'';position:absolute;inset:-4px;border:1px dashed var(--accent);border-radius:50%;opacity:.5;animation:donut-stamp-turn 12s linear infinite}.product-card:not(.donut-in-view) .art-corner-brand i:after{animation-play-state:paused}
body:not(.motion-off) .brand-logo{animation:donut-sign-reveal .9s cubic-bezier(.16,1,.3,1) both}body:not(.motion-off) .site-header{animation:none}.donut-cart-flight{position:fixed;top:0;left:0;width:56px;height:70px;object-fit:contain;pointer-events:none;z-index:120;filter:drop-shadow(0 0 12px var(--accent));will-change:transform,opacity}.donut-sprinkle{position:fixed;top:0;left:0;width:3px;height:9px;border-radius:3px;background:var(--accent);pointer-events:none;z-index:120;will-change:transform,opacity}.donut-sprinkle:nth-child(3n){background:var(--theme-text)}
@keyframes donut-frosting-lap{to{stroke-dashoffset:-100}}@keyframes donut-card-unfold{from{opacity:.15;clip-path:inset(12% 0 0 round 12px);translate:0 18px}to{opacity:1;clip-path:inset(0 round 12px);translate:0 0}}@keyframes donut-type-rise{from{translate:0 110%;opacity:.2}to{translate:0 0;opacity:1}}@keyframes donut-word-light{0%,100%{text-shadow:none}45%{text-shadow:0 0 22px color-mix(in srgb,var(--accent) 48%,transparent)}}@keyframes donut-stamp-turn{to{rotate:360deg}}@keyframes donut-sign-reveal{from{clip-path:inset(0 100% 0 0);filter:blur(2px);translate:-5px 0}to{clip-path:inset(0);filter:none;translate:0 0}}
body.motion-off .donut-edge,body.donut-motion-paused .donut-edge{opacity:0}body.motion-off .donut-edge rect,body.donut-motion-paused .donut-edge rect{animation-play-state:paused}body.motion-off .donut-word>span,body.motion-off .art-corner-brand i:after{animation:none}body.donut-motion-paused .art-corner-brand i:after{animation-play-state:paused}body.motion-off .donut-word>span{translate:none;opacity:1}body.motion-off .donut-sprinkle,body.motion-off .donut-cart-flight{display:none}
@media(hover:none){.donut-edge{opacity:.35}.donut-in-view>.donut-edge rect{animation-duration:11s}.product-art img{translate:none!important}}@media(prefers-reduced-motion:reduce){.donut-edge,.donut-cart-flight,.donut-sprinkle{display:none!important}.donut-word>span{translate:none!important;opacity:1!important;animation:none!important}.donut-arrive{clip-path:none!important;translate:none!important;opacity:1!important}.art-corner-brand i:after{animation:none!important}}
/* Word masks preserve the headline's existing color. */
:is(.intro-copy,.page-heading,.checkout-title) h1 .donut-word,:is(.intro-copy,.page-heading,.checkout-title) h1 .donut-word>span{color:inherit!important}
/* Category tiles: a rolling reveal, cursor light and a different icon signature per game. */
.category-card{overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s,background .3s}.category-card>span,.category-card>svg:not(.donut-edge){position:relative;z-index:2}.category-card::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at var(--category-x,30%) var(--category-y,50%),color-mix(in srgb,var(--accent) 17%,transparent),transparent 72%);opacity:0;transition:opacity .35s}.category-card .category-icon{position:relative;flex-shrink:0}.category-card .category-icon::after{content:'';position:absolute;inset:-10px;border:1px solid var(--accent);border-radius:10px;opacity:0;pointer-events:none}.category-card>span:nth-child(2){transition:translate .3s cubic-bezier(.2,.8,.2,1)}
body:not(.motion-off) .category-card.donut-arrive{animation:category-roll-in .7s cubic-bezier(.16,1,.3,1) var(--category-delay,0ms) both}
body:not(.motion-off) .category-card:is(:hover,:focus-visible){transform:translateY(-3px);box-shadow:0 9px 25px #00000025,0 0 18px color-mix(in srgb,var(--accent) 7%,transparent)}body:not(.motion-off) .category-card:is(:hover,:focus-visible)::after{opacity:1}body:not(.motion-off) .category-card:is(:hover,:focus-visible)>span:nth-child(2){translate:3px 0}body:not(.motion-off) .category-card:is(:hover,:focus-visible)>.category-icon::after{animation:category-icon-echo .9s ease-out both}body:not(.motion-off) .category-card:is(:hover,:focus-visible)>svg:not(.donut-edge){animation:category-arrow-draw .65s cubic-bezier(.2,.8,.2,1) both}
body:not(.motion-off) .category-card[data-value="Forza Horizon 6"]:is(:hover,:focus-visible) .category-icon>svg{animation:category-engine .75s ease-out}body:not(.motion-off) .category-card[data-value="Rainbow 6"]:is(:hover,:focus-visible) .category-icon>svg{animation:category-lock .7s cubic-bezier(.2,.8,.2,1)}body:not(.motion-off) .category-card[data-value="Call of Duty"]:is(:hover,:focus-visible) .category-icon>svg{animation:category-signal .8s ease-out}body:not(.motion-off) .category-card[data-value="Utilities"]:is(:hover,:focus-visible) .category-icon>svg{animation:category-shield .8s ease-out}body:not(.motion-off) .category-card[data-value="Valorant"]:is(:hover,:focus-visible) .category-icon>svg{animation:category-dash .7s cubic-bezier(.2,.8,.2,1)}body:not(.motion-off) .category-card[data-value="Fortnite"]:is(:hover,:focus-visible) .category-icon>svg{animation:category-bolt .75s ease-out}
@keyframes category-roll-in{from{opacity:0;translate:0 15px;clip-path:inset(0 8% 0 0 round 10px)}to{opacity:1;translate:0 0;clip-path:inset(0 round 10px)}}@keyframes category-icon-echo{0%{opacity:0;scale:.65;rotate:-12deg}20%{opacity:.45}100%{opacity:0;scale:1.4;rotate:8deg}}@keyframes category-arrow-draw{0%{translate:0 0;opacity:1}35%{translate:13px 0;opacity:0}36%{translate:-8px 0;opacity:0}100%{translate:4px 0;opacity:1}}@keyframes category-engine{0%,100%{translate:0 0}20%{translate:-3px 0;transform:skewX(-8deg)}50%{translate:6px 0;transform:skewX(-12deg)}75%{translate:-1px 0;transform:skewX(0deg)}}@keyframes category-lock{0%{rotate:0deg;scale:1}35%{rotate:90deg;scale:.8}65%{rotate:90deg;scale:1.12}100%{rotate:90deg;scale:1}}@keyframes category-signal{0%,100%{scale:1;opacity:1}25%{scale:.8;opacity:.6}55%{scale:1.2;opacity:1}}@keyframes category-shield{0%,100%{rotate:0deg}25%{rotate:-13deg}55%{rotate:10deg}78%{rotate:-4deg}}@keyframes category-dash{0%,100%{translate:0 0}30%{translate:-4px 3px;scale:.85}65%{translate:5px -4px;scale:1.12}}@keyframes category-bolt{0%,100%{translate:0 0;rotate:0deg}30%{translate:0 -5px;rotate:12deg}55%{translate:0 2px;rotate:-8deg}80%{translate:0 -1px;rotate:3deg}}
body.motion-off .category-card::after{opacity:0}body.motion-off .category-card .category-icon::after{animation:none;opacity:0}@media(hover:none){body:not(.motion-off) .category-card:hover{transform:none}.category-card::after{display:none}}@media(prefers-reduced-motion:reduce){.category-card,.category-card *,.category-card::after,.category-card .category-icon::after{animation:none!important;transition:none!important}.category-card{transform:none!important;translate:none!important;clip-path:none!important}.category-card .category-icon::after{opacity:0!important}}