/* About page micro-interactions */

@keyframes novaGlow {
  0%, 100% { box-shadow: 0 0 28px rgba(0,243,255,0.10); }
  50% { box-shadow: 0 0 38px rgba(188,19,254,0.14), 0 0 20px rgba(0,243,255,0.10); }
}

.about-avatar{
  animation: novaGlow 6s ease-in-out infinite;
}

@keyframes glitchFlash {
  0% { filter: none; transform: translate(0,0); }
  10% { filter: contrast(1.2) saturate(1.2); transform: translate(1px,0); }
  20% { filter: contrast(1.0) saturate(1.0); transform: translate(-1px,0); }
  30% { filter: none; transform: translate(0,0); }
  100% { filter: none; transform: translate(0,0); }
}

#nova-hero.glitch{
  animation: glitchFlash 280ms ease-out;
}

/* Collage gallery (responsive, consistent cropping) */
.nova-collage{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.nova-tile{
  margin: 0;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.22);
  box-shadow: 0 0 24px rgba(0,243,255,0.06);
  overflow: hidden;

  grid-column: span 4;
}

.nova-tile.t-wide{ grid-column: span 8; }
.nova-tile.t-tall{ grid-row: span 2; }

.nova-tile img{
  width: 100%;
  height: 220px;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}

.nova-tile.t-wide img{ height: 260px; }
.nova-tile.t-tall img{ height: 520px; }

.nova-tile figcaption{
  margin-top: 10px;
  color: var(--text-dim);
  font-size: 0.98rem;
  line-height: 1.35;
}

.nova-tile b{ color: var(--text-color); }

@media (max-width: 820px){
  .nova-collage{ grid-template-columns: repeat(6, 1fr); }
  .nova-tile{ grid-column: span 3; }
  .nova-tile.t-wide{ grid-column: span 6; }
  .nova-tile.t-tall{ grid-row: span 1; }
  .nova-tile img{ height: 210px; }
  .nova-tile.t-wide img{ height: 240px; }
  .nova-tile.t-tall img{ height: 240px; }
}

@media (max-width: 520px){
  .nova-collage{ grid-template-columns: 1fr; }
  .nova-tile, .nova-tile.t-wide{ grid-column: span 1; }
  .nova-tile img, .nova-tile.t-wide img, .nova-tile.t-tall img{ height: 240px; }
}