/* Abertura (intro) da home — coreografia em intro.js */

/* Cobre a página até o intro.js montar a cena (evita flash do hero). */
html.ix-pending::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ede4dd;
}

html.ix-running,
html.ix-running body {
  overflow: hidden;
}

html.ix-running .custom-cursor {
  display: none;
}

.ix-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #ede4dd;
  color: #ff0001;
  font-family: "Neue Haas", Arial, sans-serif;
  pointer-events: all;
  overflow: hidden;
  will-change: clip-path;
}

.ix-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}

.ix-card {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(150px, 13vw, 300px);
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  background: #d2cac3;
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.ix-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ix-word {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
  margin: 0;
  white-space: nowrap;
  font-size: clamp(40px, 5.4vw, 130px);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.ix-word .ix-reg {
  font-size: 0.13em;
  letter-spacing: 0;
  margin-left: 0.12em;
}

.ix-counter {
  position: absolute;
  right: -2.4em;
  top: -1.1em;
  font-size: clamp(11px, 0.85vw, 17px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ix-counter span {
  display: inline-block;
}

/* Máscara de baseline: o glifo sobe/desce por uma linha invisível. */
.ix-mask {
  display: inline-block;
  vertical-align: baseline;
  clip-path: inset(-1em -0.2em 0 -0.2em);
}

.ix-glyph {
  display: inline-block;
  will-change: transform;
}

@media (max-width: 767px) {
  .ix-card {
    width: 42vw;
  }
  .ix-word {
    font-size: 11.5vw;
  }
  .ix-counter {
    right: -1.8em;
    top: -2.2em;
  }
}