.section__content {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: center;
}

.kicker {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(0.7rem, 1vw, 0.96rem);
  letter-spacing: 0.18em;
}

.section-title {
  margin: 0;
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 5rem);
  line-height: 0.96;
  letter-spacing: 0.08em;
  color: #f1f4ff;
  text-shadow:
    0 0 4px rgba(255,255,255,0.75),
    0 0 18px rgba(221,114,255,0.72),
    0 0 42px rgba(98,195,255,0.22);
  text-transform: uppercase;
}

.neon-purple {
  color: var(--neon-purple);
  text-shadow: 0 0 4px rgba(255,255,255,0.6), 0 0 14px rgba(221,114,255,0.85), 0 0 28px rgba(164,73,255,0.72);
}

.neon-green {
  color: var(--neon-green);
  text-shadow: 0 0 4px rgba(255,255,255,0.65), 0 0 14px rgba(116,255,120,0.92), 0 0 24px rgba(25,164,47,0.78);
}

.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.glitch.is-glitching::before {
  opacity: 0.7;
  transform: translate(2px, -1px);
  color: rgba(255, 60, 168, 0.72);
  clip-path: inset(0 0 45% 0);
}

.glitch.is-glitching::after {
  opacity: 0.65;
  transform: translate(-2px, 1px);
  color: rgba(54, 189, 255, 0.68);
  clip-path: inset(48% 0 0 0);
}

.flicker-on {
  animation: neonFlicker 220ms linear 1;
}

@keyframes neonFlicker {
  0%, 100% { opacity: 1; filter: brightness(1); }
  20% { opacity: 0.82; filter: brightness(0.82); }
  34% { opacity: 1; filter: brightness(1.08); }
  49% { opacity: 0.78; filter: brightness(0.75); }
  67% { opacity: 1; filter: brightness(1.1); }
  79% { opacity: 0.92; filter: brightness(0.95); }
}

@media (max-width: 760px) {
  .section__content {
    transform: none;
  }
  .center-title-wrap {
    padding-inline: 10%;
  }

  .center-title {
    font-size: clamp(0.7rem, 3vw, 1rem);
    row-gap: 0.08em;
  }
  /* titolo lungo (es. "BSC SPACESALOON"): piu' piccolo per non sforare/sovrapporsi */
  .center-title--long {
    font-size: clamp(0.56rem, 2.3vw, 0.82rem);
    column-gap: 0.34em;
  }
  .section__content {
  transform: none;
  }
}
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-bar-height);
  background: transparent;
  z-index: 9999;
  overflow: hidden;
}
.topbar-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;   /* era -10% (spostava a sinistra → gap a destra prima dell'angolo): a 0 le
                immagini coprono da sinistra fino oltre l'angolo destro */

  display: flex;
  align-items: stretch;
  height: 100%;
  width: max-content;
}

.topbar-img {
  display: block;
  height: 100%;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  margin-right: -10%;
}
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--top-bar-height);
  background: transparent;
  z-index: 9999;
  overflow: hidden;
}

.left-bar,
.right-bar {
  position: fixed;
  top: var(--top-bar-height);
  bottom: var(--top-bar-height);
  width: var(--side-bar-width);
  background: transparent;
  z-index: 9999;
  overflow: hidden;
}

.bottombar-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;   /* vedi topbar-track: copre fino oltre l'angolo destro inferiore */

  display: flex;
  align-items: stretch;
  height: 100%;
  width: max-content;
}
.left-bar {
  left: 0;
}

.right-bar {
  right: 0;
}
.leftbar-stack,
.rightbar-stack {
  position: absolute;
  top: -20px;   /* para que sobresalga por arriba */
  left: 0;
  width: 100%;
  height: calc(100% + 40px);
}

