/* worlds: campaign worlds full bleed, and each item's 3D logo on the same world (client tokens only) */
.wd{ position:absolute; inset:0; overflow:clip; background:var(--c-brand-1); --wc:var(--c-brand-2); }
.wd-world{ position:absolute; inset:0; opacity:0; scale:1.04;
  transition:opacity .7s var(--ease), scale 1.4s var(--ease), filter .9s cubic-bezier(0.32, 0.72, 0, 1); }
.wd-world.is-on{ opacity:1; scale:1; }
.wd-world > .ph{ position:absolute; inset:0; }
.wd-world img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Logo: the world steps back (blurred, dimmed, washed with the item's colour) and the logo stands in front */
.wd.is-logo .wd-world{ filter:blur(26px) brightness(.42) saturate(1.25); scale:1.12; }
.wd::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .9s var(--ease);
  background:radial-gradient(ellipse 60% 55% at calc(var(--vx) + var(--vw) / 2) 46%, color-mix(in srgb, var(--wc) 34%, transparent), transparent 70%); }
.wd.is-logo::after{ opacity:1; }
.wd-stand{ position:absolute; left:var(--vx); width:var(--vw); top:0; bottom:0; z-index:1; pointer-events:none; opacity:0;
  transition:opacity .6s var(--ease), left .7s var(--ease), width .7s var(--ease); }
.wd.is-logo .wd-stand{ opacity:1; pointer-events:auto; transition-delay:.15s; }
.wd-model{ position:absolute; left:calc(var(--fl, 50px)); right:33px; top:72px; bottom:calc(33px + 40px * var(--ui, 1) + 40px); }
.wd-model model-viewer{ position:absolute; inset:0; width:100%; height:100%; background:transparent; --poster-color:transparent;
  opacity:0; scale:.92; transition:opacity .6s var(--ease), scale .9s cubic-bezier(0.32, 0.72, 0, 1); cursor:grab; }
.wd-model model-viewer:active{ cursor:grabbing; }
.wd-model.is-ready model-viewer{ opacity:1; scale:1; }
.wd-poster{ position:absolute; inset:8% 6%; width:88%; height:84%; object-fit:contain; transition:opacity .5s var(--ease);
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.wd-model.is-ready .wd-poster{ opacity:0; }
.wd-hint{ position:absolute; left:0; right:0; bottom:calc(33px + 40px * var(--ui, 1) + 14px); margin:0; text-align:center;
  font:500 12px/1.3 var(--c-body); color:color-mix(in srgb, var(--c-on-photo) 60%, transparent); }

/* the view toggle: a glass control top right, chrome (NOIZE font via .sw, stage colours, near OS size) */
.wd-view{ position:absolute; top:33px; right:33px; z-index:2; scale:var(--ui, 1); transform-origin:100% 0; }

@media (prefers-reduced-motion: reduce){
  .wd-world, .wd-stand, .wd-model model-viewer{ transition:opacity .2s; scale:1; }
}