/* ============================================================
   home.css — front page only (index.html)
   Identity cluster, sphere navigator, footer, contact modal.
   Load after global.css.
   ============================================================ */

/* ---------- identity cluster ---------- */
main { max-width: 1080px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 40px) 60px; }
.cluster { display: grid; grid-template-columns: auto 1fr; gap: 22px 28px; align-items: center; }
.photo {
  width: 120px; height: 120px; border-radius: 50%; grid-row: span 2;
  background: linear-gradient(145deg, var(--accent-weak), var(--card));
  border: 1.5px solid var(--line-strong); display: grid; place-items: center;
  color: var(--muted); font-family: var(--font-mono); font-size: 12px; text-align: center; overflow: hidden;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.about h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.1; color: var(--ink); margin: 0 0 .35em; letter-spacing: -0.02em; }
.about .role { font-family: var(--font-mono); font-size: .82rem; color: var(--accent); margin: 0 0 .7em; }
.about p { margin: 0; max-width: 60ch; color: var(--body); }
.actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 12px 10px; align-items: center; }
.cv {
  font-family: var(--font-display); font-weight: 600; font-size: .92rem; text-decoration: none;
  color: #fff; background: var(--accent); padding: 10px 18px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 8px; transition: transform .15s, box-shadow .2s;
}
html[data-theme="dark"] .cv { color: #0a0e18; }
.cv:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.cv:focus-visible { outline: 3px solid var(--accent-weak); outline-offset: 3px; }
.socials { display: flex; gap: 6px; }
.socials a {
  width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--line);
  display: grid; place-items: center; color: var(--muted); text-decoration: none;
  background: var(--card); transition: color .15s, border-color .15s, transform .15s;
}
.socials a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.socials a:focus-visible { outline: 3px solid var(--accent-weak); outline-offset: 2px; }
.socials svg { width: 19px; height: 19px; }

/* ---------- sphere navigator ---------- */
.nav-intro { text-align: center; margin: clamp(40px, 8vw, 84px) 0 6px; }
.nav-intro .eyebrow { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.nav-intro h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 3vw, 1.5rem); color: var(--ink); margin: .3em 0 0; letter-spacing: -0.01em; }

/* The navigator is square, so whichever viewport axis is shorter has to be the
   one that sizes it — bounded by width alone, a phone held sideways gets a
   560px sphere in a 390px-tall window and can never see the whole thing. svh is
   the SMALL viewport height, measured with the browser's toolbars showing, so
   the sphere keeps one size instead of resizing as they slide away; the plain
   vh line above it is the fallback for browsers that do not know svh. */
.sphere-wrap {
  position: relative; aspect-ratio: 1; margin: 8px auto 0;
  width: min(560px, 92vw, 78vh);
  width: min(560px, 92vw, 78svh);
  view-transition-name: bloch;
}
#bloch { width: 100%; height: 100%; display: block; touch-action: none; }
.no-webgl #bloch { display: none; }

/* projected ket labels — REAL links (work with or without WebGL) */
.ket-label {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 13px; text-decoration: none;
  color: var(--body); background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; white-space: nowrap;
  transition: color .2s, border-color .2s, opacity .2s, box-shadow .2s, background .2s;
  z-index: 5; cursor: pointer;
}
.ket-label:hover, .ket-label:focus-visible { outline: none; }
.ket-label:focus-visible { box-shadow: 0 0 0 3px var(--accent-weak); }
.ket-label .ph { color: var(--muted); }
.sphere-wrap[data-active] .ket-label { opacity: .32; }
.sphere-wrap[data-active] .ket-label.on { opacity: 1; }
.ket-label.on[data-axis="z"] { color: var(--ax-z); border-color: var(--ax-z); box-shadow: 0 0 18px -2px var(--ax-z-glow); }
.ket-label.on[data-axis="x"] { color: var(--ax-x); border-color: var(--ax-x); box-shadow: 0 0 18px -2px var(--ax-x-glow); }
.ket-label.on[data-axis="y"] { color: var(--ax-y); border-color: var(--ax-y); box-shadow: 0 0 18px -2px var(--ax-y-glow); }

