/* ============================================================================
   Landing layer — the demo-day intro that sits over the live viewer.
   index.html-only on purpose: core.css / core.js stay clean managed-fork
   files for the workshop re-sync. Reuses the :root tokens from core.css.
   The layer is translucent glass: the real graph loads and settles behind it,
   blurred — the artifact itself is the hero image.
   ========================================================================== */

.landing {
  position: fixed; inset: 0; z-index: 40;
  display: flex;
  overflow-y: auto; overscroll-behavior: contain;
  background:
    radial-gradient(110% 85% at 50% 18%, rgba(9, 11, 12, 0.58) 38%, rgba(9, 11, 12, 0.92) 100%),
    rgba(9, 11, 12, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(0.85);
  backdrop-filter: blur(10px) saturate(0.85);
}
/* without backdrop-filter the sharp graph would fight the text — dim harder */
@supports not (backdrop-filter: blur(1px)) {
  .landing { background: rgba(9, 11, 12, 0.93); }
}
.landing[hidden] { display: none; }
.landing::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.landing.closing { opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }

/* margin:auto centering (not justify-content) so small screens can scroll
   without clipping the top of the content */
.landing-inner {
  margin: auto; width: 100%; max-width: 64rem;
  padding: clamp(1.4rem, 4vh, 3rem) clamp(1.2rem, 4vw, 3rem);
  display: flex; flex-direction: column;
  gap: clamp(1.2rem, 3vh, 2.1rem);
}

.landing-top { display: flex; align-items: center; gap: 0.8rem; }
.landing-glyph {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--claim) 0 18%, transparent 19%),
    conic-gradient(from 0deg, var(--supports), var(--addresses), var(--opposes), var(--supports));
  box-shadow: 0 0 0 1px var(--line-2), 0 0 18px -2px rgba(236, 192, 73, 0.5);
  animation: landing-spin 22s linear infinite;
}
@keyframes landing-spin { to { transform: rotate(360deg); } }
.landing-eyebrow {
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--dim);
}

.landing-head {
  margin: 0; max-width: 20ch;
  font-family: "Fraunces", serif; font-weight: 340;
  font-size: clamp(2.1rem, 5.4vw, 3.7rem);
  line-height: 1.06; letter-spacing: 0.005em; color: var(--text);
}
.landing-head em { font-style: italic; font-weight: 400; color: var(--claim); }

.landing-lede { display: grid; gap: 0.85rem; max-width: 62ch; }
.landing-lede p { margin: 0; font-size: 0.85rem; line-height: 1.7; color: var(--dim); }

/* the two doors: warm gold = the live room, glacial blue = the cold archive */
.landing-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 760px) { .landing-doors { grid-template-columns: 1fr; } }

.door {
  position: relative;
  display: flex; flex-direction: column; gap: 0.8rem;
  padding: 1.25rem 1.3rem 1.3rem;
  background: linear-gradient(180deg, rgba(20, 27, 31, 0.88), rgba(14, 19, 22, 0.74));
  border: 1px solid var(--line-2); border-radius: 6px;
}
.door::before { /* accent filament along the top edge */
  content: ""; position: absolute; top: -1px; left: 14px; right: 14px; height: 2px;
  border-radius: 2px; background: var(--door-accent);
  box-shadow: 0 0 14px -2px var(--door-accent);
}
.door-live { --door-accent: var(--claim); }
.door-cold { --door-accent: var(--seal); }

.door-label {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.8rem; flex-wrap: wrap;
}
.door-chip {
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--door-accent);
}
.door-host { font-size: 0.66rem; color: var(--dimmer); letter-spacing: 0.06em; }
.door p { margin: 0; flex: 1; font-size: 0.78rem; line-height: 1.65; color: var(--dim); }

.door-btn {
  align-self: flex-start;
  font: inherit; font-size: 0.78rem; line-height: 1;
  padding: 0.55rem 1rem; border-radius: 4px;
  cursor: pointer; text-decoration: none;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.door-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* primary: the workshop — filled, the one to click on demo day */
.door-live .door-btn {
  background: var(--claim); color: var(--ink);
  border: 1px solid var(--claim); font-weight: 600;
}
.door-live .door-btn:hover { box-shadow: 0 0 22px -4px var(--claim); }
/* secondary: enter the graph beneath — quiet outline */
.door-cold .door-btn {
  background: transparent; color: var(--seal);
  border: 1px solid rgba(127, 209, 232, 0.4);
}
.door-cold .door-btn:hover { background: rgba(127, 209, 232, 0.12); box-shadow: 0 0 18px -6px var(--seal); }

.landing-foot {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dimmer);
}
@media (hover: none) { .landing-esc { display: none; } }

/* load choreography — one staggered rise, stilled under reduced motion */
.landing .reveal { opacity: 0; transform: translateY(12px);
  animation: landing-rise 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.landing-top.reveal  { animation-delay: 0.05s; }
.landing-head.reveal { animation-delay: 0.14s; }
.landing-lede.reveal { animation-delay: 0.24s; }
.door-live.reveal    { animation-delay: 0.36s; }
.door-cold.reveal    { animation-delay: 0.44s; }
.landing-foot.reveal { animation-delay: 0.55s; }
@keyframes landing-rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .landing .reveal { animation: none; opacity: 1; transform: none; }
  .landing-glyph { animation: none; }
  .landing.closing { transition: none; }
}

/* the colophon "about" affordance that reopens the layer */
.colophon-about {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--dim); background: none; border: none; padding: 0;
  cursor: pointer; border-bottom: 1px dotted var(--line-2);
}
.colophon-about:hover { color: var(--text); }