/* ============================================================================
   AIfred Orb Hero — CSS (production, index.html only)

   Pre-reveal ensemble (glow + seed + CTA + one click surface), the fixed
   full-viewport orb canvas layer, the greeting, and the host-integration rules
   that make the page content sit above a transparent backdrop once the orb is
   live. Scoped to #aifred-hero-* ids and body.orb-live; loaded ONLY on the
   landing page, so it never touches the separate AIfred.html hero.
   ========================================================================== */

/* Pin the document root to the page navy (= orb navy floor). When body goes
   transparent on reveal, the still-fading orb layer must never blend against the
   browser's default white root, or the whole screen flashes bright. Loaded only
   on the landing page. */
html { background: #05101d; }

/* ---- pre-reveal ensemble (lives inside .mk-hero__media; position:relative forced in JS) ---- */
#orb-hero-media { position: relative; min-height: clamp(360px, 46vh, 560px); }

/* JS-disabled floor: a static ambient glow + seed so the hero is never blank */
.orb-hero-fallback { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(closest-side, rgba(42,191,176,0.14), rgba(42,191,176,0.04) 45%, rgba(5,16,29,0) 70%); }
.orb-hero-fallback img { width: 15vh; height: 15vh; max-width: 150px; max-height: 150px; opacity: .92; }

#aifred-hero-glow-wrap { position: absolute; left: 50%; top: 50%; z-index: 1; width: 0; height: 0; pointer-events: none;
  transition: transform .5s ease, opacity .6s ease, filter .4s ease; }
#aifred-hero-glow { width: 46vh; height: 46vh; transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(42,191,176,0.16) 0%, rgba(42,191,176,0.075) 30%, rgba(42,191,176,0.02) 52%, rgba(5,16,29,0) 70%);
  animation: aifredGlowBreath var(--aifred-breath,5.2s) ease-in-out infinite; will-change: transform,opacity; transition: filter .4s ease; }
@keyframes aifredGlowBreath { 0%,100% { transform: translate(-50%,-50%) scale(.9); opacity:.74; } 50% { transform: translate(-50%,-50%) scale(1.08); opacity:1; } }

/* mini orb seed at the glow centre (static image, CSS breathing only) */
#aifred-hero-seed { position: absolute; left: 50%; top: 50%; width: 15vh; height: 15vh; transform: translate(-50%,-50%);
  background: center/contain no-repeat; pointer-events: none;
  animation: aifredSeedBreath var(--aifred-breath,5.2s) ease-in-out infinite; will-change: transform,opacity;
  transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .6s ease; }
@keyframes aifredSeedBreath { 0%,100% { transform: translate(-50%,-50%) scale(.95); opacity:.9; } 50% { transform: translate(-50%,-50%) scale(1); opacity:1; } }
#aifred-hero-glow-wrap.grow #aifred-hero-seed { animation: none; transform: translate(-50%,-50%) scale(2.7); opacity: 0; }
#aifred-hero-glow-wrap.gone { opacity: 0; }
#aifred-hero-glow-wrap.inhale #aifred-hero-glow { animation: none; transform: translate(-50%,-50%) scale(.7); opacity: 1; transition: transform .45s ease, opacity .45s ease; }

/* pulsing CTA line + static smallprint (visual only; the surface is the control) */
#aifred-hero-cta { position: absolute; left: 50%; top: 72%; z-index: 2; transform: translate(-50%,-50%); text-align: center;
  user-select: none; padding: 28px 46px; pointer-events: none; transition: opacity .6s ease, transform .6s ease; }
