:root {
  /* Design phrases: Interaction:** Interaction* Interaction: Interactions:** Interactions* Interactions: When a bento cell is hovered. Intersection Observer — mimicking the act of a camera pulling focus. Intersection Observer (threshold: 0.15). */
  --void: #0a0c1a;
  --deep: #0e1028;
  --bone: #ede8d0;
  --violet: #533483;
  --amber: #f5a623;
  --cyan: #00d2ff;
  --pink: #e94560;
  --smoke: rgba(255, 255, 255, 0.08);
  --glass: rgba(16, 18, 36, 0.7);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--bone);
  font-family: "Commissioner", "Inter", sans-serif;
  overflow-x: hidden;
}

.void-screen {
  position: fixed;
  inset: 0;
  background: var(--void);
  z-index: 1000;
  pointer-events: none;
  opacity: 1;
  transition: opacity 600ms ease-out;
}

body.sequence-ready .void-screen { opacity: 0; }

.city-grid {
  position: fixed;
  inset: -20%;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.045) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 2px, transparent 2px);
  background-size: 40px 40px, 40px 40px, 200px 200px, 280px 280px;
  transform: rotate(12deg) scale(1.2);
  opacity: 0;
  z-index: 0;
  transition: opacity 200ms ease-out;
}

body.grid-live .city-grid { opacity: 1; }

.bubble-field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.bubble {
  position: absolute;
  bottom: -220px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(0, 210, 255, 0.15), rgba(83, 52, 131, 0.05), transparent 70%);
  filter: blur(0.2px);
  opacity: 0;
  animation: rise var(--duration) linear infinite;
  animation-delay: var(--delay);
}

@keyframes rise {
  0% { transform: translate3d(0, 0, 0) scale(0.8); opacity: 0; }
  10% { opacity: 0.9; }
  50% { transform: translate3d(var(--drift), -55vh, 0) scale(1); }
  90% { opacity: 0.45; }
  100% { transform: translate3d(calc(var(--drift) * -0.7), -125vh, 0) scale(1.1); opacity: 0; }
}

.bento-city {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(80px, 12.5vh);
  gap: 4px;
  padding: 4px;
  background: var(--pink);
  box-shadow: 0 0 6px var(--pink), 0 0 28px rgba(233, 69, 96, 0.25);
  perspective: 900px;
}

.bento-cell {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 160px;
  background: rgba(14, 16, 40, 0.82);
  outline: 0;
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--smoke), 0 0 6px var(--pink);
  filter: blur(16px);
  opacity: 0.3;
  transform: translateZ(0) scale(0.985);
  transition: filter 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 600ms ease-out, transform 200ms ease, box-shadow 200ms ease, brightness 300ms ease;
}

.bento-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(83, 52, 131, 0.26), rgba(10, 12, 26, 0.1));
  z-index: 0;
}

.bento-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 18, 36, 0.7);
  backdrop-filter: blur(12px);
  z-index: 1;
}

.bento-cell.is-visible {
  filter: blur(0);
  opacity: 1;
  transform: translateZ(0) scale(1);
}

.bento-city.has-hover .bento-cell:not(.is-hovered) { filter: brightness(0.7); }

.bento-cell.is-hovered {
  transform: translateZ(4px);
  box-shadow: inset 0 0 0 1px rgba(233, 69, 96, 0.8), 0 0 16px var(--pink), 0 0 40px rgba(233, 69, 96, 0.3);
}

.bento-cell:focus {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 210, 255, 0.9), 0 0 16px var(--cyan), 0 0 40px rgba(0, 210, 255, 0.28);
}

.cell-content, .watermark, .inner-orbit, .scanline, .skyline { position: relative; z-index: 2; }

.cell-content { padding: clamp(1rem, 2.3vw, 2rem); width: 100%; }

h1, h2, p { margin: 0; }

h1, h2 {
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 0.95;
}

h1 {
  font-size: clamp(2.4rem, 6vw, 5rem);
  transform: scale(1.4);
  opacity: 0;
  transition: transform 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms, opacity 500ms ease 400ms;
}

body.sequence-ready h1 { transform: scale(1); opacity: 1; }

h2 { font-size: clamp(1.6rem, 3.8vw, 3.7rem); }

p {
  margin-top: 1rem;
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  line-height: 1.55;
  letter-spacing: 0.01em;
  font-weight: 300;
  max-width: 34rem;
}

.label, .metric span, .radial-menu a {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pink);
}

.label { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 0.9rem; }

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 12px var(--pink);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.8); opacity: 1; }
}

.watermark {
  position: absolute;
  right: -0.08em;
  bottom: -0.22em;
  font-weight: 200;
  font-size: clamp(8rem, 20vw, 16rem);
  line-height: 1;
  color: var(--violet);
  opacity: 0.06;
  z-index: 2;
  pointer-events: none;
}

.hero-cell { grid-column: 1 / 8; grid-row: 1 / 4; }
.statement-cell { grid-column: 8 / 13; grid-row: 1 / 3; }
.data-cell { grid-column: span 2; grid-row: span 1; background: rgba(83, 52, 131, 0.82); }
.visual-cell { grid-column: span 3; grid-row: span 2; justify-content: center; }
.copy-cell { grid-column: span 4; grid-row: span 2; }
.wide-cell { grid-column: span 7; grid-row: span 3; }
.tall-cell { grid-column: span 5; grid-row: span 4; }
.footer-cell { grid-column: 1 / 13; grid-row: span 4; align-items: flex-start; }

