/**
 * Blueprint Veil — assinatura VelumCode
 * Escultura digital de engenharia. Uma linha cyan. Sofisticação silenciosa.
 */

.velum-construct {
  --vc-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --vc-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --vc-build: 12.5s;
  --vc-alive-delay: 12.8s;
  --vc-veil-x: 12px;
  --vc-veil-y: -20px;
  --vc-veil-rot: -2.25deg;
  --vc-ink: rgba(10, 15, 28, 0.1);
  --vc-ink-soft: rgba(10, 15, 28, 0.045);
  --vc-structure-edge: rgba(10, 15, 28, 0.07);
  --vc-plane-fill: rgba(226, 232, 240, 0.55);
  --vc-plane-edge: rgba(10, 15, 28, 0.08);
  --vc-veil-fill-a: rgba(255, 255, 255, 0.96);
  --vc-veil-fill-b: rgba(248, 250, 252, 0.78);
  --vc-veil-fill-c: rgba(226, 232, 240, 0.58);
  --vc-veil-edge: rgba(10, 15, 28, 0.14);
  --vc-clarity: var(--color-accent-500);
  --vc-reg: rgba(10, 15, 28, 0.16);

  position: relative;
  width: 100%;
  max-width: 24rem;
  margin: 0;
  aspect-ratio: 1 / 1.05;
  opacity: 1;
}

.velum-construct--compact {
  --vc-build: 10.5s;
  --vc-alive-delay: 10.8s;
  max-width: 17rem;
  opacity: 0.9;
}

.velum-construct--solo {
  max-width: 12rem;
  aspect-ratio: 1;
  opacity: 0.88;
}

.velum-construct__field {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}

/* Grid — ~40% fewer lines, atmosphere only */
.velum-construct__grid {
  position: absolute;
  inset: 10%;
  z-index: 0;
  opacity: 0.45;
  background-image:
    linear-gradient(var(--vc-ink-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--vc-ink-soft) 1px, transparent 1px);
  background-size: 2.7rem 2.7rem;
  mask-image: radial-gradient(ellipse 68% 64% at 48% 50%, black 12%, transparent 100%);
  pointer-events: none;
}

/* Registration — secondary whisper */
.velum-construct__reg {
  position: absolute;
  z-index: 4;
  width: 0.5rem;
  height: 0.5rem;
  pointer-events: none;
  opacity: 0.65;
}

.velum-construct__reg::before,
.velum-construct__reg::after {
  content: '';
  position: absolute;
  background: var(--vc-reg);
}

.velum-construct__reg::before {
  width: 100%;
  height: 1px;
  top: 0;
  left: 0;
}

.velum-construct__reg::after {
  width: 1px;
  height: 100%;
  top: 0;
  left: 0;
}

.velum-construct__reg--tl { top: 6%; left: 6%; }
.velum-construct__reg--tr {
  top: 6%;
  right: 6%;
}
.velum-construct__reg--tr::before { left: auto; right: 0; }
.velum-construct__reg--tr::after { left: auto; right: 0; }

.velum-construct__reg--bl {
  bottom: 6%;
  left: 6%;
}
.velum-construct__reg--bl::before { top: auto; bottom: 0; }
.velum-construct__reg--bl::after { top: auto; bottom: 0; }

.velum-construct__reg--br {
  bottom: 6%;
  right: 6%;
}
.velum-construct__reg--br::before { top: auto; bottom: 0; left: auto; right: 0; }
.velum-construct__reg--br::after { top: auto; bottom: 0; left: auto; right: 0; }

/* Cotas — secondary, nearly atmospheric */
.velum-construct__cota {
  position: absolute;
  z-index: 3;
  display: flex;
  pointer-events: none;
  opacity: 0.55;
}

.velum-construct__cota span {
  background: rgba(10, 15, 28, 0.1);
}

.velum-construct__cota--h {
  top: 11%;
  left: 28%;
  right: 28%;
  height: 1px;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(10, 15, 28, 0.06) 15%,
    rgba(10, 15, 28, 0.06) 85%,
    transparent
  );
}

.velum-construct__cota--h span {
  width: 1px;
  height: 0.3rem;
}

.velum-construct__cota--v {
  top: 26%;
  bottom: 22%;
  left: 11%;
  width: 1px;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(10, 15, 28, 0.06) 15%,
    rgba(10, 15, 28, 0.06) 85%,
    transparent
  );
}

