/* Peripheral compositions drawn from the selected tour's visual vocabulary.
   Orbit campaign / Take Me Home red and cream / Knebworth open air /
   Purple Rain performance light. The product always keeps the clear centre. */
/* Each artist keeps a complete, opaque room. Crossfade those rooms together,
   rather than replacing a gradient while the underlying colour is still moving. */
.atmosphere{overflow:hidden;background:var(--atmosphere-paper);opacity:0;transition:opacity 1s ease}
.atmosphere[data-atmosphere=gaga]{--atmosphere-paper:#f3f4f3}
.atmosphere[data-atmosphere=one-direction]{--atmosphere-paper:#91202f}
.atmosphere[data-atmosphere=oasis]{--atmosphere-paper:#19456f}
.atmosphere[data-atmosphere=prince]{--atmosphere-paper:#47245f}
body[data-collection=gaga] .atmosphere[data-atmosphere=gaga],
body[data-collection=one-direction] .atmosphere[data-atmosphere=one-direction],
body[data-collection=oasis] .atmosphere[data-atmosphere=oasis],
body[data-collection=prince] .atmosphere[data-atmosphere=prince]{opacity:1}
.atmosphere::before,.atmosphere::after,
.atmosphere-light::before,.atmosphere-light::after{
 content:"";position:absolute;pointer-events:none;
 transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.atmosphere .ambient-reflection{display:none;animation:none;will-change:auto}
.atmosphere .atmosphere-light{inset:0;opacity:1;filter:none}
.atmosphere .atmosphere-floor{inset:0;transition:opacity .8s ease;pointer-events:none}

/* Monster Ball: cropped chrome orbits, a bright stage, a cool silver floor. */
body[data-collection=gaga]{--paper:#f3f4f3}
.atmosphere[data-atmosphere=gaga] .atmosphere-light{
 background:radial-gradient(ellipse at 50% 40%,#fff 0,#ffffff9e 28%,transparent 60%),
 linear-gradient(125deg,#cbd3dc55 0,transparent 32%,transparent 74%,#bbc1cc36 100%);
}
.atmosphere[data-atmosphere=gaga]::before{
 left:-36vw;top:-36vh;width:76vw;height:125vh;border:2px solid #8b949d4d;
 border-radius:50%;transform:rotate(-28deg);
 box-shadow:inset 0 0 0 4px #ffffff9c,0 0 0 8px #aeb6bd20;
 mask-image:linear-gradient(180deg,#000 8%,#000 62%,transparent 94%);
 -webkit-mask-image:linear-gradient(180deg,#000 8%,#000 62%,transparent 94%);
}
.atmosphere[data-atmosphere=gaga]::after{
 right:-40vw;top:-18vh;width:73vw;height:103vh;border:2px solid #8d949c40;
 border-radius:50%;transform:rotate(31deg);
 box-shadow:inset 0 0 0 5px #fff9,0 0 0 9px #8e97a71c;
 mask-image:linear-gradient(180deg,transparent,#000 26%,#000 63%,transparent 94%);
 -webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 63%,transparent 94%);
}
.atmosphere[data-atmosphere=gaga] .atmosphere-floor{
 background:radial-gradient(ellipse at 50% 86%,#c4cbd42b 0,transparent 56%);
}

/* Take Me Home: oversized campaign-red / warm-paper bands at the edges. */
body[data-collection=one-direction]{--paper:#91202f;--ink:#fff4e8;--quiet:#eac8c2}
.atmosphere[data-atmosphere=one-direction] .atmosphere-light{
 background:radial-gradient(ellipse at 48% 42%,#cc5b5929,transparent 65%),
 linear-gradient(145deg,#4b071b24,transparent 41%,#f6765910);
}
.atmosphere[data-atmosphere=one-direction]::before{
 left:-11vw;top:-38vh;width:29vw;height:158vh;transform:rotate(-19deg);
 background:linear-gradient(90deg,#f8e7d326,#f8e7d31a 79%,#3b081822 79%,#3b081822 82%,transparent 82%);
 mask-image:linear-gradient(180deg,#000 16%,#000 59%,transparent 95%);
 -webkit-mask-image:linear-gradient(180deg,#000 16%,#000 59%,transparent 95%);
}
.atmosphere[data-atmosphere=one-direction]::after{
 right:-13vw;top:-15vh;width:29vw;height:138vh;transform:rotate(-19deg);
 background:linear-gradient(90deg,transparent 0,transparent 12%,#f8e7d30b 12%,#f8e7d32e 100%);
 mask-image:linear-gradient(180deg,transparent,#000 33%,#000 91%);
 -webkit-mask-image:linear-gradient(180deg,transparent,#000 33%,#000 91%);
}
.atmosphere[data-atmosphere=one-direction] .atmosphere-floor{
 background:radial-gradient(ellipse at 50% 95%,#37081830,transparent 66%);
}

/* Knebworth: a wide blue sky and a low, diffuse open-air horizon. */
body[data-collection=oasis]{--paper:#19456f;--ink:#faf6e9;--quiet:#c8d5dd}
.atmosphere[data-atmosphere=oasis] .atmosphere-light{
 background:radial-gradient(ellipse at 14% 5%,#bdd3e332 0,transparent 56%),
 radial-gradient(ellipse at 70% 32%,#5288b324 0,transparent 63%),
 linear-gradient(180deg,#0b2c4f30,transparent 47%,#6892a422 73%,#08233932);
}
.atmosphere[data-atmosphere=oasis]::before{
 left:-18%;right:-18%;top:65%;height:39%;border-radius:50% 50% 0 0;
 background:linear-gradient(180deg,#9badba1f,transparent 29%);
 box-shadow:0 -1px 0 #c5d3da18;
 mask-image:linear-gradient(90deg,transparent,#000 20%,#000 75%,transparent);
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 75%,transparent);
}
.atmosphere[data-atmosphere=oasis]::after{
 left:-25%;right:-25%;top:71%;height:31%;border-radius:50% 50% 0 0;
 background:linear-gradient(180deg,#051c3624,transparent 78%);
}
.atmosphere[data-atmosphere=oasis] .atmosphere-floor{
 background:radial-gradient(ellipse at 47% 68%,#d9ded710,transparent 48%);
}

/* Purple Rain: two quiet performance beams, deep violet and ivory light. */
body[data-collection=prince]{--paper:#47245f;--ink:#fff5ed;--quiet:#ddcce1}
.atmosphere[data-atmosphere=prince] .atmosphere-light{
 background:radial-gradient(ellipse at 50% 40%,#af72b21f 0,transparent 58%),
 linear-gradient(145deg,#160c322b,transparent 48%,#78487420);
}
.atmosphere[data-atmosphere=prince]::before{
 left:-32vw;top:-24vh;width:76vw;height:144vh;transform:rotate(-16deg);
 clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);
 background:linear-gradient(180deg,#f4e6e540,#e4b5ec17 48%,transparent 90%);
 mask-image:linear-gradient(90deg,transparent,#000 22%,#000 77%,transparent);
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 77%,transparent);
}
.atmosphere[data-atmosphere=prince]::after{
 right:-38vw;top:-25vh;width:86vw;height:150vh;transform:rotate(19deg);
 clip-path:polygon(49% 0,52% 0,100% 100%,0 100%);
 background:linear-gradient(180deg,#bfbae955,#c2a1ea1a 53%,transparent 95%);
 mask-image:linear-gradient(90deg,transparent,#000 21%,#000 79%,transparent);
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 21%,#000 79%,transparent);
}
.atmosphere[data-atmosphere=prince] .atmosphere-floor{
 background:radial-gradient(ellipse at 50% 92%,#19092e45 0,transparent 67%);
}

/* The same room remains behind a selected artifact, with less visual weight. */
body[data-state=inspect] .atmosphere::before,
body[data-state=inspect] .atmosphere::after{opacity:.5}
body[data-state=photos] .atmosphere::before,
body[data-state=photos] .atmosphere::after,
body[data-state=story] .atmosphere::before,
body[data-state=story] .atmosphere::after{opacity:.3}
@media(max-width:760px){
 .atmosphere[data-atmosphere=gaga]::before{left:-89vw;top:-21vh;width:128vw;height:93vh}
 .atmosphere[data-atmosphere=gaga]::after{right:-103vw;top:-9vh;width:134vw;height:89vh}
 .atmosphere[data-atmosphere=one-direction]::before{left:-44vw;width:66vw;transform:rotate(-15deg)}
 .atmosphere[data-atmosphere=one-direction]::after{right:-48vw;width:67vw;transform:rotate(-15deg)}
 .atmosphere[data-atmosphere=prince]::before{left:-91vw;width:151vw;transform:rotate(-12deg);opacity:.8}
 .atmosphere[data-atmosphere=prince]::after{right:-102vw;width:151vw;transform:rotate(14deg);opacity:.8}
}
@media(prefers-reduced-motion:reduce){
 .atmosphere,.atmosphere::before,.atmosphere::after,
 .atmosphere-light::before,.atmosphere-light::after,.atmosphere-floor{transition:none!important;animation:none!important}
}