/*
 * =========================================================
 * ECHELONX – PREMIUM ANIMATIONEN
 * Dezente Scroll-, Karten- und Texteffekte
 * Version 1.0
 * =========================================================
 */

/*
 * Inhalte werden nur ausgeblendet, wenn JavaScript
 * erfolgreich gestartet wurde. Ohne JavaScript bleibt
 * die gesamte Website vollständig sichtbar.
 */

html.ex-animations-ready {
  scroll-behavior: smooth;
}

/*
 * =========================================================
 * GRUNDEFFEKT
 * =========================================================
 */

html.ex-animations-ready .ex-reveal {
  --ex-reveal-x: 0px;
  --ex-reveal-y: 34px;
  --ex-reveal-scale: 0.985;
  --ex-reveal-delay: 0ms;
  --ex-reveal-duration: 760ms;

  opacity: 0;
  transform:
    translate3d(
      var(--ex-reveal-x),
      var(--ex-reveal-y),
      0
    )
    scale(var(--ex-reveal-scale));

  filter: blur(3px);

  transition:
    opacity var(--ex-reveal-duration)
      cubic-bezier(0.22, 1, 0.36, 1)
      var(--ex-reveal-delay),

    transform var(--ex-reveal-duration)
      cubic-bezier(0.22, 1, 0.36, 1)
      var(--ex-reveal-delay),

    filter calc(var(--ex-reveal-duration) * 0.82)
      ease
      var(--ex-reveal-delay);

  will-change:
    opacity,
    transform,
    filter;
}

html.ex-animations-ready .ex-reveal.ex-is-visible {
  opacity: 1;
  transform:
    translate3d(0, 0, 0)
    scale(1);

  filter: blur(0);
}

/*
 * Nach abgeschlossener Animation werden unnötige
 * Rendering-Hinweise wieder entfernt.
 */

html.ex-animations-ready .ex-reveal.ex-animation-complete {
  will-change: auto;
}

/*
 * =========================================================
 * RICHTUNGEN
 * =========================================================
 */

html.ex-animations-ready .ex-reveal-up {
  --ex-reveal-x: 0px;
  --ex-reveal-y: 38px;
}

html.ex-animations-ready .ex-reveal-down {
  --ex-reveal-x: 0px;
  --ex-reveal-y: -30px;
}

html.ex-animations-ready .ex-reveal-left {
  --ex-reveal-x: -42px;
  --ex-reveal-y: 0px;
}

html.ex-animations-ready .ex-reveal-right {
  --ex-reveal-x: 42px;
  --ex-reveal-y: 0px;
}

html.ex-animations-ready .ex-reveal-scale {
  --ex-reveal-x: 0px;
  --ex-reveal-y: 15px;
  --ex-reveal-scale: 0.955;
}

html.ex-animations-ready .ex-reveal-soft {
  --ex-reveal-x: 0px;
  --ex-reveal-y: 20px;
  --ex-reveal-scale: 0.995;
  --ex-reveal-duration: 900ms;
}

/*
 * =========================================================
 * VERZÖGERUNGEN
 * =========================================================
 */

.ex-delay-1 {
  --ex-reveal-delay: 70ms;
}

.ex-delay-2 {
  --ex-reveal-delay: 140ms;
}

.ex-delay-3 {
  --ex-reveal-delay: 210ms;
}

.ex-delay-4 {
  --ex-reveal-delay: 280ms;
}

.ex-delay-5 {
  --ex-reveal-delay: 350ms;
}

.ex-delay-6 {
  --ex-reveal-delay: 420ms;
}

.ex-delay-7 {
  --ex-reveal-delay: 490ms;
}

.ex-delay-8 {
  --ex-reveal-delay: 560ms;
}

/*
 * =========================================================
 * ÜBERSCHRIFTEN
 * =========================================================
 */

html.ex-animations-ready .ex-heading-reveal {
  --ex-reveal-y: 28px;
  --ex-reveal-scale: 1;
  --ex-reveal-duration: 880ms;

  transform-origin: left bottom;
}

html.ex-animations-ready .ex-heading-reveal.ex-is-visible {
  transform:
    translate3d(0, 0, 0)
    scale(1);
}

/*
 * Goldene Eyebrows und kleine Bereichsüberschriften
 * erscheinen etwas früher und ruhiger.
 */

