/* ==========================================================================
   Perry3D — the centrepiece artwork and the copy that frames it
   ========================================================================== */

/* --- The centrepiece ------------------------------------------------------
   All four stages are stacked in one grid cell so switching is a crossfade
   between siblings rather than a swap that collapses the layout.
   -------------------------------------------------------------------------- */

/* Pinned to the top of the canvas rather than centred in it: the rails are different
   lengths on every stage, and centring would make the artwork jump up and down as
   you switch between them. */
.centre {
  position: relative;
  display: grid;
  min-width: 0;
  align-self: start;
}

/* On the desktop home sheet the artwork fills whatever is left between the name
   and the stage switcher, without ever pushing those off the window. */
@media (width > 75rem) {
  body.page--home .centre {
    align-self: stretch;
    height: 100%;
    min-height: 0;
    container-type: size;
    justify-items: center;
    align-items: center;
  }

  body.page--home .art {
    width: 100%;
    height: 100%;
    min-height: 0;
    gap: 0;
  }

  body.page--home .art__frame {
    width: min(100%, calc(100cqh * 3 / 2));
    height: min(100cqh, calc(100cqw * 2 / 3));
    max-height: none;
  }
}

.art {
  grid-area: 1 / 1;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.art[aria-hidden='true'] {
  opacity: 0;
  transform: scale(0.99);
  pointer-events: none;
}

.art[aria-hidden='false'] {
  opacity: 1;
  transform: none;
}

/* Keeps hidden panels out of the tab order and the accessibility tree without
   removing them from layout, so the crossfade has something to fade between. */
.art[aria-hidden='true'] * {
  visibility: hidden;
}

/* One shared frame ratio for all four stages. The artworks differ slightly in
   proportion, so `contain` centres each one inside a box whose height never
   changes — switching stages never nudges the rails or the switcher. */
/* Height is capped as well as ratio-driven so the artwork, the rails and the
   switcher all stay on one screen; `contain` centres the art in whatever box
   that leaves. */
.art__frame {
  position: relative;
  aspect-ratio: 3 / 2;
  width: 100%;
  /* Capped so the artwork cannot swallow a tall window. On the desktop home sheet
     the frame is instead sized to the leftover canvas; see the query above. */
  max-height: 60svh;
}

/* The artwork carries its own soft shadow in its alpha channel, so it needs no
   border, panel or CSS shadow to sit on the paper. */
.art__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* --- Personal rails ------------------------------------------------------- */

.hobbies {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.hobby {
  display: flex;
  gap: 0.7rem;
}

.hobby__icon {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 0.05rem;
  color: var(--accent);
}

.hobby__title {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--ink);
}

.hobby__body {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--ink-soft);
}

.about {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Personal tints its section headings with the accent; the professional stages
   keep them in ink. */
[data-stage='personal'] .rail__label {
  color: var(--accent);
}

/* The design keeps this as an unruled two-column list, not a bordered table. */
.about__row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0.85rem;
}

.about__key {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.about__val {
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--ink-soft);
}

.quote {
  padding: 1rem 0 0;
  border-top: 1px solid var(--rule);
  color: var(--accent);
}

.quote__text {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
}

.quote__flourish {
  width: 70px;
  height: 20px;
  margin-top: 0.35rem;
  opacity: 0.55;
}

/* --- Stage visibility of the two rail sets -------------------------------- */

/* Rail blocks that belong to one stage. Every stage's copy is in the page and CSS
   reveals the one on screen, so switching stages needs no JavaScript. */
.rail__staged {
  display: none;
}

/* A staged paragraph is plain running text; a staged block stacks a heading over a
   list. Carrying the revealed display value in a custom property keeps the hidden
   state a single rule. */
p.rail__staged {
  --staged-display: block;
}

[data-stage='design'] .rail__staged[data-for='design'],
[data-stage='development'] .rail__staged[data-for='development'],
[data-stage='production'] .rail__staged[data-for='production'] {
  display: var(--staged-display, flex);
  animation: skills-in 460ms var(--ease);
}

@keyframes skills-in {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 40rem) {
  .hobbies,
  .about {
    gap: 0.55rem;
  }

  .hobby {
    gap: 0.5rem;
  }

  .hobby__body,
  .about__val {
    line-height: 1.45;
  }

  .quote {
    padding-top: 0.7rem;
  }

  .quote__text {
    font-size: 1.1rem;
    line-height: 1.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-stage] .rail__staged {
    animation: none;
  }
}

#railPersonal,
#railRightPersonal {
  display: none;
}

[data-stage='personal'] #railProfessional,
[data-stage='personal'] #railRight {
  display: none;
}

[data-stage='personal'] #railPersonal,
[data-stage='personal'] #railRightPersonal {
  display: flex;
}

/* Where these sit in the canvas grid is a layout concern and lives in site.css, so
   that the narrow-viewport rules there can move them without being overridden by
   this stylesheet loading second. */