/* ============================================================
   VEIL — entry overlay
   ============================================================ */

.veil {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1.8s ease, visibility 0s linear 1.8s;
  padding: 24px;
}
.veil.gone { opacity: 0; visibility: hidden; pointer-events: none; }

.veil .veil-inner { text-align: center; }

.veil .word {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 72;
  font-size: clamp(36px, 6.4vw, 92px);
  color: var(--bone);
  line-height: 1;
  letter-spacing: -0.01em;
}
.veil .word em { color: var(--umber); }

.veil .veil-line {
  display: block;
  margin: 28px auto 32px;
  width: 0;
  height: 1px;
  background: var(--umber);
  animation: veilLine 1.8s cubic-bezier(0.65,0,0.35,1) forwards;
}

@keyframes veilLine {
  0%   { width: 0; }
  100% { width: min(240px, 60vw); }
}

.veil-enter {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--bone);
  background: transparent;
  border: 1px solid var(--bone-ghost);
  padding: 18px 30px;
  min-height: 52px;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
  opacity: 0;
  animation: veilBtn 1.4s cubic-bezier(0.16,1,0.3,1) forwards 1.6s;
  margin-top: 24px;
  position: relative;
  overflow: hidden;
}
.veil-enter::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--umber);
  transform: translateY(101%);
  transition: transform 0.6s cubic-bezier(0.65,0,0.35,1);
  z-index: 0;
}
.veil-enter:hover { color: var(--ink); border-color: var(--umber); }
.veil-enter:hover::after { transform: translateY(0); }
.veil-enter > * { position: relative; z-index: 1; }
.veil-enter .arrow { display: inline-block; transition: transform 0.5s ease; }
.veil-enter:hover .arrow { transform: translateX(5px); }

@keyframes veilBtn {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

.veil .veil-hint {
  display: block;
  margin-top: 18px;
  font-family: var(--italic);
  font-style: italic;
  font-size: 12px;
  color: var(--bone-faint);
  opacity: 0;
  animation: veilBtn 1.4s ease forwards 2.4s;
}

/* Mobile */
@media (max-width: 480px) {
  .veil-enter { padding: 16px 24px; font-size: 10px; }
}