:root {
  --bg: #020617;
  --c1: #38bdf8;
  --c2: #a855f7;
  --c3: #22c55e;
  --noise: rgba(255, 255, 255, 0.05);
}
.grain {
/* background: radial-gradient(circle at 20% 10%, #1e293b, transparent 60%),
    radial-gradient(circle at 80% 90%, #020617, transparent 70%), var(--bg); */
  color: white;
	background: url(https://www.lasallep.edu.mx/diplomados-y-cursos/images/darkblue.jpg) center no-repeat;
  /* overflow-x: hidden; */
	padding: 4%;
}

/* grain */
grain::after {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-radial-gradient(
    circle,
    var(--noise) 0 1px,
    transparent 1px 2px
  );
  mix-blend-mode: overlay;
  pointer-events: none;
  opacity: 0.35;
  animation: grain 0.25s steps(2) infinite;
}
@keyframes grain {
  to {
    transform: translate(2px, -2px);
  }
}

/* layout */
section {
  /* min-height: 100vh; */
  /* display: grid; */
  /* place-items: center; */
  /* padding: 5rem 2rem; */
  /* perspective: 1000px; */
}

/* glitch title */
.glitch {
  position: relative;
  font-size: clamp(3rem, 9vw, 6rem);
  /* font-weight: 900; */
  letter-spacing: 0.08em;
  /* margin-bottom: 4rem; */
	font-family: 'Indivisa Text Sans Black';
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0.8;
}
.glitch::before {
  color: var(--c1);
  transform: translate(3px, -2px);
  mix-blend-mode: screen;
  animation: glitch 2s infinite alternate;
}
.glitch::after {
  color: var(--c2);
  transform: translate(-3px, 2px);
  mix-blend-mode: screen;
  animation: glitch 1.5s infinite alternate-reverse;
}
@keyframes glitch {
  0% {
    clip-path: inset(0 0 70% 0);
  }
  25% {
    clip-path: inset(20% 0 40% 0);
  }
  50% {
    clip-path: inset(40% 0 20% 0);
  }
  75% {
    clip-path: inset(10% 0 60% 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

/* holographic card */
.holocard {
  /* width: min(420px, 90vw); */
  padding: 5%;
  border-radius: 28px;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.02)
  );
  backdrop-filter: blur(16px);
  box-shadow: 0 0 50px rgba(56, 189, 248, 0.35),
    inset 0 0 35px rgba(255, 255, 255, 0.15);
  transform-style: preserve-3d;
  animation: float 6s ease-in-out infinite;
  position: relative;
  font-family: 'Indivisa Text Sans';
}

.holocard::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(
    120deg,
    transparent 20%,
    var(--c1),
    var(--c2),
    var(--c3),
    transparent 80%
  );
  filter: blur(25px);
  opacity: 0.4;
  z-index: -1;
  animation: holo 4s linear infinite;
  background-size: 300% 100%;
}

@keyframes holo {
  to {
    background-position: 400% 0;
  }
}
@keyframes float {
  0%,
  100% {
    transform: rotateX(12deg) rotateY(-10deg) translateY(0);
  }
  50% {
    transform: rotateX(18deg) rotateY(12deg) translateY(-25px);
  }
}

.holocard h2 {
  font-size: 1.7rem;
  margin-bottom: 1rem;
}
.holocard p {
  line-height: 1.6;
  opacity: 0.85;
}

/* holographic button */
.hologbtn {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: white;
  text-decoration: none;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
  background-size: 300% 100%;
  animation: holo 3s linear infinite;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.6);
  font-family: 'Indivisa Text Sans Black Italic';
}