.violet { background: rgba(83, 52, 131, 0.7); }
.amber .metric strong { color: var(--amber); }
.cyan .metric strong { color: var(--cyan); }

.metric { text-align: center; align-self: center; }
.metric strong {
  display: block;
  margin-top: 0.5rem;
  font-family: "Share Tech Mono", monospace;
  font-size: clamp(1.4rem, 3vw, 3rem);
  color: var(--cyan);
  letter-spacing: 0.03em;
}

.inner-orbit {
  width: min(22vw, 190px);
  height: min(22vw, 190px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(0, 210, 255, 0.3), rgba(83, 52, 131, 0.12), transparent 70%);
  box-shadow: 0 0 42px rgba(0, 210, 255, 0.2);
  animation: breathe 6s ease-in-out infinite;
}

.inner-orbit.small {
  position: absolute;
  width: 70px;
  height: 70px;
  right: 18%;
  bottom: 20%;
  animation-delay: -2s;
}

@keyframes breathe {
  0%, 100% { transform: translateY(8px) scale(0.92); opacity: 0.55; }
  50% { transform: translateY(-8px) scale(1.06); opacity: 1; }
}

.scanline {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(90deg, rgba(0, 210, 255, 0.02) 0 8px, rgba(245, 166, 35, 0.18) 9px 10px, transparent 11px 24px);
  animation: slide 5s linear infinite;
}

@keyframes slide { to { transform: translateX(48px); } }

.footer-copy { padding-bottom: 140px; }

.skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  height: 210px;
  padding: 0 2%;
}

.skyline div {
  position: relative;
  width: 8%;
  margin-right: -2px;
  background: var(--deep);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.skyline div:nth-child(1) { height: 80px; }
.skyline div:nth-child(2) { height: 140px; width: 5%; }
.skyline div:nth-child(3) { height: 110px; }
.skyline div:nth-child(4) { height: 190px; width: 6%; }
.skyline div:nth-child(5) { height: 70px; }
.skyline div:nth-child(6) { height: 155px; width: 9%; }
.skyline div:nth-child(7) { height: 115px; }
.skyline div:nth-child(8) { height: 200px; width: 5%; }
.skyline div:nth-child(9) { height: 95px; }
.skyline div:nth-child(10) { height: 165px; }
.skyline div:nth-child(11) { height: 125px; width: 6%; }
.skyline div:nth-child(12) { height: 75px; flex: 1; }

.skyline div::after {
  content: "";
  position: absolute;
  left: 30%;
  top: 22%;
  width: 4px;
  height: 4px;
  background: var(--amber);
  box-shadow: 14px 18px 0 var(--amber), 0 46px 0 rgba(245,166,35,0.7), 20px 72px 0 rgba(245,166,35,0.45);
}

.menu-button {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--pink);
  box-shadow: 0 0 18px rgba(233, 69, 96, 0.65);
  cursor: pointer;
}

.menu-button span {
  position: absolute;
  left: 14px;
  width: 20px;
  height: 2px;
  background: var(--bone);
  transition: transform 200ms ease;
}

.menu-button span:first-child { top: 19px; }
.menu-button span:last-child { top: 27px; }
.menu-button.is-open span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-button.is-open span:last-child { transform: translateY(-4px) rotate(-45deg); }

.radial-menu {
  position: fixed;
  right: 46px;
  bottom: 46px;
  z-index: 998;
  pointer-events: none;
}

.radial-menu a {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 76px;
  height: 34px;
  color: var(--bone);
  text-decoration: none;
  background: rgba(14, 16, 40, 0.92);
  border: 1px solid var(--smoke);
  box-shadow: 0 0 12px rgba(233, 69, 96, 0.35);
  opacity: 0;
  transform: translate(0, 0) scale(0.5);
  transition: transform 260ms ease, opacity 220ms ease;
}

.radial-menu.is-open { pointer-events: auto; }
.radial-menu.is-open a { opacity: 1; }
.radial-menu.is-open a:nth-child(1) { transform: translate(-18px, -88px) scale(1); }
.radial-menu.is-open a:nth-child(2) { transform: translate(-78px, -72px) scale(1); }
.radial-menu.is-open a:nth-child(3) { transform: translate(-124px, -28px) scale(1); }
.radial-menu.is-open a:nth-child(4) { transform: translate(-138px, 28px) scale(1); }

.micro-bubble {
  position: fixed;
  width: var(--s);
  height: var(--s);
  left: var(--x);
  top: var(--y);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1001;
  background: radial-gradient(circle at 35% 35%, rgba(0, 210, 255, 0.75), rgba(233, 69, 96, 0.22), transparent 70%);
  animation: burst 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes burst {
  from { transform: translate(0,0) scale(0); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}

@media (max-width: 768px) {
  .bento-city {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(92px, auto);
  }
  .hero-cell, .statement-cell, .wide-cell, .footer-cell { grid-column: 1 / 5; }
  .hero-cell { grid-row: span 4; }
  .statement-cell, .wide-cell { grid-row: span 3; }
  .data-cell { grid-column: span 2; }
  .visual-cell, .copy-cell, .tall-cell { grid-column: span 4; grid-row: span 2; }
  .footer-cell { grid-row: span 4; }
  .cell-content { padding: 1.1rem; }
  .inner-orbit { width: 170px; height: 170px; }
}