/* GENEVA — component library: nav, brackets, panels, tags, buttons, cards */

/* ---- corner-bracket frame, DOM-free (RimWorld-selection-style targeting corners) ---- */
.brackets {
  --bc: var(--border-bright);
  --bs: 2px;
  --bl: 14px;
  position: relative;
  background:
    linear-gradient(var(--bc), var(--bc)) top    left  / var(--bl) var(--bs) no-repeat,
    linear-gradient(var(--bc), var(--bc)) top    left  / var(--bs) var(--bl) no-repeat,
    linear-gradient(var(--bc), var(--bc)) top    right / var(--bl) var(--bs) no-repeat,
    linear-gradient(var(--bc), var(--bc)) top    right / var(--bs) var(--bl) no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom left  / var(--bl) var(--bs) no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom left  / var(--bs) var(--bl) no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom right / var(--bl) var(--bs) no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom right / var(--bs) var(--bl) no-repeat;
  transition: background-color 0.15s var(--ease-snap);
}
.brackets--accent, .brackets:hover, .brackets:focus-within { --bc: var(--gv-accent); }

/* ---- HUD nav ---- */
.hud-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-inline: var(--space-4);
  background: color-mix(in srgb, var(--gv-black) 88%, transparent);
  backdrop-filter: blur(10px);
}
.hud-nav__brand { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.hud-nav__brand { position: relative; width: 2.3rem; height: 1.9rem; }
.hud-nav__brand img {
  position: absolute; inset: 0;
  height: 100%; width: 100%;
  object-fit: contain;
}
.hud-nav__brand img.is-alt { opacity: 0; }
.hud-nav__brand:hover img.is-alt,
.hud-nav__brand:focus-visible img.is-alt {
  animation: threshold-flash-in 0.9s var(--ease-snap) 1;
}
.hud-nav__brand:hover img.is-base,
.hud-nav__brand:focus-visible img.is-base {
  animation: threshold-flash-out 0.9s var(--ease-snap) 1;
}
@keyframes threshold-flash-in { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes threshold-flash-out { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hud-nav__brand:hover img.is-alt,
  .hud-nav__brand:focus-visible img.is-alt { animation: none; opacity: 1; }
  .hud-nav__brand:hover img.is-base,
  .hud-nav__brand:focus-visible img.is-base { animation: none; opacity: 0; }
}
.hud-nav__brand[data-light]::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle 26px at var(--lx, 50%) var(--ly, 50%), rgba(255,255,255,0.55), transparent 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: neon-glint-sm 6s ease-in-out infinite;
  -webkit-mask-image: url("../img/logo/geneva-mark-sm.png");
  -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
  mask-image: url("../img/logo/geneva-mark-sm.png");
  mask-size: contain; mask-repeat: no-repeat; mask-position: center;
}
@keyframes neon-glint-sm {
  0%, 100% { background: radial-gradient(circle 26px at var(--lx, 50%) var(--ly, 50%), rgba(255,255,255,0.6), transparent 100%); }
  33% { background: radial-gradient(circle 26px at var(--lx, 50%) var(--ly, 50%), color-mix(in srgb, var(--gv-accent) 70%, transparent), transparent 100%); }
  66% { background: radial-gradient(circle 26px at var(--lx, 50%) var(--ly, 50%), color-mix(in srgb, var(--gv-chrome-blue) 70%, transparent), transparent 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .hud-nav__brand[data-light]::after { animation: none; }
}

.hud-tabs { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin-left: auto; }
.hud-tab {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--step--1);
  color: var(--text-dim);
  padding: var(--space-2) var(--space-3);
  position: relative;
  transition: color 0.15s var(--ease-snap);
  --bc: transparent;
}
.hud-tab:hover { color: var(--text); --bc: var(--border-bright); }
.hud-tab[aria-current="page"] { color: var(--gv-accent); --bc: var(--gv-accent); }

.hud-nav__toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--border-bright);
  color: var(--text);
  font-family: var(--font-mono);
  padding: var(--space-2) var(--space-3);
}

@media (max-width: 780px) {
  .hud-nav__toggle { display: inline-flex; }
  .hud-tabs {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    padding: var(--space-3);
    gap: 0;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s var(--ease-snap), transform 0.15s var(--ease-snap);
  }
  .hud-tabs[data-open="true"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .hud-tab { width: 100%; padding: var(--space-3); }
}

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--step--1);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 1px solid var(--border-bright);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s var(--ease-snap), color 0.15s var(--ease-snap), background-color 0.15s var(--ease-snap);
}
.btn:hover { border-color: var(--gv-accent); color: var(--gv-accent); }
.btn--solid {
  background: var(--gv-accent);
  border-color: var(--gv-accent);
  color: var(--gv-black);
  font-weight: 700;
}
.btn--solid:hover { background: var(--gv-accent-bright); border-color: var(--gv-accent-bright); color: var(--gv-black); }