.leftbar-img,
.rightbar-img {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* LEFT */
.leftbar-img:nth-child(1) { top: 0px; }
.leftbar-img:nth-child(2) { top: 42px; }
.leftbar-img:nth-child(3) { top: 84px; }
.leftbar-img:nth-child(4) { top: 126px; }
.leftbar-img:nth-child(5) { top: 168px; }
.leftbar-img:nth-child(6) { top: 210px; }
.leftbar-img:nth-child(7) { top: 252px; }
.leftbar-img:nth-child(8) { top: 294px; }
.leftbar-img:nth-child(9) { top: 336px; }
.leftbar-img:nth-child(10) { top: 378px; }
.leftbar-img:nth-child(11) { top: 420px; }
.leftbar-img:nth-child(12) { top: 462px; }

/* RIGHT */
.rightbar-img:nth-child(1) { top: 0px; }
.rightbar-img:nth-child(2) { top: 42px; }
.rightbar-img:nth-child(3) { top: 84px; }
.rightbar-img:nth-child(4) { top: 126px; }
.rightbar-img:nth-child(5) { top: 168px; }
.rightbar-img:nth-child(6) { top: 210px; }
.rightbar-img:nth-child(7) { top: 252px; }
.rightbar-img:nth-child(8) { top: 294px; }
.rightbar-img:nth-child(9) { top: 336px; }
.rightbar-img:nth-child(10) { top: 378px; }
.rightbar-img:nth-child(11) { top: 420px; }
.rightbar-img:nth-child(12) { top: 462px; }
.bottombar-img {
  display: block;
  height: 100%;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  margin-right: -10%;
}


.top-center-box {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--center-box-width);
  height: var(--center-box-height);
  background: transparent;
  /* sopra le cornici della pagina (corner-box z-index 20000) IN OGNI MOMENTO */
  z-index: 20001;
}
.center-title-wrap {
  position: absolute;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding-inline: 5%;
  transform: translateY(-4px);
}
.center-title-wrap::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 50%;
  height: 2px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scaleX(0.2);
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,0.9) 18%,
      rgba(221,114,255,1) 50%,
      rgba(255,255,255,0.9) 82%,
      transparent 100%);
  box-shadow:
    0 0 10px rgba(221,114,255,0.85),
    0 0 20px rgba(221,114,255,0.65),
    0 0 34px rgba(118,36,255,0.45);
}
.center-title-wrap.is-switching::after {
  animation: centerTitleScan 560ms ease-out 1;
}

.center-title {
  position: relative;
  margin: 0;
  max-width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 0.42em;
  row-gap: 0.04em;

  font-family: "Space Age", "Orbitron", sans-serif;
  font-size: clamp(0.72rem, 1.08vw, 1.18rem);
  line-height: 0.92;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;

  color: #efc8ff;
  text-shadow:
    0 0 2px rgba(255,255,255,0.35),
    0 0 6px rgba(232,150,255,0.55),
    0 0 12px rgba(221,114,255,0.82),
    0 0 22px rgba(181,68,255,0.72),
    0 0 34px rgba(118,36,255,0.48);

  filter: saturate(1.05);
  will-change: transform, opacity, filter;
}
.center-title__word {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.center-title__char {
  display: inline-block;
}

.center-title.is-title-out {
  animation: centerTitleOut 220ms cubic-bezier(.55,.02,.8,.2) 1 forwards;
}

.center-title.is-title-in {
  animation: centerTitleIn 560ms cubic-bezier(.16,.84,.22,1) 1;
}

.center-title__char.is-char-flicker {
  animation: centerTitleCharFlicker var(--char-flicker-duration, 800ms) linear 1;
}

@keyframes centerTitleOut {
  0% {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: translateY(0) scale(1);
    letter-spacing: 0.06em;
  }
  32% {
    opacity: 0.92;
    filter: blur(0.4px) brightness(1.24);
    transform: translateY(-1px) scale(1.01);
    letter-spacing: 0.06em;
  }
  100% {
    opacity: 0;
    filter: blur(10px) brightness(1.6);
    transform: translateY(-8px) scale(1.045);
    letter-spacing: 0.06em;
  }
}
@keyframes centerTitleIn {
  0% {
    opacity: 0;
    filter: blur(16px) brightness(1.8);
    transform: translateY(8px) scale(0.95);
    letter-spacing: 0.06em;
  }
  38% {
    opacity: 0.78;
    filter: blur(2px) brightness(1.34);
    transform: translateY(0) scale(1.02);
    letter-spacing: 0.06em;
  }
  62% {
    opacity: 1;
    filter: blur(0.5px) brightness(1.12);
    transform: translateY(0) scale(0.995);
    letter-spacing: 0.06em;
  }
  100% {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: translateY(0) scale(1);
    letter-spacing: 0.06em;
  }
}
@keyframes centerTitleScan {
  0% {
    opacity: 0;
    transform: translateY(-50%) scaleX(0.16);
  }
  18% {
    opacity: 1;
  }
  60% {
    opacity: 0.95;
    transform: translateY(-50%) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) scaleX(1);
  }
}

