/* Frozen snapshot of the live homepage orbit (hero--orbit / hl19) as it
   existed before the Ramp behind-text blur/dim pass. Prefixed oc-* so later
   styles.css edits to .hl19-* cannot change this page. */

.oc-hero {
  padding-block: var(--s-6) var(--s-20);
  overflow: visible;
}
.oc-stage {
  position: relative;
  width: min(100%, 1440px);
  margin-inline: auto;
  height: calc(min(28.8vw, 368px) * 2 + 260px);
  display: grid;
  place-items: center;
  perspective: 1400px;
  overflow: visible;
  isolation: isolate;
  contain: layout style;
}
.oc-ring {
  position: absolute;
  inset: 0;
  --yaw: 0deg;
  --pitch: 0deg;
  transform: rotateX(var(--pitch)) rotateY(var(--yaw));
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.oc-sat {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  animation: ocorbit 48s linear infinite;
  pointer-events: auto;
}
.oc-ring--mid .oc-sat { animation-duration: 44s; }
.oc-ring--in .oc-sat { animation-duration: 40s; }
.oc-hero.is-orbit-paused .oc-sat { animation-play-state: paused; }
.oc-sat--out { --rad: min(28.8vw, 368px); }
.oc-sat--mid { --rad: min(22.8vw, 298px); }
.oc-sat--in  { --rad: min(16vw, 206px); }

.oc-photo { width: min(118px, 10.5vw); }
.oc-photo--wide { width: min(156px, 14vw); }
.oc-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  border: 1px solid #fff;
  outline: 0;
  box-shadow: none;
}
.oc-photo--wide img { aspect-ratio: 16 / 10; }
@keyframes ocorbit {
  from {
    transform:
      translate(-50%, -50%)
      rotate(var(--a))
      translate(var(--rad))
      rotate(calc(-1 * var(--a)))
      rotate(var(--tilt, 0deg));
  }
  to {
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--a) + 360deg))
      translate(var(--rad))
      rotate(calc(-1 * (var(--a) + 360deg)))
      rotate(var(--tilt, 0deg));
  }
}

.oc-sticker {
  border: 0;
  outline: 0;
  background: none;
  overflow: visible;
}
.oc-sticker img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border: 0;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .38));
}
.oc-sticker--card img {
  filter: none;
}
.oc-sticker--hand img {
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .45));
}
.oc-sticker--ygt        { width: min(108px, 10vw); }
.oc-sticker--listen     { width: min(148px, 13.5vw); }
.oc-sticker--note       { width: min(168px, 15.5vw); }
.oc-sticker--how        { width: min(156px, 14.5vw); }
.oc-sticker--bread      { width: min(112px, 10.5vw); }
.oc-sticker--yellow     { width: min(148px, 13.5vw); }
.oc-sticker--phone      { width: min(128px, 12vw); }
.oc-sticker--holo       { width: min(118px, 11vw); }
.oc-sticker--substance  { width: min(156px, 14.5vw); }
.oc-sticker--card       { width: min(86px, 8vw); }
.oc-sticker--hand       { width: min(396px, 36vw); }

.oc-core {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  pointer-events: none;
  padding: 2.6rem 1.2rem 2.4rem;
  text-align: center;
}
.oc-title {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  text-align: center;
  font-weight: 400;
  color: #fff;
  pointer-events: none;
}
.oc-lead {
  display: block;
  width: 100%;
  white-space: nowrap;
  text-align: center;
  font-size: clamp(24px, 2.8vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, .88);
  text-shadow:
    0 0 1px rgba(0, 0, 0, .85),
    0 1px 0 rgba(0, 0, 0, .55),
    1px 0 0 rgba(0, 0, 0, .35),
    -1px 0 0 rgba(0, 0, 0, .35),
    0 -1px 0 rgba(0, 0, 0, .35),
    0 2px 10px rgba(0, 0, 0, .45),
    0 0 22px rgba(0, 0, 0, .4);
}
.oc-pair {
  display: block;
  width: 100%;
  margin-top: .06em;
  margin-inline: auto;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(112px, 13.2vw, 192px);
  line-height: .92;
  letter-spacing: -0.04em;
  color: #fff;
  text-shadow:
    0 0 1px rgba(0, 0, 0, .85),
    0 1px 0 rgba(0, 0, 0, .55),
    1px 0 0 rgba(0, 0, 0, .35),
    -1px 0 0 rgba(0, 0, 0, .35),
    0 -1px 0 rgba(0, 0, 0, .35),
    0 2px 10px rgba(0, 0, 0, .45),
    0 0 22px rgba(0, 0, 0, .4);
}
.oc-pair .arrow {
  width: 0.76em;
  height: 0.72em;
  margin-inline: 0.04em 0.06em;
  vertical-align: 0;
  color: inherit;
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, .55))
    drop-shadow(0 0 8px rgba(0, 0, 0, .45));
}

