/* ============================================================
   Ser y Sentir — intro 3D del logo
   - CSS 3D real (perspectiva, profundidad, giro con rebote)
   - 100% responsive (clamp / vw) en PC y móvil
   - sin dependencias externas, funciona offline
   - se reproduce una sola vez (controlado por JS)
   ============================================================ */

.sys-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* fondo de marca exacto, con un halo cálido suave */
  background:
    radial-gradient(120% 90% at 50% 38%, #fff4ec 0%, #ffead9 46%, #f6d8c4 100%);
  /* perspectiva de la escena 3D (un poco más plana en móvil) */
  perspective: clamp(700px, 120vw, 1200px);
  perspective-origin: 50% 42%;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  will-change: opacity, transform;
}

/* halo suave detrás del logo, late despacio */
.sys-intro::before {
  content: "";
  position: absolute;
  width: min(78vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 75, 75, .16) 0%, rgba(255, 75, 75, 0) 62%);
  filter: blur(6px);
  opacity: 0;
  transform: translateZ(-1px) scale(.6);
  animation: sysHalo 2600ms 360ms cubic-bezier(.22, .61, .36, 1) forwards;
}

.sys-intro__scene {
  position: relative;
  transform-style: preserve-3d;
  display: grid;
  place-items: center;
}

.sys-intro__stage {
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  transform-origin: 50% 60%;
  /* entrada 3D + flotación de respiro encadenadas */
  animation:
    sysEnter 2200ms cubic-bezier(.22, .72, .30, 1) both,
    sysFloat 3200ms 2150ms ease-in-out infinite alternate;
}

.sys-intro__logo {
  display: block;
  width: clamp(168px, 46vw, 372px);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  backface-visibility: hidden;
  transform: translateZ(0.01px); /* fuerza capa propia */
  filter: drop-shadow(0 18px 26px rgba(140, 70, 40, .28));
}

/* barrido de luz que cruza el logo una vez */
.sys-intro__shine {
  position: absolute;
  inset: -8% -22%;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, .0) 44%,
    rgba(255, 255, 255, .55) 50%,
    rgba(255, 255, 255, .0) 56%,
    transparent 62%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transform: translateX(-130%);
  animation: sysShine 1100ms 1450ms ease-in-out forwards;
}

/* sombra de contacto bajo el logo, refuerza el 3D */
.sys-intro__shadow {
  position: absolute;
  left: 50%;
  bottom: clamp(-118px, -16vw, -86px);
  width: clamp(150px, 40vw, 320px);
  height: 34px;
  transform: translateX(-50%) scale(.3);
  background: radial-gradient(ellipse at center, rgba(150, 78, 48, .42) 0%, rgba(150, 78, 48, 0) 70%);
  filter: blur(4px);
  opacity: 0;
  animation: sysShadow 2200ms cubic-bezier(.22, .72, .30, 1) forwards;
}

/* destellos de marca alrededor */
.sys-intro__sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sys-spark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  animation: sysSpark 1500ms ease-in-out forwards;
}

/* ---- salida: revela la web detrás ---- */
.sys-intro.is-leaving {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 720ms ease, transform 720ms ease;
}
.sys-intro.is-leaving .sys-intro__stage {
  transform: translateY(-5%) scale(.94);
  transition: transform 720ms cubic-bezier(.6, .04, .98, .34);
  animation: none;
}

/* ============================ keyframes ============================ */
@keyframes sysEnter {
  0% {
    opacity: 0;
    transform: translateZ(-740px) rotateX(34deg) rotateY(-30deg) rotateZ(-7deg);
    filter: blur(12px);
  }
  32% { opacity: 1; }
  58% {
    transform: translateZ(46px) rotateX(-8deg) rotateY(9deg) rotateZ(2.4deg);
    filter: blur(0);
  }
  76% { transform: translateZ(-12px) rotateX(3.4deg) rotateY(-3.6deg) rotateZ(-1deg); }
  90% { transform: translateZ(7px) rotateX(-1.4deg) rotateY(1.6deg) rotateZ(.4deg); }
  100% {
    opacity: 1;
    transform: translateZ(0) rotateX(0) rotateY(0) rotateZ(0);
    filter: blur(0);
  }
}

@keyframes sysFloat {
  from { transform: translateY(0) rotateY(-2.2deg) rotateX(1deg); }
  to   { transform: translateY(-10px) rotateY(2.2deg) rotateX(-1deg); }
}

@keyframes sysHalo {
  0%   { opacity: 0; transform: translateZ(-1px) scale(.55); }
  55%  { opacity: 1; }
  100% { opacity: .85; transform: translateZ(-1px) scale(1); }
}

@keyframes sysShine {
  0%   { opacity: 0; transform: translateX(-130%); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(130%); }
}

@keyframes sysShadow {
  0%   { opacity: 0; transform: translateX(-50%) scale(.3); }
  58%  { opacity: .5; transform: translateX(-50%) scale(1.08); }
  100% { opacity: .9; transform: translateX(-50%) scale(1); }
}

@keyframes sysSpark {
  0%   { opacity: 0; transform: scale(0); }
  40%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.2) translateY(-14px); }
}

/* ---- accesibilidad: sin animación grande ---- */
@media (prefers-reduced-motion: reduce) {
  .sys-intro { perspective: none; }
  .sys-intro::before,
  .sys-intro__shine,
  .sys-intro__shadow,
  .sys-intro__sparkles { display: none; }
  .sys-intro__stage {
    animation: sysFadeIn 600ms ease both;
  }
  @keyframes sysFadeIn {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: none; }
  }
}