/* /public/css/mooody.css  (BRANCO sólido, SEM blur, topo branco travado) */
:root{
  /* Tamanho do logo (referência para a largura das faixas) */
  --mooody-logoW: min(76vw, 560px);

  /* Fundo branco sólido */
  --mooody-tint: rgba(255,255,255,1);

  /* Preset (JS sobrescreve) */
  --mooody-gap: 0px;
  --mooody-dur: 0.6s;
  --mooody-widthPct: 100;

  /* JS define: topo onde as faixas começam (topo do logo) */
  --mooody-dripTop: 0px;

  /* Ponta inclinada */
  --mooody-tipCut: 50px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }

/* Loader overlay */
.mooody-loader{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;

  background: var(--mooody-tint);

  /* sem blur */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;

  opacity: 1;
  transition: opacity 260ms ease;
}

.mooody-loader.is-hidden{
  opacity: 0;
  pointer-events: none;
}

/* camada opcional (desligada) */
.mooody-bg{
  display:none;
}

/* Faixas: começam NO TOPO DO LOGO (var --mooody-dripTop) */
.mooody-drip-area{
  position:absolute;
  left:50%;
  top: 0; /* <<< importante: começa no topo da tela */
  transform: translateX(-50%);
  width: calc(var(--mooody-logoW) * (var(--mooody-widthPct) / 100));
  height: 0px;            /* JS define */
  overflow:hidden;
  z-index: 1;             /* pode ficar atrás do logo */
  pointer-events:none;
}


.mooody-drips{
  position:absolute;
  inset:0;
  display:flex;
  gap: var(--mooody-gap);
  align-items:flex-start;
}

.mooody-drip{
  flex:1;
  height: calc(var(--end) * 1%);
  background: var(--c);

  transform-origin: top;
  transform: scaleY(0);      /* fechado antes de animar */
  will-change: transform;

  /* ponta padrão (reta) */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.mooody-drip[data-tip="left"]{
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    var(--mooody-tipCut) 100%,
    0 calc(100% - var(--mooody-tipCut))
  );
}

.mooody-drip[data-tip="right"]{
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--mooody-tipCut)),
    calc(100% - var(--mooody-tipCut)) 100%,
    0 100%
  );
}

/* animação em cascata (delay vem do JS em --delay) */
.mooody-loader.is-playing .mooody-drip{
  animation: mooodyDrop var(--mooody-dur) cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes mooodyDrop{
  to { transform: scaleY(1); }
}

/* Logo centralizado (por cima das faixas) */
.mooody-logo-box{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events:none;
}

.mooody-logo-svg{
  width: var(--mooody-logoW);
  height:auto;
  display:block;
}

.mooody-logo-fill{ fill:#010101; }