/* ==========================================================================
   RJ Iammarino — Lab, one sketch per page (lab.html)
   Loaded after style.css: tokens, type, .hud, .exp, .chip all come from there.
   1. Page + HUD   2. Top row   3. Stage   4. Placard
   5. Responsive   6. View transitions
   ========================================================================== */

/* Opt in to cross-document view transitions. The page being left must opt in too. */
@view-transition { navigation: auto; }

/* 1. PAGE + HUD ----------------------------------------------------------- */
.labx {
  max-width: 1680px;
  min-height: 100svh;
  margin: 0 auto;
  padding: calc(var(--hud-h) + 16px) var(--gutter) 28px;
}

/* three cells here, not the home page's four */
.labx-hud { grid-template-columns: auto 1fr auto; view-transition-name: lab-hud; }

.labx-error {
  max-width: 46ch;
  margin: 18vh auto 0;
  font-family: var(--mono); font-size: 13px; line-height: 1.7;
  color: var(--muted); text-align: center;
}
.labx-error a { color: var(--cyan); white-space: nowrap; }

/* 2. TOP ROW -------------------------------------------------------------- */
.labx-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  margin-bottom: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
.labx-back {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px 7px 10px;
  color: var(--muted); text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius, 0px);
  transition: color .15s ease, border-color .15s ease;
}
.labx-back span { color: var(--cyan); transition: transform .2s ease; }
.labx-back:hover { color: var(--ink); border-color: var(--cyan); }
.labx-back:hover span { transform: translateX(-3px); }

/* 01 02 03 ... one per sketch */
.labx-index { display: flex; gap: 2px; }
.labx-index a {
  position: relative; display: block;
  padding: 7px 8px;
  color: var(--faint); text-decoration: none; font-variant-numeric: tabular-nums;
  transition: color .15s ease;
}
.labx-index a:hover { color: var(--ink); }
.labx-index a[aria-current] { color: var(--ink); }
.labx-index a[aria-current]::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 2px;
  background: linear-gradient(to right, var(--cyan), var(--magenta));
}

/* 3. STAGE ---------------------------------------------------------------- */
/* The card keeps .exp so lab.js and the hint behave as they do at home, but here
   it is a layout, not a panel: the screen on the left, a placard on the right. */
.exp.labx-card {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 380px); gap: 28px;
  background: none; border: 0; border-radius: 0; overflow: visible;
}
.exp.labx-card[hidden] { display: none; }

.labx-screen {
  position: relative; align-self: start;
  width: 100%;
  aspect-ratio: 3 / 2;
  min-height: 300px; max-height: calc(100svh - var(--hud-h) - 104px);
  background: #07060d;
  border: 1px solid var(--line);
  border-radius: var(--radius, 0px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cyan) 12%, transparent),
    0 30px 90px -38px color-mix(in srgb, var(--violet) 75%, transparent),
    0 0 120px -50px color-mix(in srgb, var(--cyan) 65%, transparent);
}

.labx-card .exp-stage {
  position: absolute; inset: 0;
  aspect-ratio: auto;
  border: 0; border-radius: inherit;
  view-transition-name: lab-stage;
}
/* style.css reads the wash from a variable only main.js sets; here labpage.js sets this one */
.labx-card .exp-tint { opacity: var(--labx-wash, 0); }

/* The corner brackets move outside the frame here, like a viewfinder, so they never sit on
   top of the labels the sketches draw in their own corners. */
.labx-card .exp-stage::before, .labx-card .exp-stage::after { content: none; }
.labx-screen::before, .labx-screen::after {
  content: ""; position: absolute; z-index: 2; width: 26px; height: 26px; pointer-events: none;
  opacity: var(--bracket, 1);
  transition: width .25s ease, height .25s ease;
}
.labx-screen::before { top: -8px; left: -8px; border-top: 1px solid var(--cyan); border-left: 1px solid var(--cyan); }
.labx-screen::after { bottom: -8px; right: -8px; border-bottom: 1px solid var(--magenta); border-right: 1px solid var(--magenta); }
.labx-card:hover .labx-screen::before, .labx-card:hover .labx-screen::after { width: 44px; height: 44px; }
.labx-screen:fullscreen::before, .labx-screen:fullscreen::after { content: none; }