/* ---- status tags ---- */
.tag {
  display: inline-block;
  padding: 0.2em 0.6em;
  border: 1px solid currentColor;
  border-radius: var(--radius);
}
.tag--upcoming { color: var(--gv-chrome-blue); }
.tag--onsale   { color: var(--gv-ok); }
.tag--soldout  { color: var(--gv-accent); }
.tag--announced{ color: var(--gv-warn); }

/* ---- panel / card ---- */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: var(--space-4);
}
.panel__eyebrow { color: var(--gv-accent); display: block; margin-bottom: var(--space-2); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-4);
}

/* ---- inspect panel (hover/tap info popover) ---- */
.inspect-target { cursor: help; position: relative; }
.inspect-panel {
  position: fixed;
  z-index: 150;
  width: 90%;
  max-width: 22rem;
  background: var(--bg-panel-raised);
  padding: var(--space-3) var(--space-4);
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.12s var(--ease-snap), transform 0.12s var(--ease-snap);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.inspect-panel[data-open="true"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.inspect-panel__title { color: var(--gv-accent); margin-bottom: var(--space-1); }
.inspect-panel dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin-top: var(--space-2); }
.inspect-panel dt { color: var(--text-faint); }
.inspect-panel dd { color: var(--text); }

/* ---- fake stat bar (dossier / About) ---- */
.stat-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: center; gap: var(--space-3); margin-block: var(--space-2); }
.stat-bar { height: 6px; background: var(--gv-gunmetal); position: relative; overflow: hidden; }
.stat-bar > span { position: absolute; inset: 0 auto 0 0; background: var(--gv-accent); width: var(--val, 50%); }

/* ---- boot overlay ---- */
.boot-overlay {
  position: fixed; inset: 0; z-index: 300;
  background:
    radial-gradient(3px 3px at 20% 30%, rgba(170,195,255,0.95), rgba(120,150,220,0.3) 55%, transparent 100%),
    radial-gradient(2px 2px at 65% 15%, rgba(170,195,255,0.85), rgba(120,150,220,0.25) 55%, transparent 100%),
    radial-gradient(3px 3px at 80% 60%, rgba(170,195,255,0.9), rgba(120,150,220,0.28) 55%, transparent 100%),
    radial-gradient(2px 2px at 35% 78%, rgba(170,195,255,0.75), rgba(120,150,220,0.22) 55%, transparent 100%),
    radial-gradient(3px 3px at 50% 45%, rgba(170,195,255,0.85), rgba(120,150,220,0.25) 55%, transparent 100%),
    radial-gradient(2px 2px at 12% 88%, rgba(170,195,255,0.75), rgba(120,150,220,0.22) 55%, transparent 100%),
    radial-gradient(3px 3px at 90% 22%, rgba(170,195,255,0.9), rgba(120,150,220,0.28) 55%, transparent 100%),
    radial-gradient(2px 2px at 45% 10%, rgba(170,195,255,0.7), rgba(120,150,220,0.2) 55%, transparent 100%),
    radial-gradient(2.5px 2.5px at 8% 55%, rgba(170,195,255,0.85), rgba(120,150,220,0.25) 55%, transparent 100%),
    radial-gradient(2px 2px at 28% 12%, rgba(170,195,255,0.75), rgba(120,150,220,0.2) 55%, transparent 100%),
    radial-gradient(2.5px 2.5px at 58% 82%, rgba(170,195,255,0.85), rgba(120,150,220,0.25) 55%, transparent 100%),
    radial-gradient(2px 2px at 72% 40%, rgba(170,195,255,0.7), rgba(120,150,220,0.2) 55%, transparent 100%),
    radial-gradient(2.5px 2.5px at 95% 78%, rgba(170,195,255,0.85), rgba(120,150,220,0.25) 55%, transparent 100%),
    radial-gradient(2px 2px at 5% 15%, rgba(170,195,255,0.7), rgba(120,150,220,0.2) 55%, transparent 100%),
    var(--gv-black);
  background-size: 320px 320px, 260px 260px, 380px 380px, 300px 300px, 340px 340px, 280px 280px, 360px 360px, 240px 240px, 300px 300px, 260px 260px, 340px 340px, 220px 220px, 380px 380px, 300px 300px, auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-5);
  transition: opacity 0.4s ease;
}
.boot-overlay[data-hidden="true"] { opacity: 0; pointer-events: none; }