@keyframes centerTitleCharFlicker {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
    transform: translateY(0);
  }
  10% {
    opacity: 0.34;
    filter: brightness(0.6);
    transform: translateY(0.5px);
  }
  16% {
    opacity: 1;
    filter: brightness(1.7);
  }
  29% {
    opacity: 0.22;
    filter: brightness(0.45);
  }
  41% {
    opacity: 0.92;
    filter: brightness(1.4);
  }
  57% {
    opacity: 0.18;
    filter: brightness(0.35);
  }
  71% {
    opacity: 1;
    filter: brightness(1.95);
    transform: translateY(-0.5px);
  }
  86% {
    opacity: 0.58;
    filter: brightness(0.85);
  }
}
.bottom-center-title.is-flicker {
  animation: bottomTitleFlicker var(--bottom-flicker-duration, 1200ms) linear 1;
}

@keyframes bottomTitleFlicker {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
  }
  12% {
    opacity: 0.55;
    filter: brightness(0.7);
  }
  22% {
    opacity: 1;
    filter: brightness(1.15);
  }
  36% {
    opacity: 0.65;
    filter: brightness(0.8);
  }
  52% {
    opacity: 1;
    filter: brightness(1.2);
  }
  70% {
    opacity: 0.8;
    filter: brightness(0.9);
  }
  88% {
    opacity: 1;
    filter: brightness(1.05);
  }
}
.bottom-center-box {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--bottom-center-box-width);
  height: var(--bottom-center-box-height);
  background: transparent;
  z-index: 10000;
}

.bottom-side-box {
  width: var(--bottom-center-box-width);
}

.bottom-side-box--left {
  left: calc(
    var(--side-bar-width) +
    (
      (50vw - (var(--bottom-center-box-width) / 2) - var(--side-bar-width))
      / 2
    )
  );
  transform: translateX(-50%);
}

.bottom-side-box--right {
  left: calc(
    50vw +
    (var(--bottom-center-box-width) / 2) +
    (
      (50vw - (var(--bottom-center-box-width) / 2) - var(--side-bar-width))
      / 2
    )
  );
  transform: translateX(-50%);
}
.bottom-center-body,
.bottom-center-title-wrap {
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.bottom-center-box.is-hidden-down:not(.is-hover-reveal) .bottom-center-body,
.bottom-center-box.is-hidden-down:not(.is-hover-reveal) .bottom-center-title-wrap {
  transform: translateY(61%);
}
.bottom-center-title {
  position: relative;
  margin: 0;
  max-width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  font-family: "Space Age", "Orbitron", sans-serif;
  font-size: clamp(0.95rem, 1.45vw, 1.7rem);
  line-height: 0.9;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;

  color: #cfffce;
  text-shadow:
    0 0 2px rgba(255,255,255,0.35),
    0 0 6px rgba(180,255,180,0.45),
    0 0 12px rgba(116,255,120,0.82),
    0 0 22px rgba(40,255,98,0.72),
    0 0 34px rgba(25,164,47,0.48);

  filter: saturate(1.08);
  opacity: 1;
  transition:
    opacity 160ms ease,
    filter 160ms ease;
  will-change: transform, opacity, filter;
  pointer-events: auto;
}
.bottom-center-box .bottom-center-title {
  letter-spacing: 0.2em;
}

.bottom-center-box.is-hidden-down:not(.is-hover-reveal) .bottom-center-title {
  opacity: 0;
  filter: saturate(1.08) brightness(0.7);
  animation: none !important;
}
.bottom-side-box--left .bottom-left-actions {
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.bottom-side-box--left.is-hidden-down:not(.is-hover-reveal) .bottom-left-actions {
  transform: translateY(61%);
}

.bottom-action-btn {
  width: 2.4vw;
  min-width: 20px;
  height: 2.4vw;
  min-height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 1;
  transition:
    transform 180ms ease,
    filter 160ms ease,
    opacity 160ms ease;
}

.bottom-side-box--left.is-hidden-down:not(.is-hover-reveal) .bottom-action-btn {
  opacity: 0;
  filter: brightness(0.7);
  pointer-events: none;
}
.bottom-center-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--top-bar-height);
  z-index: 10001;
  pointer-events: none;
  overflow: hidden;
}

.bottom-center-body {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 10000;
}

