:root {
  --orange-1: #ff2400;
  --orange-2: #ff5a1f;
  --orange-3: #c91d00;
  --navy: #07162f;
  --navy-2: #0b1d3c;
  --white: #ffffff;
  --ink: #101010;
  --page-pad: clamp(16px, 3vw, 42px);
  --section-gap: clamp(16px, 2vw, 28px);
  --max-width: 1440px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-smooth: cubic-bezier(.22, 1, .36, 1);
}

* {
  box-sizing: border-box;
}

@font-face {
  font-family: rivalries;
  src: url(./RivalriesBears-Regular.otf);
}

html {
  scroll-behavior: smooth;
  background: #ff320d;
  overscroll-behavior: none;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--white);
  font-family: monospace, monospace;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  pointer-events: none;
}

body.modal-open {
  overflow: hidden;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  font-family: monospace, monospace;
}

h2 {
  font-family: rivalries, sans-serif;
}

.site-background {
  position: fixed;
  inset: 0;
  z-index: -20;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%,
      rgba(255, 174, 62, .66),
      transparent 28%),
    radial-gradient(circle at 80% 12%,
      rgba(255, 71, 0, .88),
      transparent 34%),
    radial-gradient(circle at 65% 72%,
      rgba(172, 16, 0, .7),
      transparent 34%),
    linear-gradient(135deg,
      var(--orange-1),
      var(--orange-2) 55%,
      var(--orange-3));
}

.site-background::before,
.site-background::after {
  content: "";
  position: absolute;
  width: 70vw;
  height: 70vw;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .55;
  animation:
    backgroundFloat 16s ease-in-out infinite alternate;
}

.site-background::before {
  top: -26vw;
  left: -12vw;
  background: rgba(255, 219, 157, .45);
}

.site-background::after {
  right: -28vw;
  bottom: -20vw;
  background: rgba(117, 0, 0, .5);
  animation-duration: 21s;
  animation-direction: alternate-reverse;
}

@keyframes backgroundFloat {
  from {
    transform: translate3d(-3%, -2%, 0) scale(1);
  }

  to {
    transform: translate3d(8%, 7%, 0) scale(1.15);
  }
}

.site-shell {
  position: relative;
  z-index: 1;
}

.section-wrap {
  width: min(calc(100% - (var(--page-pad) * 2)),
      var(--max-width));

  margin-inline: auto;
}

.hero {
  position: relative;
  height: 700px;
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 700px;
  min-height: 700px;
  overflow: hidden;
  isolation: isolate;
  background: #151515;
}

.hero-video-wrap {
  position: absolute;
  inset: -8%;
  z-index: -4;
  will-change: transform;
  transform: scale(1.06);
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-fallback {
  position: absolute;
  inset: 0;
  z-index: -5;

  background:
    linear-gradient(to bottom,
      rgba(0, 0, 0, .15),
      rgba(0, 0, 0, .7)),
    radial-gradient(circle at 50% 20%,
      #474747,
      #111 65%);
}

.hero-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(85vw, 850px);

  transform:
    translate(-50%, -50%);

  will-change:
    transform,
    opacity;
      backface-visibility: hidden;
  transform: translate(-50%, -50%) translateZ(0);
  transition: none !important;
}

.logo-placeholder {
  display: grid;
  place-items: center;
  min-height: 112px;
  padding: 20px 34px;

  border:
    2px solid rgba(255, 255, 255, .9);

  color: white;

  background:
    rgba(255, 255, 255, .04);

  font-size:
    clamp(1.2rem,
      2.2vw,
      2rem);

  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;

  backdrop-filter: blur(4px);
}

.floating-nav {
  position: sticky;
  z-index: 1000;
  top: 90px;

  width: max-content;
  height: 0;

  margin-left: auto;
  margin-right:
    clamp(14px,
      2vw,
      28px);

  transform:
    translateY(calc(-100% - 65px));

  pointer-events: none;
}

.floating-nav-bar {
  pointer-events: auto;
  position: relative;

  display: flex;
  align-items: center;

  gap: 3px;
  padding: 5px;

  border:
    1px solid rgba(255, 255, 255, .22);

  border-radius: 999px;

  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, .19),
      rgba(255, 255, 255, .055) 45%,
      rgba(255, 255, 255, .12)),
    rgba(18, 22, 29, .34);

  box-shadow:
    0 14px 40px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(255, 255, 255, .05);

  -webkit-backdrop-filter:
    blur(18px) saturate(160%);

  backdrop-filter:
    blur(18px) saturate(160%);
}

.nav-toggle {
  display: none;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: white;
  background: transparent;
  cursor: pointer;
}

.nav-toggle i {
  font-size: 15px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 3px;
}

.nav-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: white;
  background: transparent;
  cursor: pointer;

  transition:
    background .25s ease,
    transform .25s var(--ease-out);
}