html.ex-animations-ready .ex-eyebrow-reveal {
  --ex-reveal-y: 14px;
  --ex-reveal-scale: 1;
  --ex-reveal-duration: 620ms;
}

/*
 * =========================================================
 * KARTEN
 * =========================================================
 */

html.ex-animations-ready .ex-card-reveal {
  --ex-reveal-y: 46px;
  --ex-reveal-scale: 0.965;
  --ex-reveal-duration: 820ms;

  transform-origin: center bottom;
}

html.ex-animations-ready .ex-card-reveal.ex-is-visible {
  transform:
    translate3d(0, 0, 0)
    scale(1);
}

/*
 * Karten erhalten nach dem Einblenden einen dezenten
 * Premium-Schimmer. Der Effekt läuft nur einmal.
 */

html.ex-animations-ready .ex-card-reveal {
  position: relative;
}

html.ex-animations-ready
.ex-card-reveal::after {
  content: "";

  position: absolute;
  z-index: 4;
  inset: 0;

  border-radius: inherit;

  background:
    linear-gradient(
      115deg,
      transparent 20%,
      rgba(255, 255, 255, 0.34) 42%,
      rgba(198, 161, 102, 0.13) 50%,
      transparent 68%
    );

  opacity: 0;
  pointer-events: none;
  transform: translateX(-120%);
}

html.ex-animations-ready
.ex-card-reveal.ex-is-visible::after {
  animation:
    ex-premium-shimmer
    980ms
    cubic-bezier(0.22, 1, 0.36, 1)
    calc(var(--ex-reveal-delay) + 280ms)
    1 both;
}

/*
 * =========================================================
 * BILDER UND MEDIEN
 * =========================================================
 */

html.ex-animations-ready .ex-media-reveal {
  --ex-reveal-y: 26px;
  --ex-reveal-scale: 0.94;
  --ex-reveal-duration: 950ms;

  overflow: hidden;
  transform-origin: center center;
}

html.ex-animations-ready .ex-media-reveal img,
html.ex-animations-ready .ex-media-reveal video {
  transform: scale(1.055);
  transition:
    transform 1150ms
    cubic-bezier(0.22, 1, 0.36, 1)
    calc(var(--ex-reveal-delay) + 70ms);
}

html.ex-animations-ready
.ex-media-reveal.ex-is-visible img,
html.ex-animations-ready
.ex-media-reveal.ex-is-visible video {
  transform: scale(1);
}

/*
 * =========================================================
 * LINIEN UND TRENNER
 * =========================================================
 */

html.ex-animations-ready .ex-line-reveal {
  position: relative;
  overflow: hidden;
}

html.ex-animations-ready .ex-line-reveal::before {
  content: "";

  position: absolute;
  z-index: 5;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(198, 161, 102, 0.8),
      rgba(17, 17, 15, 0.15),
      transparent
    );

  transform: scaleX(0);
  transform-origin: left center;

  transition:
    transform 900ms
    cubic-bezier(0.22, 1, 0.36, 1)
    var(--ex-reveal-delay);
}

html.ex-animations-ready
.ex-line-reveal.ex-is-visible::before {
  transform: scaleX(1);
}

/*
 * =========================================================
 * BUTTONS UND LINKS
 * =========================================================
 */

.ex-premium-button {
  position: relative;
  overflow: hidden;
}

.ex-premium-button::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      115deg,
      transparent 20%,
      rgba(255, 255, 255, 0.18) 44%,
      transparent 66%
    );

  opacity: 0;
  pointer-events: none;
  transform: translateX(-120%);
}

.ex-premium-button:hover::after {
  opacity: 1;

  animation:
    ex-button-shine
    720ms
    ease
    1 both;
}

/*
 * =========================================================
 * NAVIGATION
 * =========================================================
 */

