/* GuildaHUB home opening — shared by /, /index and /inicio only. */
html.home-intro-running { overflow: hidden; }

.home-intro {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--theme-accent) 13%, transparent) 0, transparent 34%),
    linear-gradient(145deg, var(--theme-bg) 0%, color-mix(in srgb, var(--theme-surface) 92%, #000) 100%);
  color: var(--theme-text);
  opacity: 1;
  transition: opacity .65s cubic-bezier(.2,.75,.25,1), filter .65s ease;
  animation: homeIntroFailsafe .01s linear 9.5s forwards;
}

.home-intro::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -2;
  background-image:
    linear-gradient(color-mix(in srgb, var(--theme-accent) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--theme-accent) 7%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle, #000 0%, transparent 63%);
  opacity: 0;
  transform: perspective(620px) rotateX(62deg) translateY(22%);
  animation: homeIntroGrid 1.2s .18s ease forwards;
}

.home-intro::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: min(480px, 72vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--theme-accent) 78%, white), transparent);
  opacity: 0;
  transform: translateX(-50%) scaleX(.15);
  animation: homeIntroFloor .8s 1.35s ease forwards;
}

.home-intro__ambient {
  position: absolute;
  width: min(620px, 88vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent) 17%, transparent), transparent 66%);
  filter: blur(12px);
  opacity: 0;
  transform: scale(.55);
  animation: homeIntroAmbient 1.15s .2s ease forwards;
}

.home-intro__stage {
  position: relative;
  display: grid;
  min-width: min(680px, 92vw);
  min-height: 280px;
  place-items: center;
}

.home-intro__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 32%, transparent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.home-intro__orbit::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--theme-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--theme-accent) 72%, transparent);
}

.home-intro__orbit--outer {
  width: 270px;
  height: 270px;
  margin: -135px 0 0 -135px;
  animation:
    homeIntroOrbit .9s .3s ease forwards,
    homeIntroSpin 8s 1.2s linear infinite;
}

.home-intro__orbit--inner {
  width: 218px;
  height: 218px;
  margin: -109px 0 0 -109px;
  border-style: dashed;
  animation:
    homeIntroOrbit .9s .42s ease forwards,
    homeIntroSpinReverse 7s 1.3s linear infinite;
}

.home-intro__brand {
  --home-intro-logo-size: clamp(90px, 10vw, 124px);
  --home-intro-brand-gap: clamp(18px, 3vw, 32px);
  position: relative;
  z-index: 2;
  display: block;
  width: min(760px, 88vw);
  height: var(--home-intro-logo-size);
  will-change: transform, opacity, filter;
  transition:
    transform .65s cubic-bezier(.2,.72,.2,1),
    opacity .55s ease,
    filter .65s ease;
}

.home-intro__logo-shell {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: var(--home-intro-logo-size);
  aspect-ratio: 1;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.58) rotate(-8deg);
  animation:
    homeIntroLogoJourney 3.2s .08s cubic-bezier(.2,.72,.22,1) forwards,
    homeIntroLogoGlow 1.55s 3.15s ease-in-out infinite alternate;
}

.home-intro__logo-shell img {
  display: block;
  width: 82%;
  height: 82%;
  object-fit: contain;
  filter:
    drop-shadow(0 12px 20px color-mix(in srgb, #000 38%, transparent))
    drop-shadow(0 0 16px color-mix(in srgb, var(--theme-accent) 16%, transparent));
}

.home-intro__logo-scan {
  display: none;
}

.home-intro__wordmark {
  position: absolute;
  left: calc(var(--home-intro-logo-size) + var(--home-intro-brand-gap));
  top: 50%;
  display: grid;
  gap: 13px;
  width: calc(100% - var(--home-intro-logo-size) - var(--home-intro-brand-gap));
  min-width: 0;
  transform: translateY(-50%);
}

.home-intro__wordmark-main {
  display: flex;
  align-items: baseline;
  font-size: clamp(2.6rem, 7vw, 5.9rem);
  font-weight: 950;
  letter-spacing: -.075em;
  line-height: .9;
  white-space: nowrap;
  padding: .08em .16em .08em .03em;
  margin: -.08em -.16em -.08em -.03em;
}

.home-intro__wordmark-main span,
.home-intro__wordmark-main strong { display: flex; }
.home-intro__wordmark-main span { color: var(--theme-text); }
.home-intro__wordmark-main strong {
  color: var(--theme-accent);
  font: inherit;
  text-shadow: 0 0 30px color-mix(in srgb, var(--theme-accent) 22%, transparent);
}

.home-intro__wordmark-main i {
  display: inline-block;
  font: inherit;
  font-style: normal;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(.34em) scale(.72);
  animation: homeIntroLetter .46s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(1.88s + (var(--letter) * .11s));
}

.home-intro__signal {
  position: relative;
  display: grid;
  height: 12px;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: homeIntroSignalIn .45s 3.02s ease forwards;
}

.home-intro__signal span {
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--theme-accent), color-mix(in srgb, var(--theme-accent) 20%, transparent));
  transform: scaleX(0);
  transform-origin: left;
  animation: homeIntroSignalLine .72s 3.02s ease forwards;
}

