.atmosphere,
.scene-vignette,
.scene-grain {
  position: absolute;
  inset: 0;
}

.atmosphere {
  opacity: 0.65;
  background:
    radial-gradient(circle at 70% 36%, rgba(179, 196, 204, 0.1), transparent 21rem),
    linear-gradient(rgba(244, 245, 246, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 245, 246, 0.025) 1px, transparent 1px);
  background-position: center;
  background-size: auto, 80px 80px, 80px 80px;
  mask-image: linear-gradient(90deg, transparent 2%, black 28%, black 94%, transparent);
  transition: opacity 1.2s var(--ease-premium), filter 1.2s var(--ease-premium);
}

.scene-vignette {
  background:
    radial-gradient(circle at 58% 48%, transparent 25%, rgba(3, 4, 5, 0.15) 60%, rgba(3, 4, 5, 0.83) 115%),
    linear-gradient(0deg, rgba(3, 4, 5, 0.65), transparent 25%, transparent 72%, rgba(3, 4, 5, 0.52));
}

.scene-grain {
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.experience::before {
  position: fixed;
  z-index: 60;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(244, 245, 246, 0.72), transparent);
  box-shadow: 0 0 28px rgba(220, 228, 232, 0.18);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-2px);
}

body.is-transitioning .experience::before {
  animation: chapter-scan 900ms var(--ease-in-out) both;
}

body.is-transitioning .scene-layer {
  filter: saturate(0.82) contrast(1.03);
}

.chapter .reveal-item {
  opacity: 0.32;
  filter: blur(2px);
  transform: translateY(1.2rem);
  transition:
    opacity 850ms var(--ease-premium) 140ms,
    transform 950ms var(--ease-premium) 140ms,
    filter 850ms ease 140ms;
}

.chapter .line-mask > span {
  opacity: 0.18;
  filter: blur(3px);
  transform: translateY(112%);
  transition:
    transform 1s var(--ease-premium),
    opacity 700ms ease,
    filter 800ms ease;
}

.chapter.is-active .reveal-item {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.chapter.is-active .line-mask > span {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.chapter.is-active .line-mask:nth-child(2) > span {
  transition-delay: 90ms;
}

.fallback-scene {
  position: absolute;
  inset: 0;
  opacity: 1;
  perspective: 1100px;
  transition: opacity 900ms ease;
}

.fallback-assembly {
  position: absolute;
  top: 50%;
  left: 68%;
  width: min(38vw, 36rem);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) rotateX(60deg) rotateZ(-36deg);
  transform-style: preserve-3d;
  transition: transform 1.25s var(--ease-premium), left 1.25s var(--ease-premium), top 1.25s var(--ease-premium);
}

.fallback-beam,
.fallback-plane {
  position: absolute;
  display: block;
  border: 1px solid rgba(244, 245, 246, 0.2);
  background:
    linear-gradient(115deg, rgba(244, 245, 246, 0.2), rgba(157, 164, 170, 0.04) 35%, rgba(4, 5, 6, 0.7)),
    rgba(13, 16, 18, 0.75);
  box-shadow:
    0 0 0 1px rgba(4, 5, 6, 0.7) inset,
    0 2rem 5rem rgba(0, 0, 0, 0.5);
  transform-style: preserve-3d;
  transition: all 1.2s var(--ease-premium);
}

.fallback-beam::after,
.fallback-plane::after {
  position: absolute;
  top: 100%;
  right: -1px;
  left: -1px;
  height: 1rem;
  border: 1px solid rgba(244, 245, 246, 0.08);
  background: #080a0c;
  content: "";
  transform: rotateX(-90deg);
  transform-origin: top;
}

.fallback-beam--left {
  top: 17%;
  left: 31%;
  width: 9%;
  height: 58%;
  transform: rotate(27.8deg) translateZ(2.4rem);
}

.fallback-beam--right {
  top: 27%;
  right: 29%;
  width: 9%;
  height: 50%;
  transform: rotate(-27.8deg) translateZ(1.4rem);
}

.fallback-beam--core {
  top: 52%;
  left: 45%;
  width: 18%;
  height: 9%;
  transform: rotate(-25deg) translateZ(3.4rem);
}

.fallback-plane {
  width: 23%;
  height: 15%;
}

.fallback-plane--one { top: 10%; left: 5%; transform: translateZ(-1rem); }
.fallback-plane--two { right: 2%; bottom: 15%; transform: translateZ(0.4rem); }
.fallback-plane--three { right: 12%; top: 5%; width: 14%; height: 9%; transform: translateZ(4rem); }

.fallback-orbit {
  position: absolute;
  top: 50%;
  left: 67%;
  border: 1px solid rgba(212, 216, 219, 0.14);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(67deg) rotateZ(-8deg);
  transition: all 1.35s var(--ease-premium);
}

.fallback-orbit::before,
.fallback-orbit::after {
  position: absolute;
  width: 0.42rem;
  height: 0.42rem;
  border: 1px solid rgba(244, 245, 246, 0.55);
  background: var(--ink);
  content: "";
  transform: rotate(45deg);
}

.fallback-orbit::before { top: 9%; left: 24%; }
.fallback-orbit::after { right: 8%; bottom: 27%; }

.fallback-orbit--outer {
  width: min(59vw, 59rem);
  aspect-ratio: 1;
}

.fallback-orbit--inner {
  width: min(39vw, 39rem);
  aspect-ratio: 1;
  opacity: 0.55;
  transform: translate(-50%, -50%) rotateX(70deg) rotateZ(26deg);
}

body[data-chapter="intencion"] .fallback-assembly {
  left: 71%;
  transform: translate(-50%, -50%) rotateX(64deg) rotateZ(-17deg) scale(0.92);
}

body[data-chapter="intencion"] .fallback-beam--core {
  transform: rotate(-25deg) translate3d(-2rem, 1rem, 5rem);
}

body[data-chapter="servicios"] .fallback-assembly {
  left: 72%;
  transform: translate(-50%, -50%) rotateX(55deg) rotateZ(-48deg) scale(1.06);
}

body[data-chapter="servicios"] .fallback-plane--one { transform: translate3d(-6rem, -1rem, -2rem); }
body[data-chapter="servicios"] .fallback-plane--two { transform: translate3d(5rem, 2rem, 3rem); }
body[data-chapter="servicios"] .fallback-plane--three { transform: translate3d(2rem, -5rem, 6rem); }

body[data-chapter="inmersivo"] .fallback-assembly {
  top: 48%;
  left: 72%;
  transform: translate(-50%, -50%) rotateX(69deg) rotateZ(10deg) scale(0.9);
}

body[data-chapter="inmersivo"] .fallback-orbit--outer {
  width: min(72vw, 72rem);
  border-color: rgba(212, 216, 219, 0.24);
  transform: translate(-50%, -50%) rotateX(72deg) rotateZ(38deg);
}

body[data-chapter="proceso"] .fallback-assembly {
  top: 42%;
  left: 78%;
  transform: translate(-50%, -50%) rotateX(72deg) rotateZ(-80deg) scale(0.8);
}

body[data-chapter="trabajo"] .fallback-assembly {
  left: 75%;
  transform: translate(-50%, -50%) rotateX(50deg) rotateZ(0deg) scale(1.13);
  filter: saturate(0.4);
}

body[data-chapter="contacto"] .fallback-assembly {
  top: 42%;
  left: 74%;
  transform: translate(-50%, -50%) rotateX(63deg) rotateZ(-34deg) scale(1.35);
}

.intro {
  position: fixed;
  z-index: 300;
  inset: 0;
  overflow: hidden;
  background: #010203;
  color: var(--bone);
  transition: opacity 750ms var(--ease-premium), visibility 750ms ease;
}

.intro.is-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

.intro-grid {
  position: absolute;
  inset: 0;
  opacity: 0.42;
  background:
    linear-gradient(rgba(244, 245, 246, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 245, 246, 0.035) 1px, transparent 1px);
  background-position: center;
  background-size: min(10vw, 8rem) min(10vw, 8rem);
  mask-image: radial-gradient(circle at center, black, transparent 74%);
}

.intro-modules {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(50vw, 44rem);
  height: min(20vw, 13rem);
  transform: translate(-50%, -50%);
}

.intro-modules span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(1.25rem, 3.8vw, 3.5rem);
  aspect-ratio: 1;
  border: 1px solid rgba(244, 245, 246, 0.38);
  background:
    linear-gradient(135deg, rgba(244, 245, 246, 0.84), rgba(117, 126, 132, 0.3)),
    var(--graphite);
  box-shadow: 0 0 2rem rgba(212, 216, 219, 0.05);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35) rotate(12deg);
  will-change: transform, opacity;
}