.margin-down-left,
.center-down-left {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: auto;
  object-fit: contain;
}

.margin-down-right,
.center-down-right {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: auto;
  object-fit: contain;
}

.bottom-center-title-wrap {
  position: absolute;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  padding-inline: 10%;
}

.bottom-center-title {
  position: relative;
  margin: 0;
  max-width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  font-family: "Space Age", "Orbitron", sans-serif;
  font-size: clamp(0.95rem, 1.45vw, 1.7rem);
  line-height: 0.9;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;

  color: #cfffce;
  text-shadow:
    0 0 2px rgba(255,255,255,0.35),
    0 0 6px rgba(180,255,180,0.45),
    0 0 12px rgba(116,255,120,0.82),
    0 0 22px rgba(40,255,98,0.72),
    0 0 34px rgba(25,164,47,0.48);

  filter: saturate(1.08);
  opacity: 1;
  transition:
    opacity 160ms ease,
    filter 160ms ease;
  will-change: transform, opacity, filter;
  pointer-events: auto;
}
/* ===== GLITCH LAYERS BOTTOM TITLES ===== */

.bottom-center-title::before,
.bottom-center-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;

  opacity: 0;
  pointer-events: none;

  will-change: transform, opacity, clip-path;
  transition: opacity 110ms ease;
}

/* magenta */
.bottom-center-title::before {
  color: rgba(255, 70, 190, 0.95);
  text-shadow:
    0 0 6px rgba(255, 70, 190, 0.95),
    0 0 14px rgba(255, 70, 190, 0.7),
    0 0 26px rgba(255, 70, 190, 0.45);
  mix-blend-mode: screen;
}

/* cyan */
.bottom-center-title::after {
  color: rgba(70, 220, 255, 0.95);
  text-shadow:
    0 0 6px rgba(70, 220, 255, 0.95),
    0 0 14px rgba(70, 220, 255, 0.7),
    0 0 26px rgba(70, 220, 255, 0.45);
  mix-blend-mode: screen;
}
/* ===== LIGHT HOVER BOTTOM TITLES ===== */

.bottom-center-box:hover .bottom-center-title {
  transform: scale(1.045);

  filter:
    brightness(1.18)
    saturate(1.12);

  text-shadow:
    0 0 3px rgba(255,255,255,0.45),
    0 0 10px currentColor,
    0 0 22px currentColor;

  transition:
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 260ms ease,
    text-shadow 260ms ease;
}

/* anulamos las capas glitch sin borrar estructura */
.bottom-center-title::before,
.bottom-center-title::after {
  display: none !important;
  animation: none !important;
}
.left-group {
  position: fixed;
  top: 0;
  left: var(--side-bar-width);
  width: calc(50vw - var(--center-box-width) / 2 - var(--side-bar-width));
  height: var(--center-box-height);
  z-index: 10000;

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--left-group-gap-ratio);
  padding-left: var(--left-group-gap-ratio);
  padding-right: calc(var(--left-group-gap-ratio) * 0.02);
}

.left-box {
  flex: 0 0 30.9%;
  height: var(--left-box-height);
  background: transparent;
}
.right-group {
  position: fixed;
  top: 0;
  right: var(--side-bar-width);
  width: calc(50vw - var(--center-box-width) / 2 - var(--side-bar-width));
  height: var(--center-box-height);
  z-index: 10000;

  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--left-group-gap-ratio);
  padding-left: calc(var(--left-group-gap-ratio) * 0.02);
  padding-right: var(--left-group-gap-ratio);
}
.right-box {
  flex: 0 0 30.9%;
  height: var(--left-box-height);
  background: transparent;
}
.left-group,
.right-group {
  position: fixed;
  top: 0;
  width: calc(50vw - var(--center-box-width) / 2 - var(--side-bar-width));
  height: var(--center-box-height);
  z-index: 10000;

  display: flex;
  align-items: flex-start;
  gap: var(--left-group-gap-ratio);
}

.left-group {
  left: var(--side-bar-width);
  justify-content: flex-start;
  padding-left: var(--left-group-gap-ratio);
  padding-right: calc(var(--left-group-gap-ratio) * 0.02);
}

.right-group {
  right: var(--side-bar-width);
  justify-content: flex-end;
  padding-left: calc(var(--left-group-gap-ratio) * 0.02);
  padding-right: var(--left-group-gap-ratio);
}

