/* ==========================================================================
   View-all signposts — two 3D arrow signs hinged on the page's centre line,
   mounted on the corner of a faint "room". The signs swing open like doors
   when they reach the middle of the screen (viewall.js) and drift with scroll.
   CSS holds the final, open state (no-JS / reduced motion); JS flattens it
   and plays the swing.
   ========================================================================== */
.s-viewall {
  /* Anton's caps are ~1.3x taller (and wider) than Thunder's at the same size:
     80rem matches crency's cap height and keeps the flat left sign inside its
     half; the extra padding keeps crency's 260rem slab (and arrow head). */
  --va-font: 80rem;           /* sign text size */
  --va-pad-y: 82rem;
  --va-pad-x: 50rem;
  --va-stretch: 80rem;        /* hover: outer padding grows to this */
  --va-persp: 2000rem;
  --va-red-fg: #ffe3e8;       /* pale pink text + side face of the red sign */
  position: relative;
  height: max(1320rem, calc(var(--vhx, 100svh) * 1.1));
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: var(--ink);
}

/* ---------- Halves: each one is its own perspective box ---------- */
.viewall__part {
  position: relative;
  flex: 0 0 50%;
  min-width: 0;
  height: var(--vhx, 100svh);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  perspective: var(--va-persp);
}
.viewall__part--left { flex-direction: row-reverse; }   /* sign hugs the centre line */

/* ---------- Room: two faint wall planes meeting at the centre line ---------- */
.viewall__wall {
  position: absolute;
  z-index: 0;
  top: 10%;
  width: 150%;
  height: 80%;
  border: 3rem solid var(--ice);
  opacity: .05;
  pointer-events: none;
}
.viewall__wall--left {
  right: 0;
  border-right-width: 0;
  transform-origin: 100% 50%;
  transform: perspective(680px) rotateY(-1deg);
}
.viewall__wall--right {
  left: 0;
  background: var(--ice);
  transform-origin: 0 50%;
  transform: perspective(680px) rotateY(1deg);
}

/* ---------- Hinge: scroll-drift wrapper (keeps the 3D context alive) ---------- */
.viewall__hinge {
  position: relative;
  z-index: 1;
  flex: none;
  transform-style: preserve-3d;
  pointer-events: none;       /* its flat box sits in front of the receding sign — let hits through */
}
.viewall__hinge > a { pointer-events: auto; }
.viewall__hinge--left { transform-origin: 100% 50%; }
.viewall__hinge--right { transform-origin: 0 50%; }

/* ---------- The sign: a slab + arrow head + side face ---------- */
.viewall__sign {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--va-pad-y) var(--va-pad-x);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--va-font);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .005em;
  white-space: nowrap;
  transform-style: preserve-3d;
  transition: padding .8s cubic-bezier(.22, 1, .36, 1);
}
.viewall__sign--left {
  background: var(--ice);
  color: var(--blue);
  transform-origin: 100% 100%;
  transform: translateY(50%) rotateY(-45deg);        /* sits half a sign low */
}
.viewall__sign--right {
  background: var(--red);
  color: var(--va-red-fg);
  transform-origin: 0 50%;
  transform: translateY(-50%) rotateY(45deg);        /* sits half a sign high */
}
/* hover: the sign stretches out in the direction it points (mouse only, so a
   tap on a phone doesn't leave the sign stuck stretched) */
@media (hover: hover) and (pointer: fine) {
  .viewall__sign--left:hover { padding-left: var(--va-stretch); }
  .viewall__sign--right:hover { padding-right: var(--va-stretch); }
  .viewall__sign--left:hover .viewall__text { transform: translateX(-10rem); }
  .viewall__sign--right:hover .viewall__text { transform: translateX(10rem); }
}
.viewall__sign:focus-visible { outline-offset: 10rem; }

.viewall__text { display: block; position: relative; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
/* capital wide glyph: a touch less stretch so it lands on Anton's cap height */
.viewall__text .wide { margin: 0 .03em; }
.viewall__text .wide.caps { transform: scaleY(1.27); }

/* arrow head: a 3:2 box half outside the slab, clipped to a point */
.viewall__head {
  position: absolute;
  z-index: -1;
  top: 0;
  display: block;
  height: 100%;
  aspect-ratio: 3 / 2;
  background: inherit;
}
.viewall__sign--left .viewall__head {
  left: 0;
  transform: translateX(-50%);
  clip-path: polygon(100% 0, 33.333% 0, 0 50%, 33.333% 100%, 100% 100%);
}
.viewall__sign--right .viewall__head {
  right: 0;
  transform: translateX(50%);
  clip-path: polygon(0 0, 66.667% 0, 100% 50%, 66.667% 100%, 0 100%);
}

/* side face: a square folded 90deg back from the hinge edge — reads as the
   thickness of the post once the sign swings */
.viewall__side {
  position: absolute;
  top: 0;
  display: block;
  height: 100%;
  aspect-ratio: 1;
  background: currentColor;
  transform-origin: 0 50%;
}
.viewall__sign--left .viewall__side { right: 0; transform: translateX(100%) rotateY(90deg); }
.viewall__sign--right .viewall__side { left: 0; transform: rotateY(90deg); }

/* ---------- Sparkle on the red sign's top corner ----------
   A flat sibling of the hinge (kept out of the 3D context so it rasterises
   crisply); JS gives it the same scroll drift as the signs. */
.viewall__star {
  position: absolute;
  z-index: 2;
  top: calc(50% - 330rem);
  left: 40rem;
  width: 120rem;
  height: 120rem;
  pointer-events: none;
}
.viewall__star-pop { display: block; width: 100%; height: 100%; transition: transform .6s var(--ease-back); }
.viewall__star svg { width: 100%; height: 100%; overflow: visible; }   /* spun by data-spin */
.viewall__star path { fill: var(--yellow); }
/* hovering (or focusing) the red sign makes the sparkle pop */
@media (hover: hover) and (pointer: fine) {
  .viewall__hinge--right:hover + .viewall__star .viewall__star-pop { transform: scale(1.22) rotate(-12deg); }
}
.viewall__hinge--right:focus-within + .viewall__star .viewall__star-pop { transform: scale(1.22) rotate(-12deg); }

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  .s-viewall { height: 640rem; --va-font: 60rem; --va-pad-y: 48rem; --va-pad-x: 30rem; --va-stretch: 50rem; --va-persp: 775rem; }
  /* the section is shorter than the screen here: size the halves to the
     section so the walls' slanted top/bottom edges stay visible instead of
     being cropped into flat rectangles */
  .viewall__part { height: 100%; }
  .viewall__star { width: 84rem; height: 84rem; left: 4rem; top: calc(50% - 202rem); }
}

/* ---------- Phone ---------- */
@media (max-width: 743px) {
  .s-viewall { height: 380rem; margin-top: 90rem; --va-font: 33rem; --va-pad-y: 26rem; --va-pad-x: 16rem; --va-stretch: 26rem; --va-persp: 403rem; }
  /* the left sign is the longer one: nudge the hinge a few px right */
  .viewall__part--left { flex-basis: 51%; }
  .viewall__part--right { flex-basis: 49%; }
  .viewall__wall { border-width: 2rem; }
  .viewall__star { width: 48rem; height: 48rem; left: 2rem; top: calc(50% - 110rem); }
}