/* Preloader global (opcional, ligado pelo painel). Adaptado do estudo em
   site-html/tools/ESTUDO-PRELOADER-ASSINATURA-MARI/ para as cores reais do
   tema do site (var(--paper)/var(--ink)/var(--rust)) em vez de tons fixos,
   e para recolorir o logo via CSS mask (funciona com qualquer SVG que o
   dono configurar no painel, nao so o logo atual). */

body.is-loading{overflow:hidden}

.preloader{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;
  background:var(--paper,#f7f1eb);color:var(--ink,#251725);
  clip-path:inset(0 0 0 0);
  transition:clip-path .95s cubic-bezier(.77,0,.18,1);
}
.preloader[hidden]{display:none}

.preloader__top,.preloader__bottom{
  position:absolute;left:50%;z-index:4;transform:translateX(-50%);
  color:color-mix(in srgb,var(--ink,#251725) 54%,transparent);
  font:700 .56rem/1 var(--sans,sans-serif);letter-spacing:.23em;text-transform:uppercase;white-space:nowrap;
}
.preloader__top{top:clamp(1.6rem,5vh,3.4rem)}
.preloader__bottom{bottom:clamp(1.6rem,5vh,3.4rem)}
.preloader__bottom::after{
  content:"";display:block;width:0;height:1px;margin:.75rem auto 0;
  background:var(--rust,#a1436b);
  transition:width 1.65s cubic-bezier(.65,0,.35,1) .18s;
}
.preloader.is-entering .preloader__bottom::after{width:6.5rem}

.preloader__row{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;width:min(92vw,69rem)}

.preloader__phrase{
  overflow:hidden;flex:0 0 auto;color:var(--ink,#251725);
  font:720 clamp(.52rem,.85vw,.68rem)/1 var(--sans,sans-serif);letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;
  transition:transform 1.05s cubic-bezier(.65,0,.35,1);
}
.preloader__phrase span{display:block;transition:transform .52s cubic-bezier(.64,0,.78,0)}
.preloader__phrase--left{transform:translateX(1.8rem)}
.preloader__phrase--right{transform:translateX(-1.8rem)}
.preloader.is-entering .preloader__phrase--left{transform:translateX(-1.1rem)}
.preloader.is-entering .preloader__phrase--right{transform:translateX(1.1rem)}

.preloader__logo{overflow:hidden;width:clamp(7.2rem,13vw,10.2rem);height:clamp(5.5rem,11vw,8.3rem)}

.preloader__logo-mark{
  display:block;width:100%;height:100%;padding:.35rem 1rem;box-sizing:border-box;
  background-color:var(--preloader-logo-color,#0e1010);
  -webkit-mask-image:var(--preloader-logo-url);mask-image:var(--preloader-logo-url);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  opacity:0;
  transform:translateY(-120%);
  transition:transform .85s cubic-bezier(.22,1,.36,1) .62s,opacity .5s ease .62s;
}
.preloader.is-entering .preloader__logo-mark{opacity:1;transform:translateY(0)}

.preloader.is-exiting .preloader__phrase span,
.preloader.is-exiting .preloader__logo-mark{transform:translateY(125%)}
.preloader.is-exiting{clip-path:inset(100% 0 0 0)}

@media(max-width:1024px){
  .preloader__row{flex-direction:column;gap:.42rem}
  .preloader__phrase--left,.preloader__phrase--right{opacity:0}
  .preloader__phrase--left{transform:translateY(-1.4rem)}
  .preloader__phrase--right{transform:translateY(1.4rem)}
  .preloader.is-entering .preloader__phrase--left,
  .preloader.is-entering .preloader__phrase--right{opacity:1;transform:translateY(0)}
  .preloader__phrase--left{transition:opacity .7s ease .18s,transform .9s cubic-bezier(.22,1,.36,1) .18s}
  .preloader__phrase--right{transition:opacity .7s ease .38s,transform .9s cubic-bezier(.22,1,.36,1) .38s}
  .preloader__logo{width:8rem;height:6.3rem}
}

@media(prefers-reduced-motion:reduce){
  .preloader,.preloader__bottom::after,.preloader__phrase,.preloader__phrase span,.preloader__logo,.preloader__logo-mark{
    transition-duration:.01ms!important;
  }
}