.boot-logo {
  position: relative;
  width: min(62vw, 20rem);
  aspect-ratio: 2.05;
}
.boot-logo img {
  width: 100%;
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--gv-accent) 35%, transparent));
}

/* ---- boot globe: your real eye video, lit by cursor ---- */
.boot-globe {
  position: relative;
  width: min(62vw, 26rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18),
    0 0 40px rgba(140,170,255,0.35),
    inset 0 0 30px rgba(0,0,0,0.5);
}
.boot-globe video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.boot-globe__overlay {
  z-index: 1;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 14px #39ff88) drop-shadow(0 0 30px rgba(57,255,136,0.45));
}
.boot-globe::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle 130px at var(--lx, 32%) var(--ly, 28%), rgba(255,255,255,0.6), transparent 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.iris {
  position: absolute;
  left: 50%; top: 50%;
  width: 17%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.95), transparent 22%),
    radial-gradient(circle at 50% 50%, #170406 0%, #170406 52%, var(--gv-accent-dim) 78%, transparent 100%);
  box-shadow: 0 0 16px 2px rgba(255,43,84,0.55);
  transform: translate(calc(-50% + var(--ix, 0px)), calc(-50% + var(--iy, 0px)));
  z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
  .iris { transform: translate(-50%, -50%); }
}

.boot-start {
  position: absolute; bottom: var(--space-6);
  background: none;
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-family: var(--font-mono); letter-spacing: 0.15em; font-size: var(--step--1);
  padding: var(--space-3) var(--space-6);
  cursor: default;
}
.boot-start:not(:disabled) {
  color: var(--gv-accent);
  border-color: var(--gv-accent);
  cursor: pointer;
  animation: boot-start-pulse 1.8s ease-in-out infinite;
}
.boot-start:not(:disabled):hover,
.boot-start:not(:disabled):focus-visible {
  background: var(--gv-accent);
  color: var(--gv-black);
}
@keyframes boot-start-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gv-accent) 45%, transparent); }
  50% { box-shadow: 0 0 0 10px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .boot-start:not(:disabled) { animation: none; }
}
.boot-skip {
  position: absolute; top: var(--space-4); right: var(--space-4);
  font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--text-faint); background: none; border: 1px solid var(--border);
  padding: var(--space-2) var(--space-3); cursor: pointer;
}

