/* Everything here only applies while html.hbc-intro is set (first visit, until Enter Site). */

html.hbc-intro,
html.hbc-intro body {
  overflow: hidden;
}

html.hbc-intro #homeFeatureSlider,
html.hbc-intro #site-navigation {
  display: none;
}

/* The video fills the screen above the logo bar; intro.js measures the bar into --hbc-intro-bar. */
html.hbc-intro #home-feature {
  position: relative;
  height: calc(100vh - var(--hbc-intro-bar, 95px));
  background: #000;
}
@supports (height: 100dvh) {
  html.hbc-intro #home-feature {
    height: calc(100dvh - var(--hbc-intro-bar, 95px));
  }
}

/* A black frame on every side, so the top of the video doesn't run into the top of the screen.
   The player letterboxes inside it, which makes the side borders wider on wide screens. */
.hbc-intro-video {
  --hbc-intro-frame: clamp(12px, 5vmin, 56px);
  position: absolute;
  top: var(--hbc-intro-frame);
  right: var(--hbc-intro-frame);
  bottom: var(--hbc-intro-frame);
  left: var(--hbc-intro-frame);
}
.hbc-intro-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hbc-intro-actions {
  display: none;
}
html.hbc-intro .hbc-intro-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  height: 100%;
}

.hbc-intro-actions button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  padding: 10px 18px 8px;
  border: 2px solid #f5b335;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
}
.hbc-intro-actions .hbc-intro-enter {
  background: #f5b335;
  color: #fff;
}
.hbc-intro-actions .hbc-intro-sound {
  background: transparent;
  color: #fff;
}
@media (max-width: 400px) {
  html.hbc-intro .hbc-intro-actions {
    gap: 6px;
  }
  .hbc-intro-actions button {
    font-size: 12px;
    padding: 8px 10px 6px;
  }
}
.hbc-intro-actions button:hover,
.hbc-intro-actions button:focus-visible {
  filter: brightness(1.1);
  outline: none;
  box-shadow: 0 0 0 3px rgba(245, 179, 53, 0.35);
}