/* 7 Custom Animations for the Ads Background */
@keyframes floatAdAnim1 {
  0% { transform: translateY(100vh) scale(0.8) rotate(-10deg); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(-20vh) scale(1.2) rotate(10deg); opacity: 0; }
}
@keyframes floatAdAnim2 {
  0% { transform: translateX(100vw) scale(1); opacity: 0; }
  20% { opacity: 0.8; }
  80% { opacity: 0.8; }
  100% { transform: translateX(-20vw) scale(1.5); opacity: 0; }
}
@keyframes floatAdAnim3 {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(2.5); opacity: 0.9; }
  100% { transform: scale(5); opacity: 0; }
}
@keyframes floatAdAnim4 {
  0% { transform: translateY(-50vh) rotateX(90deg); opacity: 0; }
  30% { transform: translateY(20vh) rotateX(0deg); opacity: 1; }
  70% { transform: translateY(50vh) rotateX(0deg); opacity: 1; }
  100% { transform: translateY(150vh) rotateX(-90deg); opacity: 0; }
}
@keyframes floatAdAnim5 {
  0% { transform: translateX(-50vw) translateY(50vh) rotate(45deg); opacity: 0; }
  50% { transform: translateX(50vw) translateY(-20vh) rotate(0deg); opacity: 1; }
  100% { transform: translateX(150vw) translateY(50vh) rotate(-45deg); opacity: 0; }
}
@keyframes floatAdAnim6 {
  0% { transform: scale(1.5); opacity: 0; filter: blur(10px); }
  50% { transform: scale(1); opacity: 1; filter: blur(0px); }
  100% { transform: scale(0.5); opacity: 0; filter: blur(10px); }
}
@keyframes floatAdAnim7 {
  0% { transform: rotate(0deg) translateX(200px) rotate(0deg); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: rotate(360deg) translateX(200px) rotate(-360deg); opacity: 0; }
}

.floating-ad-text {
  position: absolute;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* 5 Colors for Ads Background */
.ad-color-1 { color: #0ff; text-shadow: 0 0 10px #0ff; }
.ad-color-2 { color: #ff00ff; text-shadow: 0 0 10px #ff00ff; }
.ad-color-3 { color: #ffff00; text-shadow: 0 0 10px #ffff00; }
.ad-color-4 { color: #00ff00; text-shadow: 0 0 10px #00ff00; }
.ad-color-5 { color: #ff3333; text-shadow: 0 0 10px #ff3333; }

.ads-container {
  z-index: 2;
  position: relative;
  background: rgba(13, 15, 26, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  min-height: calc(100vh - 8rem);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
  margin-top: 2rem;
  transition: opacity 0.5s ease;
}

/* ── Magic Circle ── */
.magic-circle {
  width: 76px;
  border-radius: 20px;
  background: transparent;
  border: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--text-muted);
  transition: all 0.5s ease;
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
}

.magic-circle svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  transition: all 0.5s ease;
}

/* Green Glow Animation */
.magic-circle.glow-green {
  transition: all 4s ease-in-out;
  color: #10b981;
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.6), inset 0 0 10px rgba(16, 185, 129, 0.2);
}

/* ── Screen Sliding System ── */
body, html {
  overflow: hidden; /* Prevent native scroll to force slide mechanic */
  width: 100vw;
  height: 100vh;
}

#slideWrapper {
  width: 100vw;
  height: 200vh; /* Fit both screens */
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
  display: flex;
  flex-direction: column;
}

.screen-view {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto; /* Allow scrolling inside the active screen */
}