.oc-alone {
  position: relative;
  display: inline-block;
  pointer-events: auto;
}
.oc-alone__solid {
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.oc-alone__stroke {
  position: absolute;
  left: 0;
  top: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #fff;
  paint-order: stroke fill;
  text-shadow: none;
  pointer-events: none;
  opacity: 1;
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, .55))
    drop-shadow(0 0 8px rgba(0, 0, 0, .45));
}
.oc-alone:hover .oc-alone__solid,
.oc-alone.is-lit .oc-alone__solid {
  color: inherit;
  -webkit-text-fill-color: currentColor;
  text-shadow: inherit;
}
.oc-alone:hover .oc-alone__stroke,
.oc-alone.is-lit .oc-alone__stroke {
  opacity: 0;
}

.oc-known {
  position: relative;
  display: inline-block;
  pointer-events: auto;
}
.oc-known__spray {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}
.oc-heart {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  animation-fill-mode: forwards;
}
@keyframes och-out {
  from {
    transform: translate(-50%, -50%) scale(calc(var(--s, 1) * .45));
    opacity: 0;
  }
  18% { opacity: var(--op, .85); }
  to {
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(var(--s, 1)) rotate(var(--spin));
    opacity: 0;
  }
}
.oc-below {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
  text-align: center;
  max-width: 36rem;
  margin: var(--s-4) auto 0;
  padding-inline: var(--pad);
  padding-bottom: var(--s-14);
  position: relative;
  z-index: 3;
}
.oc-below .lede { margin: 0; color: rgba(255, 255, 255, .62); }
.oc-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .oc-ring { transition: none; }
  .oc-sat {
    animation: none;
    transform:
      translate(-50%, -50%)
      rotate(var(--a))
      translate(var(--rad))
      rotate(calc(-1 * var(--a)))
      rotate(var(--tilt, 0deg));
  }
  .oc-heart { display: none; animation: none; }
}
@media (max-width: 1023px) {
  .oc-stage { height: clamp(560px, 140vw, 720px); }
  .oc-sat--out { --rad: min(35.2vw, 208px); }
  .oc-sat--mid { --rad: min(28.8vw, 168px); }
  .oc-sat--in { --rad: min(20.8vw, 120px); }
  .oc-photo { width: 88px; }
  .oc-photo--wide { width: 112px; }
  .oc-sticker--ygt        { width: 82px; }
  .oc-sticker--listen     { width: 108px; }
  .oc-sticker--note       { width: 122px; }
  .oc-sticker--how        { width: 114px; }
  .oc-sticker--bread      { width: 86px; }
  .oc-sticker--yellow     { width: 108px; }
  .oc-sticker--phone      { width: 96px; }
  .oc-sticker--holo       { width: 88px; }
  .oc-sticker--substance  { width: 114px; }
  .oc-sticker--card       { width: 64px; }
  .oc-sticker--hand       { width: min(276px, 72vw); }
  .oc-core {
    width: 100%;
    padding: 1rem 12px 1.15rem;
    justify-items: center;
    justify-content: center;
    text-align: center;
  }
  .oc-title { width: 100%; text-align: center; }
  .oc-lead {
    width: 100%;
    text-align: center;
    font-size: clamp(20px, 5.6vw, 26px);
  }
  .oc-pair {
    display: block;
    width: 100%;
    margin-inline: auto;
    text-align: center;
    font-size: clamp(44px, 13.2vw, 68px);
    letter-spacing: -0.045em;
  }
}