/* =========================================================
   AIRPROCE CONTEST ANIMATION
   ========================================================= */

:root {
  --motion-duration: 850ms;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-distance: 48px;
  --motion-scale: 0.97;
  --motion-blur: 5px;

  --stagger-duration: 750ms;
  --stagger-distance: 36px;

  --bar-duration: 1300ms;
  --bar-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================
   REVEAL CƠ BẢN
   ========================================================= */

/*
 * CSS chỉ ẩn element khi JavaScript animation đã được bật.
 * Nếu JavaScript lỗi, class motion-enabled sẽ được gỡ bỏ
 * bởi đoạn fallback trong functions.php.
 */
html.motion-enabled .reveal,
html.motion-enabled [data-reveal],
html.motion-enabled .load-reveal,
html.motion-enabled [data-load-reveal] {
  --motion-x: 0px;
  --motion-y: var(--motion-distance);
  --motion-local-scale: 1;
  --motion-local-blur: 0px;

  opacity: 0;
  visibility: hidden;

  transform: translate3d(var(--motion-x), var(--motion-y), 0)
    scale(var(--motion-local-scale));

  filter: blur(var(--motion-local-blur));

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

  transition-delay: var(--motion-delay, 0ms);

  will-change: opacity, transform, filter;
}

/* Trạng thái JavaScript thêm khi vào viewport */
html.motion-enabled .reveal.in,
html.motion-enabled [data-reveal].in,
html.motion-enabled .load-reveal.in,
html.motion-enabled [data-load-reveal].in {
  opacity: 1;
  visibility: visible;

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

  filter: blur(0);
}

/* =========================================================
   CÁC KIỂU REVEAL
   ========================================================= */

/* Từ dưới lên */
html.motion-enabled .reveal-up,
html.motion-enabled [data-reveal="up"] {
  --motion-x: 0px;
  --motion-y: var(--motion-distance);
}

/* Từ trên xuống */
html.motion-enabled .reveal-down,
html.motion-enabled [data-reveal="down"] {
  --motion-x: 0px;
  --motion-y: calc(var(--motion-distance) * -1);
}

/* Từ trái sang */
html.motion-enabled .reveal-left,
html.motion-enabled [data-reveal="left"] {
  --motion-x: calc(var(--motion-distance) * -1);
  --motion-y: 0px;
}

/* Từ phải sang */
html.motion-enabled .reveal-right,
html.motion-enabled [data-reveal="right"] {
  --motion-x: var(--motion-distance);
  --motion-y: 0px;
}

/* Chỉ fade */
html.motion-enabled .reveal-fade,
html.motion-enabled [data-reveal="fade"] {
  --motion-x: 0px;
  --motion-y: 0px;
  --motion-local-scale: 1;
}

/* Phóng nhẹ */
html.motion-enabled .reveal-scale,
html.motion-enabled [data-reveal="scale"] {
  --motion-x: 0px;
  --motion-y: 0px;
  --motion-local-scale: var(--motion-scale);
}

/* Mờ rồi rõ */
html.motion-enabled .reveal-blur,
html.motion-enabled [data-reveal="blur"] {
  --motion-local-blur: var(--motion-blur);
}

/* =========================================================
   STAGGER CHILDREN
   Hỗ trợ cả class .stagger và .reveal-stagger
   ========================================================= */

html.motion-enabled .stagger > *,
html.motion-enabled .reveal-stagger > *,
html.motion-enabled [data-stagger] > *,
html.motion-enabled .load-stagger > * {
  opacity: 0;
  visibility: hidden;

  transform: translate3d(
      var(--stagger-x, 0px),
      var(--stagger-y, var(--stagger-distance)),
      0
    )
    scale(var(--stagger-scale, 1));

  filter: blur(var(--stagger-blur, 0px));

  transition:
    opacity var(--stagger-local-duration, var(--stagger-duration))
      var(--motion-ease),
    transform var(--stagger-local-duration, var(--stagger-duration))
      var(--motion-ease),
    filter var(--stagger-local-duration, var(--stagger-duration))
      var(--motion-ease);

  /*
     * Giá trị này được JavaScript tính sẵn:
     * 0ms, 110ms, 220ms...
     */
  transition-delay: var(--motion-delay, 0ms);

  will-change: opacity, transform, filter;
}

html.motion-enabled .stagger.in > *,
html.motion-enabled .reveal-stagger.in > *,
html.motion-enabled [data-stagger].in > *,
html.motion-enabled .load-stagger.in > * {
  opacity: 1;
  visibility: visible;

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

  filter: blur(0);
}

/* Stagger từ trái */
html.motion-enabled .stagger-left > *,
html.motion-enabled [data-stagger-direction="left"] > * {
  --stagger-x: calc(var(--stagger-distance) * -1);
  --stagger-y: 0px;
}

/* Stagger từ phải */
html.motion-enabled .stagger-right > *,
html.motion-enabled [data-stagger-direction="right"] > * {
  --stagger-x: var(--stagger-distance);
  --stagger-y: 0px;
}

/* Stagger từ trên */
html.motion-enabled .stagger-down > *,
html.motion-enabled [data-stagger-direction="down"] > * {
  --stagger-x: 0px;
  --stagger-y: calc(var(--stagger-distance) * -1);
}

/* Stagger scale */
html.motion-enabled .stagger-scale > *,
html.motion-enabled [data-stagger-direction="scale"] > * {
  --stagger-x: 0px;
  --stagger-y: 0px;
  --stagger-scale: 0.93;
}

/* =========================================================
   TEXT MASK REVEAL
   ========================================================= */

.reveal-mask {
  overflow: hidden;
}

html.motion-enabled .reveal-mask .reveal-inner {
  display: block;

  opacity: 0;
  visibility: hidden;

  transform: translate3d(0, 115%, 0);

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

  transition-delay: var(--motion-delay, 0ms);

  will-change: opacity, transform;
}

html.motion-enabled .reveal-mask.in .reveal-inner {
  opacity: 1;
  visibility: visible;

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

/* =========================================================
   CRITERIA PROGRESS BAR
   ========================================================= */

.crit-bar {
  position: relative;
  overflow: hidden;
}

.crit-bar i[data-w] {
  display: block;
  max-width: 100%;
}

html.motion-enabled .crit-bar i[data-w] {
  /*
     * Ghi đè style="width: 30%" đã copy từ trang mẫu.
     */
  width: 0 !important;

  transition: width var(--bar-local-duration, var(--bar-duration))
    var(--bar-ease);

  transition-delay: var(--bar-delay, 250ms);

  will-change: width;
}

html.motion-enabled .crit-row.in .crit-bar i[data-w],
html.motion-enabled .reveal.in .crit-bar i[data-w],
html.motion-enabled .stagger.in .crit-bar i[data-w],
html.motion-enabled .reveal-stagger.in .crit-bar i[data-w] {
  width: var(--bar-width, 0%) !important;
}

/* =========================================================
   DELAY CLASS CÓ SẴN
   ========================================================= */

.reveal-delay-1 {
  --motion-delay: 100ms;
}

.reveal-delay-2 {
  --motion-delay: 200ms;
}

.reveal-delay-3 {
  --motion-delay: 300ms;
}

.reveal-delay-4 {
  --motion-delay: 400ms;
}

.reveal-delay-5 {
  --motion-delay: 500ms;
}

/* =========================================================
   UX BUILDER
   Luôn hiển thị nội dung khi chỉnh sửa
   ========================================================= */

body.ux-builder-iframe .reveal,
body.ux-builder-iframe [data-reveal],
body.ux-builder-iframe .stagger > *,
body.ux-builder-iframe .reveal-stagger > *,
body.ux-builder-iframe [data-stagger] > *,
body.ux-builder-iframe .reveal-mask .reveal-inner {
  opacity: 1 !important;
  visibility: visible !important;

  transform: none !important;
  filter: none !important;

  transition: none !important;
}

body.ux-builder-iframe .crit-bar i[data-w] {
  width: var(--bar-width, 100%) !important;
  transition: none !important;
}

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

@media screen and (max-width: 849px) {
  :root {
    --motion-duration: 700ms;
    --motion-distance: 30px;

    --stagger-duration: 650ms;
    --stagger-distance: 25px;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html.motion-enabled .reveal,
  html.motion-enabled [data-reveal],
  html.motion-enabled .load-reveal,
  html.motion-enabled [data-load-reveal],
  html.motion-enabled .stagger > *,
  html.motion-enabled .reveal-stagger > *,
  html.motion-enabled [data-stagger] > *,
  html.motion-enabled .load-stagger > *,
  html.motion-enabled .reveal-mask .reveal-inner {
    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    filter: none !important;

    transition: none !important;
  }

  html.motion-enabled .crit-bar i[data-w] {
    width: var(--bar-width, 100%) !important;
    transition: none !important;
  }
}

/*
 * JavaScript cũng thêm class motion-reduced
 * để hỗ trợ trạng thái tương tự.
 */
html.motion-reduced .reveal,
html.motion-reduced [data-reveal],
html.motion-reduced .load-reveal,
html.motion-reduced [data-load-reveal],
html.motion-reduced .stagger > *,
html.motion-reduced .reveal-stagger > *,
html.motion-reduced [data-stagger] > *,
html.motion-reduced .load-stagger > *,
html.motion-reduced .reveal-mask .reveal-inner {
  opacity: 1 !important;
  visibility: visible !important;

  transform: none !important;
  filter: none !important;

  transition: none !important;
}

html.motion-reduced .crit-bar i[data-w] {
  width: var(--bar-width, 100%) !important;
  transition: none !important;
}