.nav-icon:hover,
.nav-icon:focus-visible {
  background: rgba(255, 255, 255, .15);
  transform: translateY(-2px);
  outline: none;
}

.nav-icon i {
  display: block;
  width: 17px;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.nav-icon-label {
  position: absolute;
  right: 50%;

  bottom:
    calc(100% + 10px);

  top: auto;

  padding: 6px 9px;

  border:
    1px solid rgba(255, 255, 255, .16);

  border-radius: 999px;

  color: #ffffffcc;
  background: rgba(7, 13, 24, .76);

  box-shadow:
    0 8px 22px rgba(0, 0, 0, .2);

  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translate(50%, 6px);

  transition:
    opacity .18s ease,
    transform .22s var(--ease-out),
    visibility .18s ease;

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.nav-icon:hover .nav-icon-label,
.nav-icon:focus-visible .nav-icon-label {
  opacity: 1;
  visibility: visible;

  transform:
    translate(50%, 0);
}

.floating-nav.is-docked .nav-icon-label {
  top:
    calc(100% + 10px);

  bottom: auto;

  transform:
    translate(50%, -6px);
}

.floating-nav.is-docked .nav-icon:hover .nav-icon-label,

.floating-nav.is-docked .nav-icon:focus-visible .nav-icon-label {
  transform:
    translate(50%, 0);
}

.main-content {
  position: relative;
  z-index: 20;
  isolation: isolate;
  margin-top: 0;
}

.main-content::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(circle at 15% 20%,
      rgba(255, 174, 62, .66),
      transparent 28%),
    radial-gradient(circle at 80% 12%,
      rgba(255, 71, 0, .88),
      transparent 34%),
    radial-gradient(circle at 65% 72%,
      rgba(172, 16, 0, .7),
      transparent 34%),
    linear-gradient(135deg,
      var(--orange-1),
      var(--orange-2) 55%,
      var(--orange-3));
}

.main-content>.section-wrap {
  position: relative;
  z-index: 1;
}

.panel {
  position: relative;
  overflow: hidden;
  background: var(--navy);

  box-shadow:
    0 18px 50px rgba(52, 8, 0, .18);
}

.panel+.panel,
.gallery-section+.panel,
.panel+.closing-logo,
.panel+.scrub-video,
.scrub-video+.panel,
.scrub-video+.closing-logo {
  margin-top: var(--section-gap);
}

.panel-inner {
  padding:
    clamp(22px,
      4vw,
      56px);
}

.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;

  margin-bottom:
    clamp(28px,
      4vw,
      54px);
}

.panel-title {
  margin: 0;
  color: #e64100;
  font-size: 58px;
  font-weight: 800;
  line-height: .9;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.gallery-section {
  position: relative;

  height:
    min(78vh,
      840px);

  min-height:
    560px;

  overflow:
    hidden;

  background:
    #ff320d;

  box-shadow:
    0 18px 50px rgba(52, 8, 0, .16);
}

.gallery-section::before,
.gallery-section::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 0;
  width: 100%;
  height: 70px;
  pointer-events: none;
}

.gallery-section::before {
  top: 0;

  background:
    linear-gradient(to bottom,
      rgb(252 60 8),
      rgba(255, 255, 255, 0));
}

.gallery-section::after {
  bottom: 0;

  background:
    linear-gradient(to top,
      rgb(240 97 28),
      rgba(255, 255, 255, 0));
}

.gallery-grid {
  display: grid;

  grid-template-columns:
    repeat(3,
      minmax(0, 1fr));

  height: 100%;
  gap: 2px;

  background:
    #ff4a24;
}

.gallery-column {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #ff320d;
  overflow-anchor: none;
}

.gallery-track {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0;

  background:
    #ff320d;

  will-change:
    transform;

  backface-visibility:
    hidden;

  transform:
    translateZ(0);

  animation:
    galleryDown 80s linear infinite;
}

.gallery-column:nth-child(2) .gallery-track {
  animation-name:
    galleryUp;

  animation-duration:
    150s;
}

.gallery-column:nth-child(3) .gallery-track {
  animation-duration:
    140s;
}

.gallery-column:hover .gallery-track,

.gallery-column:focus-within .gallery-track {
  animation-play-state:
    paused;
}

.gallery-set {
  display: flex;
  flex-direction: column;

  flex:
    0 0 auto;

  width: 100%;

  gap:
    2px;

  padding-bottom:
    2px;

  background:
    #ff320d;
}

@keyframes galleryDown {
  from {
    transform:
      translate3d(0,
        -50%,
        0);
  }

  to {
    transform:
      translate3d(0,
        0,
        0);
  }
}

@keyframes galleryUp {
  from {
    transform:
      translate3d(0,
        0,
        0);
  }

  to {
    transform:
      translate3d(0,
        -50%,
        0);
  }
}

