.fy-opening {
  background: var(--fy-charcoal);
}
.fy-opening__title {
  font-size: clamp(3rem, 1.2rem + 6.4cqi, 6rem);
  line-height: 1.18;
  font-weight: 300;
}
.fy-opening__media {
  transform-origin: 50% 50%;
}
.fy-opening__scrim {
  background:
    radial-gradient(
      ellipse at center,
      transparent 0%,
      color-mix(in oklch, var(--fy-charcoal) 30%, transparent) 100%
    ),
    linear-gradient(
      to top,
      color-mix(in oklch, var(--fy-charcoal) 70%, transparent),
      transparent 50%,
      color-mix(in oklch, var(--fy-charcoal) 30%, transparent)
    ),
    linear-gradient(
      to right,
      color-mix(in oklch, var(--fy-charcoal) 80%, transparent),
      color-mix(in oklch, var(--fy-charcoal) 40%, transparent) 50%,
      color-mix(in oklch, var(--fy-charcoal) 20%, transparent)
    );
}

.fy-opening__word {
  display: inline-block;
  margin-inline-end: 0.25em;
}
.fy-opening__badge,
.fy-opening__lead,
.fy-opening__stat {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid oklch(1 0 0 / 0.2);
  background: oklch(1 0 0 / 0.1);
  padding: 0.75rem 1.25rem;
}
.fy-opening__lead {
  background: color-mix(in oklch, var(--fy-charcoal) 30%, transparent);
  border-color: oklch(1 0 0 / 0.1);
  padding: 1rem;
}
@container (width >= 40rem) {
  .fy-opening__lead {
    padding: 1.5rem;
  }
}
.fy-opening__stat {
  display: block;
  min-width: 10rem;
  padding: 0.75rem 1.5rem 1.5rem;
  text-align: center;
  background: oklch(0 0 0 / 0.8);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-color: oklch(1 0 0 / 0.1);
  transition: transform 0.3s var(--fy-ease);
}
.fy-opening__stat-arrow {
  display: flex;
  justify-content: flex-end;
  min-height: 1rem;
  margin-bottom: 0.25rem;
  color: oklch(1 0 0 / 0.5);
  transition: color 0.3s var(--fy-ease);
}
a.fy-opening__stat:hover .fy-opening__stat-arrow {
  color: var(--fy-gold);
}
@supports not (backdrop-filter: blur(1px)) {
  .fy-opening__badge,
  .fy-opening__lead {
    background: color-mix(in oklch, var(--fy-charcoal) 70%, transparent);
  }
  .fy-opening__stat {
    background: color-mix(in oklch, var(--fy-charcoal) 92%, transparent);
  }
}

.fy-opening__hint {
  display: none;
}
@container (width >= 64rem) {
  .fy-opening__hint {
    display: flex;
  }
}
.fy-opening__hint-line {
  background: linear-gradient(to bottom, var(--fy-gold), transparent);
}
.fy-opening__rule {
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in oklch, var(--fy-gold) 50%, transparent),
    transparent
  );
}

@keyframes fy-opening-word {
  from {
    opacity: 0;
    transform: translateY(3.125rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fy-opening-in {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fy-opening-badge {
  from {
    opacity: 0;
    transform: translateX(-1.875rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fy-opening-stats {
  from {
    opacity: 0;
    transform: translate(1.875rem, -50%);
  }
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
@keyframes fy-opening-line {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes fy-opening-hint {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.5rem);
  }
}
@keyframes fy-opening-drift {
  to {
    transform: translateY(30%) scale(1.1);
  }
}
@keyframes fy-opening-fade {
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .fy-opening__word {
    animation: fy-opening-word 0.8s var(--fy-ease) both;
    animation-delay: var(--fy-delay, 0s);
  }
  .fy-opening__badge {
    animation: fy-opening-badge 0.6s var(--fy-ease) 0.3s both;
  }
  .fy-opening__lead {
    animation: fy-opening-in 0.6s var(--fy-ease) 1.2s both;
  }
  .fy-opening__actions {
    animation: fy-opening-in 0.6s var(--fy-ease) 1.4s both;
  }
  .fy-opening__stats {
    animation: fy-opening-stats 0.6s var(--fy-ease) 1.6s both;
  }
  .fy-opening__hint {
    animation: fy-opening-in 0.6s var(--fy-ease) 2s both;
  }
  .fy-opening__hint-line {
    animation: fy-opening-hint 1.5s ease-in-out 2.6s infinite;
  }
  .fy-opening__rule {
    transform-origin: 50% 50%;
    animation: fy-opening-line 1s var(--fy-ease) 1.8s both;
  }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .fy-opening__media {
      animation: fy-opening-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100svh;
    }
    .fy-opening__content {
      animation: fy-opening-fade linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 50svh;
    }
  }
}
.fy-opening {
  min-height: max(100svh, 37.5rem);
}
.fy-opening__content {
  min-height: max(100svh, 37.5rem);
  padding-block: 6rem calc(7.5rem + env(safe-area-inset-bottom, 0px));
}
@container (width >= 64rem) {
  .fy-opening__content {
    padding-block: 8.5rem 7rem;
  }
}