@import url("partials/_variables.css");
@import url("partials/_globals.css");
@import url("partials/_layout.css");
@import url("partials/_components.css");
@import url("partials/_animation.css");

@import url("partials/_nav.css");
@import url("partials/_footer.css");
@import url("partials/_media.css");
/* ========================= */
/* Contact Popover (API)     */
/* ========================= */

/* Make the Contact trigger the CSS anchor for positioning */
#contactBtn {
  anchor-name: --contact-anchor;
}

/* Popover base */
#contactPopover[popover] {
  container-type: inline-size;
  container-name: contact;

  background: var(--bg-secondary);
  color: var(--text-body);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  inline-size: min(90svw, 38rem);
  max-block-size: 90svh;
  overflow: auto;
}

/* Anchor positioning under the Contact button */
@supports (top: anchor(top)) {
  #contactPopover[popover] {
    position: absolute;
    position-anchor: --contact-anchor; /* from #contactBtn */
    top: anchor(bottom);
    left: anchor(center);
    translate: -50% 0;
    margin-block-start: 0.5rem;
  }
}

/* Backdrop */
#contactPopover:popover-open::backdrop {
  background: oklch(0% 0 0 / 0.45);
  backdrop-filter: blur(2px);
}

/* Inner layout */
.contact-card {
  display: grid;
  gap: 1rem;
  align-items: start;
}

.contact-photo {
  inline-size: 100%;
  max-inline-size: 12rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-m);
  border: 1px solid var(--border-color);
  background: var(--neutral-200);
}

.contact-name {
  margin: 0 0 0.25rem 0;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--neutral-900);
}

.contact-bio {
  margin: 0.25rem 0 0.75rem 0;
  color: var(--text-muted);
}

.contact-meta {
  margin: 0;
  font-style: normal;
}

.contact-meta a {
  color: var(--accent-primary);
  text-decoration: none;
}

.contact-meta a:hover {
  color: var(--accent-primary-dark);
  text-decoration: underline;
}

/* Close button */
.contact-close {
  position: absolute;
  inset-inline-end: 0.75rem;
  inset-block-start: 0.75rem;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: oklch(100% 0 0);              /* white */
  box-shadow: 0 1px 6px oklch(0% 0 0 / 0.15);
  cursor: pointer;
}

/* A11y utility */
.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ================= */
/* Animation Cards   */
/* ================= */

.anim-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.anim-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  box-shadow: 0 6px 18px oklch(0% 0 0 / 0.08);
  padding: 1rem;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.75rem;
  text-align: center;
}

.anim-title {
  margin: 0;
  color: var(--neutral-900);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 1.125rem;
  letter-spacing: 0.02em;
}

.stage {
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.625rem;
  box-shadow:
    0 16px 32px oklch(0% 0 0 / 0.06),
    0 2px 4px oklch(0% 0 0 / 0.08) inset;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: block;
}

/* Card 1: Particle Burst (clip-path) */
.particle-stage {
  background:
    radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--accent-primary), transparent 82%) 0% 70%, transparent 80%),
    var(--bg-secondary);
  position: relative;
}

.particle-mask {
  position: absolute;
  inset: 12%;
  inline-size: 76%;
  block-size: 76%;
  margin: auto;
  clip-path: polygon(
    50% 8%,
    70% 18%,
    88% 38%,
    82% 72%,
    52% 92%,
    25% 84%,
    12% 55%,
    18% 28%
  );
  background: radial-gradient(circle at 40% 35%, color-mix(in oklab, var(--accent-primary-light), transparent 70%) 0% 70%, transparent 75%);
  border-radius: 2rem;
  box-shadow:
    0 10px 20px oklch(0% 0 0 / 0.2),
    0 0 24px color-mix(in oklab, var(--accent-primary), transparent 60%);
  overflow: hidden;
  position: relative;
}