.gallery-item {
  position: relative;
  display: block;

  flex:
    0 0 auto;

  width:
    100%;

  height:
    auto;

  padding:
    0;

  border:
    0;

  overflow:
    hidden;

  background:
    #ff320d;

  cursor:
    zoom-in;
}

.gallery-item img {
  display:
    block;

  width:
    100%;

  height:
    auto;

  max-width:
    none;

  object-fit:
    contain;

  object-position:
    center top;

  transition:
    transform .75s var(--ease-out),

    filter .4s ease;
}

.gallery-item::after {
  content:
    "View";

  position:
    absolute;

  right:
    14px;

  bottom:
    14px;

  padding:
    7px 10px;

  border:
    1px solid rgba(255, 255, 255, .45);

  border-radius:
    999px;

  color:
    white;

  background:
    rgba(0, 0, 0, .32);

  font-size:
    .68rem;

  font-weight:
    700;

  letter-spacing:
    .1em;

  text-transform:
    uppercase;

  opacity:
    0;

  transform:
    translateY(5px);

  transition:
    opacity .3s ease,

    transform .3s var(--ease-out);

  -webkit-backdrop-filter:
    blur(8px);

  backdrop-filter:
    blur(8px);
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform:
    scale(1.055);

  filter:
    saturate(1.1);
}

.gallery-item:hover::after,
.gallery-item:focus-visible::after {
  opacity:
    1;

  transform:
    translateY(0);
}

.intro-panel-top {
  display: grid;

  grid-template-columns:
    minmax(180px,
      .7fr) minmax(0,
      1.5fr);

  gap:
    clamp(24px,
      5vw,
      80px);

  align-items:
    start;
}

.intro-panel-copy {
  margin: 0;

  color:
    rgba(255,
      255,
      255,
      .78);

  font-size:
    clamp(.95rem,
      1.35vw,
      1.12rem);

  line-height:
    1.7;
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: 0;
  overflow: hidden;
  background: #0b162a;
}

.video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-frame-button {
  position: absolute;
  top: 50%;
  left: 50%;

  display: grid;
  place-items: center;

  width: 78px;
  height: 78px;

  padding: 0;

  border:
    1px solid rgba(255, 255, 255, .54);

  border-radius:
    50%;

  color:
    white;

  background:
    rgba(5, 16, 35, .42);

  box-shadow:
    0 14px 36px rgba(0, 0, 0, .18);

  cursor:
    pointer;

  transform:
    translate(-50%,
      -50%);

  transition:
    transform .3s var(--ease-out),

    background .3s ease;

  -webkit-backdrop-filter:
    blur(12px);

  backdrop-filter:
    blur(12px);
}

.video-frame-button:hover {
  background:
    rgba(5, 16, 35, .7);

  transform:
    translate(-50%,
      -50%) scale(1.06);
}

.video-frame-button i {
  font-size:
    26px;

  margin-left:
    4px;
}

.video-frame.is-playing .video-frame-button {
  opacity:
    0;

  pointer-events:
    none;
}

.details-panel .panel-inner {
  padding-bottom:
    clamp(30px,
      5vw,
      70px);
}

.details-feature-layout {
  display: grid;

  grid-template-columns:
    minmax(0,
      1.05fr) minmax(300px,
      .95fr);

  gap:
    clamp(36px,
      6vw,
      100px);

  align-items:
    stretch;
}

.detail-layout {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  margin:
    0;
}

.detail-image {
  position:
    relative;

  width:
    100%;

  min-height:
    clamp(620px,
      70vw,
      940px);

  overflow:
    hidden;

  background:
    #050a13;
}

.detail-image>img {
  width:
    100%;

  height:
    100%;

  min-height:
    inherit;

  object-fit:
    cover;
}

.details-copy {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  padding:
    clamp(20px,
      4vw,
      70px) 0 clamp(10px,
      2vw,
      28px);
}

.details-copy-text {
  max-width:
    650px;
}

.details-copy p {
  margin:
    0;

  color:
    rgba(255,
      255,
      255,
      .78);

  font-size:
    clamp(.95rem,
      1.3vw,
      1.1rem);

  line-height:
    1.72;
}

.details-copy p+p,
.feature-copy p+p {
  margin-top:
    clamp(30px,
      4vw,
      56px);
}

.details-copy-logo {
  margin-top:
    10%;

  align-self:
    flex-start;

  width:
    100%;

  margin-left:
    -25px;

  max-width:
    450px;
}

.jersey-logo {
  margin-top:
    60px;

  align-self:
    flex-start;

  width:
    210px;

  margin-left:
    -15px;
}

