/* ========================================
   GLOBAL FLOAT
======================================== */

@keyframes floatSlow {
  0% {
    transform:
      translateY(0px)
      rotate(0deg);
  }

  50% {
    transform:
      translateY(-15px)
      rotate(1deg);
  }

  100% {
    transform:
      translateY(0px)
      rotate(0deg);
  }
}

@keyframes floatMedium {
  0% {
    transform:
      translateY(0px);
  }

  50% {
    transform:
      translateY(-25px);
  }

  100% {
    transform:
      translateY(0px);
  }
}

/* ========================================
   GLOW PULSE
======================================== */

@keyframes glowPulse {
  0% {
    filter:
      drop-shadow(0 0 10px rgba(255,215,90,.25));
  }

  50% {
    filter:
      drop-shadow(0 0 40px rgba(255,215,90,.55));
  }

  100% {
    filter:
      drop-shadow(0 0 10px rgba(255,215,90,.25));
  }
}

/* ========================================
   SHIMMER SWEEP
======================================== */

@keyframes sweep {
  0% {
    transform:
      translateX(-120%);
  }

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

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

.brand-title {
  animation:
    glowPulse 6s ease-in-out infinite;
}

/* ========================================
   POKER
======================================== */

.card-front {
  animation:
    floatSlow 7s ease-in-out infinite;
}

.card-back {
  animation:
    floatMedium 8s ease-in-out infinite;
}

.chip-red {
  animation:
    floatSlow 6s ease-in-out infinite;
}

.chip-black {
  animation:
    floatMedium 5s ease-in-out infinite;
}

.light-sweep {
  animation:
    sweep 5s linear infinite;
}

/* ========================================
   ROULETTE
======================================== */

.roulette-wheel {
  transition:
    transform 5s cubic-bezier(.17,.84,.44,1);
}

/* ========================================
   SLOT MACHINE
======================================== */

.slot-machine {
  animation:
    floatSlow 8s ease-in-out infinite;
}

.reel {
  transition:
    transform .25s ease;
}

.slot-machine.active {
  box-shadow:
    0 0 40px rgba(255,0,210,.45),
    0 0 80px rgba(0,220,255,.35);
}

/* ========================================
   SCRATCH
======================================== */

.scratch-card-wrap {
  animation:
    floatSlow 9s ease-in-out infinite;
}

.scratch-prize {
  animation:
    glowPulse 4s ease-in-out infinite;
}

/* ========================================
   CONTACT
======================================== */

.contact-card {
  transition:
    transform .4s ease,
    box-shadow .4s ease;
}

.contact-card:hover {
  transform:
    translateY(-5px);

  box-shadow:
    0 15px 50px rgba(255,210,80,.18);
}

/* ========================================
   BUTTONS
======================================== */

.btn {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 50%;
  height: 100%;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,.35),
      transparent
    );

  transition:
    left .6s ease;
}

.btn:hover::before {
  left: 130%;
}

/* ========================================
   SECTION REVEAL HELPERS
======================================== */

.reveal {
  opacity: 0;
  transform:
    translateY(60px);
}

.reveal.active {
  opacity: 1;
  transform:
    translateY(0);

  transition:
    opacity .8s ease,
    transform .8s ease;
}