/* =========================================================
   2D UI — the entry screen and the Android dom-overlay.

   Everything shown *during* an XR session must be 3D (dom-overlay
   is not granted on Quest hardware), so this file is deliberately
   small: it styles the door, not the room.
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}

/* --- The WebGL surface ------------------------------------ */

#xr-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* --- Entry screen -----------------------------------------

   Dressed as the 2D site, not as the 3D world. Visitors arrive here
   from the portfolio's "Enter XR Gallery" button, so this page should
   read as the next page of the same site; the dark palette starts
   only once they are inside.

   The palette is scoped to .entry rather than written into tokens.css
   because the canvas is transparent: body's dark background is what
   the 3D gallery sits on in preview, and must stay dark. .entry is
   full-screen and opaque, so it carries its own paper instead.

   Values mirror portfolio/style.css. Change them together. */

.entry {
  --paper: #f3f0e8;
  --paper-rule: #d7d1c6;
  --ink: #191815;
  --ink-muted: #6c6860;
  --ink-dim: #817c73;
  --red: #c84a32;
  --red-deep: #a83c28;
  --red-soft: #f2ded7;
  --surface-light: #fffdf8;
  --font-editorial: "Source Serif 4", Georgia, serif;

  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
}

.entry[hidden] {
  display: none;
}

/* The 2D site's paper grain. */
.entry::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E");
}

.entry__bar,
.entry__inner {
  position: relative;
  width: min(1200px, 100% - 2.5rem);
  margin-inline: auto;
}

.entry__bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 68px;
  border-bottom: 1px solid var(--paper-rule);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
  text-decoration: none;
}

.brand__mark {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}

.brand__name {
  display: grid;
  line-height: 1.15;
}

.brand__name-line1 {
  font-weight: 600;
  font-size: 0.95rem;
}

.brand__name-line2 {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.entry__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem;
  padding-block: clamp(2.5rem, 7vh, 4.5rem);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dot {
  width: 18px;
  height: 2px;
  background: var(--red);
}

.entry__title {
  display: grid;
  gap: 0.1em;
  margin: 0;
  font-family: var(--font-editorial);
  font-size: clamp(2.5rem, 5vw + 1.5rem, 5.5rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.entry__title-line {
  display: block;
  opacity: 0;
  transform: translateY(10px);
  animation: rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.entry__title-line:nth-child(2) {
  animation-delay: 0.15s;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.grad-text {
  color: var(--red);
  font-style: italic;
}

.entry__lede {
  max-width: 68ch;
  margin: 0;
  font-size: clamp(1rem, 0.6vw + 0.85rem, 1.15rem);
  line-height: 1.65;
  color: var(--ink-muted);
}

/* The 2D site's tag row: mono labels between two rules, slashes in
   the accent colour. A device this browser can run turns ink. */
.devices {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: fit-content;
  margin: 0;
  padding: 0.85rem 0;
  border-block: 1px solid var(--paper-rule);
}

.devices li {
  display: inline-flex;
  align-items: center;
  padding: 0 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.devices li:first-child {
  padding-left: 0;
}

.devices li + li::before {
  content: "/";
  color: var(--red);
  margin-right: 0.8rem;
}

.devices li[data-ok="yes"] {
  color: var(--ink);
}

.entry__status {
  min-height: 1.5rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.entry__status--error {
  color: var(--red-deep);
}

/* --- Buttons ---------------------------------------------- */

.entry__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.4rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--paper-rule);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Enter AR wears the 2D site's XR button, so the click that brought
   the visitor here and the click that takes them in look the same. */
.btn--primary {
  color: var(--red-deep);
  background: var(--red-soft);
  border-color: var(--red);
}

.btn--primary:not(:disabled):hover {
  color: var(--surface-light);
  background: var(--red-deep);
  border-color: var(--red-deep);
}

.btn__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.btn--ghost {
  padding-inline: 0.15rem;
  border-color: transparent;
  border-bottom-color: var(--ink);
  border-radius: 0;
}

.btn--ghost:hover {
  color: var(--red-deep);
  border-bottom-color: var(--red-deep);
}

.btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.entry__note {
  max-width: 60ch;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-dim);
}

.entry__note a {
  color: var(--red-deep);
}

/* --- dom-overlay (Android only; a no-op on Quest) ---------- */

#xr-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  display: none;
}

#xr-overlay.is-active {
  display: block;
}

.overlay__bar {
  position: absolute;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  pointer-events: auto;
}

.overlay__btn {
  appearance: none;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(10, 14, 26, 0.72);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .entry__title-line {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .btn {
    transition: none;
  }
}