/* glowing particle dots */
.particle {
  position: absolute;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, oklch(100% 0 0) 0%, oklch(100% 0 0 / 0) 70%);
  box-shadow:
    0 0 8px oklch(100% 0 0 / 0.8),
    0 0 16px color-mix(in oklab, var(--accent-primary-light), transparent 40%);
  opacity: 0;
  animation-name: floatUp;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

/* each particle gets its own timing/offset */
.p1  { inset-inline-start: 20%; inset-block-end: 10%; animation-duration: 3s;   animation-delay: 0s;   }
.p2  { inset-inline-start: 40%; inset-block-end: 5%;  animation-duration: 3.6s; animation-delay: .4s;  }
.p3  { inset-inline-start: 60%; inset-block-end: 12%; animation-duration: 2.8s; animation-delay: .8s;  }
.p4  { inset-inline-start: 30%; inset-block-end: 20%; animation-duration: 3.2s; animation-delay: 1.2s; }
.p5  { inset-inline-start: 70%; inset-block-end: 18%; animation-duration: 2.5s; animation-delay: 1.4s; }
.p6  { inset-inline-start: 50%; inset-block-end: 2%;  animation-duration: 3.8s; animation-delay: 1.6s; }
.p7  { inset-inline-start: 15%; inset-block-end: 25%; animation-duration: 2.9s; animation-delay: 2s;   }
.p8  { inset-inline-start: 80%; inset-block-end: 10%; animation-duration: 3.4s; animation-delay: 2.4s; }
.p9  { inset-inline-start: 45%; inset-block-end: 15%; animation-duration: 2.6s; animation-delay: 2.8s; }
.p10 { inset-inline-start: 65%; inset-block-end: 8%;  animation-duration: 3.1s; animation-delay: 3.2s; }

@keyframes floatUp {
  0%   { transform: translateY(0)    scale(0.6); opacity: 0;   }
  20%  { transform: translateY(-10%) scale(0.8); opacity: .8; }
  60%  { transform: translateY(-40%) scale(1);   opacity: .9; }
  100% { transform: translateY(-70%) scale(1.1); opacity: 0;   }
}

/* Card 2: Equalizer Bars (filter) */
.equalizer-stage {
  background:
    radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--accent-secondary), transparent 80%) 0% 70%, transparent 80%),
    var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.equalizer-wrapper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 8px;
  column-gap: 8px;
  align-items: end;
  block-size: 60%;
  inline-size: 70%;
}

.bar {
  inline-size: 8px;
  border-radius: 4px;
  background: linear-gradient(
    to top,
    var(--accent-primary-dark) 0%,
    var(--accent-primary) 50%,
    var(--accent-primary-light) 100%
  );
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent-primary-light), transparent 30%);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  filter: brightness(1);
  transform-origin: bottom center;
}

.b1 { animation: bounceBar1 1.1s infinite; }
.b2 { animation: bounceBar2 0.9s infinite .1s; }
.b3 { animation: bounceBar3 1.3s infinite .2s; }
.b4 { animation: bounceBar2 0.9s infinite .3s; }
.b5 { animation: bounceBar1 1.1s infinite .4s; }
.b6 { animation: bounceBar3 1.3s infinite .5s; }
.b7 { animation: bounceBar2 0.9s infinite .6s; }
.b8 { animation: bounceBar1 1.1s infinite .7s; }

/* Card 3: Neon Grid (blend modes) */
.neon-stage {
  background:
    radial-gradient(circle at 50% 50%, oklch(20% 0.05 180 / .4) 0% 70%, transparent 80%),
    oklch(15% 0.03 180);
  border: 1px solid color-mix(in oklab, var(--accent-primary), oklch(0% 0 0) 70%);
  box-shadow:
    0 12px 24px oklch(0% 0 0 / .3),
    0 0 32px color-mix(in oklab, var(--accent-primary), transparent 50%);
  position: relative;
  overflow: hidden;
  color: var(--accent-primary-light);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
}

/* faint grid overlay */
.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in oklab, var(--accent-primary-light), transparent 93%) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--accent-primary-light), transparent 93%) 1px, transparent 1px);
  background-size: 16px 16px;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* glowing scanlines */
