/*
 * MALIOU online home motion layer
 * Paste after the existing homepage stylesheet.
 * The JavaScript adds data-ml-online-home and ml-* scope classes.
 */

[data-ml-online-home] {
  --ml-signal: #67c5d8;
  --ml-gold: #d7b56d;
  --ml-grid-line: rgba(103, 197, 216, .065);
  --ml-grid-line-strong: rgba(103, 197, 216, .16);
  --ml-parallax-dot-x: 0px;
  --ml-parallax-dot-y: 0px;
  --ml-parallax-ring-x: 0px;
  --ml-parallax-ring-y: 0px;
  --ml-parallax-line-x: 0px;
  --ml-parallax-line-y: 0px;
}

[data-ml-online-home][data-ml-theme="light"] {
  --ml-signal: #3c6d9d;
  --ml-gold: #8b6e3f;
  --ml-grid-line: rgba(60, 109, 157, .08);
  --ml-grid-line-strong: rgba(60, 109, 157, .18);
}

[data-ml-online-home]::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(var(--ml-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--ml-grid-line) 1px, transparent 1px);
  background-size: 36px 36px;
  content: "";
  pointer-events: none;
}

[data-ml-online-home]::after {
  position: fixed;
  inset: -14%;
  z-index: 0;
  background: linear-gradient(108deg, transparent 42%, var(--ml-grid-line-strong) 50%, transparent 58%);
  content: "";
  opacity: .18;
  pointer-events: none;
  transform: translate3d(var(--ml-parallax-line-x), var(--ml-parallax-line-y), 0);
}

[data-ml-online-home] .ml-bg-orbs {
  opacity: .3;
}

[data-ml-online-home] .ml-signal-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: .52;
}

[data-ml-online-home] .ml-nav-link {
  position: relative;
}

[data-ml-online-home] .ml-nav-link::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 1px;
  background: var(--ml-signal);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
}

[data-ml-online-home] .ml-nav-link:hover::after,
[data-ml-online-home] .ml-nav-link:focus-visible::after {
  transform: scaleX(1);
}

[data-ml-online-home] .ml-logo {
  transform-origin: 50% 60%;
  transition: transform 300ms cubic-bezier(.23, 1, .32, 1);
}

[data-ml-online-home] .ml-logo:hover {
  transform: scale(1.05) rotate(2deg);
}

[data-ml-online-home] .ml-hero {
  overflow: hidden;
}

[data-ml-online-home] .ml-hero::before {
  position: absolute;
  top: 12%;
  right: 12%;
  width: 230px;
  height: 230px;
  background-image: radial-gradient(circle, var(--ml-signal) 0 1px, transparent 1.5px);
  background-size: 18px 18px;
  content: "";
  opacity: .22;
  pointer-events: none;
  transform: translate3d(var(--ml-parallax-dot-x), var(--ml-parallax-dot-y), 0);
}

[data-ml-online-home] .ml-hero::after {
  position: absolute;
  bottom: 20px;
  left: -30%;
  width: 22%;
  height: 1px;
  background: var(--ml-signal);
  box-shadow: 0 0 12px var(--ml-signal);
  content: "";
  opacity: 0;
  pointer-events: none;
  animation: ml-signal-sweep 4.8s cubic-bezier(.23, 1, .32, 1) infinite;
}

[data-ml-online-home] .ml-hero-title {
  position: relative;
}

[data-ml-online-home] .ml-hero-title::after {
  position: absolute;
  top: 50%;
  right: 7%;
  width: 170px;
  height: 170px;
  border: 1px solid var(--ml-gold);
  border-radius: 50%;
  box-shadow: 0 0 0 12px rgba(215, 181, 109, .04), 0 0 30px rgba(215, 181, 109, .16);
  content: "";
  opacity: .18;
  pointer-events: none;
  transform: translate3d(var(--ml-parallax-ring-x), var(--ml-parallax-ring-y), 0);
}

[data-ml-online-home] .ml-reveal {
  opacity: 0;
}