.velum-construct__cota--v span {
  width: 0.3rem;
  height: 1px;
}

/* Structure — recessed planes under the Velum */
.velum-construct__structure {
  position: absolute;
  inset: 18% 20% 20% 22%;
  z-index: 1;
  transform-style: preserve-3d;
}

.velum-construct__mass {
  position: absolute;
  border: 1px solid var(--vc-structure-edge);
  border-radius: 2px;
}

/* Secondary plane — soft, recessed */
.velum-construct__mass--a {
  top: 6%;
  left: 10%;
  right: 14%;
  height: 30%;
  background: linear-gradient(
    160deg,
    rgba(241, 245, 249, 0.42) 0%,
    rgba(226, 232, 240, 0.22) 100%
  );
  box-shadow:
    0 12px 32px rgba(10, 15, 28, 0.03),
    0 2px 6px rgba(10, 15, 28, 0.015);
  transform: translate3d(-4px, 10px, 0);
  opacity: 0.58;
}

/* Quiet mid mass — nearly dissolved */
.velum-construct__mass--b {
  top: 40%;
  left: 20%;
  width: 40%;
  height: 24%;
  background: rgba(226, 232, 240, 0.16);
  border-color: rgba(10, 15, 28, 0.04);
  box-shadow: 0 8px 20px rgba(10, 15, 28, 0.018);
  transform: translate3d(4px, 16px, 0);
  opacity: 0.35;
}

/* Supporting base — clearer foundation under the Velum */
.velum-construct__mass--c {
  bottom: 2%;
  left: 8%;
  right: 8%;
  height: 28%;
  background: linear-gradient(
    180deg,
    rgba(241, 245, 249, 0.7) 0%,
    rgba(226, 232, 240, 0.48) 100%
  );
  border-color: rgba(10, 15, 28, 0.1);
  box-shadow:
    0 18px 42px rgba(10, 15, 28, 0.055),
    0 6px 14px rgba(10, 15, 28, 0.03);
  transform: translate3d(0, 18px, 0);
  opacity: 0.9;
}

.velum-construct__axis {
  position: absolute;
  top: 10%;
  bottom: 8%;
  left: 50%;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--vc-ink) 22%,
    var(--vc-ink) 78%,
    transparent
  );
  transform: translateX(-50%);
  opacity: 0.4;
}

.velum-construct__rail {
  position: absolute;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: var(--vc-ink-soft);
  opacity: 0.55;
}

.velum-construct__rail--l { left: 6%; }
.velum-construct__rail--r { right: 6%; }

/* Primary layer — the Velum: floating sculpture plane */
.velum-construct__veil {
  position: absolute;
  top: 24%;
  left: 17%;
  z-index: 2;
  width: 58%;
  height: 42%;
  transform: translate3d(12px, -20px, 0) rotate(-2.25deg);
  pointer-events: none;
  filter: drop-shadow(0 28px 48px rgba(10, 15, 28, 0.09));
}

.velum-construct__veil-surface {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--vc-veil-edge);
  border-radius: 3px;
  background: linear-gradient(
    152deg,
    var(--vc-veil-fill-a) 0%,
    var(--vc-veil-fill-b) 38%,
    var(--vc-veil-fill-c) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 -1px 0 rgba(10, 15, 28, 0.04) inset,
    0 32px 64px rgba(10, 15, 28, 0.1),
    0 12px 28px rgba(10, 15, 28, 0.05),
    0 3px 8px rgba(10, 15, 28, 0.03);
  backdrop-filter: blur(12px) saturate(1.06);
  -webkit-backdrop-filter: blur(12px) saturate(1.06);
}

.velum-construct__veil-edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.95) 28%,
    rgba(203, 213, 225, 0.4) 100%
  );
  opacity: 0.9;
}

/* Cyan — signature detail only, never a focal beam */
.velum-construct__clarity {
  position: absolute;
  top: 45%;
  left: 22%;
  right: 28%;
  z-index: 3;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--vc-clarity) 20%,
    var(--vc-clarity) 70%,
    transparent 100%
  );
  opacity: 0.48;
  transform: scaleX(1);
  transform-origin: left center;
  pointer-events: none;
}

.velum-construct__mark {
  position: absolute;
  right: 10%;
  bottom: 9%;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: 0.12em;
  color: rgba(10, 15, 28, 0.2);
  pointer-events: none;
}

