/* =========================================================
   PREFALUM EXPERIENCE · GLASS MOTION ENGINE
   Reflejos globales, iluminación y recorrido de luz
========================================================= */

:root {
  --glass-light-x: 50%;
  --glass-light-y: 18%;

  --glass-scroll-progress: 0;
  --glass-scroll-shift: 0px;

  --glass-white-soft: rgba(255, 255, 255, .035);
  --glass-white-medium: rgba(255, 255, 255, .085);
  --glass-white-strong: rgba(255, 255, 255, .18);

  --glass-blue-soft: rgba(118, 205, 249, .07);
  --glass-blue-medium: rgba(118, 205, 249, .13);

  --glass-border-soft: rgba(255, 255, 255, .14);
  --glass-border-strong: rgba(255, 255, 255, .27);

  --glass-speed-fast: 260ms;
  --glass-speed-normal: 480ms;
  --glass-speed-slow: 900ms;

  --glass-ease:
    cubic-bezier(.20, .72, .22, 1);

  --glass-ease-soft:
    cubic-bezier(.22, .76, .20, 1);
}


/* =========================================================
   CAPA GLOBAL DE ILUMINACIÓN
========================================================= */

.experience-glass-world {
  position: fixed;
  z-index: 1100;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .7s ease;
}

body.glass-engine-ready .experience-glass-world {
  opacity: 1;
}


/* Luz ambiental que sigue suavemente el mouse */

.experience-glass-ambient {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(
      circle 420px at
      var(--glass-light-x)
      var(--glass-light-y),
      rgba(214, 243, 255, .085),
      rgba(126, 203, 244, .035) 35%,
      transparent 72%
    );
  transform:
    translate3d(
      0,
      var(--glass-scroll-shift),
      0
    );
  will-change: background, transform;
}


/* =========================================================
   RECORRIDO PRINCIPAL DE LUZ
========================================================= */

.experience-glass-sweep {
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -72%;
  width: 34%;
  opacity: 0;
  transform:
    rotate(16deg)
    translate3d(0, 0, 0);

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, .012) 13%,
      rgba(194, 231, 252, .075) 34%,
      rgba(255, 255, 255, .24) 49%,
      rgba(168, 220, 248, .085) 64%,
      rgba(255, 255, 255, .018) 82%,
      transparent 100%
    );

  filter: blur(1px);
  will-change: left, opacity, transform;
}

body.glass-sweep-active .experience-glass-sweep {
  animation:
    experienceGlobalGlassSweep
    2.15s
    cubic-bezier(.18, .68, .22, 1)
    both;
}

@keyframes experienceGlobalGlassSweep {
  0% {
    left: -72%;
    opacity: 0;
  }

  14% {
    opacity: .18;
  }

  42% {
    opacity: .72;
  }

  70% {
    opacity: .38;
  }

  100% {
    left: 138%;
    opacity: 0;
  }
}


/* Línea de refracción secundaria */

.experience-glass-sweep::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 53%;
  width: 1px;
  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(255, 255, 255, .32),
      transparent
    );
  box-shadow:
    0 0 24px rgba(174, 225, 250, .18);
}


/* =========================================================
   LUZ COHERENTE EN ELEMENTOS DE VIDRIO
========================================================= */

.experience-reason-card,
.experience-trust-strip,
.experience-brand-panel,
.experience-project-cta-inner,
.experience-modal .modal-content,
.experience-inspiration-modal .modal-content {
    position: relative;
}

.experience-flip-face::selection,
.experience-reason-card::selection {
  background: rgba(128, 204, 244, .30);
}




/* =========================================================
   NAVEGACIÓN · DESTELLO FINO
========================================================= */

.experience-nav-links a {
  position: relative;
  overflow: hidden;
  padding: 9px 0;
}

.experience-nav-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(203, 237, 255, .92),
      transparent
    );

  opacity: 0;
  transform: translateX(-75%);
  transition:
    opacity .2s ease,
    transform .45s var(--glass-ease);
}

.experience-nav-links a:hover::after {
  opacity: .85;
  transform: translateX(0);
}


/* =========================================================
   SECCIONES REVELADAS POR LA LUZ
========================================================= */

[data-glass-reveal] {
  --glass-reveal-delay: 0ms;

  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity
    .82s
    ease
    var(--glass-reveal-delay),
    transform
    .82s
    var(--glass-ease)
    var(--glass-reveal-delay);
}

[data-glass-reveal].is-glass-visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   MEJORA DE RENDIMIENTO
========================================================= */

.experience-glass-world,
.experience-glass-ambient,
.experience-glass-sweep {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}


/* =========================================================
   TELÉFONO
========================================================= */

@media (max-width: 768px) {

  .experience-glass-world {
    z-index: 900;
  }

  .experience-glass-ambient {
    display: none;
  }

  .experience-glass-sweep {
    width: 48%;
    filter: blur(1.5px);
  }

  body.glass-sweep-active .experience-glass-sweep {
    animation-duration: 1.65s;
  }

  .experience-flip-front {
    background:
      radial-gradient(
        circle 280px at
        var(--card-light-x, 84%)
        var(--card-light-y, 10%),
        rgba(113, 200, 244, .19),
        transparent 65%
      ),
      linear-gradient(
        145deg,
        #0e4769,
        #072a43
      ) !important;
  }
}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .experience-glass-world {
    display: none !important;
  }

  [data-glass-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .experience-flip-front::after,
  .experience-reason-card::after,
  .experience-brand-panel::after {
    transition: none !important;
  }
}