/* Evolve interaction styles: navigation, dropdowns, tabs, collapsible sections, hover
   states, popups and scroll effects. Behaviour is in /assets/scripts/site.js, which sets
   w--open, w--current, w--tab-active, is-open (on a [data-toggle]'s parent) and is-in-view.
   Hover effects apply from 992px, matching the desktop breakpoint. */

/* Navigation menu icon */
.menu-icon_line-top,
.menu-icon_line-bottom {
  transition: translate 0.4s cubic-bezier(0.86, 0, 0.07, 1), rotate 0.6s cubic-bezier(0.86, 0, 0.07, 1);
}
.menu-icon_line-middle {
  transition: width 0.2s cubic-bezier(0.86, 0, 0.07, 1);
}
.w-nav-button.w--open .menu-icon_line-top {
  translate: 0 8px;
  rotate: -45deg;
}
.w-nav-button.w--open .menu-icon_line-bottom {
  translate: 0 -8px;
  rotate: 45deg;
}
.w-nav-button.w--open .menu-icon_line-middle {
  width: 0;
}

/* Dropdowns */
.dropdown-chevron {
  transition: rotate 0.3s ease;
}
.w-dropdown-toggle.w--open .dropdown-chevron,
.w-dropdown-toggle.w--open .fs-dropdown_icon-1 {
  rotate: 180deg;
}
@media (min-width: 992px) {
  .navbar1_dropdown-list.w--open {
    transition: opacity 0.2s ease, translate 0.3s ease;
  }
  @starting-style {
    .navbar1_dropdown-list.w--open {
      opacity: 0;
      translate: 0 3rem;
    }
  }
}

/* Tabs (pane fades and paragraph heights are animated by site.js) */
.home-benefits_tab .home-benefits_tab-paragraph {
  height: 0;
}
.home-benefits_tab.w--current .home-benefits_tab-paragraph {
  height: auto;
}
.home-benefits_tab .home-benefits_icon {
  color: var(--base-color-brand--light-heading);
  transition: color 0.4s ease;
}
.home-benefits_tab.w--current .home-benefits_icon {
  color: var(--base-color-brand--orange-cta);
}
.home-benefits_tab .text-size-large.text-color-secondary {
  color: var(--base-color-brand--light-paragraph);
  transition: color 0.4s ease;
}
.home-benefits_tab.w--current .text-size-large.text-color-secondary {
  color: var(--base-color-brand--light-heading);
}

/* Collapsible sections. The content collapses only where a [data-toggle] controls it;
   site.js animates the height change. */
:has(> [data-toggle="faq"]) > .faq_answer,
:has(> [data-toggle="compare"]) > .comparisson-table_content,
:has(> [data-toggle="hof-listing"]) > .user-details_body-wrapper {
  height: 0;
}
:has(> [data-toggle="pricing"]) > .pricing-plan_feature-bullets {
  height: 110px;
}
.is-open > .faq_answer,
.is-open > .comparisson-table_content,
.is-open > .user-details_body-wrapper,
.is-open > .pricing-plan_feature-bullets {
  height: auto;
}
[data-toggle] .features_button-arrow,
[data-toggle] .blog_button-arrow,
[data-toggle] .user-details_arrow {
  transition: rotate 0.3s ease, color 0.3s ease;
}
[data-toggle="faq"] .blog_button-arrow {
  rotate: 90deg;
}
.is-open > [data-toggle="faq"] .blog_button-arrow {
  rotate: 270deg;
}
.is-open > [data-toggle="pricing"] .features_button-arrow,
.is-open > [data-toggle="compare"] .blog_button-arrow,
.is-open > [data-toggle="hof-listing"] .user-details_arrow {
  rotate: 180deg;
}
@media (max-width: 991px) {
  :has(> [data-toggle="toc"]) > .blog-content_toc-wrapper {
    height: 0;
    border-color: rgb(69 112 74 / 0);
    background-color: rgb(12 45 20 / 0);
    transition: border-color 0.3s ease, background-color 0.3s ease;
  }
  .is-open > .blog-content_toc-wrapper {
    height: auto;
    border-color: var(--base-color-brand--army-green);
    background-color: var(--base-color-brand--dark-green);
  }
  :has(> [data-toggle="hof-filters"]) > .all-filters_wrapper {
    height: 0;
  }
  .is-open > .all-filters_wrapper {
    height: auto;
  }
  .is-open > [data-toggle="toc"] .features_button-arrow,
  .is-open > [data-toggle="hof-filters"] .features_button-arrow {
    rotate: 180deg;
  }
}
@media (max-width: 767px) {
  :has(> [data-toggle="press-kit-tabs"]) > .press-kit_tabs-menu {
    height: 0;
    border-color: rgb(69 112 74 / 0);
    background-color: rgb(12 45 20 / 0);
    transition: border-color 0.3s ease, background-color 0.3s ease;
  }
  .is-open > .press-kit_tabs-menu {
    height: auto;
    border-color: var(--base-color-brand--army-green);
    background-color: var(--base-color-brand--dark-green);
  }
  .is-open > [data-toggle="press-kit-tabs"] .features_button-arrow {
    rotate: 180deg;
  }
}

