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

   File: preloader.css

   Version: 2.0.0

   Description: Bottle Preloader
========================================================== */

/* ======================================================
   PRELOADER
====================================================== */

.preloader {
  position: fixed;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;
  height: 100svh;

  overflow: hidden;

  background: var(--color-background);

  opacity: 1;

  visibility: visible;

  z-index: var(--z-preloader);

  transition:
    opacity 0.8s var(--ease-editorial),
    visibility 0.8s var(--ease-editorial);
}

/* ======================================================
   BRAND
====================================================== */

.preloader__brand {
  display: flex;

  align-items: center;

  justify-content: center;

  width: min(68vw, 24rem);

  transform: scale(1);

  transition: transform 0.7s var(--ease-editorial);
}

/* ======================================================
   BOTTLE
====================================================== */

.preloader__bottle {
  display: block;

  width: 100%;

  aspect-ratio: 1 / 1;

  border: 0;

  opacity: 0;
}

/* ======================================================
   COMPLETE
====================================================== */

.preloader.is-complete .preloader__brand {
  transform: scale(1.025);
}

/* ======================================================
   EXIT
====================================================== */

.preloader.is-hidden {
  opacity: 0;

  visibility: hidden;

  pointer-events: none;
}

/* ======================================================
   LOADING STATE
====================================================== */

body.is-loading {
  overflow: hidden;
}

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

@media (prefers-reduced-motion: reduce) {
  .preloader,
  .preloader__brand {
    transition: none;
  }
}