/* Jyrex page, rebuilt from 2026-10-19: the paleoart opening. The art fills the screen; the raptor's head sits on
   the right of the frame, so the words go on the dark left side. */
.jyp { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: #000; isolation: isolate; }
.jyp__art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: contain; object-position: 78% 50%;
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 14%), linear-gradient(90deg, transparent 0%, #000 6%); -webkit-mask-composite: source-in; mask-image: linear-gradient(0deg, transparent 0%, #000 14%), linear-gradient(90deg, transparent 0%, #000 6%); mask-composite: intersect;
  animation: jyp-in 2600ms cubic-bezier(.2,.7,.2,1) both; }
/* the art's own black is the backdrop: deepen it on the text side and at the foot of the screen */
.jyp::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .35) 34%, transparent 56%), linear-gradient(0deg, #000 0%, transparent 22%); }
.jyp__text { position: relative; width: 100%; padding-block: 120px 96px; }
.jyp__text > * { max-width: 30rem; animation: jyp-rise 1400ms 700ms cubic-bezier(.2,.7,.2,1) both; }
.jyp__by { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: rgb(255 255 255 / .62); font-size: 15px; }
.jyp__by img { width: 26px; height: 26px; image-rendering: pixelated; }
.jyp__title { margin: 0; font-size: clamp(64px, 10vw, 148px); font-weight: 300; line-height: .9; letter-spacing: -.045em; color: #fff; }
.jyp__lead { margin: 22px 0 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: rgb(255 255 255 / .74); }
.jyp__acts { margin-top: 32px; }
.jyp__cue { position: absolute; left: 0; right: 0; bottom: 26px; white-space: nowrap; margin: 0; color: rgb(255 255 255 / .5); font-size: 13px; letter-spacing: .02em;
  display: flex; flex-direction: column; align-items: center; gap: 10px; animation: jyp-rise 1200ms 1800ms both; }
.jyp__cue::after { content: ""; width: 1px; height: 36px; background: linear-gradient(rgb(255 255 255 / .55), transparent); animation: jyp-drip 2400ms 2600ms ease-in-out infinite; transform-origin: top; }
@keyframes jyp-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes jyp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes jyp-drip { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
/* narrower than the art (tablets, small windows): not enough black on the left, so the head takes the top and
   the words sit below it on black */
@media (max-aspect-ratio: 3/2) {
  .jyp { align-items: flex-end; }
  .jyp__art { height: 74%; object-fit: cover; object-position: 76% 30%; -webkit-mask-image: none; mask-image: none; }
  .jyp::after { background: linear-gradient(0deg, #000 30%, rgb(0 0 0 / .7) 40%, transparent 58%); }
  .jyp__title { font-size: clamp(56px, 9vw, 110px); }
}
/* phones and tall screens */
@media (max-aspect-ratio: 1/1) {
  .jyp__art { height: 60%; object-fit: cover; object-position: 74% 50%; }
  .jyp::after { background: linear-gradient(0deg, #000 38%, rgb(0 0 0 / .6) 46%, transparent 62%); }
  .jyp__text { padding-block: 0 120px; }
}
@media (prefers-reduced-motion: reduce) { .jyp__art, .jyp__text > *, .jyp__cue, .jyp__cue::after { animation: none; } }

/* ---- 2-4. the three objects: a tall section whose stage (the 3D and its words) stays on screen while the
   scroll turns the camera around the object ---- */
.jyo { position: relative; height: 230svh; background: #000; }
.jyo__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.jyo__gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.jyo__text { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; }
.jyo__text > * { max-width: 25rem; pointer-events: auto; }
.jyo__when { margin: 0 0 14px; color: rgb(255 255 255 / .55); font-size: 15px; }
.jyo__title { margin: 0 0 22px; color: #fff; font-size: clamp(40px, 5.2vw, 76px); font-weight: 300; letter-spacing: -.035em; line-height: 1; }
.jyo__body { margin: 0 0 14px; color: rgb(255 255 255 / .72); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; }
.jyo__acts { margin-top: 28px; }
/* a flipped stage: the same picture mirrored, so the object is on the left (its light, reflections and shadow with
   it), and the words in a column against the right edge of the page. Only for objects with no lettering on them. */
@media (min-width: 761px) {
  .jyo--flip .jyo__text { display: grid; grid-template-columns: minmax(0, 1fr) min(100%, var(--flip-col, 25rem)); }
  .jyo--flip .jyo__text > * { grid-column: 2; }
}
@media (max-width: 760px) {
  .jyo { height: 200svh; }
  .jyo__text { top: auto; bottom: 0; transform: none; padding-top: 80px; padding-bottom: 40px; background: linear-gradient(transparent, rgb(0 0 0 / .88) 34%); }
}

/* how an answer runs through the Jyrex: five steps, one at a time. They share one grid cell (as tall as the longest),
   and the current one fades in where the last one faded out. */
.jyo__steps { display: grid; margin: 0; padding: 0; list-style: none; max-width: 25rem; }
.jyo__steps li { grid-area: 1 / 1; margin: 0; color: rgb(255 255 255 / .78); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55;
  opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease), transform 700ms var(--ease); }
.jyo__steps li b { display: block; margin-bottom: 2px; font-weight: 500; color: #fff; }
.jyo__steps li.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .jyo__steps li { transform: none; } }

/* the accelerator card: heading at the top left, the five steps at the bottom left, the card on the right */
.jyo--placa { height: 620svh; }
.jyo--placa .jpl__head { top: clamp(96px, 14vh, 150px); transform: none; }
.jmq__title { margin: 0; color: #fff; font-size: clamp(30px, 3.4vw, 50px); font-weight: 300; letter-spacing: -.035em; line-height: 1.05; max-width: 15ch; }
.jmq__lead { margin: 16px 0 0; max-width: 40ch; color: rgb(255 255 255 / .6); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; }
.jyo--placa .jpl__steps { top: auto; bottom: clamp(40px, 9vh, 90px); transform: none; }
.jyo--placa .jyo__steps { max-width: 27rem; }
@media (max-width: 760px) {
  .jyo--placa .jpl__head { top: 84px; padding-bottom: 0; background: none; }
  .jyo--placa .jpl__head .jmq__lead { display: none; }
  .jyo--placa .jpl__steps { bottom: 0; }
}

/* entrances: each 3D stage fades up from black once its first frame is ready, and its words follow */
.jyo__gl { opacity: 0; transform: scale(1.025); transition: opacity 600ms cubic-bezier(.2,.7,.2,1), transform 1000ms cubic-bezier(.2,.7,.2,1); }
.jyo.is-ready.is-in .jyo__gl { opacity: 1; transform: none; }
.jyo__text > * { opacity: 0; transform: translateY(14px); transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 1100ms cubic-bezier(.2,.7,.2,1); }
.jyo.is-in .jyo__text > * { opacity: 1; transform: none; }
.jyo.is-in .jyo__text > :nth-child(2) { transition-delay: 90ms; }
.jyo.is-in .jyo__text > :nth-child(3) { transition-delay: 180ms; }
.jyo.is-in .jyo__text > :nth-child(4) { transition-delay: 270ms; }
.jyo.is-in .jyo__text > :nth-child(5) { transition-delay: 360ms; }
@media (prefers-reduced-motion: reduce) { .jyo__gl, .jyo__text > * { transition: none; transform: none; } }
/* the flipped stages keep their mirror through the entrance */
@media (min-width: 761px) {
  .jyo--flip .jyo__gl { transform: scale(-1.025, 1.025); }
  .jyo--flip.is-ready.is-in .jyo__gl { transform: scaleX(-1); }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) { .jyo--flip .jyo__gl { transform: scaleX(-1); } }

/* over moving 3D a blurred bar is recomputed every frame: on this page the scrolled nav is solid instead */
.nav.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(0 0 0 / .9); }

/* the Tyrannosaurus portrait, as photographed (looking left, into the words): set against the right edge of the
   screen, so the side where the photograph cuts the body meets the edge of the page and never shows as a line */
.jyp__art--rex { top: auto; height: 95%; object-position: 100% 100%; }   /* a little smaller, standing on the foot of the screen, so the snout keeps clear of the words */
@media (max-aspect-ratio: 3/2) { .jyp__art--rex { top: 0; height: 74%; object-position: 30% 10%; } }
@media (max-aspect-ratio: 1/1) { .jyp__art--rex { top: 64px; height: 52%; object-position: 12% 0%; } }

/* Jyraptor page: the path from a problem to its validation, as one quiet line of steps */
.jra { padding-block: clamp(110px, 16vh, 190px); background: #000; text-align: center; }
.jra__title { margin: 0; color: #fff; font-size: clamp(32px, 4vw, 60px); font-weight: 300; letter-spacing: -.035em; line-height: 1.05; }
.jra__path { list-style: none; margin: clamp(40px, 6vh, 64px) auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 0; max-width: 1100px; }
.jra__path li { display: flex; align-items: center; color: rgb(255 255 255 / .82); font-size: clamp(16px, 1.4vw, 20px); }
.jra__path li + li::before { content: ""; width: clamp(28px, 4vw, 64px); height: 1px; margin: 0 clamp(12px, 1.4vw, 20px); background: linear-gradient(90deg, rgb(234 241 244 / .1), rgb(234 241 244 / .45)); }
.jra__path li:last-child { color: #3be3a6; }
.jra__lead { max-width: 36em; margin: clamp(36px, 5vh, 56px) auto 0; color: rgb(255 255 255 / .62); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.65; }
.jra__status { margin: 28px 0 0; }
@media (max-width: 760px) {
  .jra__path { flex-direction: column; gap: 0; }
  .jra__path li { flex-direction: column; }
  .jra__path li + li::before { width: 1px; height: 22px; margin: 8px 0; background: rgb(234 241 244 / .3); }
}