/* Scroll lock while preloader active */
html.is-loading,
body.is-loading{
  overflow: hidden;
}

/* Preloader overlay: visible by default so the page does not flash first */
.idl-preloader{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: block;
  background: #fff;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.idl-preloader__inner{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--r);
}

.idl-preloader__number{
  font: 300 16px/1.1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: black;
}

/* Optional: if you want to prevent any interactions before loaded */
body:not(.page-loaded) *{
  /* keep disabled if it breaks things; overlay already blocks visually */
}

/* Reduced motion friendly */
@media (prefers-reduced-motion: reduce){
  .idl-preloader{
    transition: none !important;
  }
}

/* Hidden state */
.idl-preloader.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Card slot */
#idl-preloader-number{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:180px;
}

.idl-preloader-card-wrap{
  perspective:1200px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.idl-preloader-card{
  position:relative;
  width:80px;
  aspect-ratio:2 / 3;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.77,0,.175,1);
}

.idl-preloader-card.is-flipping{
  transform:rotateY(180deg);
}

.idl-preloader-card__face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.idl-preloader-card__face--front{
  background:#fffdf8;
  border:1px solid rgba(0,0,0,.08);
}

.idl-preloader-card__face--back{
  background:var(--grey-soft);
  transform:rotateY(180deg);
}

.idl-preloader-card__back-pattern{
}

.idl-preloader-card__back-pattern::before{
}

.idl-preloader-card__symbol{
  font-size:30px;
  line-height:1;
}

.idl-preloader-card__corner{
  position:absolute;
  font-size:18px;
  line-height:1;
}

.idl-preloader-card__corner--tl{
  top:10px;
  left:10px;
}

.idl-preloader-card__corner--br{
  right:10px;
  bottom:10px;
  transform:rotate(180deg);
}

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

/* Main mask id */
#idl-preloader-mask{
  position: fixed;
  inset: 0;
  z-index: 999999;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

#idl-preloader-mask.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.idl-preloader__number{
  font-size:0;
  line-height:0;
}

.idl-preloader__number .idl-preloader-card-wrap{
  font-size:initial;
  line-height:normal;
}