/* Spaced, staggered products retain their original desktop scale. */
[data-season][data-page="index"] #collection .fanstage{padding:50px 0 12px;overflow:visible}
[data-season][data-page="index"] #collection .fanstage .fanrow{display:grid;grid-template-columns:repeat(4,minmax(0,105px));justify-content:center;align-items:end;gap:24px 48px;padding:0 36px;min-height:0;max-width:700px;margin:auto}
[data-season][data-page="index"] #collection .fanrow img{width:100%;height:auto;max-height:none;margin:0;transform:translateX(-16px) rotate(-3deg);filter:drop-shadow(0 12px 7px #000b);transition:transform .25s ease}
[data-season][data-page="index"] #collection .fanrow img:nth-child(n+5){transform:translateX(16px) rotate(3deg)}
[data-season][data-page="index"] #collection .fanrow img:hover{transform:translateY(-5px)}
[data-season][data-page="index"] #collection[data-video-scene]{padding:95px 0 40px;min-height:660px}
[data-season][data-page="index"] .introduction{position:relative;overflow:clip}
[data-season][data-page="index"] .introduction>.whatis__web{top:0;right:0;transform:none;width:130px;height:130px;opacity:.24;z-index:0}
[data-season][data-page="index"] .home-help[data-video-scene]{min-height:460px;padding-top:80px;padding-bottom:80px;align-items:center}
[data-season][data-page="index"] #packs{background:linear-gradient(#08101866,#08101866),url('/img/seasons/halloween/lost-cemetery.webp') center/cover no-repeat}
/* A photograph that simply stops looks like a cut, and both of these scenes
   end against the flat page colour: #packs into the waitlist band, .home-help
   into the footer. Their last few inches now fade into it.

   It is an ::after and not a mask because a mask fades the section's CONTENT
   too - the pack cards, the headings, the FAQ - and what needs to fade is
   only the picture behind them.

   z-index 1 puts it above each section's backdrop (the photo, and in
   .home-help the video at 0 and its shade at 1) and below the copy, which
   both sections already stack at 2. Nothing else has to move.

   The stop is #120f1500 rather than `transparent`: same colour at zero alpha,
   so the fade cannot drift through grey on the way down. */
[data-season][data-page="index"] #packs,
[data-season][data-page="index"] .home-help {position:relative}
[data-season][data-page="index"] #packs::after,
[data-season][data-page="index"] .home-help::after {content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(120px,17vw,240px);background:linear-gradient(#120f1500,#120f15);pointer-events:none;z-index:1}

[data-season][data-page="index"] #packs .pack{background:linear-gradient(145deg,#10191eef,#201819f2);box-shadow:0 12px 30px #0008}
[data-season][data-page="index"] #packs .sec__head,[data-season][data-page="index"] #packs .muted{text-shadow:0 2px 6px #000}
[data-season][data-page="index"] .season-leaf{width:21px;height:31px;background:url('/img/seasons/halloween/autumn-leaf.svg') center/contain no-repeat;filter:drop-shadow(1px 2px 2px #0005);animation:leaf-drift 22s linear infinite;top:0;left:9%;opacity:0}
[data-season][data-page="index"] .season-leaf--distant{left:76%;width:13px;height:20px;animation-delay:-12s;animation-duration:29s;filter:brightness(.65) blur(.3px)}
@keyframes leaf-drift{0%{opacity:0;transform:translate(0,-30px) rotate(-25deg)}12%{opacity:.7}35%{transform:translate(55px,150px) rotate(65deg) scaleX(.6)}65%{opacity:.6;transform:translate(20px,320px) rotate(150deg) scaleX(1)}90%,100%{opacity:0;transform:translate(90px,540px) rotate(240deg)}}
@media(max-width:700px){
 [data-season][data-page="index"] #collection[data-video-scene]{padding-top:calc(56.25vw + 10px);padding-bottom:30px;min-height:0}
 [data-season][data-page="index"] #collection .fanstage .fanrow{grid-template-columns:repeat(4,minmax(0,76px));gap:22px 14px;padding:0 18px}
 [data-season][data-page="index"] #collection .fanrow img{transform:translateX(-5px) rotate(-3deg)}
 [data-season][data-page="index"] #collection .fanrow img:nth-child(n+5){transform:translateX(5px) rotate(3deg)}
 [data-season][data-page="index"] .home-help[data-video-scene]{min-height:0;padding-top:calc(56.25vw + 36px);padding-bottom:48px}
 [data-season][data-page="index"] .introduction>.whatis__web{width:90px;height:90px;opacity:.2}
}
@media(prefers-reduced-motion:reduce){[data-season][data-page="index"] .season-leaf{display:none}[data-season][data-page="index"] #collection .fanrow img{transition:none}}
/* Override the legacy collection artwork even when motion is paused. */
[data-season][data-page="index"] #collection[data-video-scene]{background:#141119 var(--video-poster) center/cover no-repeat}
@media(max-width:700px){[data-season][data-page="index"] #collection[data-video-scene]{background-size:100% auto;background-position:center top}}
/* The collection is one layered scene on every screen size. */
@media(max-width:700px){
 [data-season][data-page="index"] #collection[data-video-scene]{padding:50px 0 30px;min-height:560px;background-size:cover;background-position:center}
 [data-season][data-page="index"] #collection[data-video-scene]>.scene-video{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% center}
 [data-season][data-page="index"] #collection[data-video-scene]>.scene-video-shade{height:100%;background:linear-gradient(#0b111620,#0b111640)}
}
@media(max-width:700px){
 [data-season][data-page="index"] .home-help[data-video-scene]{padding-top:48px;padding-bottom:48px;background-size:cover;background-position:center}
 [data-season][data-page="index"] .home-help[data-video-scene]>.scene-video{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:60% center}
 [data-season][data-page="index"] .home-help[data-video-scene]>.scene-video-shade{height:100%;background:#07101a55}
}
@media(max-width:700px){
 [data-season][data-page="index"] .hero[data-video-scene]{padding-top:36px;background-size:cover;background-position:40% center}
 [data-season][data-page="index"] .hero[data-video-scene]>.scene-video{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:40% center}
 [data-season][data-page="index"] .hero[data-video-scene]>.scene-video-shade{height:100%;background:linear-gradient(#090e13a6,#090e1366 50%,#090e1322)}
}
.scene-video-play{position:absolute;right:12px;bottom:12px;z-index:6;min-height:44px;padding:10px 14px;border:1px solid #db9150;background:#241923ed;color:#fff3dc;font:600 16px 'Barlow Condensed',sans-serif;cursor:pointer}
.scene-video-play[hidden]{display:none}.scene-video-play:focus-visible{outline:3px solid #ff7b19;outline-offset:3px}