.left-slot,
.right-slot {
  position: relative;
  flex: 0 0 30.9%;
  height: var(--center-box-height);
}

.left-box,
.right-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--left-box-height);
  background: transparent;
  overflow: hidden;
}
.btn-title {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateY(-4px); /* 👈 nuevo */

  font-family: "Space Age", "Orbitron", sans-serif;
  font-size: clamp(0.55rem, 0.9vw, 0.9rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;

  color: #efc8ff;
  text-shadow:
    0 0 4px rgba(255,255,255,0.35),
    0 0 10px rgba(221,114,255,0.75);

  pointer-events: none;
}
.left-box .half-mask,
.right-box .half-mask {
  z-index: 1;
}

.left-overlay,
.right-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--top-bar-height);
  background: transparent;
  z-index: 10001;
  pointer-events: none;
}
/* overlays con imágenes */
.left-overlay,
.right-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--top-bar-height);
  z-index: 10001;
  pointer-events: none;
  overflow: hidden;
}

/* imagen izquierda */
.margin-left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* imagen derecha */
.margin-right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: auto;
  object-fit: contain;
}
/* imágenes botones */
.btn-left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: auto;
  object-fit: contain;
}

.btn-right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: auto;
  object-fit: contain;
}
.center-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--top-bar-height);
  z-index: 10001;
  pointer-events: none;
  overflow: hidden;
}
/* body central */
.center-body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 10000;
}

/* imagen izquierda central */
.center-left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* imagen derecha central */
.center-right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: auto;
  object-fit: contain;
}
/* máscaras de mitad exacta */
.half-mask {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
}

.half-mask-left {
  left: 0;
  width: 50%;
}

.half-mask-right {
  right: 0;
  width: 50%;
}

/* asegura referencia correcta */
.left-box,
.right-box,
.left-overlay,
.right-overlay,
.center-overlay,
.center-body {
  position: absolute;
}

/* imágenes izquierdas */
.margin-left,
.btn-left,
.center-left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* imágenes derechas */
.margin-right,
.btn-right,
.center-right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: auto;
  object-fit: contain;
}
.corner-box {
  position: fixed;
  width: var(--corner-size);
  height: var(--corner-size);
  z-index: 20000; /* 👈 lo subimos bien arriba */
  overflow: hidden;
  pointer-events: none;
}

.corner-box--tl {
  top: 0;
  left: 0;
}

.corner-box--tr {
  top: 0;
  right: 0;
}

.corner-box--bl {
  bottom: 0;
  left: 0;
}

.corner-box--br {
  bottom: 0;
  right: 0;
}

