/* landing-hero.css — Progressive Jewel hero (Tier 0 visuals + reveal utilities).
   The CSS twin is THE design on devices that never load three.js. */

/* ── hero layout ─────────────────────────────────────────── */
.lj-hero { display:flex; gap:2rem; align-items:center; flex-wrap:wrap; }
.lj-hero__text { flex:1 1 340px; min-width:300px; }
.lj-hero__panel { flex:1 1 380px; min-width:300px; }
@media (max-width:700px){ .lj-hero__text{ flex-basis:100%; } }

/* ── jewel panel ─────────────────────────────────────────── */
.lj-jewel { position:relative; border-radius:24px; overflow:hidden;
  aspect-ratio: 6 / 5; max-height:420px; width:100%;
  background:radial-gradient(ellipse at 50% 26%, #2b2150 0%, #171130 76%);
  box-shadow:0 22px 60px rgba(36,26,77,.35), inset 0 0 0 1.5px rgba(170,140,255,.25);
  perspective:700px; }
.lj-twin { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center;
  transition:opacity .4s ease; }
.lj-gl { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .4s ease; }
.lj-jewel.gl-on .lj-gl { opacity:1; }
.lj-jewel.gl-on .lj-twin { opacity:0; }

/* tablet (CSS twin) */
.lj-tab { width:min(64%, 300px); height:72%; margin-bottom:7%; border-radius:14px; position:relative;
  background:linear-gradient(135deg,#7c64c9,#4a3a8c);
  box-shadow:0 22px 54px rgba(124,100,233,.55), inset 0 0 0 2px rgba(255,255,255,.18);
  transform:rotateX(7deg) rotateY(-5deg); }
.lj-tabhead { background:#6750a4; color:#fff; font-size:.62rem; font-weight:700; letter-spacing:.04em;
  padding:.3rem .55rem; border-radius:9px 9px 0 0; margin:9px 9px 0; }
.lj-chat { position:absolute; inset:34px 9px 9px; border-radius:0 0 9px 9px; background:#f6f1ff;
  overflow:hidden; padding:.5rem; }
.lj-cb { margin-bottom:.45rem; opacity:0; transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease; }
.lj-cb.is-on { opacity:1; transform:none; }
.lj-b { display:inline-block; font-size:.68rem; line-height:1.45; padding:.4rem .55rem;
  border-radius:10px; max-width:86%; }
.lj-b--in { background:#e3d9f7; color:#241a4d; border-radius:10px 10px 10px 3px; }
.lj-b--ro { background:#6750a4; color:#fff; border-radius:10px 10px 3px 10px; float:right; clear:both; }
.lj-cb::after { content:""; display:block; clear:both; }
.lj-stamp { display:block; font-size:.55rem; opacity:.75; font-style:italic; margin-top:.2rem; }
.lj-vid { background:#241a4d; color:#fff; border-radius:8px; padding:.4rem .55rem; font-size:.62rem;
  display:flex; align-items:center; gap:.45rem; float:right; max-width:90%; }
.lj-vid b { color:#cdb8ff; white-space:nowrap; }
.lj-play { width:22px; height:15px; background:#6750a4; border-radius:3px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:.5rem; }

/* perched dome Rosie (CSS twin) */
.lj-perch { position:absolute; top:2%; left:50%; transform:translateX(-50%) scale(.32);
  transform-origin:top center; }
.lj-dome { display:block; width:128px; height:66px; border-radius:64px 64px 6px 6px; position:relative;
  background:linear-gradient(135deg,#8a6fe0,#5b46a8 60%,#41307e);
  box-shadow:0 14px 40px rgba(124,100,233,.5), inset 0 4px 14px rgba(255,255,255,.35); }
.lj-eye { position:absolute; top:30px; width:9px; height:9px; border-radius:50%; background:#fff;
  box-shadow:0 0 8px 2px rgba(255,255,255,.8); animation:lj-blink 4.2s infinite; }
.lj-eye--l{ left:38px } .lj-eye--r{ right:38px }
.lj-smile { position:absolute; left:50%; top:42px; width:24px; height:11px; transform:translateX(-50%);
  border:3px solid #fff; border-top:none; border-left:none; border-right:none; border-radius:0 0 12px 12px; }
.lj-ant { position:absolute; left:50%; top:-24px; width:3px; height:24px; background:#8a6fe0;
  transform:translateX(-50%); }
.lj-ant::after { content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:10px; height:10px; border-radius:50%; background:#e9ddff;
  box-shadow:0 0 14px 5px #9b7ef0; animation:lj-pulse 2.4s ease-in-out infinite; }
@keyframes lj-blink { 0%,91%,100%{ transform:scaleY(1) } 94%,96%{ transform:scaleY(.08) } }
@keyframes lj-pulse { 0%,100%{ opacity:.6 } 50%{ opacity:1 } }

/* rising orbs (CSS twin) */
.lj-orb { position:absolute; width:5px; height:5px; border-radius:50%; background:#e9ddff;
  box-shadow:0 0 10px 3px #9b7ef0; bottom:12%; left:9%; opacity:0;
  animation:lj-up 3.4s ease-in infinite; }
.lj-o2 { animation-delay:1.1s; left:12%; } .lj-o3 { animation-delay:2.2s; left:7%; }
@keyframes lj-up { 0%{ transform:translateY(0) scale(.5); opacity:0 } 20%{ opacity:1 }
  100%{ transform:translateY(-260px) scale(1.2); opacity:0 } }

.lj-ticker { position:absolute; bottom:6px; left:0; right:0; text-align:center; color:#9d8fd0;
  font-size:.55rem; letter-spacing:.11em; }
.lj-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── headline word-rise (CSS-only entrance, gated on js-motion) ── */
.lj-w { display:inline-block; overflow:hidden; vertical-align:bottom; }
.lj-w i { display:inline-block; font-style:normal; }
html.js-motion .lj-w i { transform:translateY(105%); animation:lj-rise .55s cubic-bezier(.2,.85,.25,1) forwards; }
html.js-motion .lj-w:nth-child(2) i { animation-delay:.07s } html.js-motion .lj-w:nth-child(3) i { animation-delay:.14s }
html.js-motion .lj-w:nth-child(4) i { animation-delay:.21s } html.js-motion .lj-w:nth-child(5) i { animation-delay:.28s }
@keyframes lj-rise { to { transform:translateY(0) } }

/* ── reveal utilities (Tier 1 takes these over; hidden ONLY under js-motion) ── */
html.js-motion .lj-reveal { opacity:0; transform:translateY(24px); }

/* ── CTA glow (CSS, always on; magnetic hover is Tier 1) ── */
.lj-cta-glow { animation:lj-ctaglow 3s ease-in-out infinite; }
@keyframes lj-ctaglow { 0%,100%{ box-shadow:0 4px 18px rgba(103,80,164,.35) }
  50%{ box-shadow:0 4px 26px rgba(103,80,164,.6) } }

/* ── Rosie tour stops ── */
.lj-stop { display:flex; align-items:flex-end; gap:.5rem; margin:.4rem auto 0; max-width:1000px;
  padding:0 1.2rem; }
.lj-stop .lj-perch { position:static; transform:scale(.27); transform-origin:bottom left;
  margin:-30px -46px -10px 0; }
.lj-bub { background:#fff; border:2px solid #6750a4; color:#4a3a78; font-size:.8rem; font-weight:600;
  padding:.45rem .7rem; border-radius:14px 14px 14px 3px; box-shadow:0 4px 14px rgba(103,80,164,.18);
  position:relative; }
.lj-bub button { position:absolute; top:-10px; right:-10px; width:44px; height:44px; border:none;
  background:transparent; color:#6750a4; font-size:1rem; cursor:pointer; }
html.js-motion .lj-stop { opacity:0; transform:translateY(12px); transition:opacity .4s, transform .4s; }
html.js-motion .lj-stop.is-docked { opacity:1; transform:none; }
.lj-stop.is-dismissed { display:none; }

/* feature chip row */
.lj-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; font-size:.78rem; color:#5d5478; }
.lj-chips span { background:#f3edff; border:1px solid #e0d4f7; border-radius:99px; padding:.2rem .7rem; }

/* register accent strip + rosie line */
.lj-accent { height:6px; border-radius:99px 99px 0 0;
  background:linear-gradient(90deg,#171130,#6750a4 40%,#9b7ef0 70%,#171130); }
.lj-regline { display:flex; align-items:center; gap:.5rem; justify-content:center; margin-top:.9rem; }

/* ── reduced motion: everything visible & still ── */
@media (prefers-reduced-motion: reduce) {
  .lj-eye, .lj-ant::after, .lj-orb, .lj-cta-glow { animation:none !important; }
  .lj-orb { opacity:0; }
  html.js-motion .lj-w i { transform:none; animation:none; }
  html.js-motion .lj-reveal { opacity:1; transform:none; }
  html.js-motion .lj-stop { opacity:1; transform:none; }
}