.labx-card .exp-hint { left: 20px; bottom: 17px; font-size: 10.5px; }

/* Full screen: a small button under the screen's corner, clear of anything a sketch draws.
   Hidden in the markup; labpage.js shows it only where the Fullscreen API exists. */
.labx-full {
  position: absolute; top: calc(100% + 16px); right: -1px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius, 0px);
  transition: color .15s ease, border-color .15s ease, opacity .2s ease;
}
.labx-full[hidden] { display: none; }
/* four corners pulling apart */
.labx-full::before {
  content: ""; width: 9px; height: 9px;
  background:
    linear-gradient(currentColor 0 0) 0 0 / 3px 1px, linear-gradient(currentColor 0 0) 0 0 / 1px 3px,
    linear-gradient(currentColor 0 0) 100% 0 / 3px 1px, linear-gradient(currentColor 0 0) 100% 0 / 1px 3px,
    linear-gradient(currentColor 0 0) 0 100% / 3px 1px, linear-gradient(currentColor 0 0) 0 100% / 1px 3px,
    linear-gradient(currentColor 0 0) 100% 100% / 3px 1px, linear-gradient(currentColor 0 0) 100% 100% / 1px 3px;
  background-repeat: no-repeat;
}
.labx-full:hover { color: var(--cyan); border-color: var(--cyan); }

/* In full screen the button moves inside, dim until it is wanted. */
.labx-screen:fullscreen {
  width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto;
  border: 0; border-radius: 0; box-shadow: none;
}
.labx-screen:fullscreen .labx-full {
  top: auto; bottom: 14px; right: 56px;
  color: rgba(236, 235, 247, 0.85); background: rgba(7, 6, 13, 0.6); border-color: rgba(236, 235, 247, 0.32);
  opacity: 0.5;
}
.labx-screen:fullscreen .labx-full:hover, .labx-screen:fullscreen .labx-full:focus-visible { opacity: 1; color: #5ef2ff; border-color: #5ef2ff; }
/* the same again for older Safari, which only knows the prefixed name */
.labx-screen:-webkit-full-screen {
  width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto;
  border: 0; border-radius: 0; box-shadow: none;
}
.labx-screen:-webkit-full-screen .labx-full {
  top: auto; bottom: 14px; right: 56px;
  color: rgba(236, 235, 247, 0.85); background: rgba(7, 6, 13, 0.6); border-color: rgba(236, 235, 247, 0.32);
  opacity: 0.5;
}

/* 4. PLACARD -------------------------------------------------------------- */
.labx-placard { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.labx:not(.is-ready) .labx-placard { visibility: hidden; }

.labx-count {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--faint);
}
.labx-count b {
  font-family: var(--display); font-size: clamp(56px, 5.4vw, 88px); font-weight: 800;
  line-height: 0.9; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.labx-count i { font-style: normal; }

.labx-card .exp-body {
  position: relative;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
}
.labx-card .exp-body::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 56px; height: 1px;
  background: linear-gradient(to right, var(--cyan), var(--magenta));
}
/* chip above the title, like an eyebrow (the markup order is index.html's) */
.labx-card .exp-body header { flex-direction: column-reverse; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.labx-card .exp-body h3 {
  font-size: clamp(30px, 2.9vw, 46px); font-weight: 800;
  line-height: 1.04; letter-spacing: -0.025em;
  view-transition-name: lab-title;
}
.labx-card .exp-body header .chip { margin-left: 0; padding: 3px 8px; color: var(--muted); border: 1px solid var(--line); }
.labx-card .exp-body p { max-width: 48ch; font-size: 16px; }

.labx-hint {
  display: flex; align-items: center; gap: 11px;
  margin: 0;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.labx-hint[hidden] { display: none; }
.labx-hint::before {
  content: ""; flex: none; width: 6px; height: 6px;
  border: 1px solid var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  transform: rotate(45deg);
}

.labx-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: auto; }
.labx-pager[hidden] { display: none; }
.labx-pager a {
  display: grid; gap: 6px; min-width: 0;
  padding: 12px 14px;
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius, 0px);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.labx-pager a:last-child { text-align: right; }
.labx-dir {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint);
}
.labx-dir i { display: inline-block; font-style: normal; color: var(--cyan); transition: transform .2s ease; }
.labx-pager a:last-child .labx-dir i { color: var(--magenta); }
.labx-pager b {
  overflow-wrap: anywhere;
  font-family: var(--display); font-size: 15px; font-weight: 700; line-height: 1.25;
  color: var(--ink);
}
.labx-pager a:hover { border-color: var(--cyan); box-shadow: 0 0 26px -10px var(--cyan); }
.labx-pager a:last-child:hover { border-color: var(--magenta); box-shadow: 0 0 26px -10px var(--magenta); }
.labx-pager a:hover .labx-dir i { transform: translateX(-3px); }
.labx-pager a:last-child:hover .labx-dir i { transform: translateX(3px); }

.labx-keys {
  display: flex; align-items: center; gap: 6px;
  margin: -6px 0 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint);
}
.labx-keys span { margin-right: 10px; }
.labx-keys [hidden] { display: none; }

