/* Homepage Animations - Initial States */

.homepage-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 9999;
  pointer-events: all;
  opacity: 1;
}

.page-node-1 .navbar-brand,
.page-node-1 .navbar-nav,
.page-node-1 .navbar-toggler {
  opacity: 0;
}

/* Keep navbar hidden while logo video is playing */
body.logo-video-playing .page-node-1 .navbar-brand,
body.logo-video-playing .page-node-1 .navbar-nav,
body.logo-video-playing .page-node-1 .navbar-toggler {
  opacity: 0 !important;
}

.homepage-animation-completed.page-node-1 .navbar-brand,
.homepage-animation-completed.page-node-1 .navbar-nav,
.homepage-animation-completed.page-node-1 .navbar-toggler {
  opacity: 1;
}

.main-line-svg,
.article-left-line-svg,
.article-right-line-svg,
.navbar-line-svg,
.navbar-left-line-svg,
.navbar-right-line-svg,
.logo-right-line-svg {
  pointer-events: none;
  opacity: 1;
  transform: scaleX(1) scaleY(1);
}

.page-node-1 .main-line-svg {
  opacity: 0;
}

.page-node-1 .article-left-line-svg,
.page-node-1 .article-right-line-svg,
.page-node-1 .navbar-left-line-svg,
.page-node-1 .navbar-right-line-svg,
.page-node-1 .logo-right-line-svg {
  opacity: 0;
}

.page-node-1 .navbar-line-svg {
  opacity: 0;
}

.homepage-animation-completed.page-node-1 .main-line-svg,
.homepage-animation-completed.page-node-1 .article-left-line-svg,
.homepage-animation-completed.page-node-1 .article-right-line-svg,
.homepage-animation-completed.page-node-1 .navbar-left-line-svg,
.homepage-animation-completed.page-node-1 .navbar-right-line-svg,
.homepage-animation-completed.page-node-1 .logo-right-line-svg,
.homepage-animation-completed.page-node-1 .navbar-line-svg {
  opacity: 1;
  transform: scaleX(1) scaleY(1);
}

.main-line-svg path,
.article-left-line-svg path,
.article-right-line-svg path,
.navbar-line-svg path,
.navbar-left-line-svg path,
.navbar-right-line-svg path,
.logo-right-line-svg path {
  fill: none;
  stroke: var(--navy-60);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

body.logo-video-playing [data-fade-in] {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.logo-video-playing {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

body.page-node-1:not(.homepage-animation-completed) {
  background-color: #ffffff;
}

body:not(.logo-video-playing) {
  transition: none;
}

/* Logo Animation Video */
.logo-animation-video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease-out;
  background-color: #ffffff;
}

.logo-animation-video-container.active {
  display: flex;
  opacity: 1;
}

.page-node-1 .logo-animation-video-container {
  display: flex;
  opacity: 1;
}

.page-node-1 .logo-animation-video-container:not(.active):not(.fade-out) {
  display: none;
}

.logo-animation-video-container.fade-out {
  opacity: 0;
  transition: opacity 0.8s ease-out;
  visibility: hidden;
  pointer-events: none;
}

.logo-animation-video-container > div {
  width: 100%;
  max-width: 90vw;
  max-height: 90vh;
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
}

.logo-video-wrapper {
  padding: 71.11% 0 0 0;
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
}

.logo-animation-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  opacity: 0;
  visibility: hidden;
  display: none;
  transition: opacity 0.3s ease-in, visibility 0s linear 0.3s;
  pointer-events: none;
  background-color: #ffffff;
  object-fit: cover;
}

.logo-animation-video-container iframe.ready {
  display: block;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in, visibility 0s;
}

.logo-animation-video-container video.native-video-mobile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  opacity: 0;
  visibility: hidden;
  display: none;
  transition: opacity 0.3s ease-in, visibility 0s linear 0.3s;
  pointer-events: none;
  background-color: #ffffff;
  object-fit: cover;
}

.logo-animation-video-container video.native-video-mobile.ready {
  display: block;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in, visibility 0s;
}

@supports (-moz-appearance: none) {
  .logo-animation-video-container iframe.ready {
    width: 101%;
    height: 101%;
    left: -0.5%;
    top: -0.5%;
  }
}

.logo-video-white-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 3;
  opacity: 1;
  transition: opacity 0.3s ease-out;
  pointer-events: none;
}

.logo-video-white-overlay.hidden {
  opacity: 0;
}

.logo-video-top-overlay,
.logo-video-bottom-overlay {
  position: absolute;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  z-index: 5;
  pointer-events: none;
}

.logo-video-top-overlay {
  top: 0;
  height: 20%;
}

.logo-video-bottom-overlay {
  bottom: 0;
  height: 20%;
}

.logo-video-left-overlay,
.logo-video-right-overlay {
  position: absolute;
  top: -5px;
  height: calc(100% + 10px);
  width: 5px;
  background-color: #ffffff;
  z-index: 10;
  pointer-events: none;
}

.logo-video-left-overlay {
  left: -2px;
}

.logo-video-right-overlay {
  right: -2px;
}

@supports (-moz-appearance: none) {
  .logo-video-top-overlay,
  .logo-video-bottom-overlay {
    height: 25%;
  }
}

.logo-animation-video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 9999;
  pointer-events: all;
  display: none;
  opacity: 1;
  transition: opacity 0.8s ease-out;
}

.logo-animation-video-overlay.active {
  display: block;
}

.logo-animation-video-overlay.fade-out {
  opacity: 0;
}

@media (max-width: 991px) {
  .logo-animation-video-container > div {
    max-width: 95vw;
    max-height: 95vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .homepage-overlay,
  .page-node-1 .navbar-brand,
  .page-node-1 .navbar-nav,
  .main-line-svg path,
  .article-left-line-svg path,
  .article-right-line-svg path,
  .navbar-line-svg path,
  .navbar-left-line-svg path,
  .navbar-right-line-svg path,
  .logo-right-line-svg path,
  [data-fade-in],
  .logo-animation-video-container {
    transition: none;
    animation: none;
    opacity: 1;
  }
  
  .logo-animation-video-container {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .homepage-fade {
    opacity: 0;
    visibility: hidden;
  }
}

body.logo-video-playing .homepage-fade {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* CSS Fallback */
@keyframes navbar-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Show navbar after 3 seconds */
.page-node-1:not(.homepage-animation-completed):not(.homepage-animation-initialized) .navbar-brand,
.page-node-1:not(.homepage-animation-completed):not(.homepage-animation-initialized) .navbar-nav,
.page-node-1:not(.homepage-animation-completed):not(.homepage-animation-initialized) .navbar-toggler {
  animation: navbar-fade-in 0.6s ease-out 3s forwards;
}

/* Override animation if JS successfully initialized */
.page-node-1.homepage-animation-completed .navbar-brand,
.page-node-1.homepage-animation-completed .navbar-nav,
.page-node-1.homepage-animation-completed .navbar-toggler,
.page-node-1.homepage-animation-initialized .navbar-brand,
.page-node-1.homepage-animation-initialized .navbar-nav,
.page-node-1.homepage-animation-initialized .navbar-toggler {
  animation: none;
}

@media (max-width: 991px) {
  body.page-node-1:not(.homepage-animation-completed) .hero-content {
    opacity: 0;
    visibility: hidden;
  }
}