/*  landing.css — slim preface above the ontology.
 *
 *  Just the wordmark medallion, the tagline, and a scroll cue. The
 *  brand-voice prose (mission, features, entropy, Chardin) lives in
 *  the ontology's prose-stack registers below; this preface is only
 *  the visitor's first visual impression before they enter the
 *  register-walk.
 *
 *  Same paper-and-engraved register as the rest of the page —
 *  cybersigilist × frontispiece — so there's no visual seam between
 *  the preface and the ontology section. The wordmark gets a faint
 *  bioluminescent halo overlay so it reads as "lit from within."   */

.landing {
  position: relative;
  /*  z-index above the register-walk so the landing's opaque paper
   *  background covers the overlap created by register-walk's
   *  negative margin-top. Without this the ontology-section's
   *  masthead would peek through at the bottom of the viewport
   *  while the visitor is reading the preface — the user has
   *  scrolled to scrollY = 0 but stickly section's natural top is
   *  in the overlap zone. */
  z-index: 10;
  isolation: isolate;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.7;
  min-height: 100vh;
  overflow: hidden;
  padding: 6vh 0 4vh;
}

/*  Faint sacred-geometry watermark — engraved-gold. Same SVG as the
 *  cybersigilist landing originally used, recolored from cyan to
 *  engraved gold. Behind everything; the wordmark and tagline read
 *  on top. */
.landing::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 800px; height: 800px;
  opacity: 0.045;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800' fill='none' stroke='%23b88e44' stroke-width='0.6'%3E%3Ccircle cx='400' cy='400' r='300'/%3E%3Ccircle cx='400' cy='400' r='200'/%3E%3Ccircle cx='400' cy='400' r='100'/%3E%3Ccircle cx='400' cy='400' r='50'/%3E%3Cpolygon points='400,100 659.81,550 140.19,550'/%3E%3Cpolygon points='400,700 140.19,250 659.81,250'/%3E%3Cline x1='400' y1='100' x2='400' y2='700'/%3E%3Cline x1='140.19' y1='250' x2='659.81' y2='550'/%3E%3Cline x1='659.81' y1='250' x2='140.19' y2='550'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.landing-inner {
  position: relative;
  z-index: 1;
  height: 100vh;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 2rem;
  padding-top: 8vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.landing-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*  Wordmark — concept-illustration medallion. Bioluminescent halo
 *  applied as an overlay (radial gradient with mix-blend-mode:
 *  screen) on top of the image, so the engraved linework stays
 *  legible while the medallion feels lit from within. */
.landing-wordmark-image {
  position: relative;
  margin: 0 auto 2.5rem;
  max-width: 380px;
  line-height: 1;
}
.landing-wordmark-image img {
  display: block;
  width: 100%;
  height: auto;
  /*  Drop the PNG's near-white square background into the page's
   *  paper color (var(--paper) #fffff8). Multiply preserves the
   *  dark engraved linework while letting the paper warmth show
   *  through where the image is white. Same approach used on the
   *  title image. */
  mix-blend-mode: multiply;
}
.landing-wordmark-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 232, 168, 0.45) 0%,
    rgba(240, 196, 104, 0.22) 30%,
    rgba(240, 196, 104, 0.06) 60%,
    transparent 80%
  );
  mix-blend-mode: screen;
}

/*  Tagline — IM Fell English italic. Fades in on page load with a
 *  short delay so the wordmark establishes itself first, then the
 *  tagline arrives as a quiet companion line. */
.landing-tagline {
  font-family: 'IM Fell English', var(--serif);
  font-size: 1.6rem;
  font-style: italic;
  color: var(--ink);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 540px;
  letter-spacing: 0.01em;
  text-align: center;
  opacity: 0;
  animation: landing-fade-in 1400ms ease-out 800ms forwards;
}

/*  Intro — short orientation paragraph between the tagline and the
 *  scroll cue. Names the four registers explicitly so the visitor
 *  knows what they're about to encounter, and how to navigate.
 *  Roman serif (not italic) to differentiate from the tagline's
 *  brand-voice italic; sized smaller and quieter so the wordmark
 *  + tagline stay primary. Fades in last (after the tagline
 *  settles) and before the scroll cue. Fades back out as the
 *  visitor begins scrolling — the prompt has done its work and
 *  shouldn't linger over the schema below. */