/* A straight load brings the placard up line by line. After a view transition the whole page has
   already risen, so it stays put (labpage.js adds .labx-vt). `rise` is style.css's keyframe. */
:root:not(.labx-vt) .labx.is-ready .labx-placard > * { animation: rise .5s cubic-bezier(.2, .7, .2, 1) both; }
:root:not(.labx-vt) .labx.is-ready .labx-placard > :nth-child(2) { animation-delay: .05s; }
:root:not(.labx-vt) .labx.is-ready .labx-placard > :nth-child(3) { animation-delay: .1s; }
:root:not(.labx-vt) .labx.is-ready .labx-placard > :nth-child(4) { animation-delay: .15s; }
:root:not(.labx-vt) .labx.is-ready .labx-placard > :nth-child(5) { animation-delay: .2s; }

/* 5. RESPONSIVE ----------------------------------------------------------- */
@media (hover: none) {
  .labx-keys { display: none; }
  .labx-index a { padding: 11px 10px; }
  .labx-back { padding: 10px 14px 10px 11px; }
}

/* one column: the screen, then the placard under it */
@media (max-width: 1000px) {
  .exp.labx-card { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .labx-screen { aspect-ratio: 16 / 10; max-height: calc(100svh - var(--hud-h) - 150px); }
  .labx-placard { gap: 18px; }
  .labx-count b { font-size: 52px; }
  .labx-pager { margin-top: 4px; }
}

@media (max-width: 560px) {
  .labx { padding-top: calc(var(--hud-h) + 12px); }
  .labx-hud { grid-template-columns: 1fr auto; }
  .labx-top { margin-bottom: 10px; }
  .labx-screen { aspect-ratio: 4 / 5; min-height: 260px; max-height: calc(100svh - var(--hud-h) - 170px); }
  .labx-card .exp-hint { left: 16px; bottom: 14px; }
}

@media print {
  .labx-top, .labx-pager, .labx-keys, .labx-full { display: none; }
}

/* 6. VIEW TRANSITIONS ----------------------------------------------------- */
/* Coming from the home page, the clicked card's screen and title carry the same two names
   (lab-stage, lab-title), so they morph into place while the rest of the page changes over:
   the old page fades and drifts up, this one rises. Between two sketches the screen and the
   status bar hold still and cross-fade. Browsers without view transitions just navigate. */
::view-transition-old(root) { animation: labx-leave .26s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: labx-arrive .5s cubic-bezier(.2, .7, .2, 1) .08s both; }
@keyframes labx-leave { to { opacity: 0; transform: translateY(-16px) scale(.985); } }
@keyframes labx-arrive { from { opacity: 0; transform: translateY(28px); } }

::view-transition-group(lab-stage) { animation-duration: .56s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-group(lab-title) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
/* the card's screen and this one differ in shape: crop both to the moving box instead of stretching */
::view-transition-old(lab-stage), ::view-transition-new(lab-stage) { height: 100%; object-fit: cover; }

/* Reduced motion: no transition at all, a plain cut. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}