/* =====================================================
   TUCHOK — GLOBAL SCROLL ANIMATIONS
===================================================== */

:root {
  --reveal-distance: 34px;
  --reveal-duration: 850ms;
  --reveal-ease: cubic-bezier(.22, 1, .36, 1);
}


/* =====================================================
   BASE
===================================================== */

[data-reveal] {
  opacity: 0;

  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease),
    filter var(--reveal-duration) var(--reveal-ease);

  will-change:
    opacity,
    transform;
}


/* =====================================================
   FADE UP
===================================================== */

[data-reveal="up"] {
  transform:
    translate3d(
      0,
      var(--reveal-distance),
      0
    );
}


/* =====================================================
   FADE DOWN
===================================================== */

[data-reveal="down"] {
  transform:
    translate3d(
      0,
      calc(var(--reveal-distance) * -1),
      0
    );
}


/* =====================================================
   LEFT
===================================================== */

[data-reveal="left"] {
  transform:
    translate3d(
      calc(var(--reveal-distance) * -1),
      0,
      0
    );
}


/* =====================================================
   RIGHT
===================================================== */

[data-reveal="right"] {
  transform:
    translate3d(
      var(--reveal-distance),
      0,
      0
    );
}


/* =====================================================
   SCALE
===================================================== */

[data-reveal="scale"] {
  transform:
    scale(.96);

  filter:
    blur(2px);
}


/* =====================================================
   IMAGE REVEAL
===================================================== */

[data-reveal="image"] {
  opacity: 0;

  transform:
    translate3d(0, 20px, 0)
    scale(1.035);

  filter:
    blur(3px);
}


/* =====================================================
   ACTIVE
===================================================== */

[data-reveal].is-revealed {
  opacity: 1;

  transform:
    translate3d(0,0,0)
    scale(1);

  filter:
    blur(0);
}


/* =====================================================
   DELAYS
===================================================== */

[data-reveal-delay="1"] {
  transition-delay: 80ms;
}

[data-reveal-delay="2"] {
  transition-delay: 160ms;
}

[data-reveal-delay="3"] {
  transition-delay: 240ms;
}

[data-reveal-delay="4"] {
  transition-delay: 320ms;
}

[data-reveal-delay="5"] {
  transition-delay: 400ms;
}

[data-reveal-delay="6"] {
  transition-delay: 480ms;
}


/* =====================================================
   PREMIUM CARDS
===================================================== */

[data-reveal-card] {
  opacity: 0;

  transform:
    translate3d(0, 28px, 0)
    scale(.985);

  transition:
    opacity 850ms var(--reveal-ease),
    transform 850ms var(--reveal-ease),
    box-shadow 350ms ease;

  will-change:
    transform,
    opacity;
}

[data-reveal-card].is-revealed {
  opacity: 1;

  transform:
    translate3d(0,0,0)
    scale(1);
}


/* =====================================================
   TEXT
===================================================== */

[data-reveal-text] {
  opacity: 0;

  transform:
    translate3d(0, 22px, 0);

  transition:
    opacity 750ms var(--reveal-ease),
    transform 750ms var(--reveal-ease);
}

[data-reveal-text].is-revealed {
  opacity: 1;

  transform:
    translate3d(0,0,0);
}


/* =====================================================
   DECORATIVE ELEMENTS
===================================================== */

[data-scroll-float] {
  transform:
    translate3d(
      0,
      var(--scroll-float-y, 0px),
      0
    );

  will-change: transform;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

  :root {
    --reveal-distance: 20px;
    --reveal-duration: 700ms;
  }

  [data-reveal="image"] {
    transform:
      translate3d(0, 15px, 0)
      scale(1.02);
  }

}


/* =====================================================
   ACCESSIBILITY
===================================================== */

@media (prefers-reduced-motion: reduce) {

  [data-reveal],
  [data-reveal-card],
  [data-reveal-text] {
    opacity: 1 !important;

    transform: none !important;

    filter: none !important;

    transition: none !important;
  }

  [data-scroll-float] {
    transform: none !important;
  }

}