/* Abertura: logo desenhado, barra de carregamento, traço laranja, ponto que
   cai e círculo que se abre a partir dele (tempos do eezyinn). */

@property --hole { syntax: "<length>"; inherits: false; initial-value: 0px; }

.intro { display: none; }
html.has-intro { overflow: hidden; }
.has-intro .intro {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--warm);
}
.intro__stage { position: relative; display: grid; gap: 20px; width: min(60vw, 420px); }
.intro__logo { width: 100%; height: auto; overflow: visible; }
.intro__letter {
  fill: transparent;
  stroke: var(--warm);
  stroke-width: 10;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: intro-draw 0.95s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--n) * 20ms) forwards;
}
@keyframes intro-draw {
  70% { stroke-dashoffset: 0; fill: transparent; }
  100% { stroke-dashoffset: 0; fill: var(--warm); stroke: transparent; }
}

/* O traço laranja acompanha o carregamento (--load de 0 a 1). */
.intro__line { width: 76%; height: auto; justify-self: end; overflow: visible; }
.intro__line path {
  fill: none;
  stroke: var(--sun);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--load, 0));
}

.intro__meter { display: flex; align-items: center; gap: 14px; }
.intro__bar { flex: 1; height: 1px; background: color-mix(in srgb, var(--warm) 22%, transparent); }
.intro__bar i { display: block; height: 100%; background: var(--warm); transform-origin: left center; transform: scaleX(0); }
.intro__pct { min-width: 3ch; font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }

/* O ponto cai no fim do traço. */
.intro__dot {
  position: fixed;
  left: var(--dot-x, 50%);
  top: var(--dot-y, 50%);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--sun);
  opacity: 0;
}
.intro.is-landing .intro__dot { animation: intro-dot-land 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes intro-dot-land {
  0% { opacity: 0; transform: translateY(-260%) scale(0.6); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; box-shadow: 0 0 10px color-mix(in srgb, var(--sun) 80%, transparent); }
}

/* Círculo que se abre a partir do ponto. */
.intro.is-open {
  -webkit-mask: radial-gradient(circle at var(--ox, 50%) var(--oy, 50%), transparent var(--hole), var(--ink) calc(var(--hole) + 1px));
  mask: radial-gradient(circle at var(--ox, 50%) var(--oy, 50%), transparent var(--hole), var(--ink) calc(var(--hole) + 1px));
  animation: intro-open 0.78s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}
@keyframes intro-open { from { --hole: 0px; } to { --hole: 160vmax; } }

.has-intro.intro-skip .intro { animation: intro-skip 0.28s var(--ease-out) forwards; }
@keyframes intro-skip { to { opacity: 0; visibility: hidden; } }