/* Joshtified - the 3D layer (future3d.js). */

/* the scenes sit behind the content and never take a click */
.f3d-canvas { position: absolute; display: block; pointer-events: none; }
.f3d-core { inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity 1.6s ease .2s; }
.has-3d .f3d-core { opacity: 1; }
.hero .hero-in, .hero .hero-readout { position: relative; z-index: 2; }
.hero .hero-haze { z-index: 1; }

.spotlight { position: relative; }
.f3d-rack-host {
  position: absolute; right: 1%; top: 1%; width: min(30%, 380px); aspect-ratio: 4 / 5;
  z-index: 0; pointer-events: none; opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 92%); mask-image: linear-gradient(180deg, #000 40%, transparent 92%);
}
.f3d-rack-host .f3d-canvas { inset: 0; width: 100%; height: 100%; }
.spotlight-in { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .f3d-rack-host { width: 46%; opacity: .3; }
}

.finder-copy { position: relative; }
.f3d-knot-host { position: relative; width: min(100%, 340px); aspect-ratio: 1 / 1; margin-top: 12px; }
.f3d-knot-host .f3d-canvas { inset: 0; width: 100%; height: 100%; }
@media (max-width: 760px) { .f3d-knot-host { width: 200px; margin: 6px auto 0; } }

/* the tilt: cards lean towards the pointer and a glare follows it */
.t3d { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease; will-change: transform; }
.t3d.t3d-on { transition: box-shadow .4s ease; box-shadow: 0 30px 80px -30px rgba(124, 58, 237, .55); }
.t3d-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .10), rgba(217, 70, 239, .06) 30%, transparent 60%);
  opacity: 0; transition: opacity .4s ease; mix-blend-mode: screen;
}
.t3d.t3d-on .t3d-glare { opacity: 1; }

/* PlayPort card: real landscape screenshots, stacked in depth */
.pc-playport .project-card-image { perspective: 1600px; }
.pc-playport .project-card-image img {
  top: 9% !important; left: 24% !important; width: 72% !important; height: auto !important; aspect-ratio: 16 / 10;
  border-radius: 12px !important; object-fit: cover; object-position: top left;
  border: 1px solid rgba(244, 241, 249, .16) !important;
  box-shadow: 0 40px 90px -25px rgba(0, 0, 0, .95), 0 0 50px -12px rgba(124, 58, 237, .6) !important;
  transform-origin: 0% 50%;
}
.pc-playport .project-card-image img:nth-child(1) { z-index: 3; transform: rotateY(-18deg) rotateX(4deg) translateZ(0) !important; opacity: 1 !important; }
.pc-playport .project-card-image img:nth-child(2) { z-index: 2; transform: rotateY(-18deg) rotateX(4deg) translate3d(9%, 21%, -120px) !important; opacity: .7 !important; }
.pc-playport .project-card-image img:nth-child(3) { z-index: 1; transform: rotateY(-18deg) rotateX(4deg) translate3d(18%, 42%, -240px) !important; opacity: .45 !important; }
.pc-playport:hover .project-card-image img:nth-child(1) { transform: rotateY(-8deg) rotateX(2deg) translate3d(-4%, -4%, 40px) !important; }
.pc-playport:hover .project-card-image img:nth-child(2) { transform: rotateY(-12deg) rotateX(3deg) translate3d(12%, 26%, -60px) !important; opacity: .9 !important; }
.pc-playport:hover .project-card-image img:nth-child(3) { transform: rotateY(-14deg) rotateX(3deg) translate3d(24%, 52%, -160px) !important; opacity: .75 !important; }

@media (prefers-reduced-motion: reduce) {
  .t3d { transition: none; }
}

/* the deep background below the hero: fixed, behind everything, fades in on scroll */
.f3d-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: 0; }
.hero, .section, footer, .site-foot { position: relative; z-index: 1; }
/* the knot gets a little more room so its loops never touch the edge */
.f3d-knot-host { width: min(100%, 380px); }

/* the top of the hero: soft violet and magenta light instead of a dark band */
.hero .hero-haze {
  background:
    radial-gradient(60% 55% at 18% 0%, rgba(124, 58, 237, .38), rgba(124, 58, 237, .10) 55%, transparent 75%),
    radial-gradient(48% 50% at 82% 4%, rgba(217, 70, 239, .28), rgba(217, 70, 239, .07) 55%, transparent 75%),
    radial-gradient(40% 30% at 50% 0%, rgba(165, 243, 252, .07), transparent 70%),
    radial-gradient(52% 42% at 24% 48%, rgba(7, 6, 12, .55), rgba(7, 6, 12, .12) 70%, transparent 85%),
    linear-gradient(to bottom, transparent 70%, var(--void));
}

/* Tapp gets a wider frame on the front page (the game runs its roomy layout
   with ?wide=1) and the copy column gives up the room. */
.hero .hero-tapp { width: clamp(340px, 30vw, 470px); }
.hero .hero-tapp-body iframe { width: 100%; height: auto; aspect-ratio: 46 / 44; }
.hero .hero-tapp-foot p { font-size: 13.5px; }
@media (max-width: 900px) {
  .hero .hero-tapp { width: min(100%, 460px); }
}
@media (max-width: 420px) {
  .hero .hero-tapp-body iframe { height: auto; aspect-ratio: 325 / 330; }
}

/* drag to spin: the hero's core, the rack and the knot can be taken hold of and turned */
.hero { cursor: grab; }
.hero .hero-copy, .hero .hero-tapp, .hero .hero-readout, .hero a, .hero button { cursor: auto; }
.hero a, .hero button { cursor: pointer; }
.f3d-knot-host { cursor: grab; }
.f3d-grab, .f3d-grab * { cursor: grabbing !important; }
.f3d-grabbing, .f3d-grabbing * { user-select: none; -webkit-user-select: none; }