html.ex-animations-ready .site-header {
  animation:
    ex-header-arrival
    720ms
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

/*
 * =========================================================
 * HERO
 * =========================================================
 */

html.ex-animations-ready .ex-hero-reveal {
  animation:
    ex-hero-arrival
    960ms
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

html.ex-animations-ready .ex-hero-reveal-delay {
  animation:
    ex-hero-arrival
    1050ms
    cubic-bezier(0.22, 1, 0.36, 1)
    180ms
    both;
}

/*
 * =========================================================
 * INSIGHTS
 * =========================================================
 */

html.ex-animations-ready
.insights-featured.ex-card-reveal {
  --ex-reveal-y: 54px;
  --ex-reveal-scale: 0.975;
  --ex-reveal-duration: 980ms;
}

html.ex-animations-ready
.insight-card.ex-card-reveal {
  transform-origin: center bottom;
}

/*
 * =========================================================
 * REFERENZEN
 * =========================================================
 */

html.ex-animations-ready
.reference-card.ex-card-reveal,
html.ex-animations-ready
.references-card.ex-card-reveal {
  --ex-reveal-y: 44px;
  --ex-reveal-scale: 0.975;
}

/*
 * =========================================================
 * KONTAKTFORMULAR
 * =========================================================
 */

html.ex-animations-ready
.contact-form-card.ex-card-reveal {
  --ex-reveal-x: 46px;
  --ex-reveal-y: 16px;
  --ex-reveal-scale: 0.98;
  --ex-reveal-duration: 920ms;
}

html.ex-animations-ready
.contact-benefit.ex-reveal {
  --ex-reveal-x: -24px;
  --ex-reveal-y: 0;
  --ex-reveal-scale: 1;
}

/*
 * =========================================================
 * ARTIKELSEITEN
 * =========================================================
 */

html.ex-animations-ready
.article-content > .ex-reveal {
  --ex-reveal-y: 28px;
  --ex-reveal-duration: 780ms;
}

html.ex-animations-ready
.article-quote.ex-card-reveal,
html.ex-animations-ready
.article-highlight.ex-card-reveal,
html.ex-animations-ready
.article-cta.ex-card-reveal {
  --ex-reveal-scale: 0.975;
}

html.ex-animations-ready
.article-related-card.ex-card-reveal {
  --ex-reveal-y: 38px;
}

/*
 * =========================================================
 * KEYFRAMES
 * =========================================================
 */

@keyframes ex-premium-shimmer {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes ex-button-shine {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes ex-header-arrival {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ex-hero-arrival {
  from {
    opacity: 0;
    filter: blur(4px);
    transform:
      translateY(34px)
      scale(0.99);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform:
      translateY(0)
      scale(1);
  }
}

/*
 * =========================================================
 * TABLET
 * =========================================================
 */

@media (max-width: 1024px) {
  html.ex-animations-ready .ex-reveal {
    --ex-reveal-y: 27px;
    --ex-reveal-duration: 700ms;
  }

  html.ex-animations-ready .ex-reveal-left,
  html.ex-animations-ready .ex-reveal-right {
    --ex-reveal-x: 0px;
    --ex-reveal-y: 28px;
  }

  html.ex-animations-ready
  .contact-form-card.ex-card-reveal {
    --ex-reveal-x: 0px;
    --ex-reveal-y: 34px;
  }
}

/*
 * =========================================================
 * SMARTPHONE
 * =========================================================
 */

@media (max-width: 640px) {
  html.ex-animations-ready {
    scroll-behavior: auto;
  }

  html.ex-animations-ready .ex-reveal {
    --ex-reveal-x: 0px;
    --ex-reveal-y: 22px;
    --ex-reveal-scale: 0.99;
    --ex-reveal-duration: 620ms;

    filter: blur(1.5px);
  }

  html.ex-animations-ready .ex-card-reveal {
    --ex-reveal-y: 28px;
    --ex-reveal-scale: 0.985;
  }

  html.ex-animations-ready
  .ex-card-reveal::after {
    display: none;
  }

  .ex-delay-5,
  .ex-delay-6,
  .ex-delay-7,
  .ex-delay-8 {
    --ex-reveal-delay: 180ms;
  }
}

/*
 * =========================================================
 * REDUZIERTE BEWEGUNG
 * =========================================================
 */

@media (prefers-reduced-motion: reduce) {
  html.ex-animations-ready {
    scroll-behavior: auto !important;
  }

  html.ex-animations-ready .ex-reveal,
  html.ex-animations-ready .ex-reveal.ex-is-visible {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  html.ex-animations-ready
  .ex-card-reveal::after,
  html.ex-animations-ready
  .ex-line-reveal::before,
  .ex-premium-button::after {
    display: none !important;
  }

  html.ex-animations-ready .site-header,
  html.ex-animations-ready .ex-hero-reveal,
  html.ex-animations-ready .ex-hero-reveal-delay {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
  }

  html.ex-animations-ready
  .ex-media-reveal img,
  html.ex-animations-ready
  .ex-media-reveal video {
    transform: none !important;
    transition: none !important;
  }
}