/* ==========================================================
   Page transitions (used by every page, driven by transition.js)
   EDIT THESE FIRST
   ========================================================== */
:root {
  --tr-bg: #0b0e11;                                /* color of the dark cover (matches the dark theme) */
  --tr-accent: #00ffb9;                            /* your brand green (corner frames + logo mark) */
  --tr-mark: clamp(96px, 16vmin, 150px);           /* size of the logo mark in the middle (set by the script) */
  --tr-line: 3px;                                  /* thickness of the corner frame lines */
}

/* While a page is arriving from a transition, keep it hidden behind the dark cover (prevents any flash). */
html.tr-enter { background: var(--tr-bg); }
html.tr-enter body { opacity: 0; }

.tr {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  pointer-events: none;
}

/* ----- "page" version: a dark cover with a window that opens from the center, led by two corner frames ----- */
.tr-panes { position: absolute; inset: 0; }
.tr-pane {                                         /* four dark panels around a window; sliding them apart opens the page */
  position: absolute;
  background: var(--tr-bg);
  will-change: transform;
}
.tr-aura {                                         /* soft green light behind the logo */
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(120vmin, 1000px);
  height: min(120vmin, 1000px);
  margin: calc(min(120vmin, 1000px) / -2) 0 0 calc(min(120vmin, 1000px) / -2);
  background: radial-gradient(closest-side, rgba(0, 255, 185, 0.11), rgba(0, 255, 185, 0.04) 55%, rgba(0, 255, 185, 0) 100%);
}
.tr-corner {                                       /* the same corner lines as your name logo and the homepage buttons (top-left + bottom-right) */
  position: absolute;
  width: var(--arm);
  height: var(--arm);
  will-change: transform, opacity;
  filter: drop-shadow(0 0 6px rgba(0, 255, 185, 0.85)) drop-shadow(0 0 16px rgba(0, 255, 185, 0.35));
}
.tr-corner-tl { border-top: var(--tr-line) solid var(--tr-accent); border-left: var(--tr-line) solid var(--tr-accent); }
.tr-corner-br { border-bottom: var(--tr-line) solid var(--tr-accent); border-right: var(--tr-line) solid var(--tr-accent); }

/* ----- "home" version: the logo grows out of the corner and a dark circle opens from it (and closes again on arrival) ----- */
.tr-iris {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 55% at 50% 50%, rgba(0, 255, 185, 0.09), transparent 70%),
    var(--tr-bg);
}

/* ----- the logo mark (three pieces, like the logo) ----- */
.tr-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--tr-mark);
  aspect-ratio: 300 / 264;
  margin: calc(var(--tr-mark) * -0.44) 0 0 calc(var(--tr-mark) * -0.5);
  filter: drop-shadow(0 0 14px rgba(0, 255, 185, 0.55));
}
.tr-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; fill: var(--tr-accent); overflow: visible; }