.hotspot {
  --line-length:
    170px;

  --line-angle:
    18deg;

  position:
    absolute;

  z-index:
    3;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    7px 10px;

  border:
    1px solid rgba(255, 255, 255, .42);

  color:
    white;

  background:
    rgba(7, 22, 47, .72);

  font-size:
    .65rem;

  font-weight:
    800;

  letter-spacing:
    .1em;

  text-transform:
    uppercase;

  cursor:
    pointer;

  animation:
    hotspotFloat 3.2s ease-in-out infinite;

  -webkit-backdrop-filter:
    blur(8px);

  backdrop-filter:
    blur(8px);
}

.hotspot::before {
  content: "";

  position:
    relative;

  z-index:
    2;

  width:
    7px;

  height:
    7px;

  flex:
    0 0 7px;

  border-radius:
    50%;

  background:
    #ff4a28;

  box-shadow:
    0 0 0 5px rgba(255, 74, 40, .18);
}

.hotspot::after {
  content: "";

  position:
    absolute;

  z-index:
    -1;

  top:
    50%;

  left:
    100%;

  width:
    var(--line-length);

  height:
    2px;

  background:
    rgba(7, 22, 47, .58);

  transform:
    translateY(-50%) rotate(var(--line-angle));

  transform-origin:
    left center;

  pointer-events:
    none;
}

.hotspot--line-left::after {
  right:
    100%;

  left:
    auto;

  transform-origin:
    right center;
}

.hotspot:nth-of-type(2) {
  animation-delay:
    -.8s;
}

.hotspot:nth-of-type(3) {
  animation-delay:
    -1.6s;
}

.hotspot:nth-of-type(4) {
  animation-delay:
    -2.4s;
}

@keyframes hotspotFloat {
  50% {
    transform:
      translateY(-6px);
  }
}

.hotspot--1 {
  top:
    12%;

  left:
    20%;

  --line-length:
    165px;

  --line-angle:
    8deg;
}

.hotspot--2 {
  top:
    29%;

  right:
    7%;

  --line-length:
    100px;

  --line-angle:
    11deg;
}

.hotspot--3 {
  top:
    42%;

  left:
    23%;

  --line-length:
    170px;

  --line-angle:
    -24deg;
}

.hotspot--4 {
  right:
    8%;

  bottom:
    28%;

  --line-length:
    105px;

  --line-angle:
    42deg;
}

.hotspot--5 {
  top:
    78%;

  left:
    32%;

  --line-length:
    125px;

  --line-angle:
    -8deg;
}

.feature-layout {
  display:
    grid;

  grid-template-columns:
    minmax(0,
      1.05fr) minmax(300px,
      .95fr);

  gap:
    clamp(36px,
      6vw,
      100px);

  align-items:
    start;
}

.photo-stack {
  display:
    grid;

  gap:
    4px;
}

.photo-stack button {
  position:
    relative;

  min-height:
    220px;

  padding:
    0;

  border:
    0;

  overflow:
    hidden;

  background:
    #ddd;

  cursor:
    zoom-in;
}

.photo-stack img {
  width:
    100%;

  height:
    100%;

  max-height:
    320px;

  object-fit:
    cover;

  transition:
    transform .6s var(--ease-out);
}

.photo-stack button:hover img,
.photo-stack button:focus-visible img {
  transform:
    scale(1.045);
}

.feature-copy {
  display:
    flex;

  flex-direction:
    column;

  min-height:
    100%;

  padding:
    clamp(20px,
      4vw,
      70px) 0 clamp(10px,
      2vw,
      28px);
}

.feature-copy p {
  margin:
    0;

  color:
    rgba(255,
      255,
      255,
      .78);

  font-size:
    clamp(.95rem,
      1.3vw,
      1.1rem);

  line-height:
    1.72;
}

.helmet-logo {
  margin-top:
    60px;

  align-self:
    flex-start;

  width:
    220px;
}

.feature-copy .mini-logo {
  margin-top:
    auto;

  align-self:
    flex-start;
}

.scrub-video {
  position:
    relative;

  width:
    100vw;

  height:
    560px;

  margin-left:
    calc(50% - 50vw);

  overflow:
    hidden;

  background:
    #bdbdbd;

  color:
    #ffffff;
}

.scrub-video-sticky {
  position:
    relative;

  top:
    auto;

  width:
    100%;

  height:
    100%;

  min-height:
    0;

  overflow:
    hidden;

  isolation:
    isolate;

  background:
    #bdbdbd;
}

.scrub-video-media,
.scrub-video-poster {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;
}

.scrub-video-media {
  z-index:
    -3;

  object-fit:
    cover;

  will-change:
    transform;
}

