/* WHAT WE DO, extra effects (assets/v5d/wwd-fx.js):
   1. an energy pulse runs down the tower core every 5s,
   2. as it passes each block, a light sweep crosses that block's glass,
   3. light dust rises around the tower,
   4. the open block gets a light tracing round its frame,
   5. the whole picture tilts gently towards the cursor. */
.wwd-canvas{transition:transform .9s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}

/* 1. energy pulse in the core */
.wwd-pulse{position:absolute;left:44%;width:15%;top:2%;height:20%;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(220,250,255,.95),rgba(80,200,255,.55) 35%,transparent 70%);filter:blur(2px);
  animation:wwdPulse 5s cubic-bezier(.45,0,.55,1) infinite}
@keyframes wwdPulse{0%{top:2%;opacity:0}6%{opacity:1}70%{top:80%;opacity:.9}78%,100%{top:84%;opacity:0}}

/* 2. light sweep across each block's glass, timed to the pulse (--d set by the script) */
.wwd-sweep{position:absolute;left:15.5%;right:.5%;top:9%;bottom:9%;border-radius:10px;overflow:hidden;pointer-events:none;z-index:2;mix-blend-mode:screen}
.wwd-sweep::after{content:'';position:absolute;top:-20%;bottom:-20%;width:28%;left:-40%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(170,240,255,.15) 20%,rgba(220,250,255,.85) 50%,rgba(170,240,255,.15) 80%,transparent);
  animation:wwdSweep 5s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes wwdSweep{0%{left:-40%;opacity:0}2%{opacity:1}16%{left:120%;opacity:1}17%,100%{left:120%;opacity:0}}

/* 3. light dust */
.wwd-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}

/* 4. light tracing round the open block's frame */
.wwd-trace{position:absolute;left:15.3%;right:.3%;top:8.5%;bottom:8.5%;border-radius:11px;pointer-events:none;z-index:3;opacity:0;transition:opacity .5s;padding:3px;
  background:conic-gradient(from var(--wa,0deg),transparent 0 62%,rgba(120,240,255,.0) 64%,#bff6ff 74%,#5ee9f5 78%,transparent 86%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 6px #5ee9f5) drop-shadow(0 0 14px #2fd6ea);animation:wwdTrace 2.6s linear infinite}
@property --wa{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes wwdTrace{to{--wa:360deg}}
.wwd-tab[aria-selected="true"]:not(.spinning) .wwd-trace{opacity:1}

/* 9. EMPTY TOWER + SCROLL SPIRAL (assets/v5d/wwd-scroll.js)
   the background is the tower without windows; the cut-out picture and the blurred fill are not needed */
.wwd.wwd-emptybg .wwd-img{visibility:hidden}
.wwd.wwd-emptybg .wwd-soft{background-image:url(wwd-empty.jpg)!important;filter:none;transform:none}
.wwd.wwd-emptybg .wwd-card>span{backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* desktop: the section pins while you scroll, so the spiral has room to play */
.wwd.wwd-scroll{height:calc(100vh + var(--wwd-run,1000vh));overflow:clip}
.wwd.wwd-scroll .wwd-stage{position:sticky;top:max(0px,calc(50vh - min(100vw,1920px) * 760 / 2650))}
/* flat layering (each window carries its own perspective), so a turning window is never cut by the background */
.wwd.wwd-scroll .wwd-tabs{transform-style:flat}
.wwd.wwd-scroll .wwd-tab{will-change:transform}
.wwd .wwd-w{display:inline-block}

/* 8. leaking light strands between the windows (drawn by wwd-fx.js, behind the windows) */
.wwd-leak{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}

/* 6. while a window spins out, the space it leaves shows the glowing core of the tower
      (light strands), not a black hole; soft edges, no box */
.wwd-core{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(ellipse 30% 75% at 56% 50%,rgba(70,180,255,.55),transparent 72%),
    repeating-linear-gradient(90deg,transparent 0 6px,rgba(130,215,255,.38) 6px 7px,transparent 7px 11px,rgba(90,190,255,.22) 11px 12px),
    linear-gradient(180deg,rgba(6,22,44,.55),rgba(4,14,28,.35));
  -webkit-mask-image:linear-gradient(90deg,transparent 14%,#000 34%,#000 80%,transparent 98%);mask-image:linear-gradient(90deg,transparent 14%,#000 34%,#000 80%,transparent 98%)}
.wwd-core::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 0 30%,rgba(200,245,255,.5) 50%,transparent 70%) 0 0/100% 260% no-repeat;animation:wwdDrip 1.6s linear infinite}
.wwd-tab.spinning .wwd-core{opacity:1}
.wwd-core{display:none}
/* soft background seen through the window holes: blurred, darker copy of the tower picture */
.wwd-soft{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;filter:blur(34px) brightness(.5) saturate(1.15);transform:scale(1.04);pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 90%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 90%,transparent)}
.wwd-tab .wwd-card{z-index:1}
/* 7. the back of each window is the same glass window, so the whole window turns */
.wwd-card>.wwd-back{background-image:url(wwd-tower.jpg);background-repeat:no-repeat;background-size:var(--bs);background-position:var(--bp);
  border:0;box-shadow:none;color:transparent;font-size:0;letter-spacing:0}

@media (prefers-reduced-motion:reduce){.wwd-core::after,.wwd-pulse,.wwd-sweep::after,.wwd-trace{animation:none}.wwd-dust{display:none}.wwd-canvas{transition:none}}

/* Keep the complete scene below navigation, including on short widescreen displays. */
@media(min-width:901px){
  .wwd .wwd-stage{width:min(100%,calc((100svh - 110px) * 2650 / 1520));max-width:1920px}
  .wwd.wwd-scroll .wwd-stage{top:max(90px,calc(50svh + 40px - min(100vw,1920px,(100svh - 110px) * 2650 / 1520) * 760 / 2650))}
}
/* Feather all four edges of the room into the surrounding dark section. */
.wwd.wwd-emptybg .wwd-soft{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 87%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 87%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}

/* Preserve the headline palette when text is split into individual words. */
.wwd .wwd-intro h2 .wwd-w{color:inherit;text-shadow:inherit;background:none;-webkit-text-fill-color:currentColor}
.wwd .wwd-w{display:inline-block}
@media(prefers-reduced-motion:reduce){.wwd .wwd-w{opacity:1!important;transform:none!important;filter:none!important}}

.wwd .wwd-intro h2 span:not(.wwd-w) .wwd-w{color:#23d9f2!important;-webkit-text-fill-color:#23d9f2!important}