/* ==========================================================================
   Legendary Society  |  WHY tegels (achterkant van de projecttegels)
   ========================================================================== */
.project-tile.why-ready{--why-a:#00D4FF}

/* omkrullende hoek */
.why-curl{position:absolute;top:0;right:0;width:118px;height:118px;z-index:6;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
.why-curl svg{position:absolute;top:0;right:0;overflow:visible;pointer-events:none}
.why-coin{position:absolute;width:28px;height:28px;border-radius:50%;pointer-events:none;padding:2px;
  background:conic-gradient(from 200deg,#101418,color-mix(in srgb,var(--why-a) 70%,#fff),#15191d,#f4f8fa,#121619,color-mix(in srgb,var(--why-a) 80%,#fff),#101418);
  box-shadow:0 3px 8px rgba(0,0,0,.6),0 0 14px color-mix(in srgb,var(--why-a) 32%,transparent)}
.why-coin i{display:block;position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.35),inset 0 -2px 4px rgba(0,0,0,.7)}
.why-coin img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.35) brightness(1.05);display:block}
.why-coin i::before{content:"";position:absolute;inset:0;background:var(--why-a);mix-blend-mode:color;z-index:1}
.why-coin i::after{content:"";position:absolute;inset:-40%;z-index:2;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);animation:whyShine 5s ease-in-out infinite}
@keyframes whyShine{0%,100%{transform:translate(-22%,-22%)}50%{transform:translate(22%,22%)}}
.project-tile.why-on .why-curl{opacity:0;pointer-events:none}

/* achterkant */
.why-back{position:absolute;inset:0;z-index:3;letter-spacing:normal;display:none;overflow:hidden;cursor:default;text-align:center;
  border-radius:inherit;background:#05080b;color:#f2f5f7;-webkit-user-select:none;user-select:none}
.project-tile.why-on .why-back{display:block}
.why-back .wb-img{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(9px) brightness(.32) saturate(.55)}
.why-back .wb-veil{position:absolute;inset:0;background:
  radial-gradient(90% 50% at 50% 0%,color-mix(in srgb,var(--why-a) 10%,transparent),transparent),
  linear-gradient(180deg,rgba(3,5,8,.55),rgba(3,5,8,.85))}
.why-back .wb-sweep{position:absolute;inset:-20%;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 35%,rgba(235,245,255,.3) 50%,transparent 65%)}
.why-bars{position:absolute;top:18px;left:20px;right:64px;display:flex;gap:6px;z-index:2;transition:opacity .25s ease}
.why-bars.paused{opacity:.4}
.why-bars span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden;position:relative}
.why-bars span::after{content:"";position:absolute;inset:0;background:var(--why-a);transform:scaleX(var(--f,0));transform-origin:left}
.why-close{position:absolute;top:5px;right:9px;width:44px;height:44px;z-index:3;cursor:pointer;display:grid;place-items:center}
.why-close svg{width:16px;height:16px;stroke:#f2f5f7;opacity:.75;fill:none;stroke-width:1.6;stroke-linecap:round}
.why-pg{position:absolute;left:0;right:0;top:42px;bottom:18px;padding:0 11%;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;transform:perspective(700px) translateX(40px) rotateY(-24deg);
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.why-pg.out{transform:perspective(700px) translateX(-40px) rotateY(24deg)}
.why-pg.on{opacity:1;transform:none;pointer-events:auto}
.why-pg>*{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.why-pg.on>*{opacity:1;transform:none}
.why-pg.on>*:nth-child(1){transition-delay:.12s}
.why-pg.on>*:nth-child(2){transition-delay:.2s}
.why-pg.on>*:nth-child(3){transition-delay:.3s}
.why-pg.on>*:nth-child(4){transition-delay:.42s}
.why-kick{font-family:var(--font-body,'Inter',sans-serif);font-size:11px;letter-spacing:.26em;padding-left:.26em;color:var(--why-a);font-weight:600}
.why-h{font-family:var(--font-display,'Bebas Neue',sans-serif);font-weight:400;font-size:clamp(28px,8.6vw,36px);line-height:1;
  margin:13px 0 0;letter-spacing:.015em;padding-left:.015em;color:#f2f5f7;text-wrap:balance}
.why-p{font-family:var(--font-body,'Inter',sans-serif);font-size:clamp(13px,3.6vw,14.5px);line-height:1.58;color:#c4ced5;margin:16px 0 0;font-weight:400;text-wrap:pretty}
.why-cta{display:inline-block;margin-top:26px;cursor:pointer;font-family:var(--font-body,'Inter',sans-serif);white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--why-a) 60%,transparent);background:color-mix(in srgb,var(--why-a) 10%,transparent);color:var(--why-a);
  border-radius:30px;padding:12px 22px 12px calc(22px + .2em);font-size:12px;letter-spacing:.2em;font-weight:600}

@media (min-width:1024px){
  .why-h{font-size:clamp(26px,2.1vw,34px)}
  .why-p{font-size:13.5px}
  .why-pg{padding:0 9%}
}
@media (prefers-reduced-motion:reduce){
  .why-pg,.why-pg>*{transition:opacity .3s ease!important;transform:none!important}
  .why-coin i::after{animation:none}
}