#aifred-hero-cta.gone { opacity: 0; transform: translate(-50%,-64%); }
#aifred-hero-cta .line { font-family: var(--font-display,'Instrument Sans',system-ui,sans-serif); font-size: clamp(22px,2.2vw,32px); font-weight: 500;
  letter-spacing: -.01em; color: var(--text-strong,#f9fafb); animation: aifredCtaBreath var(--aifred-breath,5.2s) ease-in-out infinite; transition: opacity .35s ease; }
#aifred-hero-cta.hot .line { animation: none; opacity: 1; }
#aifred-hero-cta .sub { margin-top: 14px; font-family: var(--font-mono,'Geist Mono',monospace); font-size: 11px; letter-spacing: .08em; color: var(--text-muted,#6a85a0); }
@keyframes aifredCtaBreath { 0%,100% { opacity: .68; } 50% { opacity: 1; } }

/* ONE invisible click/keyboard surface over the whole ensemble */
#aifred-hero-surface { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
#aifred-hero-surface:focus { outline: none; }
#aifred-hero-surface:focus-visible { outline: 2px solid rgba(42,191,176,.75); outline-offset: -6px; border-radius: 4px; }

/* ---- fixed full-viewport orb canvas layer, created at reveal; sits BEHIND host content ---- */
#aifred-hero-layer { position: fixed; inset: 0; overflow: hidden; background: transparent; pointer-events: none; opacity: 0; transition: opacity .55s ease; }
#aifred-hero-layer.live { opacity: 1; }
#aifred-hero-xform { position: absolute; inset: 0; }
#aifred-hero-mount { position: absolute; inset: 0; }
#aifred-hero-mount canvas { display: block; width: 100%; height: 100%; }

/* Once the orb is live, the page background goes transparent so the fixed orb
   layer (z-index 0) shows through; .page is already z-index:1 so all content
   (header, sections, cards, footer) stays above and fully legible. */
body.orb-live { background: transparent; }

/* Keep the left "lifeline" spine visible once the orb is live: lift it above the
   fixed orb layer (z-index 0) but leave it below the content (.page is z-index 1,
   and later in the DOM, so it still paints over the spine). spine.js runs its own
   uninterrupted loop, so the wave simply keeps surfing — it does not restart. */
body.orb-live #sl-spine { z-index: 1; }

/* ---- greeting: fade-up only, two-colour AIfred; fades out as the ride begins ---- */
#aifred-hero-greet { position: fixed; left: 0; right: 0; top: 60%; transform: translateY(-50%); z-index: 2;
  text-align: center; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; padding: 0 6vw; }
#aifred-hero-greet.up { opacity: 1; }
#aifred-hero-greet .line { font-family: var(--font-display,'Instrument Sans',system-ui,sans-serif);
  font-size: clamp(22px,3vw,44px); font-weight: 500; letter-spacing: -.015em; line-height: 1.2; color: var(--text-strong,#f9fafb); }
#aifred-hero-greet .aifred .ai { color: #c85a27; }   /* ember AI, paper fred — one unbroken word */

/* ---- speech bubble tethered to the living orb (JS sets left/top at the orb) ---- */
#aifred-hero-bubble { position: fixed; z-index: 5; pointer-events: none; max-width: min(300px, 46vw);
  transform: translate(-50%, calc(-100% + 6px)); opacity: 0;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
  background: rgba(13,34,64,.92); border: 1px solid rgba(42,191,176,.38); border-radius: 12px;
  padding: 12px 16px; box-shadow: 0 12px 34px rgba(0,0,0,.45); }
#aifred-hero-bubble.up { opacity: 1; transform: translate(-50%, -100%); }
#aifred-hero-bubble.gone { opacity: 0; transform: translate(-50%, calc(-100% - 6px)); }
#aifred-hero-bubble .txt { font-family: var(--font-display,'Instrument Sans',system-ui,sans-serif);
  font-size: clamp(14px,1.15vw,17px); font-weight: 500; line-height: 1.35; letter-spacing: -.005em; color: var(--text-strong,#f9fafb); }
#aifred-hero-bubble .aifred .ai { color: #c85a27; }
/* tail: rotated square at bottom-centre, pointing down to the orb */
#aifred-hero-bubble::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px;
  transform: translateX(-50%) rotate(45deg); background: rgba(13,34,64,.92);
  border-right: 1px solid rgba(42,191,176,.38); border-bottom: 1px solid rgba(42,191,176,.38); }

/* ---- reduced motion: steady glow, steady text, no cursor lean ---- */
@media (prefers-reduced-motion: reduce) {
  #aifred-hero-glow { animation: none; transform: translate(-50%,-50%) scale(1); opacity: .8; }
  #aifred-hero-seed { animation: none; }
  #aifred-hero-cta .line { animation: none; opacity: .86; }
  #aifred-hero-glow-wrap, #aifred-hero-seed, #aifred-hero-layer { transition: opacity .5s ease; }
  #aifred-hero-bubble { transition: opacity .5s ease; transform: translate(-50%, -100%); }
  #aifred-hero-bubble.gone { transform: translate(-50%, -100%); }
}