.intro-lockup {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
}

.intro-lockup img {
  width: 3.5rem;
  height: 3.5rem;
}

.intro-lockup > div {
  display: grid;
  gap: 0.5rem;
}

.intro-lockup__name {
  font-family: var(--font-tech);
  font-size: 1.1rem;
  letter-spacing: 0.24em;
  line-height: 1;
}

.intro-lockup__studio {
  color: var(--muted);
  font-size: 0.52rem;
  letter-spacing: 0.29em;
  line-height: 1;
}

.intro-rule {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 245, 246, 0.5), transparent);
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(0);
}

.intro-status {
  position: absolute;
  right: 1.5rem;
  bottom: 1.4rem;
  left: 1.5rem;
  display: flex;
  justify-content: space-between;
  color: var(--faint);
  font-family: var(--font-tech);
  font-size: 0.46rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.intro-skip {
  position: absolute;
  z-index: 2;
  top: 1.25rem;
  right: 1.5rem;
  min-width: 7rem;
  min-height: 2.75rem;
  border: 1px solid var(--hairline);
  background: rgba(4, 5, 6, 0.45);
  color: var(--muted);
  font-family: var(--font-tech);
  font-size: 0.46rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 250ms ease, color 250ms ease;
}

.intro-skip:hover {
  border-color: rgba(244, 245, 246, 0.35);
  color: var(--bone);
}

@keyframes chapter-scan {
  0% { left: -3%; opacity: 0; }
  15% { opacity: 1; }
  75% { opacity: 0.65; }
  100% { left: 103%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .chapter .reveal-item,
  .chapter .line-mask > span {
    filter: none;
    transform: none;
  }

  .fallback-assembly,
  .fallback-orbit {
    transition: none;
  }
}

.reduced-motion {
  scroll-behavior: auto;
}

.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

.reduced-motion .chapter .reveal-item,
.reduced-motion .chapter .line-mask > span {
  filter: none;
  transform: none;
}

.reduced-motion .fallback-assembly,
.reduced-motion .fallback-orbit {
  transition: none;
}