/* ---- chrome shimmer hover (logo / hero mark) ---- */
.shimmer {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.shimmer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
  background-size: 250% 100%;
  background-position: 150% 0;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.shimmer:hover::before,
.shimmer:focus-visible::before {
  background-position: -50% 0;
  opacity: 1;
  transition: background-position 0.9s var(--ease-snap), opacity 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .shimmer::before { display: none; }
}

/* ---- hero band photo ---- */
.hero-photo {
  position: relative;
  -webkit-mask-image:
    linear-gradient(to right, transparent, black 6%, black 94%, transparent),
    linear-gradient(to bottom, transparent, black 6%, black 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, black 6%, black 94%, transparent),
    linear-gradient(to bottom, transparent, black 6%, black 94%, transparent);
  mask-composite: intersect;
}
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--gv-black) 0%, color-mix(in srgb, var(--gv-black) 40%, transparent) 35%, color-mix(in srgb, var(--gv-black) 40%, transparent) 65%, var(--gv-black) 100%),
    radial-gradient(ellipse 70% 60% at 50% 50%, transparent 40%, color-mix(in srgb, var(--gv-black) 55%, transparent) 100%);
  z-index: 1;
  -webkit-mask-image: radial-gradient(circle 340px at var(--lx, 50%) var(--ly, 50%), transparent, black 100%);
  mask-image: radial-gradient(circle 340px at var(--lx, 50%) var(--ly, 50%), transparent, black 100%);
}
.hero-logo {
  position: relative;
  width: min(78%, 30rem);
}
.hero-logo img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 0 36px color-mix(in srgb, var(--gv-accent) 35%, transparent));
}
.hero-logo[data-light]::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle 70px at var(--lx, 50%) var(--ly, 50%), rgba(255,255,255,0.8), transparent 100%),
    radial-gradient(circle 240px at var(--lx, 50%) var(--ly, 50%), rgba(255,255,255,0.5), transparent 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: neon-glint-lg 6s ease-in-out infinite;
  -webkit-mask-image: url("../img/logo/geneva-primary.png");
  -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
  mask-image: url("../img/logo/geneva-primary.png");
  mask-size: contain; mask-repeat: no-repeat; mask-position: center;
}
@keyframes neon-glint-lg {
  0%, 100% {
    background:
      radial-gradient(circle 70px at var(--lx, 50%) var(--ly, 50%), rgba(255,255,255,0.8), transparent 100%),
      radial-gradient(circle 240px at var(--lx, 50%) var(--ly, 50%), rgba(255,255,255,0.5), transparent 100%);
  }
  33% {
    background:
      radial-gradient(circle 70px at var(--lx, 50%) var(--ly, 50%), var(--gv-accent-bright), transparent 100%),
      radial-gradient(circle 240px at var(--lx, 50%) var(--ly, 50%), color-mix(in srgb, var(--gv-accent) 60%, transparent), transparent 100%);
  }
  66% {
    background:
      radial-gradient(circle 70px at var(--lx, 50%) var(--ly, 50%), #cfe0ff, transparent 100%),
      radial-gradient(circle 240px at var(--lx, 50%) var(--ly, 50%), color-mix(in srgb, var(--gv-chrome-blue) 60%, transparent), transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo[data-light]::after { animation: none; }
}
.hero-next {
  margin-top: var(--space-6);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  color: var(--text-faint);
  text-shadow: 0 2px 14px rgba(0,0,0,0.85);
  cursor: help;
}
.hero-photo > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(0.3) contrast(1.1);
}
.hero-photo > img.is-bright {
  filter: none;
  -webkit-mask-image: radial-gradient(circle 340px at var(--lx, 50%) var(--ly, 50%), black, transparent 100%);
  mask-image: radial-gradient(circle 340px at var(--lx, 50%) var(--ly, 50%), black, transparent 100%);
}
.hero-photo > img.is-alt {
  opacity: 0;
  filter: none;
  -webkit-mask-image: radial-gradient(circle 220px at var(--lx, 50%) var(--ly, 50%), black, transparent 100%);
  mask-image: radial-gradient(circle 220px at var(--lx, 50%) var(--ly, 50%), black, transparent 100%);
  transition: opacity 0.2s ease;
}
.hero-photo:hover > img.is-alt,
.hero-photo:focus-within > img.is-alt { opacity: 1; }
.hero-photo > * { position: relative; z-index: 2; }

.band-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  border: 1px solid var(--border);
  overflow: hidden;
}
.band-banner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: grayscale(0.25) contrast(1.08);
  transition: opacity 0.15s steps(3);
}
.band-banner img.is-alt {
  opacity: 0;
  filter: none;
  -webkit-mask-image: radial-gradient(circle 180px at var(--lx, 50%) var(--ly, 50%), black, transparent 100%);
  mask-image: radial-gradient(circle 180px at var(--lx, 50%) var(--ly, 50%), black, transparent 100%);
  transition: opacity 0.2s ease;
}
.band-banner:hover img.is-alt,
.band-banner:focus-within img.is-alt { opacity: 1; }

/* ---- glam shine: run a shimmer sweep across solid CTAs on hover too ---- */
.btn--solid.shimmer::before { mix-blend-mode: overlay; }

/* ---- eye watcher / easter egg ---- */
.watcher {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 120;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: var(--gv-black);
  padding: 0;
  --bc: var(--border-bright);
}
.watcher:hover, .watcher:focus-visible { --bc: var(--gv-accent); transform: scale(1.1); }
.watcher { transition: transform 0.2s var(--ease-snap); }
.watcher video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  transition: filter 0.2s ease;
}
.watcher:hover video, .watcher:focus-visible video {
  filter: url(#grunge-threshold) contrast(1.2);
}
.watcher[data-light]::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle 30px at var(--lx, 50%) var(--ly, 50%), rgba(255,255,255,0.85), transparent 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 3;
}