/* Download popup */
.popup_component.is-open {
  display: flex;
  transition: opacity 0.3s ease;
}
@starting-style {
  .popup_component.is-open {
    opacity: 0;
  }
}

/* Video dialog */
.video-dialog {
  width: min(90vw, 160vh);
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.video-dialog::backdrop {
  background: rgb(0 0 0 / 0.9);
}
.video-dialog_frame {
  aspect-ratio: 16 / 9;
}
.video-dialog_frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.video-dialog_close {
  position: absolute;
  top: -2.75rem;
  right: 0;
  padding: 0.25rem 0.5rem;
  border: 0;
  background: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

/* Press video button */
.press-video .press-video_button.is-inner {
  background-color: rgb(253 102 58 / 0.2);
  transition: scale 0.3s ease, background-color 0.3s ease;
}
.press-video .video-button_triangle {
  color: var(--base-color-brand--orange-cta);
  transition: color 0.3s ease;
}
.press-video:hover .press-video_button.is-inner {
  scale: 1.8;
  background-color: var(--base-color-brand--orange-cta);
}
.press-video:hover .video-button_triangle {
  color: var(--base-color-brand--light-heading);
}

/* Fixed side button: slides in on load, fully out on hover */
.fixed-button_wrapper:not(.is-discord) {
  translate: 141px 0;
  transition: translate 0.3s ease, background-color 0.3s ease;
  animation: fixed-button-appear 0.3s ease 0.5s backwards;
}
@keyframes fixed-button-appear {
  from {
    translate: 185px 0;
  }
}

/* Process progress bars */
.press-process_content .press-process_progress-bar {
  width: 0;
  transition: width 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.press-process_content.is-in-view .press-process_progress-bar {
  width: 100%;
}

@media (min-width: 992px) {
  /* Initial states for desktop hover effects */
  :has(> .key-scores_link) > .key-score_box {
    border-color: var(--base-color-brand--army-green);
    transition: border-color 0.3s ease;
  }
  :has(> .key-scores_link) > .bg-card_gradient,
  .card_wrapper .bg-card_gradient,
  .faq_accordion .bg-card_gradient {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .card_wrapper .button-circle.is-blog,
  .card_wrapper .card-button,
  .faq_accordion .button-circle.is-blog,
  [data-toggle="compare"] .button-circle.is-blog,
  [data-toggle="pricing"] .button-circle {
    background-color: rgb(253 102 58 / 0);
    transition: background-color 0.3s ease;
  }
  .card_wrapper .blog_button-arrow,
  .faq_accordion .blog_button-arrow,
  [data-toggle="compare"] .blog_button-arrow,
  [data-toggle="pricing"] .features_button-arrow,
  [data-toggle="pricing"] {
    color: var(--base-color-brand--light-paragraph);
    transition: color 0.3s ease, rotate 0.3s ease;
  }
  .card_wrapper .card-button > div {
    color: var(--base-color-brand--light-heading);
    transition: color 0.3s ease;
  }
  .card_wrapper .image-4 {
    transition: scale 0.3s ease;
  }
  [data-toggle="compare"],
  [data-toggle="hof-listing"] {
    background-color: rgb(247 244 231 / 0);
    transition: background-color 0.3s ease;
  }
  [data-toggle="hof-listing"] .user-details_arrow {
    color: var(--base-color-brand--light-heading);
  }
  .popup-close-button {
    background-color: rgb(253 102 58 / 0);
    transition: background-color 0.3s ease;
  }
  .popup-close-button .popup-close-icon {
    color: var(--base-color-brand--light-heading);
    transition: color 0.3s ease;
  }
  .middlecta_link-wrapper .link-glow {
    transition: opacity 0.3s ease;
  }
  .fixed-button_wrapper.is-discord {
    translate: 71px 0;
    transition: translate 0.3s ease, background-color 0.3s ease;
  }

  /* Hover states */
  :has(> .key-scores_link:hover) > .key-score_box {
    border-color: var(--base-color-brand--light-green);
  }
  :has(> .key-scores_link:hover) > .bg-card_gradient,
  .card_wrapper:hover .bg-card_gradient,
  .faq_accordion:hover .bg-card_gradient,
  .middlecta_link-wrapper:hover .link-glow {
    opacity: 1;
  }
  .card_wrapper:hover .button-circle.is-blog,
  .card_wrapper:hover .card-button,
  .faq_accordion:hover .button-circle.is-blog,
  [data-toggle="compare"]:hover .button-circle.is-blog,
  [data-toggle="pricing"]:hover .button-circle,
  .popup-close-button:hover {
    background-color: var(--base-color-brand--orange-cta);
  }
  .card_wrapper:hover .blog_button-arrow,
  .card_wrapper:hover .card-button > div,
  .faq_accordion:hover .blog_button-arrow,
  [data-toggle="compare"]:hover .blog_button-arrow,
  [data-toggle="pricing"]:hover .features_button-arrow,
  .popup-close-button:hover .popup-close-icon {
    color: var(--base-color-brand--dark);
  }
  .card_wrapper:hover .blog_button-arrow {
    rotate: -45deg;
  }
  .card_wrapper:hover .image-4 {
    scale: 1.1;
  }
  [data-toggle="pricing"]:hover {
    color: var(--base-color-brand--light-heading);
  }
  [data-toggle="compare"]:hover {
    background-color: rgb(247 244 231 / 0.1);
  }
  [data-toggle="hof-listing"]:hover {
    background-color: rgb(247 244 231 / 0.05);
  }
  [data-toggle="hof-listing"]:hover .user-details_arrow {
    color: var(--base-color-brand--orange-cta);
  }
  .fixed-button_wrapper:hover {
    translate: 0 0;
    background-color: var(--base-color-brand--light-heading);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}

/* Discord button icon: the face looks left, then right (from the original Lottie animation) */
.discord-icon_body {
  animation: discord-body 2.936s infinite;
}
.discord-icon_eyes {
  animation: discord-eyes 2.936s infinite;
}
@keyframes discord-body {
  0% {
    translate: 0 0;
    animation-timing-function: cubic-bezier(0.333, 0, 0, 1);
  }
  31% {
    translate: -31px 0;
    animation-timing-function: cubic-bezier(0.508, 0, 0.515, 1);
  }
  66.7% {
    translate: 26px 0;
    animation-timing-function: cubic-bezier(1, 0, 0.667, 1);
  }
  100% {
    translate: 0 0;
  }
}
@keyframes discord-eyes {
  0% {
    translate: 0 0;
    animation-timing-function: cubic-bezier(0.167, 0, 0.1, 1);
  }
  31% {
    translate: -46.5px 0;
    animation-timing-function: cubic-bezier(0.742, 0, 0.25, 1);
  }
  66.7% {
    translate: 55px 0;
    animation-timing-function: cubic-bezier(1, 0, 0.605, 1);
  }
  100% {
    translate: 0 0;
  }
}