/* Basic reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background:#041b14; color:#a3ffb3; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
#app { min-height: 100%; display: grid; place-items: center; padding: 24px; }

.frame {
  position: relative;
  width: min(92vw, 900px);
  aspect-ratio: 1/1;
  border: 1px solid #0a5c3e;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 10%, #0b2e22 10%, #071e16 60%, #041b14 100%);
  box-shadow: 0 0 0 1px rgba(0,255,170,0.08), 0 20px 60px rgba(0,0,0,0.6) inset;
}

#art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02) saturate(1.05) brightness(0.9);
  transition: transform 400ms ease, filter 400ms ease, opacity 400ms ease;
  user-select: none;
}

#matrix {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
  mix-blend-mode: screen;
}

#glow {
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 0deg, rgba(0,255,170,0.06), rgba(0,255,100,0.0), rgba(0,255,170,0.06));
  filter: blur(40px);
  opacity: .2;
  transform: rotate(0deg);
  transition: opacity 600ms ease, transform 2000ms linear;
  pointer-events: none;
}

#hint {
  position: absolute;
  right: 10px; bottom: 10px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8be4a0;
  opacity: .55;
  background: rgba(0,0,0,0.25);
  padding: 6px 8px;
  border: 1px solid rgba(0,255,170,0.15);
  border-radius: 6px;
}

/* Glitch layers using clip-path slices */
.frame.glitch #art {
  animation: shift 800ms steps(2, jump-none) 0s 1 both;
  filter: hue-rotate(-10deg) saturate(1.3) contrast(1.15);
}

.frame.glitch::before,
.frame.glitch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('assets/artwork.webp') center/cover no-repeat;
  mix-blend-mode: lighten;
  opacity: .4;
}

.frame.glitch::before { clip-path: inset(0 0 60% 0); transform: translate(-3px, 0); filter: drop-shadow(0 0 1px #00ff9a); }
.frame.glitch::after  { clip-path: inset(40% 0 0 0); transform: translate(3px, 0);  filter: drop-shadow(0 0 1px #00ffaa); }

@keyframes shift {
  0%   { transform: translate(0,0) }
  20%  { transform: translate(2px,-2px) skewX(1deg) }
  40%  { transform: translate(-2px,2px) skewX(-1deg) }
  60%  { transform: translate(1px,0) }
  80%  { transform: translate(-1px,1px) }
  100% { transform: translate(0,0) }
}

/* Active state toggles */
.frame.active #matrix { opacity: .9; }
.frame.active #glow { opacity: .35; transform: rotate(360deg); }
.frame.faded #art { opacity: .85; filter: blur(0.5px) brightness(0.85) saturate(1.1); }

/* Accessibility */
.frame:focus-visible { outline: 2px solid #00ffaa; outline-offset: 4px; }