.scrub-video-poster {
  z-index:
    -4;

  background:
    radial-gradient(circle at 70% 25%,
      rgba(255, 255, 255, .18),
      transparent 32%),
    linear-gradient(135deg,
      #c9c9c9,
      #969696);
}

.scrub-video-shade {
  position:
    absolute;

  inset:
    0;

  z-index:
    -2;

  pointer-events:
    none;

  background:
    linear-gradient(to bottom,
      rgba(0, 0, 0, .08),
      rgba(0, 0, 0, .14)),
    radial-gradient(circle at center,
      transparent 25%,
      rgba(0, 0, 0, .22) 100%);
}

.scrub-video-grain {
  position:
    absolute;

  inset:
    0;

  z-index:
    -1;

  pointer-events:
    none;

  opacity:
    .08;

  mix-blend-mode:
    soft-light;
}

.scrub-video-copy {
  position:
    absolute;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  padding:
    var(--page-pad);

  text-align:
    center;

  pointer-events:
    none;
}

.scrub-video-title {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(2.4rem,
      7vw,
      7.4rem);

  font-weight:
    800;

  line-height:
    .9;

  letter-spacing:
    .045em;

  text-transform:
    uppercase;

  text-shadow:rgba(0, 0, 0, 0) 0px 2px 5px, rgba(0, 0, 0, 0.54) 0px 8px 28px;

  will-change:
    transform,
    opacity;

  backface-visibility:
    hidden;

  -webkit-font-smoothing:
    antialiased;

  transition:
    none;
}

.scrub-video--final {
  height:
    600px;
}

.scrub-video-logo {
  width:
    min(440px,
      76vw);

  will-change:
    transform,
    opacity;
}

.modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    3000;

  display:
    grid;

  place-items:
    center;

  padding:
    22px;

  visibility:
    hidden;

  background:
    rgba(2, 7, 16, .82);

  opacity:
    0;

  transition:
    opacity .28s ease,

    visibility .28s ease;

  -webkit-backdrop-filter:
    blur(16px);

  backdrop-filter:
    blur(16px);
}

.modal.is-open {
  visibility:
    visible;

  opacity:
    1;
}

.modal-dialog {
  position:
    relative;

  width:
    min(1100px,
      96vw);

  max-height:
    90svh;

  overflow:
    auto;

  border:
    1px solid rgba(255, 255, 255, .18);

  background:
    #07162f;

  box-shadow:
    0 32px 90px rgba(0, 0, 0, .46);

  transform:
    translateY(18px) scale(.985);

  transition:
    transform .4s var(--ease-out);
}

.modal.is-open .modal-dialog {
  transform:
    translateY(0) scale(1);
}

.modal-image {
  width:
    100%;

  max-height:
    80svh;

  object-fit:
    contain;

  background:
    #050a13;
}

.modal-caption {
  padding:
    16px 20px 20px;

  color:
    rgba(255,
      255,
      255,
      .74);

  font-size:
    .9rem;
}

.modal-close {
  position:
    fixed;

  top:
    18px;

  right:
    18px;

  z-index:
    2;

  display:
    grid;

  place-items:
    center;

  width:
    44px;

  height:
    44px;

  padding:
    0;

  border:
    1px solid rgba(255, 255, 255, .26);

  border-radius:
    50%;

  color:
    white;

  background:
    rgba(7, 22, 47, .55);

  cursor:
    pointer;

  -webkit-backdrop-filter:
    blur(10px);

  backdrop-filter:
    blur(10px);
}

[data-reveal] {
  opacity:
    0;

  transform:
    translateY(34px);

  transition:
    opacity .9s var(--ease-smooth),

    transform .9s var(--ease-smooth);
}

[data-reveal].is-visible {
  opacity:
    1;

  transform:
    translateY(0);
}

.shop-panel {
  position:
    relative;

  min-height:
    570px;

  overflow:
    hidden;

  background:
    var(--navy);
}

.shop-panel-inner {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  width:
    min(50vw,
      760px);

  margin-right:
    unset;

  margin-left:
    auto;

  padding:
    clamp(100px,
      9vw,
      150px) 0 clamp(110px,
      10vw,
      170px);

  text-align:
    center;
}

.shop-panel-logo {
  width:
    min(100%,
      400px);

  margin-inline:
    auto;
}

.shop-panel-logo img {
  display:
    block;

  width:
    100%;

  height:
    auto;
}

.shop-panel-copy {
  width:
    100%;

  max-width:
    720px;

  margin-top:
    clamp(48px,
      5vw,
      50px);
}

.shop-panel-copy p {
  margin:
    0;

  font-weight:
    600;

  letter-spacing:
    -.02em;

  color:
    rgba(255,
      255,
      255,
      .78);

  font-size:
    clamp(.95rem,
      1.4vw,
      1.4rem);

  line-height:
    1.5;
}

.shop-panel-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  margin-top:
    clamp(48px,
      5vw,
      50px);

  border-radius:
    26px;

  color:
    #ffffff;

  background:
    #e64100;

  font-size:
    clamp(.95rem,
      1.4vw,
      1.4rem);

  font-weight:
    700;

  line-height:
    1;

  transition:
    transform .35s var(--ease-out),

    background-color .25s ease;

  padding:
    3% 11%;
}