.corner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* las cajas reales son las que se mueven, NO los overlays */
.left-box,
.right-box {
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* estado oculto */
.top-buttons-hidden .left-box,
.top-buttons-hidden .right-box {
  transform: translateY(-53%);
}

/* escalera de dentro hacia fuera */

/* IZQUIERDA: interior -> exterior */
.top-buttons-hidden .left-slot:nth-child(3) .left-box { transition-delay: 0ms; }
.top-buttons-hidden .left-slot:nth-child(2) .left-box { transition-delay: 80ms; }
.top-buttons-hidden .left-slot:nth-child(1) .left-box { transition-delay: 160ms; }

/* DERECHA: interior -> exterior */
.top-buttons-hidden .right-slot:nth-child(1) .right-box { transition-delay: 0ms; }
.top-buttons-hidden .right-slot:nth-child(2) .right-box { transition-delay: 80ms; }
.top-buttons-hidden .right-slot:nth-child(3) .right-box { transition-delay: 160ms; }

/* al volver a aparecer, sin retrasos raros */
.left-slot .left-box,
.right-slot .right-box {
  transition-delay: 0ms;
}
.btn-title {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateY(-4px);

  font-family: "Space Age", "Orbitron", sans-serif;
  font-size: clamp(0.55rem, 0.9vw, 0.9rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;

  color: #efc8ff;
  text-shadow:
    0 0 4px rgba(255,255,255,0.4),
    0 0 10px rgba(221,114,255,0.8);

  pointer-events: none;

  isolation: isolate;
  will-change: filter, opacity, transform;
  transition:
    opacity 110ms ease,
    filter 110ms ease,
    text-shadow 110ms ease;
}

.btn-title::before,
.btn-title::after {
  content: attr(data-target);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;

  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity, clip-path, filter;
  transition: opacity 110ms ease;
}

/* capa magenta */
.btn-title::before {
  color: rgba(255, 70, 190, 0.95);
  text-shadow:
    0 0 6px rgba(255, 70, 190, 0.95),
    0 0 14px rgba(255, 70, 190, 0.72),
    0 0 24px rgba(255, 70, 190, 0.45);
  mix-blend-mode: screen;
}

/* capa cyan */
.btn-title::after {
  color: rgba(70, 220, 255, 0.95);
  text-shadow:
    0 0 6px rgba(70, 220, 255, 0.95),
    0 0 14px rgba(70, 220, 255, 0.72),
    0 0 24px rgba(70, 220, 255, 0.45);
  mix-blend-mode: screen;
}
/* ===== TOP BUTTON TITLE HOVER GLITCH PRO ===== */

.left-box:hover .btn-title,
.right-box:hover .btn-title,
.left-box:focus-visible .btn-title,
.right-box:focus-visible .btn-title {
  animation:
    btnTitleHoverFade 110ms ease-out forwards,
    btnTitleHoverJitter 820ms steps(2, end) infinite 110ms;
  filter: brightness(1.08) saturate(1.12);
  text-shadow:
    0 0 4px rgba(255,255,255,0.48),
    0 0 10px rgba(221,114,255,0.88),
    0 0 18px rgba(221,114,255,0.5);
}

.left-box:hover .btn-title::before,
.right-box:hover .btn-title::before,
.left-box:focus-visible .btn-title::before,
.right-box:focus-visible .btn-title::before {
  animation:
    btnTitleLayerFade 110ms ease-out forwards,
    btnTitleGlitchMagenta 720ms steps(2, end) infinite 110ms;
}

.left-box:hover .btn-title::after,
.right-box:hover .btn-title::after,
.left-box:focus-visible .btn-title::after,
.right-box:focus-visible .btn-title::after {
  animation:
    btnTitleLayerFade 110ms ease-out forwards,
    btnTitleGlitchCyan 860ms steps(2, end) infinite 110ms;
}

@keyframes btnTitleHoverFade {
  0% {
    opacity: 0.78;
    filter: blur(0.7px) brightness(1.18);
  }
  100% {
    opacity: 1;
    filter: blur(0) brightness(1.08);
  }
}

@keyframes btnTitleLayerFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.92;
  }
}

@keyframes btnTitleHoverJitter {
  0%   { transform: translateY(-4px) translateX(0); }
  14%  { transform: translateY(-4px) translateX(-0.5px); }
  28%  { transform: translateY(-4px) translateX(0.7px); }
  42%  { transform: translateY(-4px) translateX(-0.6px); }
  56%  { transform: translateY(-4px) translateX(0.5px); }
  70%  { transform: translateY(-4px) translateX(-0.4px); }
  84%  { transform: translateY(-4px) translateX(0.3px); }
  100% { transform: translateY(-4px) translateX(0); }
}

