/* Splash intro — solo index.html (#intro) */

body.intro-active {
  overflow: hidden;
}

#intro {
  --intro-lift: clamp(1rem, 4vh, 2.75rem);
  --intro-title-gap: clamp(0.35rem, 3vh, 1.5rem);
  --intro-title-drop: 0;
  --intro-stack-gap: clamp(0.5rem, 1.8vh, 1.35rem);
  --intro-logo-pull: 0rem;
  --intro-emblem-nudge: 0rem;
  --intro-emblem-monitor-extra: 0rem;
  --intro-img-offset: 0rem;
  --intro-emblem-settle: 0rem;
  --intro-tagline-gap: clamp(0.5rem, 2.5vh, 1.25rem);
  --intro-progress-gap: clamp(0.2rem, 1.2vh, 0.5rem);
  --intro-title-w: min(94vw, 58rem);
  --intro-emblem-w: clamp(11rem, min(70vw, 36vh), 30rem);
  --intro-emblem-max-h: min(40vh, 22rem);
  --intro-content-w: min(96vw, 54rem);

  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100dvw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  background: #060e22;
  box-sizing: border-box;
}

#intro .bg-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 45% at 50% 30%, rgba(200, 160, 20, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 80% 30% at 50% 58%, rgba(30, 80, 160, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse 80% 25% at 50% 78%, rgba(160, 20, 30, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, #060e22 0%, #0b1840 40%, #0a1535 70%, #060e22 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: introAuroraBreath 5s ease-in-out infinite alternate;
}

#intro #intro-stars-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#intro .fly-dove {
  position: absolute;
  z-index: 2;
  font-size: clamp(0.875rem, 2.5vw, 1.375rem);
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 2px 6px rgba(255, 255, 255, 0.4));
}

#intro .sparkle {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  opacity: 0;
}

#intro .intro-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 2vh, 1.25rem);
  padding: clamp(0.5rem, 2.5vw, 1.25rem);
  width: var(--intro-content-w);
  max-width: min(96vw, 100%);
  max-height: min(94dvh, 100%);
  box-sizing: border-box;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  transform: translateY(calc(-1 * var(--intro-lift)));
}

#intro .logo-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--intro-stack-gap);
  width: 100%;
  max-width: min(58rem, 94vw);
  margin: 0 auto;
  min-height: 0;
}

#intro .logo-title-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: calc(clamp(0.25rem, 3vh, 2.5rem) + var(--intro-title-gap));
  opacity: 0;
  transform: translateY(-1.875rem) scale(0.85);
  animation: introLogoReveal 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
}

#intro .intro-title-img {
  display: block;
  width: var(--intro-title-w);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.5));
  animation:
    introTitleBounce 1.05s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both,
    introTitleFloat 2.4s ease-in-out 1.75s infinite alternate;
  transition: transform 0.25s ease, filter 0.25s ease;
}

#intro .logo-title-wrap:hover .intro-title-img {
  transform: scale(1.04) translateY(-0.25rem);
  filter: drop-shadow(0 10px 28px rgba(245, 208, 32, 0.35));
}

#intro .logo-word {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: calc(
    -1 * min(var(--intro-logo-pull), var(--intro-stack-gap)) - var(--intro-emblem-nudge) -
      var(--intro-emblem-monitor-extra)
  );
  opacity: 0;
  transform: scale(1.6) rotate(-8deg);
  animation: introEmblemReveal 1.15s cubic-bezier(0.34, 1.4, 0.64, 1) 1.5s forwards;
}

#intro .intro-logo-img {
  display: block;
  width: var(--intro-emblem-w);
  max-width: 100%;
  max-height: var(--intro-emblem-max-h);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.45));
  transform: translateY(var(--intro-img-offset));
  transition: transform 0.3s ease;
}

#intro .logo-word:hover .intro-logo-img {
  transform: translateY(var(--intro-img-offset)) scale(1.03);
}