/* Compact / solo — quieter */
.velum-construct--compact .velum-construct__cota,
.velum-construct--solo .velum-construct__cota,
.velum-construct--solo .velum-construct__rail,
.velum-construct--solo .velum-construct__mark {
  display: none;
}

.velum-construct--solo .velum-construct__mass--b {
  display: none;
}

.velum-construct--solo .velum-construct__veil {
  top: 28%;
  left: 18%;
  width: 56%;
  height: 42%;
}

/* ==========================================================================
   Living construction — 10–15s choreography, then minimal ambient life
   Peripheral only. Never competes with H1.
   ========================================================================== */

.velum-construct--animated .velum-construct__grid,
.velum-construct--animated .velum-construct__reg,
.velum-construct--animated .velum-construct__cota,
.velum-construct--animated .velum-construct__mass,
.velum-construct--animated .velum-construct__axis,
.velum-construct--animated .velum-construct__rail,
.velum-construct--animated .velum-construct__veil,
.velum-construct--animated .velum-construct__clarity,
.velum-construct--animated .velum-construct__mark {
  opacity: 0;
}

.velum-construct--animated .velum-construct__rail,
.velum-construct--animated .velum-construct__axis {
  transform: scaleY(0);
  transform-origin: top center;
}

.velum-construct--animated .velum-construct__clarity {
  transform: scaleX(0.04);
}

.velum-construct--animated .velum-construct__veil {
  transform: translate3d(var(--vc-veil-x), calc(var(--vc-veil-y) + 14px), 0) rotate(var(--vc-veil-rot));
  filter: drop-shadow(0 8px 18px rgba(10, 15, 28, 0.02));
}

/* Gate: hero waits for .animate-ready; compact/solo starts immediately */
.animate-ready .velum-construct--animated .velum-construct__grid,
.velum-construct--animated:not(.js-hero-parallax) .velum-construct__grid {
  animation: vc-grid-in var(--vc-build) var(--vc-ease-soft) both;
}

.animate-ready .velum-construct--animated .velum-construct__rail--l,
.velum-construct--animated:not(.js-hero-parallax) .velum-construct__rail--l {
  animation: vc-line-draw var(--vc-build) var(--vc-ease-soft) both;
}

.animate-ready .velum-construct--animated .velum-construct__rail--r,
.velum-construct--animated:not(.js-hero-parallax) .velum-construct__rail--r {
  animation: vc-line-draw var(--vc-build) var(--vc-ease-soft) both;
  animation-delay: 0.35s;
}

.animate-ready .velum-construct--animated .velum-construct__axis,
.velum-construct--animated:not(.js-hero-parallax) .velum-construct__axis {
  animation: vc-axis-draw var(--vc-build) var(--vc-ease-soft) both;
}

.animate-ready .velum-construct--animated .velum-construct__reg--tl,
.velum-construct--animated:not(.js-hero-parallax) .velum-construct__reg--tl {
  animation: vc-detail-in var(--vc-build) var(--vc-ease-soft) both;
}

.animate-ready .velum-construct--animated .velum-construct__reg--tr,
.velum-construct--animated:not(.js-hero-parallax) .velum-construct__reg--tr {
  animation: vc-detail-in var(--vc-build) var(--vc-ease-soft) 0.2s both;
}

.animate-ready .velum-construct--animated .velum-construct__reg--bl,
.velum-construct--animated:not(.js-hero-parallax) .velum-construct__reg--bl {
  animation: vc-detail-in var(--vc-build) var(--vc-ease-soft) 0.35s both;
}

.animate-ready .velum-construct--animated .velum-construct__reg--br,
.velum-construct--animated:not(.js-hero-parallax) .velum-construct__reg--br {
  animation: vc-detail-in var(--vc-build) var(--vc-ease-soft) 0.5s both;
}

.animate-ready .velum-construct--animated .velum-construct__mass--c,
.velum-construct--animated:not(.js-hero-parallax) .velum-construct__mass--c {
  animation: vc-mass-c var(--vc-build) var(--vc-ease-soft) both;
}

.animate-ready .velum-construct--animated .velum-construct__mass--a,
.velum-construct--animated:not(.js-hero-parallax) .velum-construct__mass--a {
  animation: vc-mass-a var(--vc-build) var(--vc-ease-soft) both;
}

