/* La lumière du décor varie doucement derrière les sujets, sans déplacer la scène. */
.outfits{
  position:relative;
  isolation:isolate;
  --decor-light:radial-gradient(ellipse at 36% 18%,rgba(255,239,203,.58),transparent 72%);
  --decor-motion:decor-soft-light;
  --decor-duration:8s;
}
.outfits::before,.outfits>.outfit::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:calc(var(--art-height) + 40px);
  z-index:0;
  pointer-events:none;
  background:var(--decor-light);
  opacity:.12;
  animation:var(--decor-motion) var(--decor-duration) ease-in-out infinite;
}
.outfits>.outfit{z-index:1}
.outfits>.outfit::before{content:none}
.outfits>.outfit>*{position:relative;z-index:1}
.outfits::after,.outfits>.outfit::after{
  content:none;
  position:absolute;
  inset:0 0 auto;
  height:calc(var(--art-height) + 40px);
  z-index:0;
  pointer-events:none;
  background:var(--decor-effect,none);
  mix-blend-mode:screen;
  opacity:.3;
  animation:var(--decor-effect-motion,none) var(--decor-effect-duration,12s) ease-in-out infinite alternate;
}
.outfits>.outfit::after{animation-delay:var(--model-delay,0s)}

/* Des points de lumière chauds évoluent doucement sur le bois du studio. */
.outfits[data-decor=studio]{
  --decor-effect:radial-gradient(circle 27px at 13% 20%,rgba(255,238,183,.82),rgba(255,231,161,.25) 52%,transparent 78%),radial-gradient(circle 18px at 33% 53%,rgba(255,247,213,.74),transparent 75%),radial-gradient(circle 31px at 58% 16%,rgba(255,224,153,.66),transparent 76%),radial-gradient(circle 23px at 77% 62%,rgba(255,243,199,.68),transparent 77%),radial-gradient(circle 15px at 91% 29%,rgba(255,227,165,.7),transparent 75%);
  --decor-effect-motion:decor-bokeh-wander;
  --decor-effect-duration:11s;
}

/* Deux rais de soleil balaient lentement les lieux Lifestyle comme un phare. */
.outfits[data-decor=harnes],.outfits[data-decor=aix]{
  --decor-effect:linear-gradient(106deg,transparent 13%,rgba(255,250,219,.05) 22%,rgba(255,250,219,.68) 29%,rgba(255,249,211,.24) 35%,transparent 43%),linear-gradient(114deg,transparent 50%,rgba(255,239,186,.04) 58%,rgba(255,239,186,.52) 64%,rgba(255,239,186,.14) 70%,transparent 78%);
  --decor-effect-motion:decor-ray-sweep;
  --decor-effect-duration:13s;
}
.outfits[data-decor=aix]{--decor-effect-duration:15s}
.outfits:is([data-decor=studio],[data-decor=harnes],[data-decor=aix])::after{content:""}

.outfits[data-decor=noel]{
  --decor-light:url('assets/decors/noel-lumieres.svg'),radial-gradient(ellipse 18% 58% at 89% 38%,rgba(255,199,104,.58),transparent 80%),radial-gradient(ellipse 13% 35% at 30% 23%,rgba(255,217,139,.55),transparent 82%);
  --decor-duration:4.8s;
  --decor-motion:decor-christmas-light;
}
.outfits[data-decor=noel]::before,.outfits[data-decor=noel]>.outfit::before{background-repeat:no-repeat;background-position:center top;background-size:100% 100%,100% 100%,100% 100%;filter:brightness(1.18) saturate(1.18)}
.outfits[data-decor=noel].many:not(.five)>.outfit::before{background-size:auto 100%,100% 100%,100% 100%}
.outfits[data-decor=harnes]{
  --decor-light:radial-gradient(ellipse at 27% 12%,rgba(242,255,222,.48),transparent 62%),radial-gradient(ellipse at 78% 30%,rgba(239,248,212,.25),transparent 64%);
  --decor-motion:decor-outdoor-light;
  --decor-duration:10s;
}
.outfits[data-decor=aix]{
  --decor-light:radial-gradient(ellipse at 20% 12%,rgba(255,242,193,.55),transparent 68%);
  --decor-motion:decor-outdoor-light;
  --decor-duration:10s;
}
.outfits[data-decor=silhouette]::before,.outfits[data-decor=silhouette]>.outfit::before{content:none;animation:none}

