/* PixelLoom Landing — Tweaks-driven layout & atmosphere variants.
   Three expressive controls, each reshaping a different dimension of the
   design rather than nudging a single property:
   - Motion energy   (Calma / Estándar / Kinético)  → see animations.css
   - Bento layout    (Asimétrico / Uniforme / Vertical)
   - Atmosphere      (Circuito / Aurora / Minimal) */

/* ============ Bento layout variants ============ */
/* Per-app brand-colored glowing border (accent set inline via --tile-b/--tile-glow) */
.brand-tile { border: 1px solid var(--tile-b, rgba(0,229,255,0.25)) !important; box-shadow: 0 0 18px -4px var(--tile-glow, transparent); animation: tileGlow 4.5s ease-in-out infinite; }
.brand-tile:hover { box-shadow: 0 0 40px -2px var(--tile-glow, transparent); border-color: var(--tile-b) !important; }
@keyframes tileGlow { 0%,100% { box-shadow: 0 0 16px -6px var(--tile-glow, transparent); } 50% { box-shadow: 0 0 30px -2px var(--tile-glow, transparent); } }
@media (prefers-reduced-motion: reduce) { .brand-tile { animation: none; } }

.tile-keppler { grid-column: span 7; min-height: 430px; }
.tile-viboo   { grid-column: span 5; min-height: 430px; }
.tile-apparto { grid-column: span 6; min-height: 340px; }
.tile-vesta   { grid-column: span 6; min-height: 340px; }

.bento-grid[data-bento="uniforme"] .tile-keppler,
.bento-grid[data-bento="uniforme"] .tile-viboo,
.bento-grid[data-bento="uniforme"] .tile-apparto,
.bento-grid[data-bento="uniforme"] .tile-vesta {
  grid-column: span 6;
  min-height: 400px;
}

.bento-grid[data-bento="vertical"] .tile-keppler,
.bento-grid[data-bento="vertical"] .tile-viboo,
.bento-grid[data-bento="vertical"] .tile-apparto,
.bento-grid[data-bento="vertical"] .tile-vesta {
  grid-column: 1 / -1;
  min-height: 300px;
}
.bento-grid[data-bento="vertical"] .icon-watermark {
  font-size: 110px !important;
}

/* ============ Atmosphere variants ============ */

/* Minimal: strip the dot-grid texture and calm the ambient glow */
#pl-app[data-atmosphere="minimal"] .pl-circuit-bg {
  background-image: none !important;
}
#pl-app[data-atmosphere="minimal"] .pulse-glow {
  animation: none !important;
  opacity: 0.35;
}

/* Aurora: slow drifting color blooms layered behind every section's content */
.aurora-layer {
  opacity: 0;
  transition: opacity 0.8s ease;
  mix-blend-mode: screen;
  pointer-events: none;
}
#pl-app[data-atmosphere="aurora"] .aurora-layer {
  opacity: 1;
}
#pl-app[data-atmosphere="aurora"] .pl-circuit-bg {
  background-image: none;
}
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}
.aurora-blob-1 { width: 70%; height: 70%; top: -25%; left: -15%; background: var(--pl-cyan-500); opacity: 0.45; animation: aurora-drift-1 24s ease-in-out infinite; }
.aurora-blob-2 { width: 60%; height: 60%; bottom: -25%; right: -15%; background: var(--pl-green-500); opacity: 0.26; animation: aurora-drift-2 28s ease-in-out infinite; }
.aurora-blob-3 { width: 50%; height: 50%; top: 30%; left: 45%; background: var(--pl-cyan-300); opacity: 0.2; animation: aurora-drift-3 32s ease-in-out infinite; }

@keyframes aurora-drift-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(5%, 6%) scale(1.1); } }
@keyframes aurora-drift-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-6%, -5%) scale(1.08); } }
@keyframes aurora-drift-3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-5%, 8%) scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .aurora-blob { animation: none !important; }
}