/* ---- featured-release trigger: same language as the watcher, opposite corner ---- */
.release-corner {
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 120;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.release-corner__label {
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  color: var(--gv-accent);
  text-shadow: 0 2px 10px rgba(0,0,0,0.85);
}
.release-trigger {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: var(--gv-black);
  padding: 0;
  flex-shrink: 0;
  --bc: var(--border-bright);
  transition: transform 0.2s var(--ease-snap);
  box-shadow: 0 0 20px rgba(255,43,84,0.3);
}
.release-trigger:hover, .release-trigger:focus-visible { --bc: var(--gv-accent); transform: scale(1.1); }
.release-trigger video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  transition: filter 0.2s ease;
}
.release-trigger:hover video, .release-trigger:focus-visible video {
  filter: url(#grunge-threshold) contrast(1.2);
}
.release-trigger::after {
  content: "\25B6";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-left: 0.15em;
  font-size: 1.5rem;
  color: #fff;
  text-shadow:
    0 0 14px var(--gv-accent),
    2px 1px 0 rgba(0,0,0,0.65),
    -1px -1px 0 rgba(255,255,255,0.3);
  opacity: 0;
  transform: scale(0.7) rotate(-4deg);
  transition: opacity 0.25s ease, transform 0.25s var(--ease-snap);
  pointer-events: none;
  filter: url(#grunge-threshold) contrast(1.3);
}
.release-trigger:hover::after,
.release-trigger:focus-visible::after {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.release-panel {
  width: 90%;
  max-width: 30rem;
  padding: var(--space-5);
  background: var(--bg-panel-raised);
  position: relative;
}
.release-panel__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  margin-top: 0;
}
.release-panel__body {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}
@media (max-width: 560px) {
  .release-panel__body { grid-template-columns: 1fr; }
}

.egg-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--gv-black) 85%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-snap);
}
.egg-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }
.egg-panel {
  width: 85%;
  max-width: 20rem;
  text-align: center;
  padding: var(--space-5);
  background: var(--bg-panel-raised);
}
.egg-panel video {
  width: 100%;
  border-radius: 50%;
  aspect-ratio: 1;
  object-fit: cover;
  margin-bottom: var(--space-4);
}
.egg-panel__line {
  color: var(--gv-accent);
  margin-bottom: var(--space-3);
}
.egg-close {
  margin-top: var(--space-4);
  background: none; border: 1px solid var(--border-bright); color: var(--text);
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em;
  padding: var(--space-2) var(--space-4); cursor: pointer;
}
.egg-close:hover { border-color: var(--gv-accent); color: var(--gv-accent); }

/* ---- footer ---- */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-5);
  margin-top: var(--space-7);
  color: var(--text-faint);
}
.site-footer a:hover { color: var(--gv-accent); }

/* ---- datamosh: periodic horizontal block-glitch on photos ---- */
@keyframes datamosh {
  0%, 91%, 100% { clip-path: inset(0 0 0 0); transform: translateX(0); filter: none; }
  91.5% { clip-path: inset(22% 0 61% 0); transform: translateX(-2.5%); filter: hue-rotate(25deg) saturate(1.5) contrast(1.2); }
  92% { clip-path: inset(48% 0 28% 0); transform: translateX(3%); }
  92.5% { clip-path: inset(8% 0 74% 0); transform: translateX(-1.5%); filter: hue-rotate(-15deg) saturate(1.3); }
  93% { clip-path: inset(60% 0 12% 0); transform: translateX(2%); }
  93.5% { clip-path: inset(0 0 0 0); transform: translateX(0); filter: none; }
}
.datamosh { animation: datamosh 24s steps(1) infinite; animation-delay: 14s; }
@media (prefers-reduced-motion: reduce) {
  .datamosh { animation: none; }
}

/* ---- SAVED, NOT ACTIVE: cursor-local glitch patch variant. Swapped out for
   the periodic version above (this one rendered too large/blown-out on the
   hero photo), but keeping the code here in case it's worth revisiting with
   a smaller radius / different filter tuning.
.datamosh-glitch {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  clip-path: circle(85px at var(--lx, -50%) var(--ly, -50%));
  filter: hue-rotate(35deg) saturate(2.1) contrast(1.3) brightness(1.15);
  transform: translateX(7px);
  transition: clip-path 0.12s linear;
}
.hero-photo .datamosh-glitch { object-position: center 20%; }
.band-banner .datamosh-glitch { object-position: center 25%; }
*/


/* ---- detection squares: AI-vision-style scanning brackets ---- */
.detect-square {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  --bc: var(--gv-accent);
  --bs: 1.5px;
  --bl: 8px;
  transition: left 0.7s var(--ease-snap), top 0.7s var(--ease-snap),
    width 0.6s var(--ease-snap), height 0.6s var(--ease-snap), opacity 0.7s ease;
}
.detect-square.is-active { opacity: 0.8; }
.detect-square__label {
  position: absolute;
  bottom: -1.15em;
  left: 0;
  white-space: nowrap;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--gv-accent);
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
@media (prefers-reduced-motion: reduce) {
  .detect-square { display: none; }
}