#intro .tagline {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: clamp(0.65rem, min(2.2vw, 2.8vh), 1.05rem);
  color: rgba(200, 220, 255, 0.75);
  letter-spacing: clamp(0.06em, 0.4vw, 0.14em);
  text-transform: uppercase;
  text-align: center;
  max-width: min(92vw, 36rem);
  margin-top: calc(-1 * var(--intro-tagline-gap));
  opacity: 0;
  animation: introTaglineFade 0.8s ease 2s forwards;
  line-height: 1.35;
}

#intro .progress-wrap {
  width: clamp(10rem, 42vw, 20rem);
  margin-top: calc(-1 * var(--intro-progress-gap));
  height: 0.25rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  overflow: hidden;
  opacity: 0;
  animation: introTaglineFade 0.5s ease 2.2s forwards;
}

#intro .progress-bar {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #3ab4f2, #f5d020, #2ec4a1);
  background-size: 200% 100%;
  width: 0%;
  animation:
    introProgressFill 2.8s ease 2.2s forwards,
    introShimmer 1.5s linear 2.2s infinite;
}

#intro.exit {
  animation: introExit 0.5s cubic-bezier(0.7, 0, 1, 1) forwards;
}

#intro .fly-dove.d1 {
  animation: introFlyAcross1 7s ease-in-out 0.8s forwards;
}
#intro .fly-dove.d2 {
  animation: introFlyAcross2 9s ease-in-out 1.4s forwards;
}
#intro .fly-dove.d3 {
  animation: introFlyAcross3 8s ease-in-out 2s forwards;
}
#intro .fly-dove.d4 {
  animation: introFlyAcross1 6s ease-in-out 0.4s forwards;
  font-size: clamp(0.625rem, 1.5vw, 1rem);
}
#intro .fly-dove.d5 {
  animation: introFlyAcross2 10s ease-in-out 1.8s forwards;
  font-size: clamp(0.625rem, 1.4vw, 0.875rem);
}

/* ——— Responsive (breakpoints exclusivos) ——— */

/* Móvil: ≤767px */
@media (max-width: 767px) {
  #intro {
    --intro-lift: clamp(0.75rem, 5vh, 1.75rem);
    --intro-title-gap: 0;
    --intro-stack-gap: clamp(0.85rem, 4vh, 1.6rem);
    --intro-logo-pull: clamp(1.5rem, 8vh, 3.5rem);
    --intro-tagline-gap: clamp(0.65rem, 4vh, 1.2rem);
    --intro-title-w: min(96vw, 100%);
    --intro-emblem-w: clamp(11rem, 72vw, 22rem);
    --intro-emblem-max-h: min(38vh, 20rem);
    --intro-content-w: min(96vw, 100%);
  }

  #intro .logo-title-wrap {
    margin-top: clamp(-0.45rem, -1.75vh, -0.15rem);
  }

  #intro .intro-content {
    padding: clamp(0.5rem, 3vw, 0.75rem);
  }
}

@media (max-width: 360px) {
  #intro {
    --intro-stack-gap: clamp(1rem, 5vh, 1.85rem);
    --intro-logo-pull: clamp(1.5rem, 7vh, 3rem);
  }

  #intro .logo-title-wrap {
    margin-top: clamp(-0.6rem, -2vh, -0.25rem);
  }
}

@media (max-width: 412px) and (min-width: 361px) and (min-height: 640px) {
  #intro {
    --intro-stack-gap: clamp(1rem, 4.5vh, 1.75rem);
    --intro-logo-pull: clamp(1.75rem, 8vh, 3.25rem);
  }
}