.scanline {
  position: absolute;
  inset-inline-start: -30%;
  inline-size: 160%;
  block-size: 4px;
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--accent-primary-light), transparent 100%) 0%,
    var(--accent-primary-light) 50%,
    color-mix(in oklab, var(--accent-primary-light), transparent 100%) 100%
  );
  box-shadow: 0 0 16px color-mix(in oklab, var(--accent-primary-light), transparent 40%);
  mix-blend-mode: screen;
  animation: scanMoveNeon 2s linear infinite;
  opacity: 0.8;
}

.scan-1 { inset-block-start: 30%; animation-delay: 0s; }
.scan-2 { inset-block-start: 50%; animation-delay: .4s; }
.scan-3 { inset-block-start: 70%; animation-delay: .8s; }


/* ================= */
/* SVG City Animation */
/* ================= */

.svg-project-main {
  padding-block: 1.5rem 3rem;
}

.svg-stage-wrapper h2 {
  margin-block-end: 1rem;
}

.svg-stage {
  inline-size: 100%;
  max-inline-size: 40rem;
  margin-inline: auto;
  background: var(--bg-secondary);
  border-radius: 0.75rem;
  border: 1px solid var(--border-color);
  padding-block: 1rem;
  padding-inline: 1rem;
  box-shadow: 0 8px 20px oklch(0% 0 0 / 0.08);
}

/* Make SVG responsive */
.svg-city-scene {
  inline-size: 100%;
  block-size: auto;
  display: block;
}

/* Panel and sky */
.city__panel {
  fill: var(--city-panel);
}
.city__sky {
  fill: oklch(22% 0.06 260);
}

/* Stars */
.city__star {
  fill: var(--city-star);
  opacity: 0.65;
}

/* Buildings */
.city__buildings rect {
  fill: var(--city-building);
  stroke: color-mix(in oklab, var(--city-building), oklch(0% 0 0) 20%);
  stroke-width: 1.2;
}

/* Windows */
.city__window {
  stroke: none;
  rx: 2;
}

.city__window--a { fill: var(--city-window-a); }
.city__window--b { fill: var(--city-window-b); }
.city__window--c { fill: var(--city-window-c); }

/* Neon sign and text */
.city__neon-sign rect {
  fill: oklch(24% 0.12 280);
  stroke: var(--city-neon-glow);
  stroke-width: 1.6;
}

.city__neon-text {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--city-neon);
}

/* Scanline */
.city__scanline {
  fill: var(--city-scanline);
}

/* Transform reference box */
.city__star,
.city__window,
.city__neon-sign,
.city__scanline {
  transform-box: fill-box;
  transform-origin: center;
}


/* Stars staggered twinkle (6 shapes) */
.city__star--1 { animation: starTwinkle 3.2s ease-in-out 0.4s infinite; }
.city__star--2 { animation: starTwinkle 3.5s ease-in-out 1s   infinite; }
.city__star--3 { animation: starTwinkle 4s   ease-in-out 0.8s infinite; }
.city__star--4 { animation: starTwinkle 3.1s ease-in-out 1.3s infinite; }
.city__star--5 { animation: starTwinkle 3.8s ease-in-out 0.6s infinite; }
.city__star--6 { animation: starTwinkle 3.4s ease-in-out 1.6s infinite; }

/* Windows flicker */
.city__window--a { animation: windowFlicker 4.2s ease-in-out 0.8s infinite; }
.city__window--b { animation: windowFlicker 3.7s ease-in-out 1.1s infinite; }
.city__window--c { animation: windowFlicker 5s   ease-in-out 0.4s infinite; }

/* Neon sign pulses */
.city__neon-sign {
  animation: neonPulse 2.6s ease-in-out 0.9s infinite;
}

/* Scanline sweeps every few seconds */
.city__scanline {
  animation: scanMoveCity 6s linear 1.2s infinite;
}