/* AI Toolbelt — unique synthwave scenes per page */

/* ── Shared scene layers ── */
.scene-grid {
  position: absolute;
  bottom: 0;
  left: -50%;
  right: -50%;
  height: 45%;
  transform: perspective(300px) rotateX(65deg);
  transform-origin: center top;
  mask: linear-gradient(180deg, transparent 0%, #000 25%);
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 25%);
}

.scene-mountains {
  position: absolute;
  left: 0;
  right: 0;
  height: 30%;
  pointer-events: none;
}

.scene-mountains svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Home: classic outrun sunset ── */
.scene--home {
  background:
    radial-gradient(ellipse 120% 80% at 50% 100%, #1a0033 0%, transparent 60%),
    linear-gradient(180deg, #0a0014 0%, #12002e 35%, #1a0040 55%, #2d0055 72%, #ff2a6d 88%, #ff6c11 100%);
}

.scene--home .stars {
  background-image:
    radial-gradient(1px 1px at 10% 15%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 25% 8%, rgba(255,255,255,.8) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 40% 22%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 55% 5%, rgba(255,255,255,.6) 50%, transparent 50%),
    radial-gradient(1px 1px at 70% 18%, #fff 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 85% 10%, rgba(255,255,255,.9) 50%, transparent 50%),
    radial-gradient(1px 1px at 92% 25%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 15% 35%, rgba(255,255,255,.5) 50%, transparent 50%),
    radial-gradient(1px 1px at 60% 30%, rgba(255,255,255,.7) 50%, transparent 50%),
    radial-gradient(1px 1px at 78% 38%, #fff 50%, transparent 50%);
}

.scene--home .sun {
  position: absolute;
  left: 50%;
  bottom: 28%;
  width: min(320px, 55vw);
  height: min(320px, 55vw);
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffea00 0%, #ff6c11 40%, #ff2a6d 100%);
  box-shadow: 0 0 60px #ff2a6d, 0 0 120px rgba(255, 42, 109, 0.5);
}

.scene--home .sun::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(180deg, transparent 0px, transparent 8px, #12002e 8px, #12002e 16px);
  mask: linear-gradient(180deg, transparent 30%, #000 55%);
  -webkit-mask: linear-gradient(180deg, transparent 30%, #000 55%);
}

.scene--home .scene-mountains { bottom: 22%; }
.scene--home .glow-horizon { bottom: 22%; }

.scene--home .scene-grid {
  background:
    linear-gradient(transparent 0%, rgba(255, 42, 109, 0.15) 100%),
    repeating-linear-gradient(90deg, transparent 0px, transparent 79px, rgba(5, 217, 232, 0.35) 79px, rgba(5, 217, 232, 0.35) 80px),
    repeating-linear-gradient(0deg, transparent 0px, transparent 39px, rgba(5, 217, 232, 0.35) 39px, rgba(5, 217, 232, 0.35) 40px);
}

/* ── AI SEO App: radar moon + pyramid city ── */
.scene--seo {
  background:
    radial-gradient(ellipse 80% 50% at 70% 20%, rgba(5, 217, 232, 0.12) 0%, transparent 50%),
    linear-gradient(180deg, #050014 0%, #0f0028 40%, #1a0045 65%, #3d0060 82%, #ff2a6d 95%, #d400ff 100%);
}

.scene--seo .stars {
  background-image:
    radial-gradient(1px 1px at 8% 12%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 22% 28%, rgba(255,255,255,.7) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 45% 8%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 68% 18%, rgba(255,255,255,.8) 50%, transparent 50%),
    radial-gradient(1px 1px at 88% 32%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 35% 45%, rgba(255,255,255,.5) 50%, transparent 50%);
}

.scene--seo .moon {
  position: absolute;
  top: 12%;
  right: 15%;
  width: min(140px, 28vw);
  height: min(140px, 28vw);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e0f7ff, #05d9e8 40%, #1a0040 70%);
  box-shadow: 0 0 40px rgba(5, 217, 232, 0.6), 0 0 80px rgba(5, 217, 232, 0.2);
}

.scene--seo .radar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(500px, 90vw);
  height: min(500px, 90vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(5, 217, 232, 0.15);
  box-shadow:
    0 0 0 40px rgba(5, 217, 232, 0.03),
    0 0 0 80px rgba(5, 217, 232, 0.02),
    0 0 0 120px rgba(5, 217, 232, 0.01);
}

.scene--seo .radar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(5, 217, 232, 0.25) 30deg, transparent 60deg);
  animation: radar-sweep 4s linear infinite;
}

.scene--seo .pyramids {
  position: absolute;
  bottom: 18%;
  left: 0;
  right: 0;
  height: 35%;
}

.scene--seo .pyramids svg { width: 100%; height: 100%; display: block; }

.scene--seo .glow-horizon { bottom: 18%; opacity: 0.7; }

.scene--seo .scene-grid {
  height: 38%;
  background:
    linear-gradient(transparent 0%, rgba(212, 0, 255, 0.12) 100%),
    repeating-linear-gradient(90deg, transparent 0px, transparent 59px, rgba(212, 0, 255, 0.3) 59px, rgba(212, 0, 255, 0.3) 60px),
    repeating-linear-gradient(0deg, transparent 0px, transparent 29px, rgba(212, 0, 255, 0.3) 29px, rgba(212, 0, 255, 0.3) 30px);
}

@keyframes radar-sweep {
  to { transform: rotate(360deg); }
}

/* ── Data Analysis App: matrix streams + wireframe cubes ── */
.scene--data {
  background:
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(5, 217, 232, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #020810 0%, #001a20 35%, #002830 60%, #003848 80%, #05d9e8 95%, #004d5a 100%);
}

.scene--data .stars {
  background-image:
    radial-gradient(1px 1px at 12% 8%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 38% 15%, rgba(255,255,255,.6) 50%, transparent 50%),
    radial-gradient(1px 1px at 72% 6%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 90% 22%, rgba(255,255,255,.7) 50%, transparent 50%);
}

.scene--data .data-streams {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0px, transparent 18px, rgba(5, 217, 232, 0.04) 18px, rgba(5, 217, 232, 0.04) 19px);
  mask: linear-gradient(180deg, transparent, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.3) 100%);
  -webkit-mask: linear-gradient(180deg, transparent, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.3) 100%);
}

.scene--data .data-streams::before,
.scene--data .data-streams::after {
  content: "";
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(5, 217, 232, 0.6), transparent);
  animation: stream-fall 3s linear infinite;
}

.scene--data .data-streams::before { left: 20%; animation-delay: 0s; }
.scene--data .data-streams::after { left: 75%; animation-delay: 1.5s; }

.scene--data .wire-cubes {
  position: absolute;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: min(400px, 80vw);
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 2rem;
}

.scene--data .cube {
  width: 60px;
  height: 60px;
  border: 2px solid rgba(5, 217, 232, 0.5);
  transform: rotateX(55deg) rotateZ(45deg);
  box-shadow:
    inset 0 0 20px rgba(5, 217, 232, 0.15),
    0 0 15px rgba(5, 217, 232, 0.2);
}

.scene--data .cube:nth-child(1) { height: 40px; border-color: rgba(255, 42, 109, 0.5); }
.scene--data .cube:nth-child(2) { height: 80px; }
.scene--data .cube:nth-child(3) { height: 55px; border-color: rgba(212, 0, 255, 0.5); }

.scene--data .bar-chart {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 80px;
  opacity: 0.4;
}

.scene--data .bar {
  width: 16px;
  background: linear-gradient(180deg, #05d9e8, transparent);
  box-shadow: 0 0 10px rgba(5, 217, 232, 0.4);
}

.scene--data .bar:nth-child(1) { height: 35px; }
.scene--data .bar:nth-child(2) { height: 60px; }
.scene--data .bar:nth-child(3) { height: 45px; }
.scene--data .bar:nth-child(4) { height: 75px; }
.scene--data .bar:nth-child(5) { height: 50px; }

.scene--data .glow-horizon { bottom: 20%; background: linear-gradient(90deg, transparent, #05d9e8, #004d5a, #05d9e8, transparent); }

.scene--data .scene-grid {
  height: 40%;
  background:
    repeating-linear-gradient(90deg, transparent 0px, transparent 49px, rgba(5, 217, 232, 0.25) 49px, rgba(5, 217, 232, 0.25) 50px),
    repeating-linear-gradient(0deg, transparent 0px, transparent 24px, rgba(5, 217, 232, 0.25) 24px, rgba(5, 217, 232, 0.25) 25px);
}

@keyframes stream-fall {
  0% { transform: translateY(-100%); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* ── URL Categorizer: network nodes + hex grid ── */
.scene--categorizer {
  background:
    radial-gradient(ellipse 70% 50% at 30% 30%, rgba(212, 0, 255, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(255, 42, 109, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #080012 0%, #120028 45%, #1e0040 70%, #ff2a6d 90%, #d400ff 100%);
}

.scene--categorizer .stars {
  background-image:
    radial-gradient(1px 1px at 5% 20%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 30% 10%, rgba(255,255,255,.8) 50%, transparent 50%),
    radial-gradient(1px 1px at 55% 25%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 80% 8%, rgba(255,255,255,.6) 50%, transparent 50%),
    radial-gradient(1px 1px at 95% 35%, #fff 50%, transparent 50%);
}

.scene--categorizer .hex-grid {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0 L56 16 L56 50 L28 66 L0 50 L0 16 Z' fill='none' stroke='rgba(5,217,232,0.08)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 100px;
  opacity: 0.6;
}

.scene--categorizer .network {
  position: absolute;
  inset: 0;
}

.scene--categorizer .network svg {
  width: 100%;
  height: 100%;
}

.scene--categorizer .network line {
  stroke: rgba(5, 217, 232, 0.2);
  stroke-width: 1;
}

.scene--categorizer .network circle {
  fill: var(--color-magenta);
  filter: drop-shadow(0 0 6px rgba(255, 42, 109, 0.8));
}

.scene--categorizer .network circle.cyan {
  fill: var(--color-cyan);
  filter: drop-shadow(0 0 6px rgba(5, 217, 232, 0.8));
}

.scene--categorizer .network circle.purple {
  fill: var(--color-purple);
  filter: drop-shadow(0 0 6px rgba(212, 0, 255, 0.8));
}

.scene--categorizer .pulse-ring {
  position: absolute;
  top: 35%;
  left: 50%;
  width: min(300px, 60vw);
  height: min(300px, 60vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(5, 217, 232, 0.2);
  animation: pulse-ring 3s ease-out infinite;
}

.scene--categorizer .pulse-ring::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 1px solid rgba(212, 0, 255, 0.15);
  animation: pulse-ring 3s ease-out 1s infinite;
}

.scene--categorizer .glow-horizon { bottom: 24%; }

.scene--categorizer .scene-grid {
  height: 42%;
  background:
    linear-gradient(transparent 0%, rgba(212, 0, 255, 0.1) 100%),
    repeating-linear-gradient(90deg, transparent 0px, transparent 69px, rgba(255, 42, 109, 0.28) 69px, rgba(255, 42, 109, 0.28) 70px),
    repeating-linear-gradient(0deg, transparent 0px, transparent 34px, rgba(255, 42, 109, 0.28) 34px, rgba(255, 42, 109, 0.28) 35px);
}

@keyframes pulse-ring {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}