@media (max-width: 767px) and (max-height: 35rem) {
  #intro {
    --intro-lift: clamp(0.35rem, 3vh, 1rem);
    --intro-title-gap: clamp(0.15rem, 1.5vh, 0.5rem);
    --intro-stack-gap: clamp(0.25rem, 1.2vh, 0.65rem);
    --intro-logo-pull: clamp(1.25rem, 9vh, 4rem);
    --intro-tagline-gap: clamp(0.2rem, 1.5vh, 0.5rem);
    --intro-title-w: min(90vw, 36rem);
    --intro-emblem-w: clamp(9rem, 42vw, 16rem);
  }

  #intro .intro-content {
    gap: 0.2rem;
  }
}

/* Tablet: 768px – 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  #intro {
    --intro-lift: clamp(1.25rem, 6vh, 2.75rem);
    --intro-title-gap: clamp(0.5rem, 4vh, 1.25rem);
    --intro-stack-gap: clamp(0.45rem, 2vh, 1.15rem);
    --intro-emblem-nudge: clamp(2rem, 7vh, 5rem);
    --intro-title-w: min(88vw, 44rem);
    --intro-emblem-w: clamp(13rem, 48vw, 26rem);
    --intro-emblem-max-h: min(36vh, 24rem);
    --intro-content-w: min(92vw, 48rem);
  }
}

/* Desktop: ≥1440px */
@media (min-width: 1440px) {
  #intro {
    --intro-lift: clamp(1rem, 2.5vh, 2.25rem);
    --intro-title-gap: clamp(0.5rem, 3.5vh, 1.75rem);
    --intro-stack-gap: clamp(0.65rem, 2vh, 1.5rem);
    --intro-emblem-nudge: clamp(2rem, 4vh, 4rem);
    --intro-emblem-monitor-extra: clamp(3rem, 6vh, 6rem);
    --intro-img-offset: -8.3125rem;
    --intro-title-w: min(62vw, 45rem);
    --intro-emblem-w: min(28vw, 31.25rem);
    --intro-emblem-max-h: min(36vh, 26rem);
    --intro-content-w: min(86vw, 50rem);
  }

  #intro .intro-content {
    max-width: min(92vw, 50rem);
    max-height: min(92dvh, 100%);
  }

  #intro .logo-stack {
    max-width: min(92vw, 50rem);
    max-height: min(78dvh, 100%);
  }
}

@media (min-width: 1920px) {
  #intro {
    --intro-title-w: min(58vw, 48rem);
    --intro-emblem-w: min(26vw, 31.25rem);
    --intro-emblem-max-h: min(38vh, 28rem);
    --intro-content-w: min(78vw, 54rem);
    --intro-emblem-nudge: clamp(1.75rem, 3.5vh, 3.75rem);
    --intro-emblem-monitor-extra: clamp(2.5rem, 5vh, 5.5rem);
    --intro-img-offset: -8.3125rem;
  }

  #intro .intro-content {
    max-width: min(88vw, 54rem);
  }
}

@media (min-width: 2560px) {
  #intro {
    --intro-lift: clamp(0.75rem, 2vh, 2rem);
    --intro-title-w: min(48vw, 52rem);
    --intro-emblem-w: min(22vw, 32rem);
    --intro-emblem-max-h: min(40vh, 30rem);
    --intro-content-w: min(68vw, 58rem);
    --intro-emblem-nudge: clamp(1.5rem, 3vh, 3.5rem);
    --intro-emblem-monitor-extra: clamp(2rem, 4vh, 4.5rem);
    --intro-img-offset: -8.3125rem;
  }

  #intro .intro-content,
  #intro .logo-stack {
    max-width: min(72vw, 58rem);
  }
}

@media (min-width: 1440px) and (min-aspect-ratio: 21/9) {
  #intro {
    --intro-title-w: min(42vw, 46rem);
    --intro-emblem-w: min(18vw, 30rem);
    --intro-emblem-max-h: min(42vh, 28rem);
    --intro-content-w: min(58vw, 56rem);
    --intro-stack-gap: clamp(0.75rem, 1.6vh, 1.35rem);
    --intro-img-offset: -8.3125rem;
  }

  #intro .intro-content,
  #intro .logo-stack {
    max-width: min(62vw, 56rem);
  }
}