.animate-ready .velum-construct--animated .velum-construct__mass--b,
.velum-construct--animated:not(.js-hero-parallax) .velum-construct__mass--b {
  animation: vc-mass-b var(--vc-build) var(--vc-ease-soft) both;
}

.animate-ready .velum-construct--animated .velum-construct__cota--h,
.velum-construct--animated:not(.js-hero-parallax) .velum-construct__cota--h {
  animation: vc-cota-in var(--vc-build) var(--vc-ease-soft) both;
}

.animate-ready .velum-construct--animated .velum-construct__cota--v,
.velum-construct--animated:not(.js-hero-parallax) .velum-construct__cota--v {
  animation: vc-cota-in var(--vc-build) var(--vc-ease-soft) 0.25s both;
}

.animate-ready .velum-construct--animated .velum-construct__veil,
.velum-construct--animated:not(.js-hero-parallax) .velum-construct__veil {
  animation: vc-veil-build var(--vc-build) var(--vc-ease-soft) both;
}

.animate-ready .velum-construct--animated .velum-construct__veil-surface,
.velum-construct--animated:not(.js-hero-parallax) .velum-construct__veil-surface {
  animation: vc-veil-alive 16s ease-in-out var(--vc-alive-delay) infinite;
}

.animate-ready .velum-construct--animated .velum-construct__clarity,
.velum-construct--animated:not(.js-hero-parallax) .velum-construct__clarity {
  animation:
    vc-clarity-draw var(--vc-build) var(--vc-ease-soft) both,
    vc-clarity-alive 11s ease-in-out var(--vc-alive-delay) infinite;
}

.animate-ready .velum-construct--animated .velum-construct__mark,
.velum-construct--animated:not(.js-hero-parallax) .velum-construct__mark {
  animation: vc-mark-in var(--vc-build) var(--vc-ease-soft) both;
}

/* Construction keyframes — percentages map across ~12.5s */
@keyframes vc-grid-in {
  0% { opacity: 0; }
  8% { opacity: 0; }
  28% { opacity: 0.45; }
  100% { opacity: 0.45; }
}

@keyframes vc-line-draw {
  0%, 6% {
    opacity: 0;
    transform: scaleY(0);
  }
  22% {
    opacity: 0.55;
    transform: scaleY(1);
  }
  100% {
    opacity: 0.55;
    transform: scaleY(1);
  }
}

@keyframes vc-axis-draw {
  0%, 10% {
    opacity: 0;
    transform: translateX(-50%) scaleY(0);
  }
  30% {
    opacity: 0.4;
    transform: translateX(-50%) scaleY(1);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-50%) scaleY(1);
  }
}

@keyframes vc-detail-in {
  0%, 14% { opacity: 0; }
  32% { opacity: 0.65; }
  100% { opacity: 0.65; }
}

@keyframes vc-mass-c {
  0%, 16% {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }
  42% {
    opacity: 0.9;
    transform: translate3d(0, 18px, 0);
  }
  100% {
    opacity: 0.9;
    transform: translate3d(0, 18px, 0);
  }
}

@keyframes vc-mass-a {
  0%, 26% {
    opacity: 0;
    transform: translate3d(-4px, 18px, 0);
  }
  50% {
    opacity: 0.58;
    transform: translate3d(-4px, 10px, 0);
  }
  100% {
    opacity: 0.58;
    transform: translate3d(-4px, 10px, 0);
  }
}

@keyframes vc-mass-b {
  0%, 34% {
    opacity: 0;
    transform: translate3d(4px, 22px, 0);
  }
  56% {
    opacity: 0.35;
    transform: translate3d(4px, 16px, 0);
  }
  100% {
    opacity: 0.35;
    transform: translate3d(4px, 16px, 0);
  }
}

@keyframes vc-cota-in {
  0%, 38% {
    opacity: 0;
    transform: translateY(3px);
  }
  58% {
    opacity: 0.55;
    transform: translateY(0);
  }
  100% {
    opacity: 0.55;
    transform: translateY(0);
  }
}