.home-intro__signal i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--theme-accent);
  opacity: 0;
  transform: scale(0);
  animation: homeIntroSignalNode .3s ease forwards;
}

.home-intro__signal i:nth-child(2) { animation-delay: 3.42s; }
.home-intro__signal i:nth-child(3) { animation-delay: 3.56s; }
.home-intro__signal i:nth-child(4) { animation-delay: 3.7s; }

.home-intro__tagline {
  position: absolute;
  left: 50%;
  top: calc(50% + 96px);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--theme-muted);
  font-size: clamp(.62rem, 1.35vw, .75rem);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 10px);
  animation: homeIntroTagline .72s 3.62s ease forwards;
}

.home-intro__tagline span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--theme-accent);
}

.home-intro.is-exiting {
  opacity: 0;
  filter: blur(1px);
  pointer-events: none;
}

.home-intro.is-exiting .home-intro__brand {
  opacity: 0;
  filter: blur(16px);
  transform: scale(1.65);
}

.home-intro.is-exiting .home-intro__ambient,
.home-intro.is-exiting .home-intro__orbit,
.home-intro.is-exiting .home-intro__tagline {
  opacity: 0;
  transition: opacity .35s ease;
}

@keyframes homeIntroLogoJourney {
  0% { left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.58) rotate(-8deg); }
  24% { left: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  42% { left: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  82%, 100% { left: 0; opacity: 1; transform: translate(0, -50%) scale(1) rotate(0); }
}
@keyframes homeIntroLogoGlow {
  to { filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--theme-accent) 18%, transparent)); }
}
@keyframes homeIntroScan { to { inset-inline: 120% -80%; } }
@keyframes homeIntroLetter { to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } }
@keyframes homeIntroSignalIn { to { opacity: 1; } }
@keyframes homeIntroSignalLine { to { transform: scaleX(1); } }
@keyframes homeIntroSignalNode { to { opacity: 1; transform: scale(1); } }
@keyframes homeIntroTagline { to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes homeIntroAmbient { to { opacity: 1; transform: scale(1); } }
@keyframes homeIntroOrbit { to { opacity: .52; } }
@keyframes homeIntroSpin { to { transform: rotate(360deg); } }
@keyframes homeIntroSpinReverse { to { transform: rotate(-360deg); } }
@keyframes homeIntroGrid { to { opacity: .7; } }
@keyframes homeIntroFloor { to { opacity: .7; transform: translateX(-50%) scaleX(1); } }
@keyframes homeIntroFailsafe { to { visibility: hidden; pointer-events: none; } }

@media (max-width: 620px) {
  .home-intro__stage { min-width: min(390px, 94vw); min-height: 340px; }
  .home-intro__brand {
    --home-intro-logo-size: clamp(66px, 21vw, 88px);
    --home-intro-brand-gap: 14px;
    width: min(360px, 92vw);
  }
  .home-intro__logo-shell { width: var(--home-intro-logo-size); }
  .home-intro__wordmark-main { font-size: clamp(1.9rem, 11.5vw, 3.15rem); }
  .home-intro__wordmark { gap: 9px; }
  .home-intro__tagline { top: calc(50% + 78px); gap: 7px; letter-spacing: .1em; }
  .home-intro__orbit--outer { width: 220px; height: 220px; margin: -110px 0 0 -110px; }
  .home-intro__orbit--inner { width: 178px; height: 178px; margin: -89px 0 0 -89px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-intro { display: none; }
  html.home-intro-running { overflow: auto; }
}