@import './fonts.css';
@import 'swiper/css';
@import './tailwind-output.css';
@import './globals.css';

/* Ring rotation animations */
:root {
  --ring-animation-duration: 32s;
  --cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.ease-cubic-out {
  transition-timing-function: var(--cubic-out);
}

/* .arrow-right-icon svg.arrow-right-icon {
  mask-image: linear-gradient(to right, transparent 50%, black 50%);
  mask-size: 200% 100%;
  mask-position: 62% center;
  transform: translateX(0);
  transition: mask-position 0.3s var(--cubic-out), transform 0.3s var(--cubic-out);
}

.arrow-right-icon:hover svg.arrow-right-icon,
.arrow-right-icon:focus-visible svg.arrow-right-icon {
  transform: translateX(.1875rem);
  mask-position: 80% center;
} */

@media (prefers-reduced-motion: no-preference) {
  .logo-shadow-pulse {
    animation: pulse 6s ease-in-out infinite alternate;
  }

  @keyframes pulse {
    from {
      box-shadow: 0 0 5rem 1rem rgba(255, 255, 255, 0.25);
    }

    to {
      box-shadow: 0 0 8.75rem 2rem rgba(255, 255, 255, 0.75);
    }
  }

  .ring-rotate-inner {
    animation: rotate-inner var(--ring-animation-duration) linear infinite;
  }

  .ring-rotate-middle {
    animation: rotate-middle calc(var(--ring-animation-duration) * 1.5) linear infinite;
  }

  .ring-rotate-outer {
    animation: rotate-outer calc(var(--ring-animation-duration) * 2) linear infinite;
  }

  .logo-counter-rotate-inner {
    animation: counter-rotate-inner var(--ring-animation-duration) linear infinite;
  }

  .logo-counter-rotate-middle {
    animation: counter-rotate-middle calc(var(--ring-animation-duration) * 1.5) linear infinite;
  }

  .logo-counter-rotate-outer {
    animation: counter-rotate-outer calc(var(--ring-animation-duration) * 2) linear infinite;
  }

  /* Hero glow rotation animations - subtle, slow rotations */
  .hero-glow-rotate-1 {
    animation: hero-glow-rotate 7s linear infinite;
  }

  .hero-glow-rotate-2 {
    animation: hero-glow-rotate 9s linear reverse infinite;
  }

  .hero-glow-rotate-3 {
    animation: hero-glow-rotate 11s linear infinite;
  }

  .hero-glow-rotate-4 {
    animation: hero-glow-rotate 13s linear reverse infinite;
  }

  .hero-glow-rotate-5 {
    animation: hero-glow-rotate 15s linear infinite;
  }

  @keyframes hero-glow-rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes rotate-inner {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  @keyframes rotate-middle {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  @keyframes rotate-outer {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  @keyframes counter-rotate-inner {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }

  @keyframes counter-rotate-middle {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }

  @keyframes counter-rotate-outer {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
}

/* Swiper */
.swiper-max-height-calc {
  max-height: calc(100% - 2.625rem);
}

.accordion-image-mask {
  -webkit-mask-image: url('../assets/images/accordion-image-mask.svg');
  mask-image: url('../assets/images/accordion-image-mask.svg');
  -webkit-mask-size: 39.375rem 97.625rem;
  mask-size: 39.375rem 97.625rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center left;
  mask-position: center left;
}

/* Accordion image fade transitions */
.accordion-image {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--cubic-out), visibility 0.3s var(--cubic-out);
}

.accordion-image.active {
  opacity: 1;
  visibility: visible;
}

/* Dialog */
.shadcn-DialogContent {
  @apply fixed left-1/2 top-1/2 z-50 my-auto max-h-[calc(100%-2rem)]
           w-[calc(100%-2rem)] max-w-[120rem] -translate-x-1/2
           -translate-y-1/2 overflow-hidden rounded-2xl border border-transparent bg-transparent shadow-lg md:w-[calc(100%-8rem)] xl:w-[calc(100%-16rem)];
}
.shadcn-DialogContent[data-state='open'] {
  animation: dialog-fade-in-zoom 200ms var(--cubic-out);
}
.shadcn-DialogContent[data-state='closed'] {
  animation: dialog-fade-out-zoom 200ms var(--cubic-out);
}

@keyframes dialog-fade-in-zoom {
  from {
    opacity: 0;
    transform: translate(-50%, -45%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes dialog-fade-out-zoom {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -45%) scale(0.95);
  }
}

/* Accordion arrow rotation */
.radix-AccordionTrigger[data-state='open'] > svg {
  transform: rotateX(180deg);
}

/* Media Carousel */
.media-carousel-inline-visualization-container {
  @apply relative h-full w-full;
}

@media screen and (min-width: 64rem) {
  .media-carousel-inline-visualization-container {
    mask-image: url('../assets/images/media-carousel-image-mask.svg');
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-clip: border-box;
  }
}

.media-carousel-pagination {
  @apply ease-cubic-out flex h-0.5 w-[calc(100%-3rem)] items-center justify-center gap-2 transition-all duration-150 sm:gap-3 md:gap-4 lg:my-6 lg:h-[calc(100%-2.5rem)] lg:w-1 lg:flex-col;
}

.media-carousel-pagination-bullet-navy-blue {
  @apply ease-cubic-out focus-visible:ring-secondary-green-300 focus-visible:ring-offset-primary-navy-900 before:bg-primary-navy-600 hover:before:bg-primary-navy-300 active:before:bg-primary-navy-200 relative h-full max-h-[4.75rem] w-full rounded-sm transition-all duration-200 before:absolute before:left-1/2 before:h-0.5 before:w-[calc(100%-0.25rem)] before:-translate-x-1/2 before:transition-all before:duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 lg:max-w-none lg:before:h-full lg:before:w-0.5;
}

.media-carousel-pagination-bullet-clay {
  @apply ease-cubic-out focus-visible:ring-secondary-green-300 focus-visible:ring-offset-background-clay before:bg-primary-navy-300 hover:before:bg-primary-navy-600 active:before:bg-primary-navy-700 relative h-full max-h-[4.75rem] w-full rounded-sm transition-all duration-200 before:absolute before:left-1/2 before:h-0.5 before:w-[calc(100%-0.25rem)] before:-translate-x-1/2 before:transition-all before:duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 lg:max-w-none lg:before:h-full lg:before:w-0.5;
}

.swiper-pagination-bullet-active {
  @apply ease-cubic-out relative transition-all duration-200 before:absolute before:left-1/2 before:h-0.5 before:w-[calc(100%-0.25rem)] before:-translate-x-1/2 before:transition-all before:duration-200 lg:before:h-full lg:before:w-1;
}

/* Logos Marquee CSS Animation
   Based on: https://codepen.io/bitgrip-thomas/pen/mdZbgXN
*/

.logos-marquee-item {
  --marquee-item-position: calc(var(--marquee-item-index) + 1);
  --duration: calc(var(--marquee-speed, 30) * 1s);
  --duration-per-item: calc(var(--duration) / var(--marquee-count));
  --delay: calc(-1 * var(--duration-per-item) * (var(--marquee-count) - var(--marquee-item-position)));

  animation: logos-marquee var(--duration) var(--delay) linear infinite;
}

.logos-marquee:hover .logos-marquee-item {
  animation-play-state: paused;
}

@keyframes logos-marquee {
  from {
    /* -> last items original position
     * To get there,the current item is offsetted in the positive x-axis direction using the following formula:
     * [current item width] * ([items count] - [current item position])
     */
    translate: calc(100% * (var(--marquee-count) - var(--marquee-item-position)));
  }
  to {
    /*  -> before first items original position
     * To get there, the current item is offsetted in the negative x-axis direction using the following formula:
     * -[current item width] * [current item position]
     */
    translate: calc(-100% * var(--marquee-item-position));
  }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .logos-marquee-item {
    animation: none;
  }
}

/* Content List Styles */
.rich-text a {
  @apply underline;
}

.rich-text ul,
.rich-text ol {
  @apply mb-4 pl-6;
}

.rich-text ul {
  @apply list-disc;
}

.rich-text ol {
  @apply list-decimal;
}

.rich-text li {
  @apply mb-2;
}

.rich-text li:last-child {
  @apply mb-0;
}

/* Nested lists */
.rich-text ul ul,
.rich-text ol ul {
  @apply mt-2 list-disc;
}

.rich-text ul ol,
.rich-text ol ol {
  @apply mt-2 list-decimal;
}

/* HubSpot Rich Text Editor Styles */
.hs_cos_wrapper_type_rich_text {
  @apply rich-text;
}

/* Hero Image Mask - Hide bottom 1.25rem up to md: breakpoint */
.hero-image-mask {
  mask-image: linear-gradient(to bottom, black calc(100% - 1.25rem) 0%, transparent 1%);
}

@media (min-width: 48rem) {
  .hero-image-mask {
    mask-image: none;
  }
}

.swiper-slide video::-webkit-media-controls-panel {
  display: flex !important;
  opacity: 1 !important;
  width: 100% !important;
}
.swiper-slide video::-webkit-media-controls-enclosure {
  display: flex !important;
  opacity: 1 !important;
  width: 100% !important;
}

.sr-only {
  position: absolute !important;
  width: 0.0625rem !important;
  height: 0.0625rem !important;
  padding: 0 !important;
  margin: -0.0625rem !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important; /* modern */
  white-space: nowrap !important;
  border: 0 !important;
}

/* Reveal animations
 * .hubspot-disable-focus-styles is a class specific to Hubspot's content editor.
*/
body:not(.hubspot-disable-focus-styles) .animate {
  will-change: opacity, transform, translate, scale;
  transition-property: opacity, transform, translate, scale;
  transition-duration: 600ms;
  transition-timing-function: var(--cubic-out);
  transition-delay: 0ms;
}

body:not(.hubspot-disable-focus-styles) .animate.reveal:not(.is-animated),
body:not(.hubspot-disable-focus-styles) .animate.fade-up:not(.is-animated) {
  opacity: 0;
}

body:not(.hubspot-disable-focus-styles) .animate.reveal:not(.is-animated) {
  scale: 0.98;
}

body:not(.hubspot-disable-focus-styles) .animate.fade-up:not(.is-animated) {
  translate: 0 1rem;
}

body:not(.hubspot-disable-focus-styles) .animate.is-animated {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.hubspot-disable-focus-styles) .animate {
    transition: none !important;
  }
}