@keyframes vc-veil-build {
  0%, 42% {
    opacity: 0;
    transform: translate3d(var(--vc-veil-x), calc(var(--vc-veil-y) + 14px), 0) rotate(var(--vc-veil-rot));
    filter: drop-shadow(0 8px 18px rgba(10, 15, 28, 0.02));
  }
  58% {
    opacity: 0.55;
    transform: translate3d(var(--vc-veil-x), calc(var(--vc-veil-y) + 4px), 0) rotate(var(--vc-veil-rot));
    filter: drop-shadow(0 18px 34px rgba(10, 15, 28, 0.05));
  }
  78% {
    opacity: 1;
    transform: translate3d(var(--vc-veil-x), var(--vc-veil-y), 0) rotate(var(--vc-veil-rot));
    filter: drop-shadow(0 28px 48px rgba(10, 15, 28, 0.09));
  }
  100% {
    opacity: 1;
    transform: translate3d(var(--vc-veil-x), var(--vc-veil-y), 0) rotate(var(--vc-veil-rot));
    filter: drop-shadow(0 28px 48px rgba(10, 15, 28, 0.09));
  }
}

/* Cyan signature traverses the structure */
@keyframes vc-clarity-draw {
  0%, 60% {
    opacity: 0;
    transform: scaleX(0.04);
  }
  68% {
    opacity: 0.28;
    transform: scaleX(0.45);
  }
  82% {
    opacity: 0.48;
    transform: scaleX(1);
  }
  100% {
    opacity: 0.48;
    transform: scaleX(1);
  }
}

@keyframes vc-mark-in {
  0%, 78% { opacity: 0; }
  92% { opacity: 0.2; }
  100% { opacity: 0.2; }
}

/* Ambient life — barely perceptible, peripheral only */
@keyframes vc-veil-alive {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.5px);
  }
}

@keyframes vc-clarity-alive {
  0%, 100% { opacity: 0.42; }
  50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .velum-construct--animated .velum-construct__grid,
  .velum-construct--animated .velum-construct__reg,
  .velum-construct--animated .velum-construct__cota,
  .velum-construct--animated .velum-construct__mass,
  .velum-construct--animated .velum-construct__axis,
  .velum-construct--animated .velum-construct__rail,
  .velum-construct--animated .velum-construct__veil,
  .velum-construct--animated .velum-construct__veil-surface,
  .velum-construct--animated .velum-construct__clarity,
  .velum-construct--animated .velum-construct__mark {
    animation: none !important;
    opacity: revert;
    transform: none;
    filter: none;
  }

  .velum-construct--animated .velum-construct__grid { opacity: 0.45; }
  .velum-construct--animated .velum-construct__reg { opacity: 0.65; }
  .velum-construct--animated .velum-construct__cota { opacity: 0.55; }
  .velum-construct--animated .velum-construct__mass--a {
    opacity: 0.58;
    transform: translate3d(-4px, 10px, 0);
  }
  .velum-construct--animated .velum-construct__mass--b {
    opacity: 0.35;
    transform: translate3d(4px, 16px, 0);
  }
  .velum-construct--animated .velum-construct__mass--c {
    opacity: 0.9;
    transform: translate3d(0, 18px, 0);
  }
  .velum-construct--animated .velum-construct__axis {
    opacity: 0.4;
    transform: translateX(-50%);
  }
  .velum-construct--animated .velum-construct__rail { opacity: 0.55; }
  .velum-construct--animated .velum-construct__veil {
    opacity: 1;
    transform: translate3d(var(--vc-veil-x), var(--vc-veil-y), 0) rotate(var(--vc-veil-rot));
    filter: drop-shadow(0 28px 48px rgba(10, 15, 28, 0.09));
  }
  .velum-construct--animated .velum-construct__clarity {
    opacity: 0.48;
    transform: scaleX(1);
  }
  .velum-construct--animated .velum-construct__mark { opacity: 0.2; }
}

@media (max-width: 767px) {
  .velum-construct--hero {
    --vc-veil-x: 10px;
    --vc-veil-y: -16px;
    --vc-build: 11s;
    --vc-alive-delay: 11.3s;
    max-width: 17.5rem;
    margin-inline: auto;
  }

  .velum-construct--hero .velum-construct__cota--v {
    display: none;
  }
}

@media (hover: hover) {
  .velum-construct--hero .velum-construct__clarity {
    transition: opacity 280ms var(--vc-ease);
  }

  .velum-construct--hero:hover .velum-construct__clarity {
    opacity: 0.54;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .velum-construct__veil-surface {
    background: linear-gradient(
      152deg,
      rgba(248, 250, 252, 0.96) 0%,
      rgba(226, 232, 240, 0.72) 100%
    );
  }
}