/* ==========================================================
   PROJECT XAMUCO

   File: animations.css

   Version: 1.0.0

   Description: Global Motion System
========================================================== */

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

[data-reveal] {
  opacity: 0;

  transform: translateY(2rem);

  transition:
    opacity var(--animation-reveal) var(--ease-editorial),
    transform var(--animation-reveal) var(--ease-editorial);
}

/* ======================================================
   REVEAL · LEFT
====================================================== */

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

  transform: translateX(-2rem);

  transition:
    opacity var(--animation-reveal) var(--ease-editorial),
    transform var(--animation-reveal) var(--ease-editorial);
}

/* ======================================================
   REVEAL · RIGHT
====================================================== */

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

  transform: translateX(2rem);

  transition:
    opacity var(--animation-reveal) var(--ease-editorial),
    transform var(--animation-reveal) var(--ease-editorial);
}

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

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

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

/* ======================================================
   STATEMENT REVEAL
====================================================== */

[data-reveal="statement"] {
  transform: translateY(3rem);
}

/* ======================================================
   STATEMENT LINES
====================================================== */

[data-reveal="statement"] .bottle__statement-line {
  opacity: 0;

  transform: translateY(1rem);

  transition:
    opacity var(--animation-reveal) var(--ease-editorial),
    transform var(--animation-reveal) var(--ease-editorial);
}

/* ======================================================
   STATEMENT · FIRST LINE
====================================================== */

[data-reveal="statement"] .bottle__statement-line:first-child {
  transition-delay: 0.15s;
}

/* ======================================================
   STATEMENT · EMPHASIS
====================================================== */

[data-reveal="statement"] .bottle__statement-line--emphasis {
  letter-spacing: 0;

  transition:
    opacity var(--animation-reveal) var(--ease-editorial),
    transform var(--animation-reveal) var(--ease-editorial),
    letter-spacing 1.3s var(--ease-editorial);

  transition-delay: 0.55s;
}

/* ======================================================
   STATEMENT · ACTIVE
====================================================== */

[data-reveal="statement"].is-visible .bottle__statement-line {
  opacity: 1;

  transform: translateY(0);
}

[data-reveal="statement"].is-visible .bottle__statement-line--emphasis {
  letter-spacing: 0.03em;
}

/* ======================================================
   HERO · ENTRANCE
====================================================== */

.hero .eyebrow,
.hero__title,
.hero .lead,
.hero .btn {
  opacity: 0;

  transform: translateY(1.5rem);
}

/* ======================================================
   HERO · EYEBROW
====================================================== */

.hero .eyebrow {
  animation: hero-reveal var(--animation-reveal) var(--ease-editorial) 0.15s
    forwards;
}

/* ======================================================
   HERO · TITLE
====================================================== */

.hero__title {
  animation: hero-reveal var(--animation-slow) var(--ease-editorial) 0.3s
    forwards;
}

/* ======================================================
   HERO · DESCRIPTION
====================================================== */

.hero .lead {
  animation: hero-reveal var(--animation-reveal) var(--ease-editorial) 0.55s
    forwards;
}

/* ======================================================
   HERO · CTA
====================================================== */

.hero .btn {
  animation: hero-reveal var(--animation-reveal) var(--ease-editorial) 0.75s
    forwards;
}

/* ======================================================
   HERO · KEYFRAMES
====================================================== */

@keyframes hero-reveal {
  from {
    opacity: 0;

    transform: translateY(1.5rem);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/* ======================================================
   BOTTLE · FLOAT
====================================================== */

@keyframes bottle-float {
  0% {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }

  50% {
    transform: translate3d(0, -10px, 0) rotate(1deg);
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }
}

/* ======================================================
   BOTTLE · AMBIENT MOTION
====================================================== */

.bottle__image {
  animation: bottle-float 7s ease-in-out infinite;

  transform-origin: center center;

  will-change: transform;
}

/* ======================================================
   BOTTLE · SCROLL MOTION
====================================================== */

.bottle__stage {
  transform: translate3d(
      var(--bottle-scroll-x, 0),
      var(--bottle-scroll-y, 0),
      0
    )
    rotate(var(--bottle-scroll-rotate, 0deg))
    scale(var(--bottle-scroll-scale, 1));

  transform-origin: center center;

  will-change: transform;
}

/* ======================================================
   RITUAL · REVEAL
====================================================== */

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

  transform: translateY(2.5rem);
}

/* ======================================================
   RITUAL · CHILDREN
====================================================== */

[data-reveal="ritual"] > * {
  opacity: 0;

  transform: translateY(1rem);

  transition:
    opacity var(--animation-reveal) var(--ease-editorial),
    transform var(--animation-reveal) var(--ease-editorial);
}

/* ======================================================
   RITUAL · SEQUENCE
====================================================== */

[data-reveal="ritual"] > *:nth-child(1) {
  transition-delay: 0.1s;
}

[data-reveal="ritual"] > *:nth-child(2) {
  transition-delay: 0.2s;
}

[data-reveal="ritual"] > *:nth-child(3) {
  transition-delay: 0.35s;
}

[data-reveal="ritual"] > *:nth-child(4) {
  transition-delay: 0.5s;
}

[data-reveal="ritual"] > *:nth-child(5) {
  transition-delay: 0.65s;
}

/* ======================================================
   RITUAL · ACTIVE
====================================================== */

[data-reveal="ritual"].is-visible {
  opacity: 1;

  transform: translateY(0);
}

[data-reveal="ritual"].is-visible > * {
  opacity: 1;

  transform: translateY(0);
}

/* ======================================================
   HEADER · ENTRANCE
====================================================== */

.header__logo,
.header__nav,
.header__toggle {
  opacity: 0;

  transform: translateY(-1rem);
}

/* ======================================================
   HEADER · LOGO
====================================================== */

.header__logo {
  animation: header-reveal var(--animation-reveal) var(--ease-editorial) 0.1s
    forwards;
}

/* ======================================================
   HEADER · NAVIGATION
====================================================== */

.header__nav {
  animation: header-reveal var(--animation-reveal) var(--ease-editorial) 0.2s
    forwards;
}

/* ======================================================
   HEADER · MOBILE TOGGLE
====================================================== */

.header__toggle {
  animation: header-reveal var(--animation-reveal) var(--ease-editorial) 0.2s
    forwards;
}

/* ======================================================
   HEADER · KEYFRAMES
====================================================== */

@keyframes header-reveal {
  from {
    opacity: 0;

    transform: translateY(-1rem);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/* ======================================================
   SITE · LOADING STATE
====================================================== */

body.is-loading {
  overflow: hidden;
}

body.is-loading .header__logo,
body.is-loading .header__nav,
body.is-loading .header__toggle,
body.is-loading .hero .eyebrow,
body.is-loading .hero__title,
body.is-loading .hero .lead,
body.is-loading .hero .btn {
  animation-play-state: paused;
}

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

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;

    transform: none;

    transition: none;
  }

  [data-reveal="statement"] .bottle__statement-line,
  [data-reveal="statement"] .bottle__statement-line--emphasis {
    opacity: 1;

    transform: none;

    letter-spacing: inherit;

    transition: none;
  }

  .bottle__image {
    animation: none;
  }

  .hero .eyebrow,
  .hero__title,
  .hero .lead,
  .hero .btn {
    opacity: 1;

    transform: none;

    animation: none;
  }

  [data-reveal="ritual"],
  [data-reveal="ritual"] > * {
    opacity: 1;

    transform: none;

    transition: none;
  }

  .header__logo,
  .header__nav,
  .header__toggle {
    opacity: 1;

    transform: none;

    animation: none;
  }
}