[data-ml-online-home] .ml-reveal.ml-is-visible {
  animation: ml-rise-in var(--ml-duration, 720ms) cubic-bezier(.23, 1, .32, 1) var(--ml-delay, 0ms) both;
}

[data-ml-online-home] .ml-reveal.ml-entered {
  opacity: 1;
}

[data-ml-online-home] .ml-stat-num {
  display: inline-block;
  transform-origin: 50% 80%;
}

[data-ml-online-home] .ml-stat-num.ml-kpi-pulse {
  animation: ml-kpi-pulse 1s cubic-bezier(.23, 1, .32, 1) both;
}

[data-ml-online-home] .ml-grid {
  perspective: 1000px;
}

[data-ml-online-home] .ml-card {
  --ml-rotate-x: 0deg;
  --ml-rotate-y: 0deg;
  --ml-lift: 0px;
  position: relative;
  overflow: hidden;
  transform: perspective(1000px) translate3d(0, var(--ml-lift), 0) rotateX(var(--ml-rotate-x)) rotateY(var(--ml-rotate-y));
  transform-style: preserve-3d;
  transition: transform 200ms ease-out, border-color 200ms ease-out, background-color 200ms ease-out;
  will-change: transform;
}

[data-ml-online-home] .ml-card::before {
  position: absolute;
  top: -30%;
  left: -120%;
  width: 42%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  content: "";
  pointer-events: none;
  transform: rotate(45deg) translateX(0);
}

[data-ml-online-home] .ml-card:hover {
  --ml-lift: -4px;
}

[data-ml-online-home] .ml-card:hover::before {
  animation: ml-gloss-sweep 600ms ease-out both;
}

[data-ml-online-home] .ml-card > * {
  position: relative;
  z-index: 1;
}

[data-ml-online-home] .ml-emoji {
  transform: translateZ(28px) rotateX(calc(var(--ml-rotate-x) * -1)) rotateY(calc(var(--ml-rotate-y) * -1));
  transition: transform 200ms ease-out;
  transform-style: preserve-3d;
}

[data-ml-online-home] .ml-footer {
  transform: translateZ(0);
}

@keyframes ml-rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ml-signal-sweep {
  0%, 28% { left: -30%; opacity: 0; }
  40% { opacity: 1; }
  68%, 100% { left: 108%; opacity: 0; }
}

@keyframes ml-gloss-sweep {
  from { transform: rotate(45deg) translateX(0); }
  to { transform: rotate(45deg) translateX(560%); }
}

@keyframes ml-kpi-pulse {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-1px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

@media (hover: hover) and (pointer: fine) {
  [data-ml-online-home] .ml-card {
    cursor: pointer;
  }
}

@media (max-width: 640px) {
  [data-ml-online-home] .ml-hero::before {
    top: 8%;
    right: -14%;
    opacity: .12;
  }

  [data-ml-online-home] .ml-hero-title::after {
    right: -18%;
    width: 110px;
    height: 110px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-ml-online-home]::before,
  [data-ml-online-home]::after,
  [data-ml-online-home] .ml-hero::before,
  [data-ml-online-home] .ml-hero::after,
  [data-ml-online-home] .ml-hero-title::after {
    display: none;
  }

  [data-ml-online-home] .ml-reveal,
  [data-ml-online-home] .ml-reveal.ml-is-visible,
  [data-ml-online-home] .ml-reveal.ml-entered {
    opacity: 1;
    animation: none;
  }

  [data-ml-online-home] .ml-card,
  [data-ml-online-home] .ml-card:hover,
  [data-ml-online-home] .ml-emoji,
  [data-ml-online-home] .ml-logo {
    transform: none !important;
    transition: none !important;
  }

  [data-ml-online-home] .ml-card::before,
  [data-ml-online-home] .ml-nav-link::after,
  [data-ml-online-home] .ml-stat-num.ml-kpi-pulse {
    display: none;
    animation: none;
  }
}