.landing-intro {
  /*  Pinned just above the scroll-cue (which is fixed at bottom: 24px,
   *  56px tall). The intro sits at bottom: 110px so there's ~30px of
   *  breathing room above the cue. Mobile.css overrides this to
   *  `position: static` so the intro flows with content (mobile
   *  viewports are too short for both flex-centered hero AND
   *  fixed-bottom intro to fit without overlap). */
  position: fixed;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;

  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 520px;
  width: max-content;
  padding: 0 1.25rem;
  text-align: center;

  /*  Cascade default is visible. The entrance animation uses
   *  `backwards` fill-mode to apply the 0% keyframe during the
   *  delay (intro stays invisible), runs the fade-in, then
   *  releases — at which point the cascade's opacity: 1 takes
   *  over. Subsequent cascade-driven changes (the scroll fade-out
   *  below) trigger the transition normally; using `forwards`
   *  here would lock the property to the animation's end value
   *  and cancellation would snap-reset rather than transition. */
  opacity: 1;
  animation: landing-fade-in 1200ms ease-out 1300ms backwards;
  transition: opacity 1500ms ease;
}
/*  Once scroll progress dips into the register-walk
 *  (body[data-scrolling-into-walk] is set by JS as scrollY
 *  climbs past a small threshold), the intro fades back out
 *  slowly. The 1500ms transition above governs the duration. */
body[data-scrolling-into-walk="true"] .landing-intro {
  opacity: 0;
}

/*  Scroll cue — a downward chevron + engraved gold ring at the
 *  bottom of the preface, fading in last and gently pulsing to
 *  invite scrolling. Clickable: takes the visitor to the ontology
 *  section (#ontology) via the html { scroll-behavior: smooth }
 *  base rule, so a click smoothly scrolls past the preface. Fixed
 *  to the viewport bottom so the cue is always visible regardless
 *  of viewport height. */
.landing-scroll-cue {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: #8b6e3a;
  text-decoration: none;
  border-radius: 50%;
  border: 1px solid rgba(184, 142, 68, 0.55);
  box-shadow:
    inset 0 0 0 4px rgba(255, 247, 200, 0.2),
    0 0 18px rgba(240, 196, 104, 0.18);
  background: rgba(255, 247, 220, 0.18);
  text-shadow: 0 0 8px rgba(240, 196, 104, 0.5);
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  animation:
    landing-fade-in 1200ms ease-out 1600ms forwards,
    landing-cue-bob 2.6s ease-in-out 1600ms infinite;
  transition: color 220ms ease, border-color 220ms ease, background 220ms ease;
}
.landing-scroll-cue:hover {
  color: #1a1611;
  border-color: rgba(240, 196, 104, 0.9);
  background: rgba(255, 247, 200, 0.45);
}
.landing-scroll-cue:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
/*  Once the visitor has scrolled past the preface, the cue is no
 *  longer needed — it would clutter the ontology section's view
 *  by sitting at the bottom of the viewport. Hide it as soon as
 *  the .landing leaves the viewport. JS toggles
 *  body[data-past-preface="true"] (see index.html).
 *
 *  Cancel the cue's animations explicitly — they run with
 *  `forwards` and `infinite`, which would otherwise hold opacity
 *  at 1 and override the hide rule below. */
body[data-past-preface="true"] .landing-scroll-cue {
  animation: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
@keyframes landing-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes landing-cue-bob {
  0%, 100% {
    transform: translate(-50%, 0);
    box-shadow:
      inset 0 0 0 4px rgba(255, 247, 200, 0.2),
      0 0 12px rgba(240, 196, 104, 0.18);
  }
  50% {
    transform: translate(-50%, 8px);
    box-shadow:
      inset 0 0 0 4px rgba(255, 247, 200, 0.32),
      0 0 22px rgba(240, 196, 104, 0.40);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-tagline,
  .landing-scroll-cue,
  .landing-intro {
    opacity: 1;
    animation: none;
  }
}

/*  Responsive — mobile (any phone). Tagline reorders above the
 *  wordmark via flex order; wordmark trims its top margin so the
 *  hero hangs from the top of the landing-inner padding. */
@media (max-width: 720px) {
  .landing-tagline {
    order: -1;
    margin-bottom: 1.25rem;
    margin-top: 0;
  }
  .landing-wordmark-image {
    margin-top: 0;
    max-width: 70%;
  }
}

@media (max-width: 480px) {
  .landing-inner { padding: 0 1.25rem; padding-top: 8vh; }
  .landing-wordmark-image { max-width: 80%; }
  .landing-tagline { font-size: 1.2rem; }
  .landing-intro { font-size: 0.92rem; max-width: 320px; }
  .landing::before { width: 500px; height: 500px; }
}