/* center readout — the measurement, written honestly as a superposition */
.readout {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; z-index: 8;
  opacity: 0; transition: opacity .22s; max-width: 78%;
}
.sphere-wrap[data-active] .readout { opacity: 1; }
.readout .obs { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 5px; }
.readout .formula {
  display: block; font-family: var(--font-mono); font-size: clamp(12px, 3vw, 16px);
  color: var(--ink); font-weight: 600; -webkit-text-stroke: 0.4px currentColor; text-shadow: 0 0 1px currentColor;
}
/* Stacked fraction: numerator over a rule, √2 beneath. align-self: stretch is what
   makes the bar span the numerator's width rather than just the width of "√2". */
.readout .frac { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.3; }
.readout .num { padding: 0 .6em .16em; white-space: nowrap; }
.readout .den { align-self: stretch; text-align: center; padding: .16em .6em 0; border-top: 1.6px solid currentColor; }
.readout .dest { display: block; margin-top: 7px; font-family: var(--font-display); font-size: 12.5px; color: var(--muted); }

/* fallback grid when WebGL is unavailable */
.fallback-note { display: none; text-align: center; color: var(--muted); font-size: 13px; margin-top: 14px; }
.no-webgl .fallback-note { display: block; }
.no-webgl .sphere-wrap { aspect-ratio: auto; }
.no-webgl .readout { display: none; }
.no-webgl .ket-label {
  position: static; transform: none; display: inline-flex; margin: 6px;
}
.no-webgl .ket-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding-top: 10px; }

/* ---------- footer ---------- */
footer { text-align: center; color: var(--muted); font-size: 12.5px; padding: 30px 20px 40px; font-family: var(--font-mono); }
footer .kbd { color: var(--body); }

/* ---------- contact modal (Web3Forms) ---------- */
/* flex + margin:auto, not place-items:center. Both centre the dialog, but when
   the dialog is taller than the window — a phone in landscape, or any phone
   with the keyboard up — centring by alignment pushes its top edge above the
   viewport where no amount of scrolling can reach it. Centring by auto margins
   keeps the overflow scrollable, so the Name field is always gettable. */
.modal-scrim {
  position: fixed; inset: 0; z-index: 70; padding: 20px;
  background: rgba(8,11,20,.55); backdrop-filter: blur(3px);
  display: flex; justify-content: center;
  overflow-y: auto; overscroll-behavior: contain;
}
.modal-scrim[hidden] { display: none; }
.modal {
  width: 440px; max-width: 100%; margin: auto; flex: none;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 16px; box-shadow: var(--shadow); padding: 22px;
}
.modal h3 { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); margin: 0 0 3px; }
.modal .sub { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.modal label { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 5px; }
.modal input, .modal textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--line-strong); border-radius: 9px; padding: 10px 12px; margin-bottom: 13px;
}
.modal input:focus, .modal textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.modal textarea { resize: vertical; min-height: 96px; }
.modal .row { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 4px; }
.modal .send { font-family: var(--font-display); font-weight: 600; color: #fff; background: var(--accent); border: none; border-radius: 9px; padding: 10px 18px; cursor: pointer; }
html[data-theme="dark"] .modal .send { color: #0a0e18; }
.modal .send:disabled { opacity: .6; cursor: default; }
.modal .cancel { background: none; border: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.modal .status { font-size: 13px; margin: 6px 0 0; min-height: 18px; }
.modal .status.ok { color: var(--ax-x); } .modal .status.err { color: #e5484d; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

@media (max-width: 620px) {
  .cluster { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .photo { grid-row: auto; }
  .actions { grid-column: 1; justify-content: center; }
  .about p { margin-inline: auto; }
}