/* Site UI Kit styles. Extends colors_and_type.css with site-specific layout. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--mv-bg); }
body {
  margin: 0;
  font-family: var(--mv-font-body);
  color: var(--mv-fg);
  background: var(--mv-bg);
  overflow-x: hidden;
}

.mvk-atm {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: var(--mv-vignette), var(--mv-scanlines);
  mix-blend-mode: screen;
  opacity: .35;
}
.mvk-canvas { position: fixed; inset: 0; z-index: 4; pointer-events: none; }

.mvk-topnav {
  position: fixed; top: clamp(14px, 2vw, 26px); left: 50%; z-index: 50;
  width: min(calc(100% - 28px), 1280px); transform: translateX(-50%);
  display: flex; justify-content: space-between; align-items: center;
  pointer-events: none;
}
.mvk-brand, .mvk-github { pointer-events: auto; }
.mvk-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mvk-brandtext {
  font-family: var(--mv-font-protocol);
  font-size: .9rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mv-cyan); text-shadow: 0 0 10px rgba(0,240,255,.6);
}
.mvk-github {
  padding: 10px 18px; border: 1px solid var(--mv-cyan-dim);
  border-radius: 999px; color: var(--mv-fg);
  background: rgba(2,10,24,.8); backdrop-filter: blur(12px);
  text-decoration: none; font-size: .88rem; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 0 14px rgba(0,240,255,.15), inset 0 0 20px rgba(0,240,255,.06);
  transition: all .25s ease;
}
.mvk-github:hover {
  border-color: var(--mv-cyan);
  box-shadow: 0 0 24px rgba(0,240,255,.5), inset 0 0 30px rgba(0,240,255,.12);
  transform: translateY(-1px);
}

.mvk-page { width: min(100%, 1340px); margin: 0 auto; padding: clamp(12px, 2vw, 28px) clamp(10px, 2vw, 24px) 80px; }

.mvk-journey {
  position: relative; width: min(100%, 1280px); margin: 0 auto;
  border-radius: clamp(20px, 3vw, 40px); overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #030814 0%, #0a0f24 35%, #050a1a 60%, #020408 100%);
  border: 1px solid rgba(0,240,255,.22);
  box-shadow: 0 0 0 1px rgba(0,240,255,.1), 0 0 80px rgba(0,120,255,.18), inset 0 0 100px rgba(0,0,0,.9);
}
.mvk-journey-art { display: block; width: 100%; height: auto; image-rendering: crisp-edges; }
.mvk-portal-glow {
  position: absolute; left: 50%; top: 32%; transform: translateX(-50%);
  width: 60%; height: 28%;
  background: radial-gradient(ellipse at center, rgba(0,240,255,.15) 0%, transparent 70%);
  mix-blend-mode: screen; pointer-events: none; z-index: 2;
  animation: mvk-breathe 4s ease-in-out infinite alternate;
}
@keyframes mvk-breathe {
  from { opacity: .6; transform: translateX(-50%) scale(.95); }
  to   { opacity: 1;  transform: translateX(-50%) scale(1.08); }
}

.mvk-chapter {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 6;
  font-family: var(--mv-font-mono);
  font-size: clamp(.7rem, 1.8vw, 1.1rem); font-weight: 700;
  letter-spacing: .35em; text-transform: uppercase;
  color: rgba(200,240,255,.9);
  text-shadow: 0 0 8px rgba(0,240,255,.7), 0 0 24px rgba(0,100,255,.5);
  padding: 6px 16px; border: 1px solid rgba(0,240,255,.35);
  border-radius: 999px; background: rgba(0,10,20,.45); backdrop-filter: blur(6px);
}
.mvk-chapter--now { top: 3.2%; }
.mvk-chapter--enter { top: 37.8%; }
.mvk-chapter--future { top: 59.2%; }

.mvk-hero {
  position: absolute; top: 7%; left: 5%; right: 5%; z-index: 6;
  text-align: center; pointer-events: none;
}
.mvk-hero h1 {
  margin: 0; font-family: var(--mv-font-display);
  font-size: clamp(2.8rem, 9vw, 7rem); line-height: .9;
  font-weight: 900; letter-spacing: .06em; color: #fff;
  text-transform: uppercase;
  text-shadow: 0 0 5px rgba(255,255,255,.9), 0 0 20px var(--mv-cyan), 0 0 50px rgba(0,150,255,.8), 0 0 100px rgba(0,80,255,.6);
}
.mvk-herosub {
  margin-top: 14px; font-family: var(--mv-font-mono);
  font-size: clamp(.8rem, 2vw, 1.3rem); font-weight: 700;
  letter-spacing: .25em; text-transform: uppercase;
  color: var(--mv-magenta);
  text-shadow: 0 0 10px var(--mv-magenta), 0 0 30px rgba(255,0,255,.6);
}

.mvk-terminal {
  position: absolute; top: 26.5%; left: 50%; transform: translateX(-50%); z-index: 6;
  font-family: var(--mv-font-mono); white-space: nowrap;
  font-size: clamp(.8rem, 2vw, 1.25rem);
  color: var(--mv-cyan); text-shadow: 0 0 12px var(--mv-cyan);
  pointer-events: none;
}
.mvk-prompt { color: rgba(0,240,255,.6); }
.mvk-cursor {
  display: inline-block; width: 10px; height: 1.1em;
  background: var(--mv-cyan); vertical-align: text-bottom;
  animation: mvk-blink 1s step-end infinite;
  box-shadow: 0 0 8px var(--mv-cyan);
}
@keyframes mvk-blink { 50% { opacity: 0; } }

.mvk-cta {
  position: absolute; top: 31.8%; left: 50%; transform: translateX(-50%); z-index: 6;
  padding: 14px 32px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: linear-gradient(rgba(2,12,28,.85), rgba(2,12,28,.85)) padding-box,
              linear-gradient(135deg, var(--mv-cyan), var(--mv-magenta)) border-box;
  box-shadow: 0 0 30px rgba(0,240,255,.25), inset 0 0 30px rgba(0,240,255,.08);
  font-family: var(--mv-font-protocol);
  font-size: clamp(.9rem, 2.8vw, 1.6rem); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #fff;
  text-shadow: 0 0 12px rgba(0,240,255,.8); text-align: center;
}

.mvk-glass {
  position: absolute; top: 41.8%; left: 50%; transform: translateX(-50%); z-index: 6;
  width: min(84%, 640px);
  padding: 18px 22px;
  border: 1px solid var(--mv-border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(2,12,28,.85), rgba(2,8,18,.92));
  box-shadow: 0 0 40px rgba(0,150,255,.15), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  color: rgba(220,245,255,.95);
  font-size: clamp(.9rem, 2vw, 1.15rem);
  line-height: 1.6; text-align: center; pointer-events: none;
}

.mvk-future {
  position: absolute; top: 62%; left: 6%; right: 6%; z-index: 6;
  pointer-events: none;
}
.mvk-future h2 {
  max-width: 800px; margin: 0;
  font-family: var(--mv-font-display);
  font-size: clamp(2.4rem, 8.5vw, 6rem); line-height: .95;
  letter-spacing: .02em; text-transform: uppercase; color: #fff;
  text-shadow: 0 0 10px var(--mv-cyan), 0 0 40px rgba(0,150,255,.7), 0 0 90px rgba(0,80,255,.5);
}
.mvk-future p {
  max-width: 720px; margin-top: 16px;
  font-size: clamp(1rem, 2.2vw, 1.3rem); line-height: 1.55;
  color: rgba(220,245,255,.92);
  text-shadow: 0 2px 14px rgba(0,0,0,.9);
}

.mvk-hotspot {
  position: absolute; z-index: 8;
  width: clamp(44px, 6vw, 62px); height: clamp(44px, 6vw, 62px);
  display: grid; place-items: center;
  appearance: none; background: none; border: none;
  cursor: pointer;
}
.mvk-hotspot::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 14px;
  border: 1.5px solid var(--mv-cyan-dim);
  background: rgba(0,20,40,.55);
  box-shadow: 0 0 16px rgba(0,240,255,.25), inset 0 0 20px rgba(0,240,255,.08);
  transition: all .25s ease;
}
.mvk-hotspot::after {
  content: ''; position: absolute; inset: -6px;
  border-radius: 20px;
  border: 1px solid var(--mv-cyan-dim);
  opacity: 0; transform: scale(.8);
  transition: all .35s ease;
}
.mvk-hotspot:hover::before, .mvk-hotspot:focus-visible::before {
  border-color: var(--mv-cyan);
  background: rgba(0,40,60,.65);
  box-shadow: 0 0 28px rgba(0,240,255,.55), inset 0 0 30px rgba(0,240,255,.15);
  transform: translateY(-3px) scale(1.05);
}
.mvk-hotspot:hover::after, .mvk-hotspot:focus-visible::after {
  opacity: 1; transform: scale(1.15);
  animation: mvk-sonar 2s ease-out infinite;
}
@keyframes mvk-sonar {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.6); opacity: 0; }
}
.mvk-hotspot svg {
  position: relative; z-index: 2; width: 54%; height: 54%;
  stroke: var(--mv-cyan); stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(0,240,255,.9));
}
.mvk-tip {
  position: absolute; bottom: calc(100% + 16px);
  width: min(300px, 76vw);
  padding: 14px 16px;
  border: 1px solid rgba(0,240,255,.45);
  border-radius: 14px;
  background: rgba(2,10,22,.92); backdrop-filter: blur(14px);
  box-shadow: 0 0 30px rgba(0,200,255,.35);
  color: var(--mv-fg); text-align: left;
  opacity: 0; visibility: hidden;
  transition: all .22s ease; pointer-events: none;
}
.mvk-hotspot--left  .mvk-tip { left: 0;   transform: translateY(10px); }
.mvk-hotspot--right .mvk-tip { right: 0;  transform: translateY(10px); }
.mvk-hotspot:hover .mvk-tip,
.mvk-hotspot:focus-visible .mvk-tip {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.mvk-tip strong {
  display: block; margin-bottom: 6px;
  font-family: var(--mv-font-protocol);
  font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mv-cyan);
  text-shadow: 0 0 8px rgba(0,240,255,.6);
}
.mvk-tip span {
  display: block; font-size: .9rem; line-height: 1.45;
  color: rgba(220,240,255,.85);
}

.mvk-band {
  width: min(100%, 1280px); margin: 32px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  border: 1px solid rgba(0,240,255,.22);
  border-radius: 20px; overflow: hidden;
  background: linear-gradient(135deg, rgba(0,240,255,.18), rgba(255,0,255,.12));
  box-shadow: 0 0 50px rgba(0,120,255,.12);
}
.mvk-band article {
  padding: clamp(20px, 2.5vw, 32px);
  background: rgba(2,10,24,.92);
  transition: background .3s ease;
}
.mvk-band article:hover { background: rgba(4,18,36,.95); }
.mvk-band h3 {
  margin: 0 0 10px;
  font-family: var(--mv-font-protocol);
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mv-cyan); text-shadow: 0 0 10px rgba(0,240,255,.35);
}
.mvk-band p {
  margin: 0; font-size: .95rem; line-height: 1.6;
  color: rgba(200,230,255,.82);
}

.mvk-foot {
  width: min(100%, 1280px); margin: 48px auto 0; padding-bottom: 40px;
  text-align: center;
  color: rgba(200,230,255,.45);
  font-size: .82rem;
  font-family: var(--mv-font-mono);
  letter-spacing: .08em;
}

/* Sigil watermarks — giant rotating brand marks behind the journey */
.mvk-sigil {
  position: absolute; left: 50%; transform: translate(-50%, -50%);
  z-index: 1; pointer-events: none;
  filter: drop-shadow(0 0 60px rgba(0,200,255,.35)) drop-shadow(0 0 80px rgba(255,76,255,.25));
  mix-blend-mode: screen;
  opacity: .55;
}
.mvk-sigil--portal {
  top: 22%;
  animation: mvk-sigil-rot 90s linear infinite, mvk-sigil-pulse 7s ease-in-out infinite alternate;
}
.mvk-sigil--future {
  top: 78%; opacity: .35;
  animation: mvk-sigil-rot-rev 110s linear infinite, mvk-sigil-pulse 9s ease-in-out infinite alternate;
}
@keyframes mvk-sigil-rot     { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes mvk-sigil-rot-rev { to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes mvk-sigil-pulse {
  from { filter: drop-shadow(0 0 40px rgba(0,200,255,.25)) drop-shadow(0 0 60px rgba(255,76,255,.18)); }
  to   { filter: drop-shadow(0 0 90px rgba(0,200,255,.55)) drop-shadow(0 0 120px rgba(255,76,255,.40)); }
}

/* Explainer band header — eyebrow + small brand mark */
.mvk-band-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.mvk-band-eyebrow {
  font-family: var(--mv-font-mono);
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mv-magenta);
  text-shadow: 0 0 6px rgba(255,76,255,.4);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mvk-cursor, .mvk-portal-glow, .mvk-hotspot::after, .mvk-sigil { animation: none; }
}

@media (max-width: 760px) {
  .mvk-band { grid-template-columns: 1fr; }
}