@keyframes btnTitleGlitchMagenta {
  0% {
    opacity: 0.15;
    transform: translateY(-4px) translateX(0);
    clip-path: inset(0 0 0 0);
  }
  10% {
    opacity: 0.9;
    transform: translateY(-4px) translateX(1.8px);
    clip-path: inset(6% 0 72% 0);
  }
  22% {
    opacity: 0.65;
    transform: translateY(-4px) translateX(-2px);
    clip-path: inset(64% 0 8% 0);
  }
  34% {
    opacity: 0.88;
    transform: translateY(-4px) translateX(1.2px);
    clip-path: inset(34% 0 40% 0);
  }
  46% {
    opacity: 0.56;
    transform: translateY(-4px) translateX(-1.4px);
    clip-path: inset(14% 0 56% 0);
  }
  58% {
    opacity: 0.92;
    transform: translateY(-4px) translateX(2.1px);
    clip-path: inset(74% 0 4% 0);
  }
  70% {
    opacity: 0.6;
    transform: translateY(-4px) translateX(-1.1px);
    clip-path: inset(46% 0 24% 0);
  }
  82% {
    opacity: 0.84;
    transform: translateY(-4px) translateX(1.5px);
    clip-path: inset(18% 0 50% 0);
  }
  100% {
    opacity: 0.2;
    transform: translateY(-4px) translateX(0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes btnTitleGlitchCyan {
  0% {
    opacity: 0.12;
    transform: translateY(-4px) translateX(0);
    clip-path: inset(0 0 0 0);
  }
  12% {
    opacity: 0.88;
    transform: translateY(-4px) translateX(-1.7px);
    clip-path: inset(70% 0 5% 0);
  }
  24% {
    opacity: 0.62;
    transform: translateY(-4px) translateX(2px);
    clip-path: inset(12% 0 58% 0);
  }
  36% {
    opacity: 0.9;
    transform: translateY(-4px) translateX(-1.1px);
    clip-path: inset(38% 0 34% 0);
  }
  48% {
    opacity: 0.58;
    transform: translateY(-4px) translateX(1.3px);
    clip-path: inset(8% 0 74% 0);
  }
  60% {
    opacity: 0.94;
    transform: translateY(-4px) translateX(-2.2px);
    clip-path: inset(56% 0 14% 0);
  }
  72% {
    opacity: 0.62;
    transform: translateY(-4px) translateX(1px);
    clip-path: inset(26% 0 46% 0);
  }
  84% {
    opacity: 0.86;
    transform: translateY(-4px) translateX(-1.4px);
    clip-path: inset(78% 0 3% 0);
  }
  100% {
    opacity: 0.18;
    transform: translateY(-4px) translateX(0);
    clip-path: inset(0 0 0 0);
  }
}
.bottom-left-actions {
  position: absolute;
  inset: 0;
  z-index: 10002;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;

  gap: 2.6vw;            /* 🔥 más separación */
  padding-inline: 6%;    /* 🔥 más espacio útil */

  pointer-events: auto;
  transform: translateY(4px);
}
.bottom-action-btn {
  width: 2.4vw;      /* 🔽 más pequeño */
  min-width: 20px;

  height: 2.4vw;
  min-height: 20px;

  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;

  transition:
    transform 180ms ease,
    filter 180ms ease,
    opacity 180ms ease;
}
.bottom-action-btn:hover {
  transform: translateY(-1px) scale(1.06);
}

.bottom-action-btn:active {
  transform: translateY(0) scale(0.97);
}

.bottom-action-btn:focus-visible {
  outline: none;
  filter: brightness(1.18);
}

.bottom-action-svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.bottom-action-btn--discord {
  color: #d86dff;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,0.35))
    drop-shadow(0 0 8px rgba(216,109,255,0.65))
    drop-shadow(0 0 16px rgba(216,109,255,0.85))
    drop-shadow(0 0 28px rgba(125,44,255,0.55));
}
.bottom-action-btn--telegram {
  color: #2c57d8;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,0.28))
    drop-shadow(0 0 8px rgba(44,87,216,0.62))
    drop-shadow(0 0 16px rgba(44,87,216,0.82))
    drop-shadow(0 0 28px rgba(22,42,126,0.60));
}

.bottom-action-btn--x {
  color: #7fd7ff;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,0.35))
    drop-shadow(0 0 8px rgba(127,215,255,0.65))
    drop-shadow(0 0 16px rgba(127,215,255,0.88))
    drop-shadow(0 0 28px rgba(72,146,255,0.52));
}

.bottom-action-btn--book {
  color: #ffd84d;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,0.35))
    drop-shadow(0 0 8px rgba(255,216,77,0.62))
    drop-shadow(0 0 16px rgba(255,216,77,0.86))
    drop-shadow(0 0 28px rgba(255,174,0,0.50));
}
.bottom-side-box--left .bottom-left-actions {
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.bottom-side-box--left.is-hidden-down:not(.is-hover-reveal) .bottom-left-actions {
  transform: translateY(61%);
}
.bottom-side-box--right .bottom-center-title {
  color: #ffd84d;

  text-shadow:
    0 0 4px rgba(255,255,255,0.45),
    0 0 10px rgba(255,216,77,0.9),
    0 0 20px rgba(255,216,77,1),
    0 0 40px rgba(255,174,0,0.85);
}

.bottom-action-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;

  /* glow MUCHO más controlado */
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,0.3))
    drop-shadow(0 0 6px rgba(255,255,255,0.2));
}
.bottom-action-btn--discord .bottom-action-img {
  filter:
    drop-shadow(0 0 4px rgba(216,109,255,0.6))
    drop-shadow(0 0 10px rgba(216,109,255,0.5));
}

.bottom-action-btn--telegram .bottom-action-img {
  filter:
    drop-shadow(0 0 4px rgba(44,87,216,0.6))
    drop-shadow(0 0 10px rgba(44,87,216,0.5));
}

.bottom-action-btn--x .bottom-action-img {
  filter:
    drop-shadow(0 0 4px rgba(127,215,255,0.6))
    drop-shadow(0 0 10px rgba(127,215,255,0.5));
}
/* tamaño base más pequeño */
.bottom-action-img {
  transform: scale(0.85);
}

/* X aún más pequeña */
.bottom-action-btn--x .bottom-action-img {
  transform: scale(0.75);
}
/* ===== SOCIAL BUTTONS — SIMPLE LIGHT HOVER LABEL ===== */

.bottom-action-btn {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.bottom-action-img,
.bottom-action-svg {
  position: relative;
  z-index: 2;
}

/* palabra encima */
.bottom-action-btn::before {
  content: attr(data-holo);

  position: absolute;

  left: 50%;
  bottom: calc(100% + 42px);

  transform:
    translateX(-50%)
    translateY(16px)
    scale(0.82);

  opacity: 0;

  pointer-events: none;
  z-index: 6;

  white-space: nowrap;

  padding:
    0.38em 0.9em
    0.32em;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(4,8,18,0.82),
      rgba(4,8,18,0.58)
    );

  border: 1px solid rgba(255,255,255,0.08);

  backdrop-filter: blur(4px);

  font-family: "Space Age", "Orbitron", sans-serif;

  font-size: clamp(0.62rem, 0.95vw, 1rem);

  letter-spacing: 0.18em;
  line-height: 1;

  text-transform: uppercase;

  color: currentColor;

  text-shadow:
    0 0 2px rgba(0,0,0,1),
    0 0 6px rgba(0,0,0,0.95),
    0 0 12px currentColor,
    0 0 22px currentColor;

  box-shadow:
    0 0 10px rgba(0,0,0,0.45),
    0 0 18px currentColor;

  transition:
    opacity 360ms ease,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* hover suave */
.bottom-action-btn:hover::before,
.bottom-action-btn:focus-visible::before {
  opacity: 1;

  transform:
    translateX(-50%)
    translateY(0)
    scale(1);
}

.bottom-action-btn:hover,
.bottom-action-btn:focus-visible {
  z-index: 20;
}

/* ==========================================================================
   FASE 6 — HUD MOBILE: i pulsanti superiori restano SEMPRE esposti.
   (Su desktop si nascondono fuori dalla home e riappaiono in hover; su mobile
   non c'è hover, quindi annulliamo lo stato "nascosto".)
   In seguito sostituiremo i testi con icone solo per la versione mobile.
   ========================================================================== */
@media (max-width: 768px) {
  .top-buttons-hidden .left-box,
  .top-buttons-hidden .right-box {
    transform: none !important;
  }
}

/* Icona dentro al pulsante: nascosta su desktop, visibile su mobile al posto del testo */
.btn-icon {
  display: none;
}

@media (max-width: 768px) {
  /* su mobile il testo lascia il posto all'icona */
  .left-box .btn-title,
  .right-box .btn-title {
    display: none !important;
  }

  .btn-icon {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);   /* -52%: compensa il leggero offset verticale del frame */
    z-index: 6;
    width: auto;
    height: 49.6%;     /* -20% rispetto a 62% */
    max-width: 59.2%;  /* -20% rispetto a 74% */
    object-fit: contain;
    pointer-events: none;
    /* neon viola: luminoso ma con aura ancora più ridotta */
    filter:
      drop-shadow(0 0 1px rgba(255, 255, 255, 1))
      drop-shadow(0 0 2.5px rgba(221, 114, 255, 1))
      drop-shadow(0 0 4.5px rgba(181, 68, 255, 0.85));
  }
}

/* === Titolo pagina su mobile — override messo IN FONDO per vincere la cascata
   (il blocco @media in alto veniva sovrascritto dalla regola base .center-title). === */
@media (max-width: 760px) {
  .center-title { font-size: clamp(0.7rem, 3vw, 1rem); }
  /* titolo lungo (es. "BSC SPACESALOON"): piu' piccolo, non sfora ne' si sovrappone */
  .center-title.center-title--long {
    font-size: clamp(0.52rem, 2.2vw, 0.78rem);
    column-gap: 0.34em;
  }
}