.shop-panel-button:hover,
.shop-panel-button:focus-visible {
  background:
    #ff4b0a;

  transform:
    translateY(-4px);

  outline:
    none;
}

.shop-panel-button:active {
  transform:
    translateY(-1px);
}

.shop-panel-product {
  position:
    absolute;

  z-index:
    1;

  top:
    50%;

  left:
    clamp(-120px,
      -5vw,
      -40px);

  right:
    auto;

  width:
    min(50vw,
      775px);

  transform:
    translate3d(var(--shop-product-x,
        -18%),
      -50%,
      0) rotate(var(--shop-product-rotate,
        -5deg));

  transform-origin:
    center center;

  pointer-events:
    none;

  will-change:
    transform;
}

.shop-panel-product img {
  display:
    block;

  width:
    100%;

  height:
    auto;

  filter:
    drop-shadow(0 34px 46px rgba(0, 0, 0, .34));
}

@media (max-width: 1225px) {
  .hotspot--1 {
    --line-length:
      115px;
  }

  .hotspot--2 {
    --line-length:
      40px;
  }

  .hotspot--3 {
    --line-length:
      120px;
  }

  .hotspot--4 {
    --line-length:
      45px;
  }

  .hotspot--5 {
    --line-length:
      85px;
  }
}


@media (min-width: 1001px) {
  .shop-panel-logo-mobile {
    display:
      none;
  }
}


@media (max-width: 1000px) {
  .hotspot--1 {
    --line-length:
      85px;
  }

  .hotspot--2 {
    --line-length:
      20px;
  }

  .hotspot--3 {
    --line-length:
      90px;
  }

  .hotspot--4 {
    --line-length:
      25px;
  }

  .hotspot--5 {
    --line-length:
      55px;
  }

  .scrub-video-title {
    font-size:
      clamp(2.5rem,
        14vw,
        5.2rem);
  }

  .modal-dialog {
    width:
      auto;
  }

  .shop-panel {
    min-height:
      auto;

    overflow:
      hidden;
  }

  .shop-panel-logo {
    display:
      none;
  }

  .shop-panel-logo-mobile {
    display:
      block;

    margin-top:
      50px;

    width:
      min(540px,
        72vw);

    margin-inline:
      auto;
  }

  .shop-panel-inner {
    width:
      100%;

    max-width:
      760px;

    margin:
      0 auto;

    padding:
      0 clamp(24px,
        6vw,
        60px) 90px;

    text-align:
      center;
  }

  .shop-panel-product {
    position:
      relative;

    top:
      auto;

    left:
      auto;

    right:
      auto;

    width:
      min(620px,
        82vw);

    margin:
      50px auto 20px;

    transform:
      translate3d(var(--shop-product-x,
          -12%),
        0,
        0) rotate(var(--shop-product-rotate,
          -4deg));
  }

  .shop-panel-product img {
    width:
      100%;

    height:
      auto;
  }

  .shop-panel-copy {
    max-width:
      650px;

    margin:
      50px auto 0;
  }

  .shop-panel-copy p {
    font-size:
      clamp(1.15rem,
        2.8vw,
        1.65rem);

    line-height:
      1.45;
  }

  .shop-panel-button {
    min-width:
      280px;

    min-height:
      70px;

    margin-top:
      44px;

    padding:
      18px 42px;

    border-radius:
      22px;

    font-size:
      1.25rem;
  }
  .scrub-video {
    height: 320px;
  }
}


@media (max-width: 900px) {
  .hotspot--1 {
    --line-length:
      190px;
  }

  .hotspot--2 {
    --line-length:
      70px;
  }

  .hotspot--3 {
    --line-length:
      200px;
  }

  .hotspot--4 {
    --line-length:
      110px;
  }

  .hotspot--5 {
    --line-length:
      140px;
  }

  .hero {
    height:
      700px;
  }

  .hero-logo {
    width:
      min(95vw,
        850px);
  }

  .main-content {
    margin-top:
      0;
  }

  .gallery-section {
    height:
      68vh;

    min-height:
      500px;
  }

  .intro-panel-top,
  .feature-layout,
  .details-feature-layout {
    grid-template-columns:
      1fr;
  }

  .details-copy {
    padding-top:
      0;
  }

  .details-copy-logo,
  .jersey-logo {
    margin:
      36px auto 0 auto;
  }

  .helmet-logo {
    margin:
      60px auto 0 auto;
  }

  .detail-image {
    min-height:
      clamp(600px,
        125vw,
        900px);
  }

  .feature-copy {
    padding:
      0;
  }

  .feature-copy .mini-logo {
    margin-top:
      34px;
  }

  .photo-stack {
    grid-template-columns:
      repeat(3,
        1fr);
  }

  .photo-stack button,
  .photo-stack img {
    min-height:
      170px;
  }

  .panel-title-row {
    margin:
      20px 0 55px 0;
  }
}


