/* ==================================================================
   Portfolio — builds on ../styles.css. The page is a full-screen 3D
   island (world.js). The chrome floating over it reuses the CV's paper,
   ink and hard-shadow buttons so it still feels like the same site.
   ================================================================== */

:root {
  --world-line: #2b2a33;
}

@media (prefers-color-scheme: dark) {
  :root {
    --world-line: #0d0e14;
  }
}

/* ------------------------------------------------------------------
   Without the 3D world (no JS, no WebGL, still loading the script)
   the nav below is the page.
------------------------------------------------------------------ */
.world__canvas,
.world__back,
.world__hint {
  display: none;
}

.world__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: clamp(1rem, 0.6rem + 1.5vw, 1.75rem);
}

.world__bar .btn {
  margin-top: 0;
  background: var(--paper);
}

.world__title {
  font-family: var(--mono);
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.world__title span {
  color: var(--ink-faint);
}

.world__nav {
  max-width: 44rem;
  padding: 0 clamp(1rem, 0.6rem + 1.5vw, 1.75rem) 3rem;
}

.world__nav h1 {
  margin-bottom: 1.5rem;
}

.places {
  border-top: 1px solid var(--rule-hard);
}

.place {
  display: grid;
  gap: 0.2rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule);
}

.place__name {
  font-size: var(--title);
  font-weight: 600;
}

.place__desc,
.app__desc {
  font-size: var(--small);
  color: var(--ink-soft);
}

.apps {
  margin-top: 0.5rem;
}

.app a {
  display: grid;
  gap: 0.1rem;
  padding: 0.6rem 0 0.6rem 1rem;
  border-left: 2px solid var(--rule);
  text-decoration: none;
}

.app__name {
  font-weight: 600;
}

.app a:hover .app__name,
.app a:focus-visible .app__name,
.app.is-active .app__name {
  color: var(--accent);
}

.world__credit {
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------
   With the 3D world
------------------------------------------------------------------ */
.has-world,
.has-world .world {
  height: 100%;
  overflow: hidden;
}

.has-world .world__canvas {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  /* The island takes every drag and pinch; there is nothing to scroll. */
  touch-action: none;
}

.has-world .world__canvas.is-dragging {
  cursor: grabbing;
}

.has-world .world__canvas.is-over {
  cursor: pointer;
}

.has-world .world__bar {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
}

.has-world .world__bar > * {
  pointer-events: auto;
}

.has-world .world__title {
  padding: 0.45rem 0.8rem;
  background: var(--paper);
  border: 1px solid var(--rule-hard);
  box-shadow: 3px 3px 0 var(--rule-hard);
}

/* The nav stays in the page for screen readers and appears as a panel
   when a keyboard user tabs into it. */
.has-world .world__nav {
  position: fixed;
  top: 4.75rem;
  left: clamp(1rem, 0.6rem + 1.5vw, 1.75rem);
  width: min(26rem, calc(100% - 2rem));
  max-height: calc(100% - 6rem);
  overflow: auto;
  padding: 1rem 1.1rem;
  background: var(--paper);
  border: 2px solid var(--world-line);
  box-shadow: 4px 4px 0 var(--world-line);
  clip-path: inset(50%);
  opacity: 0;
}

.has-world .world__nav:focus-within {
  clip-path: none;
  opacity: 1;
}

.has-world .world__nav h1 {
  font-size: var(--title);
  margin-bottom: 0.75rem;
}

.has-world .world__hint {
  display: block;
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 0.6rem + 1.5vw, 1.75rem);
  translate: -50% 0;
  padding: 0.4rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-hard);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.has-world .world__hint.is-gone {
  opacity: 0;
}

/* The CV on the RESUME tower's wall, placed in 3D by world.js */
.world__css {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.world__screen {
  background: #000;
  opacity: 0;
}

.world__screen.is-shown {
  opacity: 1;
  pointer-events: auto;
  animation: rgb-on var(--on-time, 0.7s) ease-out;
}

.world__screen.is-shown iframe {
  animation: crt-open var(--on-time, 0.7s) linear;
}

/* RGB scanlines over the page while it switches on */
.world__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgb(255 0 60 / 0.35) 0 1px, rgb(0 255 120 / 0.3) 1px 2px, rgb(0 120 255 / 0.35) 2px 3px);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.world__screen.is-shown::after {
  animation: rgb-lines var(--on-time, 0.7s) ease-in;
}

/* Switching on like a screen, spread over the camera's swing: a bright
   line that holds, opens out, flickers a few times and settles... */
@keyframes crt-open {
  0% { transform: scale(0.2, 0.01); filter: brightness(4); }
  20% { transform: scale(1, 0.01); filter: brightness(4); }
  45% { transform: scale(1, 1); filter: brightness(2); }
  55% { transform: none; filter: brightness(0.5); }
  62% { transform: none; filter: brightness(1.6); }
  70% { transform: none; filter: brightness(0.7); }
  78% { transform: none; filter: brightness(1.3); }
  100% { transform: none; filter: none; }
}

/* ...with red and cyan fringes that settle */
@keyframes rgb-on {
  0% { filter: drop-shadow(10px 0 0 rgb(255 0 60 / 0.9)) drop-shadow(-10px 0 0 rgb(0 220 255 / 0.9)); }
  45% { filter: drop-shadow(-6px 0 0 rgb(255 0 60 / 0.8)) drop-shadow(6px 0 0 rgb(0 220 255 / 0.8)); }
  75% { filter: drop-shadow(3px 0 0 rgb(255 0 60 / 0.6)) drop-shadow(-3px 0 0 rgb(0 220 255 / 0.6)); }
  100% { filter: drop-shadow(0 0 0 transparent); }
}

@keyframes rgb-lines {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .world__screen.is-shown,
  .world__screen.is-shown iframe,
  .world__screen.is-shown::after {
    animation: none;
  }
}

.world__screen iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.has-world .world__back {
  display: block;
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 0.6rem + 1.5vw, 1.75rem);
  translate: -50% 0;
  margin-top: 0;
  color: var(--ink);
  background: var(--paper);
  cursor: pointer;
}

.has-world .world__back[hidden] {
  display: none;
}

@media print {
  .world__canvas,
  .world__back,
  .world__hint,
  .world__bar {
    display: none !important;
  }

  .has-world,
  .has-world .world {
    height: auto;
    overflow: visible;
  }

  .has-world .world__nav {
    position: static;
    clip-path: none;
    opacity: 1;
    border: 0;
    box-shadow: none;
  }
}