/* uchu-worlds.css: stijl van de zwevende casekaarten. Eén bron voor index.html en work.html. */
.uchu-worlds{ position:relative; width:100vw; margin-left:calc(50% - 50vw); min-height:94vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
/* Geen mask-image meer (27-09): een verloop over de sectie sneed door de kaarten heen. De randvervaging zit nu per hele kaart in het worlds-script. */
.uchu-worlds-field{ position:absolute; inset:-6% 0; pointer-events:none; z-index:0; }
/* De kaarten staan stil. De keyframe blijft staan en doet nu het werk van een
   plaatsingsformule: elke kaart krijgt een vaste negatieve vertraging en een
   stilgezette animatie, en staat daarmee op het beeld uit de omloop dat bij zijn
   eigen fase hoort. Dat scheelt een tweede stel maten voor hoogte, schaal en
   dekking die dan uit de pas zou kunnen lopen met de keyframe.
   will-change is eraf: er verandert niets meer, en de hint hield anders voor elke
   kaart een eigen compositielaag aan zonder dat er iets te compositen valt. */
a.uchu-world{ position:absolute; bottom:0; background:#e4ded5; border:1px solid rgba(35,31,32,.14); border-radius:2px; animation-name:uchuFloatUp; animation-timing-function:linear; animation-iteration-count:infinite; animation-play-state:paused; display:block; overflow:hidden; pointer-events:auto; cursor:pointer; text-decoration:none; }
a.uchu-world:hover{ animation-play-state:paused; border-color:rgba(35,31,32,.5); background:#dcd5ca; }
a.uchu-world{ box-shadow:0 8px 30px rgba(35,31,32,.16); }

a.uchu-world:after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(35,31,32,.88) 0, rgba(35,31,32,.88) 54px, rgba(35,31,32,0) 116px); opacity:1; transition:opacity .3s; pointer-events:none; }
a.uchu-world:hover{ box-shadow:0 16px 44px rgba(35,31,32,.3); }

.uchu-world-cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; line-height:1.15; pointer-events:none; padding:30px 12px 11px; background:linear-gradient(to top, rgba(35,31,32,.90) 0%, rgba(35,31,32,.86) 48%, rgba(35,31,32,0) 100%); }
.uchu-world-cap .wc-n{ font-family:'Space Rabbit', monospace; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:#f6f2ee; font-weight:700; }

.uchu-world-cap .wc-c{ font-family:'Space Rabbit', monospace; font-weight:400; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:rgba(246,242,238,.92); margin-top:3px; }

.uchu-world-cap .wc-a{ color:rgba(246,242,238,.92); transition:color .25s, transform .25s; display:inline-block; }
a.uchu-world:hover .wc-a{ color:#f6f2ee; transform:translateX(3px); }

@keyframes uchuFloatUp{ 0%{ transform:translateY(0) scale(.97); opacity:0; } 11%{ opacity:.9; } 80%{ opacity:.9; } 100%{ transform:translateY(-110vh) scale(1.03); opacity:0; } }
.uchu-worlds.uchu-paused a.uchu-world{ animation-play-state:paused; }
/* Zonder tegenregel bleef de basis-paused staan als de IntersectionObserver de
   .uchu-paused-klasse van de wrapper haalde: op mobiel gemeten pos1 == pos2 op
   alle vijf tegels. Deze regel geeft de animatie terug zodra de wrapper zichtbaar
   is. */
.uchu-worlds:not(.uchu-paused) a.uchu-world{ animation-play-state:running; }
.uchu-worlds-inner{ position:relative; z-index:2; text-align:center; max-width:820px; padding:0 24px; pointer-events:none; }

.uchu-worlds-ey{ font-family:'Space Rabbit', monospace; font-weight:400; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(35,31,32,.66); margin-bottom:16px; }
/* De ondergrens is 58 en niet 42, omdat de mobiele tak (max-767) op 58 eindigt.
   Met 42 sprong deze kop op de grens 767/768 van 58 naar 50,69: kleiner bij een
   breder venster. Zelfde soort breuk als bij --uchu-koptitel. */
.uchu-worlds-h{ font-family:'Open Sauce Sans',sans-serif !important; font-weight:900 !important; font-size:clamp(58px,6.6vw,90px); line-height:.95; color:#231f20; margin:0; }

.uchu-worlds-sub{ font-family:'Open Sauce Sans',sans-serif; font-size:16px; line-height:1.6; color:rgba(35,31,32,.74); max-width:42ch; margin:22px auto 28px; }
.uchu-btn{ font-family:'Space Rabbit', monospace; font-size:13px; font-weight:700; letter-spacing:.03em; color:#231f20; text-decoration:none; display:inline-flex; align-items:center; gap:9px; padding:5px 0; pointer-events:auto; position:relative; }
.uchu-btn:before{ content:'['; color:rgba(35,31,32,.78); font-weight:400; margin-right:2px; }
.uchu-btn:after{ content:']'; color:rgba(35,31,32,.78); font-weight:400; margin-left:2px; }
.uchu-btn .sq{ width:7px; height:7px; border:1.4px solid currentColor; display:inline-block; flex:0 0 auto; }
.uchu-btn .ar{ transition:transform .3s; }
.uchu-btn:hover .ar{ transform:translateX(5px); }
.uchu-btn .sq, .uchu-foot-cta .sq{ display:none !important; }
.uchu-worlds-inner{ z-index:5 !important; }
.uchu-worlds-ey .w-plaat, .uchu-worlds-sub .w-plaat, span.w-plaat{
  background:transparent !important; background-image:none !important;
  padding:0 !important; margin:0 !important; }
.uchu-worlds-inner .uchu-btn, a.uchu-btn, .uchu-btn{
  background:transparent !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  padding:5px 0 !important; margin:0 !important; }
.uchu-worlds.uchu-worlds-solo{ min-height:64vh; }
a.uchu-world.uchu-solo{ animation:none !important; opacity:1 !important; }
@media (max-width:767px){
  .uchu-worlds{ min-height:76vh; }
  a.uchu-world:after{ opacity:1; }
  a.uchu-world{ width:118px !important; height:139px !important; margin-left:-59px !important; }
  a.uchu-world.uwl-9{ left:17% !important; }
  a.uchu-world.uwl-22{ left:20% !important; }
  a.uchu-world.uwl-78{ left:83% !important; }
  a.uchu-world.uwl-91{ left:80% !important; }
  a.uchu-world.uwl-8{ left:15% !important; }
  .uchu-worlds:not(.uchu-worlds-solo){ --wk:min(88px, calc(50vw - 116px)); --wx:max(6px, calc((50vw - 100px - var(--wk)) / 2)); }
  .uchu-worlds:not(.uchu-worlds-solo) .uchu-worlds-inner{ max-width:200px !important; padding:0 !important; margin-left:auto; margin-right:auto; }
  .uchu-worlds:not(.uchu-worlds-solo) .uchu-worlds-inner .uchu-btn{ max-width:100%; text-align:center; font-size:12px !important; white-space:nowrap !important; }
  .uchu-worlds:not(.uchu-worlds-solo) a.uchu-world{ width:var(--wk) !important; height:auto !important; aspect-ratio:76/90; margin-left:0 !important; }
  .uchu-worlds:not(.uchu-worlds-solo) a.uchu-world.uwl-8, .uchu-worlds:not(.uchu-worlds-solo) a.uchu-world.uwl-9, .uchu-worlds:not(.uchu-worlds-solo) a.uchu-world.uwl-15, .uchu-worlds:not(.uchu-worlds-solo) a.uchu-world.uwl-22{ left:var(--wx) !important; right:auto !important; }
  .uchu-worlds:not(.uchu-worlds-solo) a.uchu-world.uwl-78, .uchu-worlds:not(.uchu-worlds-solo) a.uchu-world.uwl-86, .uchu-worlds:not(.uchu-worlds-solo) a.uchu-world.uwl-91{ left:auto !important; right:var(--wx) !important; }
  .uchu-worlds:not(.uchu-worlds-solo) a.uchu-world:after{ background:linear-gradient(to top, rgba(35,31,32,.88) 0, rgba(35,31,32,.88) 30px, rgba(35,31,32,0) 62px); }
  .uchu-worlds:not(.uchu-worlds-solo) .uchu-world-cap{ padding:12px 6px 6px; }
  .uchu-worlds:not(.uchu-worlds-solo) .uchu-world-cap .wc-n{ font-size:10px; line-height:1.15; white-space:normal; }
  .uchu-worlds:not(.uchu-worlds-solo) .uchu-world-cap .wc-c{ display:none; }
  .uchu-world-cap{ left:0; right:0; bottom:0; padding:26px 9px 9px; }
  .uchu-world-cap .wc-n{ font-size:10px; }
  .uchu-world-cap .wc-c{ font-size:9px; margin-top:2px; }
  .uchu-worlds-inner{ padding:0 10vw !important; }
  .uchu-worlds-h{ font-size:clamp(34px,11vw,58px) !important; }
  .uchu-worlds{ min-height:100vh; }
  a.uchu-world.uchu-solo{ width:150px !important; height:177px !important; margin-left:-75px !important; }
  a.uchu-world.uwl-14{ left:26% !important; }
  a.uchu-world.uwl-86{ left:74% !important; }
  .uchu-worlds.uchu-worlds-solo{ min-height:92vh; align-items:flex-end; }
  .uchu-worlds.uchu-worlds-solo .uchu-worlds-inner{ padding-bottom:16vh !important; }
  a.uchu-world.uchu-solo{ top:26% !important; transform:none !important; }
}