@media (max-width: 700px) {
  .hotspot--1 {
    --line-length:
      130px;
  }

  .hotspot--2 {
    --line-length:
      30px;
  }

  .hotspot--3 {
    --line-length:
      140px;
  }

  .hotspot--4 {
    --line-length:
      70px;
  }

  .hotspot--5 {
    --line-length:
      90px;
  }
}


@media (max-width: 620px) {
  .details-feature-layout {
    gap:
      28px;
  }
  .scrub-video-title {
    text-shadow:
      0 2px 7px rgba(0, 0, 0, 0),
      0 3px 8px rgba(0, 0, 0, .04);
  }
  
  .detail-image {
    min-height:
      620px;
  }

  .nav-icon {
    width:
      31px;

    height:
      31px;
  }

  .hero-sticky {
    min-height:
      700px;
  }

  .main-content {
    margin-top:
      0;
  }

  .gallery-section {
    height:
      62vh;

    min-height:
      460px;
  }

  .gallery-grid {
    grid-template-columns:
      repeat(3,
        minmax(0,
          1fr));
  }

  .panel-title-row {
    flex-direction:
      column-reverse;

    gap:
      30px;

    margin:
      20px 0 70px 0;
  }

  .mini-logo {
    width:
      130px !important;
  }

  #details>div>div.panel-title-row>div {
    width:
      130px !important;
  }

  #helmet>div>div.panel-title-row>div {
    width:
      220px !important;
  }

  .photo-stack {
    grid-template-columns:
      1fr;
  }

  .helmet-logo {
    margin:
      40px auto 20px auto;
  }

  .photo-stack button,
  .photo-stack img {
    min-height:
      230px;
  }

  .photo-stack img {
    max-height:
      235px;
  }

  .floating-nav {
    top:
      90px;

    margin-right:
      10px;

    transform:
      translateY(calc(-100% - 65px));
  }

  .floating-nav-bar {
    padding:
      5px;
  }

  .nav-toggle {
    display:
      grid;
  }

  .nav-links {
    position:
      absolute;

    top:
      calc(100% + 10px);

    right:
      0;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      4px;

    min-width:
      150px;

    padding:
      7px;

    border:
      1px solid rgba(255, 255, 255, .22);

    border-radius:
      18px;

    background:
      linear-gradient(135deg,
        rgba(255, 255, 255, .19),
        rgba(255, 255, 255, .055) 45%,
        rgba(255, 255, 255, .12)),
      rgba(18, 22, 29, .50);

    box-shadow:
      0 14px 40px rgba(0, 0, 0, .24),
      inset 0 1px 0 rgba(255, 255, 255, .28);

    -webkit-backdrop-filter:
      blur(18px) saturate(160%);

    backdrop-filter:
      blur(18px) saturate(160%);

    opacity:
      0;

    visibility:
      hidden;

    pointer-events:
      none;

    transform:
      translateY(-8px);

    transition:
      opacity .2s ease,

      transform .25s var(--ease-out),

      visibility .2s ease;
  }

  .floating-nav.is-open .nav-links {
    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;

    transform:
      translateY(0);
  }

  .nav-links .nav-icon {
    display:
      flex;

    align-items:
      center;

    justify-content:
      flex-start;

    gap:
      10px;

    width:
      100%;

    height:
      auto;

    padding:
      10px 12px;

    border-radius:
      12px;

    flex-direction:
      row-reverse;

    justify-content:
      flex-end;
  }

  .nav-links .nav-icon-label {
    position:
      static;

    display:
      block;

    padding:
      0;

    border:
      0;

    background:
      transparent;

    box-shadow:
      none;

    opacity:
      1;

    visibility:
      visible;

    transform:
      none !important;

    font-size:
      .72rem;

    -webkit-backdrop-filter:
      none;

    backdrop-filter:
      none;
  }

  .nav-links .nav-icon:hover .nav-icon-label,

  .nav-links .nav-icon:focus-visible .nav-icon-label {
    transform:
      none;
  }

  .shop-panel-inner {
    padding:
      0 30px 50px;
  }

  .shop-panel-logo-mobile {
    margin-top:
      40px;

    width:
      min(78vw,
        390px);

    padding:
      0 10px;
  }

  .shop-panel-product {
    width:
      min(105vw,
        470px);

    margin:
      38px auto 10px;

    transform:
      translate3d(var(--shop-product-x,
          -8%),
        0,
        0) rotate(var(--shop-product-rotate,
          -3deg));
  }

  .shop-panel-copy {
    margin-top:
      36px;
  }

  .shop-panel-copy p {
    font-size:
      1.05rem;

    line-height:
      1.5;
  }

  .shop-panel-button {
    width:
      100%;

    min-width:
      0;

    min-height:
      62px;

    margin-top:
      36px;

    padding:
      16px 24px;

    border-radius:
      18px;

    font-size:
      1.1rem;
  }
}