@keyframes decor-soft-light{0%,100%{opacity:.08}50%{opacity:.52}}
@keyframes decor-christmas-light{0%,100%{opacity:.38}48%{opacity:1}70%{opacity:.65}}
@keyframes decor-outdoor-light{0%,100%{opacity:.08;background-position:-10px 0}50%{opacity:.54;background-position:10px 0}}
@keyframes decor-bokeh-wander{0%{opacity:.26;transform:translate(-2%,-1%) scale(.98)}45%{opacity:.76;transform:translate(1%,1%) scale(1.04)}100%{opacity:.38;transform:translate(3%,-1%) scale(.99)}}
@keyframes decor-ray-sweep{0%{opacity:.2;transform:translateX(-17%) rotate(-4deg)}48%{opacity:.78}100%{opacity:.32;transform:translateX(17%) rotate(5deg)}}

/* Les petites cartes possèdent chacune leur fond sur téléphone et pour les grands groupes. */
.outfits.many:not(.five)::before{content:none}
.outfits.many:not(.five):not([data-decor=silhouette])>.outfit::before{content:""}
.outfits.many:not(.five)::after{content:none}
.outfits.many:not(.five):is([data-decor=studio],[data-decor=harnes],[data-decor=aix])>.outfit::after{content:""}
@media(max-width:760px){
  .outfits::before{content:none}
  .outfits:not([data-decor=silhouette])>.outfit::before{content:""}
  .outfits:is([data-decor=studio],[data-decor=harnes],[data-decor=aix])::after{content:none}
  .outfits:is([data-decor=studio],[data-decor=harnes],[data-decor=aix])>.outfit::after{content:""}
  .outfits[data-decor=noel]{--decor-light:url('assets/decors/noel-lumieres.svg'),radial-gradient(ellipse at 72% 28%,rgba(255,208,133,.52),transparent 76%)}
  .outfits[data-decor=noel]>.outfit::before{background-size:auto 100%,100% 100%}
  .outfits[data-decor=silhouette]>.outfit::before{content:none}
}
@media(prefers-reduced-motion:reduce){.outfits::before,.outfits>.outfit::before,.outfits::after,.outfits>.outfit::after{display:none;animation:none}}
@media print{.outfits::before,.outfits>.outfit::before,.outfits::after,.outfits>.outfit::after{display:none;animation:none}}

/* Le fond est traité seul : les sujets et les effets lumineux restent nets. */
.outfits{background:var(--card);--scene-filter:none}
.outfits[data-decor=studio]{--scene-filter:blur(1px) brightness(.83) saturate(.94)}
.outfits[data-decor=noel]{--scene-filter:blur(.6px) brightness(.88) saturate(.96)}
.outfits[data-decor=harnes],.outfits[data-decor=aix],.outfits[data-decor=lifestyle]{--scene-filter:blur(.6px) brightness(.91) saturate(.96)}
.outfits.five,.outfits.many{background:var(--card)}
.outfits.many>.outfit,.outfits.five>.outfit{background:none}
.outfits>.scene-backdrop,.outfits>.outfit>.scene-backdrop{
  position:absolute;inset:0 0 auto;height:calc(var(--art-height) + 40px);
  background:var(--scene) center top / 100% 100% no-repeat;
  filter:var(--scene-filter);pointer-events:none;z-index:0;
}
.outfits>.outfit>.scene-backdrop{display:none;background-size:auto 100%}
.outfits::before,.outfits::after{z-index:3}
.outfits>.outfit{z-index:2;background:none}
.outfits>.outfit::before,.outfits>.outfit::after{z-index:1}
.outfits>.outfit>:not(.scene-backdrop){position:relative;z-index:2}
.outfits>.outfit>.scene-backdrop{position:absolute;z-index:0}
.outfits.many:not(.five)>.scene-backdrop{display:none}
.outfits.many:not(.five)>.outfit>.scene-backdrop{display:block}
@media(max-width:760px){
  .outfits>.scene-backdrop{display:none}
  .outfits>.outfit>.scene-backdrop{display:block}
  .outfits[data-decor=noel]>.outfit:nth-of-type(odd)>.scene-backdrop{background-position:31% top}
  .outfits[data-decor=noel]>.outfit:nth-of-type(even)>.scene-backdrop,
  .outfits[data-decor=noel]>.outfit:only-of-type>.scene-backdrop{background-position:90% top}
}