/*
 * ASUS Vivobook (prioridad sobre desktop en portátil Full HD)
 * 1024–1440px ancho, o ≤1920px con altura ≤1080px
 */
@media (min-width: 1024px) and (max-width: 1440px),
  (min-width: 1024px) and (max-width: 1920px) and (max-height: 68rem) {
  #intro {
    --intro-lift: clamp(3.5rem, 10vh, 8.5rem);
    --intro-stack-gap: 0;
    --intro-emblem-nudge: 0;
    --intro-emblem-monitor-extra: 0;
    --intro-img-offset: calc(-10vh - 11.875rem);
    --intro-emblem-settle: 0;
    --intro-title-w: min(88vw, 48rem);
    --intro-emblem-w: clamp(16rem, 52vw, 40rem);
    --intro-emblem-max-h: min(44vh, 36rem);
    --intro-content-w: min(90vw, 50rem);
    --intro-title-drop: 3.5625rem;
  }

  #intro .logo-stack {
    gap: 0;
    max-height: none;
  }

  #intro .logo-title-wrap {
    margin-top: calc(clamp(0.25rem, 3vh, 2.5rem) + var(--intro-title-gap) + var(--intro-title-drop));
  }

  #intro .logo-word {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #intro .bg-aurora,
  #intro .intro-title-img,
  #intro .logo-title-wrap,
  #intro .logo-word,
  #intro .intro-logo-img,
  #intro .tagline,
  #intro .progress-wrap,
  #intro .progress-bar,
  #intro .fly-dove {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  #intro.exit {
    animation: introExitReduced 0.4s ease forwards;
  }
}

@keyframes introAuroraBreath {
  0% {
    opacity: 0.85;
  }
  100% {
    opacity: 1;
  }
}

@keyframes introLogoReveal {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes introTitleBounce {
  0% {
    opacity: 0;
    transform: translateY(-0.75rem) scale(1.72);
  }
  45% {
    opacity: 1;
    transform: translateY(0.5rem) scale(1.18);
  }
  70% {
    transform: translateY(-0.25rem) scale(1.06);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1.08);
  }
}

@keyframes introTitleFloat {
  0% {
    transform: translateY(0) scale(1.08);
  }
  100% {
    transform: translateY(-0.5rem) scale(1.1);
  }
}

@keyframes introEmblemReveal {
  0% {
    opacity: 0;
    transform: scale(1.65) rotate(-8deg);
  }
  55% {
    opacity: 1;
    transform: scale(1.12) rotate(0deg);
  }
  78% {
    transform: scale(0.98) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: translateY(calc(-1 * var(--intro-emblem-settle))) scale(1) rotate(0deg);
  }
}

@keyframes introTaglineFade {
  to {
    opacity: 1;
  }
}

@keyframes introProgressFill {
  to {
    width: 100%;
  }
}

@keyframes introShimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@keyframes introExit {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  40% {
    opacity: 1;
    transform: scale(1.04);
  }
  100% {
    opacity: 0;
    transform: scale(1.12);
    pointer-events: none;
  }
}

@keyframes introFlyAcross1 {
  0% {
    opacity: 0;
    transform: translate(-10vw, 0) scaleX(1);
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate(110vw, -8vh) scaleX(1);
  }
}

@keyframes introFlyAcross2 {
  0% {
    opacity: 0;
    transform: translate(110vw, -4vh) scaleX(-1);
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translate(-10vw, 6vh) scaleX(-1);
  }
}

@keyframes introFlyAcross3 {
  0% {
    opacity: 0;
    transform: translate(-10vw, 4vh) scaleX(1);
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translate(110vw, -12vh) scaleX(1);
  }
}

@keyframes introExitReduced {
  to {
    opacity: 0;
    pointer-events: none;
  }
}