@media (max-width: 560px) {
  .hotspot--1 {
    --line-length:
      90px;
  }

  .hotspot--2 {
    --line-length:
      20px;
  }

  .hotspot--3 {
    --line-length:
      100px;
  }

  .hotspot--4 {
    --line-length:
      40px;
  }

  .hotspot--5 {
    --line-length:
      60px;
  }
}


@media (max-width: 450px) {
  .hotspot--1 {
    --line-length:
      105px;

    left:
      7%;
  }

  .hotspot--2 {
    --line-length:
      10px;

    right:
      3%;
  }

  .hotspot--3 {
    --line-length:
      115px;

    left:
      11%;
  }

  .hotspot--4 {
    --line-length:
      15px;

    right:
      5%;
  }

  .hotspot--5 {
    --line-length:
      95px;

    left:
      17%;
  }
}


@media (max-width: 400px) {
  .hotspot--1 {
    --line-length:
      95px;
  }

  .hotspot--2 {
    --line-length:
      10px;
  }

  .hotspot--3 {
    --line-length:
      105px;
  }

  .hotspot--4 {
    --line-length:
      5px;
  }

  .hotspot--5 {
    --line-length:
      80px;
  }
}

.cookie-btn {
  color: #fff !important;
  text-decoration: none !important;
  line-height: 17px !important;
  font-family: monospace, monospace !important;
  letter-spacing: 1px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  border: none !important;
  font-size: 14px !important;
  padding: 0 !important;
  transition: none !important;
  background: none !important;
  width: 150px !important;
  text-shadow: 0px 2px 3px #00000040 !important;
}

#section-footer {
  background: transparent;
  color: #fff;
  z-index: 20;
  position: relative;
}

.footer-logo {
  max-width: 300px;
  background: url(https://static.clubs.nfl.com/image/upload/v1711643110/bears/chxwd4v1swgph4aceqik.png) no-repeat center center;
  text-align: center;
  background-size: 275px;
  min-height: 120px;
  width: 100%;
  margin: 0 auto -10px;
  padding: 80px 0 0;
}

.footer-links {
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
  max-width: 1250px;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  line-height: 17px;
  font-family: monospace, monospace;
  letter-spacing: 1px;
  font-weight: 600;
  font-style: normal;
  font-size: 14px;
  width: 150px;
  text-shadow: 0px 2px 2px #00000040;
}

.first-footer-container {
  padding: 30px 0;
}

.second-footer-container {
  background: #0b162a;
  color: #cbcbcb;
  font-family: monospace, monospace;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.second-footer-container .footer-left p,
.second-footer-container .footer-right p {
  display: inline-block;
  padding: 20px 25px;
  margin: 0;
}

.social-btns {
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  max-width: 300px;
  padding: 30px 0 0 0;
}

.social-btns img {
  height: 25px;
  padding: 0;
  filter: brightness(1.5);
}

.footer-left {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.footer-right {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.footer-right a {
  line-height: 0;
}

.footer-right img {
  height: 30px;
  padding: 0 15px 0 0;
}

@media screen and (max-width: 1070px) {
  .footer-links a {
    padding: 0 10px;
    line-height: 20px;
  }
}

@media screen and (max-width: 845px) {
  .footer-links {
    flex-direction: column;
  }

  .footer-links a {
    padding: 10px;
  }

  .second-footer-container {
    flex-direction: column;
    align-items: center;
  }

  .second-footer-container .footer-left p {
    padding: 20px 15px 10px;
  }

  .second-footer-container .footer-right p {
    padding: 20px 15px;
  }
}

@media screen and (max-width: 460px) {
  .footer-right {
    flex-direction: column;
  }

  .second-footer-container .footer-right p {
    padding: 10px 15px 20px;
  }

  .footer-left img,
  .footer-right img {
    padding: 0 0 15px;
    height: 45px;
  }

  .footer-logo {
    background-size: 285px;
    padding: 60px 0 0;
    margin: 0 auto -20px;
  }
}

#onetrust-consent-sdk #onetrust-banner-sdk {
  font-family: monospace, monospace !important;
}

#onetrust-banner-sdk #onetrust-policy {
  margin: 15px 0 .625em 2em !important;
}

#onetrust-banner-sdk #onetrust-policy-text,
#onetrust-banner-sdk .ot-dpd-desc,
#onetrust-banner-sdk .ot-b-addl-desc {
  font-size: 11px !important;
  line-height: 1.4 !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior:
      auto;
  }

  *,
  *::before,
  *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

  [data-reveal] {
    opacity:
      1;

    transform:
      none;
  }

  .hero-video-wrap,
  .hero-logo {
    transform:
      none !important;
  }
}