:root { --orange: #f2541b; }

.ot {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: 120px var(--gutter) 96px;
  text-align: center;
}

/* logo ring. --u is one T, --r the ring radius (same ratio as the logo file) */
.ring {
  --u: clamp(46px, 9vw, 96px);
  --r: calc(var(--u) * 1.75);
  position: relative;
  width: calc(var(--r) * 2 + var(--u) * 1.1);
  height: calc(var(--r) * 2 + var(--u) * 1.1);
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.slot {
  position: absolute; left: 50%; top: 50%;
  width: var(--u); height: var(--u);
  margin: calc(var(--u) / -2) 0 0 calc(var(--u) / -2);
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1));
}
.spin, .land, .flip, .slot svg { display: block; width: 100%; height: 100%; }
.slot svg { fill: currentColor; }
.odd .flip { transform: perspective(400px) rotateX(180deg); color: var(--orange); }

/* 1. every T spins in place and settles, 50ms apart */
.play .spin { animation: spin 1200ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 50ms) both; }
@keyframes spin {
  0%   { transform: rotate(-540deg) scale(0.6); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: rotate(0) scale(1); opacity: 1; }
}

/* 2. the odd one flips over its crossbar, turning orange as it goes past edge-on */
.play .odd .flip { animation: flip 700ms cubic-bezier(0.45, 0, 0.2, 1) 1650ms both; }
@keyframes flip {
  0%     { transform: perspective(400px) rotateX(0) scale(1); color: var(--ink); }
  49.9%  { color: var(--ink); }
  50%    { transform: perspective(400px) rotateX(90deg) scale(1.28); color: var(--orange); }
  100%   { transform: perspective(400px) rotateX(180deg) scale(1); color: var(--orange); }
}

/* 3. it lands: a quick squash, and the other five take the hit */
.play .odd .land { animation: land 260ms ease-out 2350ms both; }
@keyframes land {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08, 0.9); }
  100% { transform: scale(1); }
}
.play .slot:not(.odd) .flip { animation: thud 220ms ease-out 2350ms both; }
@keyframes thud {
  40% { transform: scale(0.95); }
}

/* 4. name, then the mission */
.wordmark {
  margin-top: clamp(18px, 3vw, 36px);
  font-size: clamp(15px, 1.6vw, 20px); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.32em;
  margin-right: -0.32em;
}
.mission { max-width: 34rem; margin-top: clamp(40px, 6vw, 72px); }
.mission .lead {
  font-size: clamp(24px, 2.8vw, 36px); font-weight: 700;
  line-height: 1.12; letter-spacing: -0.025em; color: var(--ink);
}
.mission p { margin-top: 18px; font-size: 16px; line-height: 1.55; color: #55554f; }
.mission p + p { margin-top: 14px; }

.wordmark, .mission > * { opacity: 0; }
.play .wordmark { animation: rise 500ms cubic-bezier(0.16, 1, 0.3, 1) 2450ms both; }
.play .mission > * { animation: rise 600ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.play .mission > :nth-child(1) { animation-delay: 2650ms; }
.play .mission > :nth-child(2) { animation-delay: 2720ms; }
.play .mission > :nth-child(3) { animation-delay: 2790ms; }
.play .mission > :nth-child(4) { animation-delay: 2860ms; }
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .play .spin, .play .odd .flip, .play .odd .land, .play .slot:not(.odd) .flip,
  .play .wordmark, .play .mission > * { animation: none; }
  .wordmark, .mission > * { opacity: 1; }
}