/* ==========================================================================
   Young Oendo — "thinking orbs" landing scene
   Scope: every rule is namespaced .yo-orb-* and lives on .yo-orb-landing.

   NOTE: NAMING IS LOAD-BEARING — DO NOT rename this root class.
   recommendations.js (loaded on index.html) hosts its own ".yo-hero-copy"
   overlay on the LARGEST element matching
     '.swiper, [class*=banner], [class*=slider], [class*=hero]'
   If this section's class contains the substring "hero" (or banner/slider),
   it wins that contest and the clone banner's headline gets injected into this
   scene instead of the banner. Keep the name free of banner/slider/hero.

   Typography: deliberately a system font stack. The repo ships no font
   binaries (the clone's @font-face sources 404), so referencing AnekLatin*
   here would only add a failed request. The page already renders in the
   system fallback.
   ========================================================================== */

.yo-orb-landing {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  /* Height cap is deliberate: recommendations.js only injects the clone
     banner's ".yo-hero-copy" headline into a banner-like element whose top is
     within 1000px of the document top. Header (~146px) + this height must stay
     comfortably under that, so the banner headline cannot disappear on tall
     desktop windows. Do not raise the 760px cap without re-checking. */
  height: clamp(520px, 80vh, 760px);
  background:
    radial-gradient(120% 78% at 50% 106%, rgba(182, 30, 15, .26) 0%, rgba(182, 30, 15, .07) 40%, rgba(0, 0, 0, 0) 72%),
    radial-gradient(92% 64% at 50% 42%, #0c0c0e 0%, #060607 46%, #000 100%);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@supports (height: 100svh) {
  .yo-orb-landing { height: clamp(520px, 80svh, 760px); }
}

/* ---------- 3D stage ---------- */
.yo-orb-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.yo-orb-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s ease;
}
.yo-orb-landing.yo-orb-landing--ready .yo-orb-canvas { opacity: 1; }

/* No-WebGL / no-THREE fallback: a calm static composition in pure CSS. */
.yo-orb-landing.yo-orb-landing--nogl .yo-orb-canvas { display: none; }
.yo-orb-landing.yo-orb-landing--nogl::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 63%, rgba(255, 108, 64, .34) 0%, rgba(182, 30, 15, .28) 22%, rgba(182, 30, 15, .08) 44%, rgba(0, 0, 0, 0) 66%),
    radial-gradient(circle at 22% 30%, rgba(255, 190, 150, .2) 0%, rgba(0, 0, 0, 0) 22%),
    radial-gradient(circle at 80% 26%, rgba(255, 108, 64, .18) 0%, rgba(0, 0, 0, 0) 20%);
}

/* ---------- legibility scrim ---------- */
.yo-orb-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 50% 40%, rgba(2, 2, 3, .70) 0%, rgba(2, 2, 3, .46) 44%, rgba(2, 2, 3, .12) 74%, rgba(2, 2, 3, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .62) 100%);
}

/* ---------- overlaid real HTML text ---------- */
.yo-orb-content {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 1120px;
  height: 100%;
  margin: 0 auto;
  padding: clamp(16px, 3vh, 44px) clamp(18px, 4vw, 40px) clamp(120px, 24vh, 250px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.yo-orb-landing .yo-orb-eyebrow {
  margin: 0;
  font-size: clamp(10px, 1.02vw, 12.5px);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .9);
}

.yo-orb-landing .yo-orb-wordmark {
  margin: 14px 0 0;
  padding: 0;
  font-size: clamp(2.05rem, 8.2vw, 6.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .1em;
  text-indent: .1em;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .88), 0 0 96px rgba(0, 0, 0, .62);
}

.yo-orb-landing .yo-orb-tagline {
  margin: 20px 0 0;
  max-width: 660px;
  font-size: clamp(13.5px, 1.26vw, 17px);
  font-weight: 400;
  line-height: 1.66;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 20px rgba(0, 0, 0, .85);
}

.yo-orb-landing .yo-orb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(24px, 3.4vh, 38px);
  width: 100%;
}

.yo-orb-landing a.yo-orb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.yo-orb-landing a.yo-orb-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.yo-orb-landing a.yo-orb-btn--primary {
  background: #b61e0f;
  border: 1px solid #b61e0f;
  color: #fff;
  box-shadow: 0 10px 34px rgba(182, 30, 15, .38);
}
.yo-orb-landing a.yo-orb-btn--primary:hover {
  background: #d02414;
  border-color: #d02414;
  color: #fff;
  transform: translateY(-1px);
}

.yo-orb-landing a.yo-orb-btn--ghost {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .36);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.yo-orb-landing a.yo-orb-btn--ghost:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .72);
  color: #fff;
  transform: translateY(-1px);
}

.yo-orb-landing .yo-orb-note {
  margin: clamp(18px, 2.4vh, 28px) 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  text-shadow: 0 1px 16px rgba(0, 0, 0, .95), 0 0 30px rgba(0, 0, 0, .7);
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .yo-orb-content { padding-bottom: clamp(120px, 22vh, 210px); }
}

@media (max-width: 768px) {
  .yo-orb-landing { height: clamp(560px, 88svh, 760px); }
  /* On phones the text column is taller, so bias the darkening to the upper
     band (where the copy lives) to keep every line readable over the glow. */
  .yo-orb-scrim {
    background:
      radial-gradient(closest-side at 50% 26%, rgba(2, 2, 3, .78) 0%, rgba(2, 2, 3, .54) 46%, rgba(2, 2, 3, .10) 78%, rgba(2, 2, 3, 0) 100%),
      linear-gradient(to bottom, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, .62) 100%);
  }
  .yo-orb-content {
    padding: clamp(10px, 2vh, 26px) 20px clamp(150px, 30vh, 232px);
    justify-content: center;
  }
  .yo-orb-landing .yo-orb-wordmark { letter-spacing: .08em; text-indent: .08em; }
  .yo-orb-landing .yo-orb-tagline { margin-top: 16px; max-width: 33ch; }
  .yo-orb-landing .yo-orb-actions { margin-top: 26px; gap: 12px; }
  .yo-orb-landing a.yo-orb-btn { width: 100%; max-width: 320px; }
  .yo-orb-landing .yo-orb-note { margin-top: 16px; font-size: 10px; }
}

@media (max-width: 380px) {
  .yo-orb-landing .yo-orb-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .yo-orb-canvas { transition: none; }
  .yo-orb-landing a.yo-orb-btn { transition: none; }
}

/* The clone's global reset hides overflow on some pages; make sure the hero
   can never create a horizontal scrollbar on its own. */
.yo-orb-landing, .yo-orb-landing * { max-width: 100%; }
.yo-orb-landing .yo-orb-canvas { max-width: none; }