/* Tela de carregamento (contador do mês + marcações + ornamento ASCII) */

body.is-loading {
  overflow: hidden;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--red);
  color: var(--ink);
  overflow: hidden;
  transition: opacity 0.5s ease;
  cursor: pointer;
}

.loader::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url('../../assets/img/textura-5.jpg') center / 700px auto repeat;
  mix-blend-mode: overlay;
  opacity: 0.35;
}

.loader.is-leaving {
  opacity: 0;
}

/* ---------- contador (ref01.gif) ---------- */

.loader__counter {
  position: absolute;
  inset: 0;
  font-family: var(--font-borgy);
  font-size: clamp(44px, 9vw, 150px);
  line-height: 1;
  transition: opacity 0.4s ease, transform 0.6s var(--ease);
}

.loader.is-finale .loader__counter {
  opacity: 0;
  transform: scale(0.96);
}

.loader__day,
.loader__month {
  position: absolute;
  top: 50%;
  left: 0;
  white-space: nowrap;
  translate: 0 -50%;
}

.loader__day {
  will-change: transform;
}

.loader__num {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.loader__month {
  visibility: hidden;
}

.loader.is-ready .loader__month {
  visibility: visible;
}

/* ---------- marcações à mão (Remember, seta, !, círculo, sublinhado) ---------- */

.loader__mark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--white);
  z-index: 2;
}

.loader__mark svg {
  position: absolute;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loader__mark svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mark-draw 0.32s var(--ease-out) forwards;
}

@keyframes mark-draw {
  to { stroke-dashoffset: 0; }
}

.mark--circle {
  left: -28%;
  top: -18%;
  width: 156%;
  height: 136%;
}

.mark--underline {
  left: -10%;
  bottom: -14%;
  width: 120%;
  height: 22%;
}

.mark--arrow {
  right: -55%;
  bottom: 70%;
  width: 90%;
  height: 90%;
}

.mark--bang {
  right: -22%;
  top: -8%;
  width: 22%;
  height: 100%;
}

.mark--bang path:last-child {
  stroke-width: 9;
}

.mark__label {
  position: absolute;
  left: -40%;
  bottom: 62%;
  font-family: var(--font-script);
  font-size: 0.36em;
  white-space: nowrap;
  color: var(--white);
  rotate: -22deg;
  transform-origin: left bottom;
  animation: mark-label 0.35s var(--ease-out) both;
}

@keyframes mark-label {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 -10% 0 0); }
}

.mark__sparkle {
  position: absolute;
  width: 0.9em;
  right: -70%;
  top: -55%;
  animation: mark-pop 0.45s var(--ease-out) both;
}

.mark__star {
  position: absolute;
  width: 0.8em;
  left: -60%;
  bottom: -40%;
  filter: url(#tint-yellow);
  animation: mark-pop 0.45s var(--ease-out) both;
}

@keyframes mark-pop {
  from { scale: 0; rotate: -30deg; opacity: 0; }
  to { scale: 1; rotate: 0deg; opacity: 1; }
}

/* ---------- final: ornamento em ASCII ---------- */

.loader__finale {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.loader__ornament {
  grid-area: 1 / 1;
  margin: 0;
  font-family: 'Segoe UI Symbol', 'Apple Symbols', 'DejaVu Sans', monospace;
  font-size: clamp(8px, 1.7vw, 28px);
  line-height: 1.02;
  color: var(--white);
  white-space: pre;
  opacity: 0;
}

.loader__ornament .line {
  display: block;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 0.7s var(--ease);
  transition-delay: calc(var(--i) * 35ms);
}

.loader.is-finale .loader__ornament {
  opacity: 1;
}

.loader.is-finale .loader__ornament .line {
  clip-path: inset(0 0 0 0);
}

.loader__skip {
  position: absolute;
  right: var(--pad);
  bottom: calc(var(--pad) * 0.75);
  z-index: 3;
  border: 0;
  background: none;
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink);
  opacity: 0.55;
  cursor: pointer;
}

.loader__skip:hover {
  opacity: 1;
}