/* =========================
   HOLOGRAM STAGE SYSTEM
========================= */

.holo-stage {
  position: relative;
  width: 420px;
  height: 540px;
  margin: 3rem auto;
}

/* =========================
   YOU (CENTER / NARRATOR)
========================= */

.holo-center {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  transition: transform .6s ease, opacity .6s ease, filter .6s ease;
}

.holo-face {
  width: 240px;
  opacity: 0.75;
  animation:
    holoPresence 14s ease-in-out infinite,
    holoFloat 6s ease-in-out infinite;
  filter:
    drop-shadow(0 0 20px rgba(63,220,255,.45))
    drop-shadow(0 0 50px rgba(106,156,255,.25));
}

@keyframes holoPresence {
  0% { opacity: 0; }
  15% { opacity: .75; }
  65% { opacity: .75; }
  85% { opacity: .25; }
  100% { opacity: 0; }
}

@keyframes holoFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

/* =========================
   PROJECT ICONS (BOTTOM)
========================= */

.holo-projects {
  position: absolute;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2.4rem;
  z-index: 6;
}

.project-item img {
  width: 92px;
  height: auto;
  transition: transform .25s ease, opacity .25s ease;
  filter:
    drop-shadow(0 0 14px rgba(63,220,255,0.45))
    drop-shadow(0 0 30px rgba(106,156,255,0.25));
}

/* Boost logos pequeños */
.project-item[data-project="becrypto"] img,
.project-item[data-project="mining"] img {
  width: 120px;
}

.project-item:hover img {
  transform: scale(1.18);
  opacity: 1;
}

/* =========================
   BASE GLOW + SCANLINES
========================= */

.holo-base-glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 320px;
  height: 120px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(63,220,255,.35),
    rgba(10,20,40,0) 70%
  );
  filter: blur(24px);
  z-index: 1;
}

.holo-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(63,220,255,.08) 0px,
    rgba(63,220,255,.08) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 6px
  );
  mix-blend-mode: screen;
  animation: scanMove 3s linear infinite;
}

@keyframes scanMove {
  from { background-position-y: 0; }
  to   { background-position-y: 100%; }
}

/* =========================
   PROJECT INFO (FRONT)
========================= */

.project-info {
  position: relative;
  z-index: 20;
  margin-top: 1rem;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}

.project-info.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.project-card {
  padding: 1.1rem 1.2rem;
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    rgba(63,220,255,.14),
    rgba(10,20,40,.48)
  );
  border: 1px solid rgba(63,220,255,.3);
  box-shadow:
    0 0 22px rgba(63,220,255,.25),
    inset 0 0 18px rgba(63,220,255,.14);
}

.project-kicker {
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .8;
}

.project-title {
  margin: .25rem 0;
}

.project-text {
  font-size: .92rem;
  line-height: 1.45;
}

/* LOGO DEL PROYECTO */
.project-logo {
  margin: .9rem auto .6rem;
  width: 140px;
}

.project-logo img {
  width: 100%;
  filter:
    drop-shadow(0 0 18px rgba(63,220,255,.45))
    drop-shadow(0 0 36px rgba(106,156,255,.25));
}

/* =========================
   PRESENTATION MODE
========================= */

.holo-stage.presenting .holo-center {
  transform: translateX(-50%) scale(0.65);
  opacity: .55;
  filter:
    drop-shadow(0 0 28px rgba(106,156,255,.5))
    drop-shadow(0 0 60px rgba(63,220,255,.35));
}

.holo-stage.presenting .project-item:not(.active) {
  opacity: .15;
  transform: scale(.75);
  pointer-events: none;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {
  .holo-stage {
    width: 320px;
    height: 460px;
  }

  .holo-face {
    width: 180px;
  }

  .project-item img {
    width: 58px;
  }

  .project-item[data-project="becrypto"] img,
  .project-item[data-project="mining"] img {
    width: 78px;
  }
}