body.atr-splash-active {
  overflow: hidden;
}

html.atr-splash-seen .atr-splash {
  display: none;
}

html.atr-splash-seen body.atr-splash-active {
  overflow: visible;
}

html.atr-splash-seen body.atr-header-hidden .site-header {
  transform: translateY(0);
  opacity: 1;
}

html.atr-splash-seen body.atr-splash-active .atr-hero--splash-media .atr-hero-intro-media,
html.atr-splash-seen body.atr-splash-active .atr-hero--splash-media .atr-hero__bg::after,
html.atr-splash-seen body.atr-splash-active .atr-hero--splash-media .atr-hero__container {
  opacity: 1;
}

.atr-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.atr-splash__canvas {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transform: translateY(0);
  will-change: transform, opacity;
}

.atr-splash.is-exiting .atr-splash__canvas {
  transition: transform 0.95s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: translateY(-100%);
}

.atr-splash.is-hero-handoff .atr-splash__canvas {
  background: #ffffff;
  transform: none;
  transition: none;
}

.atr-splash.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.atr-splash__center {
  position: relative;
  width: min(100%, 820px);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

.atr-splash__sequence-shell {
  position: relative;
  z-index: 1;
  transition: opacity 0.42s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.atr-splash__image-window {
  position: relative;
  width: clamp(280px, 34vw, 460px);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 22px;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.atr-splash.is-hero-handoff .atr-splash__image-window {
  position: fixed;
  z-index: 3;
  margin: 0;
  aspect-ratio: auto;
  will-change: left, top, width, height, border-radius;
}

.atr-splash__image-frame {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 1;
  background: transparent;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--atr-splash-frame-duration, 760ms) cubic-bezier(0.33, 1, 0.68, 1), opacity 0.3s ease;
}

.atr-splash__image-frame.is-active,
.atr-splash__image-frame.is-preloaded {
  clip-path: inset(0 0 0 0);
}

.atr-splash__image-frame.is-preloaded {
  transition: none;
}

.atr-splash__image-frame.is-exiting {
  clip-path: inset(100% 0 0 0);
}

.atr-splash__image-frame.is-handoff-hidden {
  opacity: 0;
}

.atr-splash__image-frame.is-handoff-final {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

.atr-splash__image-frame .atrmi-picture {
  width: 100%;
  height: 100%;
  display: block;
}

.atr-splash__image-frame img {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  object-fit: cover;
}

.atr-splash__logo-shell {
  width: min(100%, 520px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(18px);
  opacity: 0;
  z-index: 2;
  transition: opacity 0.48s ease, transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.atr-splash__logo-shell--window {
  width: min(72%, 320px);
  z-index: 1;
}

.atr-splash__logo-mask {
  position: relative;
  overflow: hidden;
}

.atr-splash__logo-base,
.atr-splash__logo-fill {
  width: 100%;
}

.atr-splash__logo-base svg,
.atr-splash__logo-fill svg {
  width: 100%;
  height: auto;
  display: block;
}

.atr-splash__logo-base {
  position: relative;
  z-index: 1;
  color: #ffffff;
}

.atr-splash__logo-fill {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: #d7261e;
  clip-path: inset(100% 0 0 0);
}

.atr-splash.is-logo-phase .atr-splash__logo-shell {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}

.atr-splash.is-filled .atr-splash__logo-fill {
  transition: clip-path 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  clip-path: inset(0 0 0 0);
}

@media (max-width: 640px) {
  .atr-splash__center {
    min-height: 240px;
  }

  .atr-splash__image-window {
    width: clamp(220px, 72vw, 360px);
    border-radius: 18px;
  }
}

.atr-hero-intro-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.atr-hero--splash-media .atr-hero__container {
  transition: opacity 0.55s ease;
}

.atr-hero--splash-media .atr-hero__bg::after {
  background: rgba(0, 0, 0, 0.25);
}

body.atr-splash-active .atr-hero--splash-media:not(.is-splash-handoff-complete) .atr-hero-intro-media,
body.atr-splash-active .atr-hero--splash-media:not(.is-splash-handoff-complete) .atr-hero__bg::after {
  opacity: 0;
}

body.atr-splash-active .atr-hero--splash-media .atr-hero__container {
  opacity: 0;
}

.atr-hero-intro-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--atr-hero-slide-reveal-duration, 1200ms) cubic-bezier(0.76, 0, 0.24, 1);
  will-change: clip-path;
}

.atr-hero-intro-slide.is-active {
  z-index: 2;
  clip-path: inset(0 0 0 0);
}

.atr-hero-intro-slide.is-previous {
  z-index: 1;
  clip-path: inset(0 0 0 0);
  transition: none;
}

.atr-hero-intro-slide .atrmi-picture,
.atr-hero-intro-slide__image {
  width: 100%;
  height: 100%;
  display: block;
}

.atr-hero-intro-slide__image {
  object-fit: cover;
  transform: scale(1.06) translateY(0);
  transform-origin: center center;
  will-change: transform;
}

.atr-hero-intro-slide.is-panning .atr-hero-intro-slide__image {
  animation: atr-hero-bg-pan-up var(--atr-hero-bg-pan-duration, 6300ms) linear forwards;
}

@keyframes atr-hero-bg-pan-up {
  from {
    transform: scale(1.06) translateY(1.5%);
  }
  to {
    transform: scale(1.06) translateY(-3.5%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .atr-hero-intro-slide {
    transition: none;
  }
}

.atr-hero-preview,
.atr-hero-preview__slide {
  position: absolute;
  inset: 0;
}

.atr-hero-preview {
  background: #141414;
}

.atr-hero-preview__slide {
  margin: 0;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  overflow: hidden;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    clip-path 0.78s cubic-bezier(0.33, 1, 0.68, 1);
}

.atr-hero-preview__slide.is-active {
  z-index: 2;
  opacity: 1;
}

.atr-hero-preview__slide.is-active.is-loaded {
  clip-path: inset(0 0 0 0);
}

.atr-hero-preview__layer,
.atr-hero-preview__slide .atrmi-picture {
  position: absolute;
  inset: 0;
}

.atr-hero-preview__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.atr-hero-preview__image--mono {
  filter: grayscale(1);
}

.atr-hero-preview__layer--color {
  clip-path: inset(0 100% 0 0);
}

.atr-hero-preview__slide.is-progressing .atr-hero-preview__layer--color {
  animation: atr-hero-preview-color-fill var(--atr-preview-progress-duration, 4700ms) linear forwards;
}

@keyframes atr-hero-preview-color-fill {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}