/* Landing motion: the work ring and the hero load-in. Hidden start states only
   apply under html.js and without reduced motion, so nothing stays invisible
   if the script fails. */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
}

/* ---------- Work ring: six cards of real work on a tilted, spinning wheel ---------- */

/* sits over the header bar (120) but under the menu (128+), breaking out of the frame;
   only the cards take the pointer, so the Menu button underneath stays clickable */
.ring-stage {
  position: absolute;
  z-index: 125;
  top: calc(var(--header-h) - 84px);
  right: clamp(8px, 10vw, 170px);
  pointer-events: none;
  width: clamp(300px, 34vw, 500px);
  /* opens big, then the first ~80px of scroll lift it and settle it smaller
     (motion.js sets --ring-p 0..1 and --ring-end). translate/scale are kept
     apart from transform so the load-in animation cannot override them. */
  transform-origin: 50% 0;
  translate: 0 calc(var(--ring-p, 0) * -32px);
  scale: calc(1 - var(--ring-p, 0) * (1 - var(--ring-end, 0.9)));
  aspect-ratio: 1;
  perspective: 6000px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.ring-stage.is-dragging { cursor: grabbing; }

.ring-scene {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 380px;
  transform: translate(-50%, -50%) scale(var(--ring-scale, 0.9));
  transform-style: preserve-3d;
}

.ring-list {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translate3d(0, -20px, 0) rotateX(66deg) rotateZ(-48deg);
}

.ring-item {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--ring-rot, 0deg) - var(--i) * 60deg)) translateZ(-227px) rotateX(33deg);
}

.ring-card,
.ring-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* the back is a copy of the front, turned so it reads from behind too */
.ring-back { transform: rotateY(180deg); }

/* content runs along the wheel's axis, so it reads with a slight upward slant */
.ring-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
}

.ring-card--panel { background: var(--panel); color: var(--ink); border: 2px solid var(--ink); }
.ring-card--blue { background: var(--accent); color: var(--panel); }
.ring-card--ink { background: var(--ink); color: var(--panel); }
.ring-card--white { background: #fff; color: var(--ink); border: 2px solid var(--ink); }

.ring-logos { display: flex; align-items: center; gap: 18px; }
.ring-logo-yc { width: 56px; height: 56px; }
.ring-logo-pbx { width: auto; height: 30px; }

.ring-title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 76px;
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.ring-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}

.ring-big {
  margin: 0;
  font-family: var(--font-display);
  font-size: 132px;
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.05em;
}

.ring-line {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.ring-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.ring-rows li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 600;
}

.ring-pill {
  padding: 3px 8px 2px;
  border: 2px solid currentColor;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.ring-pill--fill { background: var(--accent); border-color: var(--accent); color: var(--panel); }
.ring-pill--light { background: var(--panel); border-color: var(--panel); color: var(--ink); }

.ring-wordmark { width: 82%; height: auto; }

.ring-bar { position: relative; height: 26px; border: 2px solid var(--panel); }
.ring-bar i { position: absolute; inset: 0 auto 0 0; width: 80%; background: var(--panel); }

/* ---------- Hero load-in ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .hero-photo {
    clip-path: inset(100% 0 0 0);
    animation: shutter-open 1100ms var(--ease-in-out) 150ms forwards;
  }

  .js .hero-name,
  .js .hero-role,
  .js .hero-bottom {
    opacity: 0;
    transform: translateY(18px);
    animation: rise 800ms var(--ease-out) forwards;
  }

  .js .hero-name { animation-delay: 380ms; }
  .js .hero-role { animation-delay: 470ms; }
  .js .hero-bottom { animation-delay: 1250ms; }

  /* opacity only: the through line is measured from this paragraph */
  .js .hero-standfirst {
    opacity: 0;
    animation: fade-in 900ms ease 1100ms forwards;
  }

  .js .hero-section h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
  .js .hero-section h1 .w > span {
    display: inline-block;
    transform: translateY(105%);
    animation: line-up 900ms var(--ease-out) forwards;
    animation-delay: calc(var(--wi) * 32ms + 560ms);
  }

  .js .ring-stage {
    opacity: 0;
    transform: scale(0.92);
    animation: ring-in 1400ms var(--ease-out) 300ms forwards;
  }
}

@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes line-up { to { transform: none; } }
@keyframes shutter-open { to { clip-path: inset(0 0 0 0); } }
@keyframes ring-in { to { opacity: 1; transform: none; } }

/* ---------- Quieter work list: static stats, the through line closing Practice ---------- */

.exp-metrics { margin-top: clamp(20px, 3vw, 32px); }
.practice-map { margin-top: clamp(64px, 9vw, 120px); }

/* ---------- Phones ---------- */

@media (max-width: 760px) {
  /* the C -> 2 -> X diagram was cramped on phones: give each line room */
  .practice-map { min-height: 0; gap: 22px; margin-top: 56px; }
  .practice-map p { transform: none; }

  /* no wheel on phones: too small to read there, and it crowded the name */
  .ring-stage { display: none; }
}

@media (hover: none) {
  .ring-stage { cursor: default; }
}