/* Catalogue header art: clipped decoration, with navigation above the moving light. */
.store-art-header {
    isolation: isolate;
    padding-top: 28px;
    background: var(--store-art-base);
}

.store-art-header--pc {
    --store-art-base: #06182d;
    --store-art-one: #168ccc;
    --store-art-two: #35ddd3;
    --store-art-three: #335ccc;
    --store-art-line: rgba(139, 234, 255, .23);
}

.store-art-header--game {
    --store-art-base: #170b32;
    --store-art-one: #843bd9;
    --store-art-two: #e347a5;
    --store-art-three: #245dce;
    --store-art-line: rgba(220, 171, 255, .28);
}

.store-art-header--book {
    --store-art-base: #290e17;
    --store-art-one: #99412d;
    --store-art-two: #c58b37;
    --store-art-three: #712548;
    --store-art-line: rgba(244, 208, 138, .26);
}

.store-art-canvas {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(115deg, var(--store-art-base), var(--store-art-three));
}

.store-art-wash {
    position: absolute;
    inset: -65% -20%;
    background: radial-gradient(ellipse at 28% 48%, var(--store-art-one), transparent 47%),
                radial-gradient(ellipse at 72% 60%, var(--store-art-two), transparent 40%);
    animation: store-art-flow 9s ease-in-out -3s infinite alternate;
}

.store-art-wash--two {
    background: radial-gradient(ellipse at 60% 40%, var(--store-art-three), transparent 38%),
                radial-gradient(ellipse at 80% 75%, var(--store-art-one), transparent 35%);
    animation-duration: 13s;
    animation-delay: -9s;
    animation-direction: alternate-reverse;
}

.store-art-lines {
    position: absolute;
    inset: -50% -20%;
    background: repeating-linear-gradient(0deg, transparent 0 35px, var(--store-art-line) 36px, transparent 37px),
                repeating-linear-gradient(90deg, transparent 0 71px, var(--store-art-line) 72px, transparent 73px);
    transform: skewX(-25deg);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 70%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 35%, #000 70%, transparent);
    animation: store-art-lines 15s ease-in-out infinite alternate;
}

.store-art-header--game .store-art-lines {
    background: repeating-linear-gradient(130deg, transparent 0 65px, var(--store-art-line) 66px, transparent 69px, transparent 110px);
}

.store-art-header--book .store-art-lines {
    background: repeating-radial-gradient(ellipse at 75% 120%, transparent 0 26px, var(--store-art-line) 27px, transparent 29px, transparent 42px);
}

.store-art-header > nav,
.store-art-header > [class$="-topbar-search"] { position: relative; z-index: 1; }
.store-art-header > nav { text-shadow: 0 2px 8px rgba(0, 0, 0, .7); }

.store-art-pause {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.store-art-toggle {
    position: absolute;
    top: 4px;
    right: max(16px, calc((100% - 1440px) / 2));
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 20px;
    padding: 2px 10px;
    background: rgba(4, 10, 24, .64);
    color: #fff;
    font-size: .65rem;
    line-height: 1.6;
    cursor: pointer;
}

.store-art-toggle:hover { background: rgba(4, 10, 24, .9); }
.store-art-toggle__play { display: none; }
.store-art-pause:focus-visible ~ .store-art-toggle { outline: 2px solid #fff; outline-offset: 2px; }
.store-art-pause:checked ~ .store-art-canvas > span { animation-play-state: paused; }
.store-art-pause:checked ~ .store-art-toggle .store-art-toggle__pause { display: none; }
.store-art-pause:checked ~ .store-art-toggle .store-art-toggle__play { display: inline; }

@keyframes store-art-flow {
    from { transform: translateX(-16%) rotate(-5deg); opacity: .55; }
    to { transform: translateX(16%) rotate(6deg); opacity: .95; }
}

@keyframes store-art-lines {
    from { transform: translateX(-4%) skewX(-25deg); opacity: .4; }
    to { transform: translateX(4%) skewX(-18deg); opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
    .store-art-canvas > span { animation: none; }
    .store-art-pause, .store-art-toggle { display: none; }
    .store-art-header { padding-top: 0; }
}