/* AI Exodus — product-page enhancement layer on top of seo-style.css.
   Adds: scroll reveals, ambient orb fields, glow cards, and each product's
   signature animated visual. Every animation sits behind prefers-reduced-motion. */

/* ---- per-product accent (body class sets the mood) ----------------------- */
body.p-psyche { --pa: #6ea8fe; --pb: #9b8cff; }
body.p-memory { --pa: #ffc266; --pb: #ff9d5c; }
body.p-clone  { --pa: #53ddfc; --pb: #c86bff; }
body.p-hub    { --pa: #4e45e4; --pb: #53ddfc; }
.pgrad { background: linear-gradient(120deg, var(--pa), var(--pb));
         -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- scroll reveal -------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px);
          transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
          transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ---- ambient hero orb field ---------------------------------------------- */
.hero { position: relative; overflow: visible; }
.orbfield { position: absolute; inset: -40px 0 0; z-index: -1; pointer-events: none; }
.orbfield i {
  position: absolute; display: block; border-radius: 50%; filter: blur(46px);
  opacity: .5; animation: orbDrift 16s ease-in-out infinite;
}
.orbfield i:nth-child(1) { width: 34vw; height: 34vw; max-width: 420px; max-height: 420px;
  left: 4%; top: -12%; background: var(--pa); opacity: .34; }
.orbfield i:nth-child(2) { width: 26vw; height: 26vw; max-width: 330px; max-height: 330px;
  right: 6%; top: 8%; background: var(--pb); opacity: .26; animation-delay: -6s; }
.orbfield i:nth-child(3) { width: 16vw; height: 16vw; max-width: 200px; max-height: 200px;
  left: 44%; top: 46%; background: var(--pa); opacity: .18; animation-delay: -11s; }
@keyframes orbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(3vw, 2.5vh) scale(1.07); }
  66% { transform: translate(-2vw, -2vh) scale(.95); }
}

/* hero entrance + gradient shimmer on the em */
.hero h1, .hero .lede, .hero .hero-cta { animation: riseIn .8s cubic-bezier(.2,.7,.3,1) both; }
.hero .lede { animation-delay: .12s; }
.hero .hero-cta { animation-delay: .24s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(110deg, var(--pa), var(--pb), var(--pa));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 7s linear infinite;
}
@keyframes shimmer { from { background-position: 0% 0; } to { background-position: 220% 0; } }
.hero-cta { margin-top: 26px; }
.hero-cta .cta-primary { display: inline-block; }

/* ---- glow cards ----------------------------------------------------------- */
.feature-card { position: relative; transition: transform .25s ease, border-color .25s ease; }
.feature-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--pa) 55%, transparent); }
.feature-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px 140px at 50% -20%, color-mix(in srgb, var(--pa) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity .3s ease;
}
.feature-card:hover::after { opacity: 1; }

/* ---- stage: the framed signature visual ----------------------------------- */
.stage {
  position: relative; border: 1px solid var(--line); border-radius: 22px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--pa) 9%, transparent), transparent 60%),
    rgba(255,255,255,.03);
  padding: 34px 22px; margin: 22px 0 8px; overflow: hidden; text-align: center;
}
.stage .cap {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: 20px;
}

/* ===========================================================================
   PSYCHE — the twins' dialogue, playing on loop
   =========================================================================== */
.chat-demo { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column;
             gap: 10px; min-height: 320px; text-align: left; }
.chat-demo .bub {
  max-width: 82%; padding: 11px 15px; border-radius: 16px; font-size: 14px;
  line-height: 1.5; opacity: 0; animation: chatLoop 16s ease infinite;
  animation-delay: var(--t); box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.chat-demo .a { align-self: flex-start; background: rgba(110,168,254,.16);
  border: 1px solid rgba(110,168,254,.4); border-bottom-left-radius: 5px; }
.chat-demo .b { align-self: flex-end; background: rgba(70,209,138,.13);
  border: 1px solid rgba(70,209,138,.38); border-bottom-right-radius: 5px; }
.chat-demo .m { align-self: center; background: rgba(255,200,87,.10);
  border: 1px solid rgba(255,200,87,.35); font-style: italic; font-size: 13px;
  text-align: center; }
.chat-demo .who { display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; opacity: .65; margin-bottom: 3px; }
@keyframes chatLoop {
  0%, 100% { opacity: 0; transform: translateY(14px); }
  4%, 88%  { opacity: 1; transform: none; }
  94%      { opacity: 0; transform: none; }
}
.demo-note { font-size: 12px; color: var(--muted); margin-top: 16px; font-style: italic; }

/* the twin orbs above the chat */
.twin-orbs { display: flex; justify-content: center; align-items: center; gap: 34px; margin-bottom: 24px; }
.twin-orbs .orb { width: 52px; height: 52px; border-radius: 50%; animation: breathe 4.6s ease-in-out infinite; }
.twin-orbs .oa { background: radial-gradient(circle at 36% 30%, #dbe6ff, #6ea8fe 60%, #4e6cd8);
  box-shadow: 0 0 34px rgba(110,168,254,.5); }
.twin-orbs .ob { background: radial-gradient(circle at 36% 30%, #dcffe9, #46d18a 60%, #2c9a68);
  box-shadow: 0 0 34px rgba(70,209,138,.45); animation-delay: -2.3s; }
.twin-orbs .om { width: 34px; height: 34px;
  background: radial-gradient(circle at 36% 30%, #fff3d9, #ffc857 62%, #d99a2b);
  box-shadow: 0 0 26px rgba(255,200,87,.5); animation-delay: -1.2s; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ===========================================================================
   MEMORY — a candle that keeps its own time + the circle, waiting
   =========================================================================== */
.candle-scene { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.candle { position: relative; width: 46px; height: 120px;
  background: linear-gradient(180deg, #3a2f2a, #241d1a); border-radius: 10px 10px 14px 14px; }
.candle::before { /* wick */ content: ''; position: absolute; top: -8px; left: 50%;
  width: 3px; height: 10px; background: #1a1412; transform: translateX(-50%); border-radius: 2px; }
.flame { position: absolute; top: -38px; left: 50%; width: 22px; height: 34px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 78%, #fff7e0 0%, #ffd27a 38%, #ff9d3c 68%, transparent 74%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  transform-origin: 50% 100%;
  animation: flick 2.8s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(255,178,90,.65)) drop-shadow(0 0 60px rgba(255,150,60,.28));
}
@keyframes flick {
  0%, 100% { transform: translateX(-50%) scale(1) rotate(-1.5deg); }
  22% { transform: translateX(-52%) scale(1.06, .95) rotate(2deg); }
  45% { transform: translateX(-49%) scale(.96, 1.05) rotate(-2.5deg); }
  70% { transform: translateX(-51%) scale(1.04, .98) rotate(1.5deg); }
}
.halo { position: absolute; top: -70px; left: 50%; width: 190px; height: 190px;
  transform: translate(-50%, 0); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,178,90,.16), transparent 65%);
  animation: haloPulse 5.5s ease-in-out infinite; }
@keyframes haloPulse { 0%, 100% { opacity: .8; } 50% { opacity: 1.35; } }

.circle-links { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 400px; text-align: left; }
.circle-links .lnk { display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03);
  border-radius: 13px; padding: 11px 14px; font-size: 13.5px; color: var(--muted); }
.circle-links .lnk b { color: var(--ink); font-weight: 600; }
.circle-links .dot { width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--pa); animation: waitPulse 3.4s ease-in-out infinite;
  animation-delay: var(--t, 0s); }
@keyframes waitPulse {
  0%, 100% { opacity: .25; box-shadow: 0 0 0 0 transparent; }
  50% { opacity: 1; box-shadow: 0 0 10px 1px rgba(255,194,102,.5); }
}
.circle-links .state { margin-left: auto; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pa); opacity: .8; }

/* ===========================================================================
   CLONE — the voice that never sleeps + the ticker
   =========================================================================== */
.clone-scene { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.wave { display: flex; align-items: center; gap: 5px; height: 74px; }
.wave i { display: block; width: 6px; border-radius: 4px; height: 16%;
  background: linear-gradient(180deg, var(--pa), var(--pb));
  animation: waveBar 1.35s ease-in-out infinite; animation-delay: var(--t); }
@keyframes waveBar { 0%, 100% { height: 14%; opacity: .55; } 50% { height: var(--h, 85%); opacity: 1; } }

.earn { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.earn .chip { border: 1px solid var(--line); background: rgba(255,255,255,.04);
  border-radius: 14px; padding: 13px 20px; min-width: 130px; }
.earn .chip b { display: block; font-family: 'Manrope', sans-serif; font-size: 22px;
  font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.earn .chip span { font-size: 11px; color: var(--muted); letter-spacing: .06em;
  text-transform: uppercase; }
.earn .chip b em { font-style: normal; background: linear-gradient(120deg, var(--pa), var(--pb));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* fan messages sliding through */
.fanfeed { position: relative; height: 44px; width: 100%; max-width: 430px; overflow: hidden; }
.fanfeed p { position: absolute; inset: 0; margin: 0; display: flex; align-items: center;
  justify-content: center; gap: 8px; font-size: 13px; color: var(--muted);
  opacity: 0; animation: fanIn 12s ease infinite; animation-delay: var(--t); }
.fanfeed p b { color: var(--ink); font-weight: 600; }
@keyframes fanIn {
  0%, 100% { opacity: 0; transform: translateY(16px); }
  4%, 27% { opacity: 1; transform: none; }
  33% { opacity: 0; transform: translateY(-14px); }
}

/* ===========================================================================
   HUB — four products orbiting one twin
   =========================================================================== */
.family-orbit { position: relative; width: min(360px, 82vw); height: min(360px, 82vw);
  margin: 6px auto 10px; }
.family-orbit .ring { position: absolute; inset: 8%; border: 1px dashed rgba(255,255,255,.14);
  border-radius: 50%; }
.family-orbit .core { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #e6ecff, #4e45e4 58%, #2c2a86);
  box-shadow: 0 0 46px rgba(78,69,228,.55); animation: breathe 4.6s ease-in-out infinite;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #fff; text-align: center; }
.family-orbit .sat { position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  animation: orbit 26s linear infinite; animation-delay: var(--t); }
.family-orbit .sat > a { position: absolute; left: 0; top: calc(min(180px, 41vw) * -1);
  transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;
  gap: 6px; text-decoration: none; color: var(--ink); font-size: 11.5px; font-weight: 600;
  animation: orbitCounter 26s linear infinite; animation-delay: var(--t); }
.family-orbit .sat > a:hover { text-decoration: none; color: #fff; }
.family-orbit .pod { width: 52px; height: 52px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 22px;
  border: 1px solid var(--line); background: rgba(10,10,18,.85);
  box-shadow: 0 0 24px color-mix(in srgb, var(--pc, #4e45e4) 45%, transparent); }
@keyframes orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbitCounter { from { transform: translate(-50%, -50%) rotate(0deg); }
                          to { transform: translate(-50%, -50%) rotate(-360deg); } }

/* ===========================================================================
   ECOSYSTEM STRIP — on every page: four facets feeding one twin.
   The essence of AI-Exodus: intertwined apps, one evolving being.
   =========================================================================== */
.eco { border: 1px solid var(--line); border-radius: 22px; padding: 30px 22px 26px;
  margin: 22px 0 8px; text-align: center;
  background: radial-gradient(90% 120% at 50% 120%, rgba(78,69,228,.10), transparent 60%),
              rgba(255,255,255,.02); }
.eco-core { width: 74px; height: 74px; margin: 0 auto 6px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #e6ecff, #4e45e4 58%, #2c2a86);
  box-shadow: 0 0 40px rgba(78,69,228,.5); animation: breathe 4.6s ease-in-out infinite;
  display: flex; align-items: center; justify-content: center; font-size: 10px;
  font-weight: 800; letter-spacing: .12em; color: #fff; }
.eco-beams { display: flex; justify-content: center; gap: 0; height: 34px; }
.eco-beams i { display: block; width: 1.5px; height: 100%; margin: 0 26px;
  background: linear-gradient(180deg, transparent, rgba(126,140,255,.7));
  animation: beamFlow 2.6s ease-in-out infinite; animation-delay: var(--t); }
@keyframes beamFlow { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.eco-facets { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.eco-facets a { display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); border-radius: 14px;
  padding: 10px 16px; min-width: 118px; text-decoration: none; color: var(--ink);
  font-size: 13px; font-weight: 600; transition: transform .2s ease, border-color .2s ease; }
.eco-facets a:hover { transform: translateY(-3px); text-decoration: none; color: #fff;
  border-color: rgba(126,140,255,.5); }
.eco-facets a small { font-size: 10.5px; font-weight: 500; color: var(--muted);
  letter-spacing: .04em; }
.eco-facets a.here { border-color: color-mix(in srgb, var(--pa) 60%, transparent);
  background: color-mix(in srgb, var(--pa) 10%, transparent); }
.eco p.eco-line { margin: 16px auto 0; max-width: 560px; font-size: 13.5px;
  color: var(--muted); }

/* ===========================================================================
   WAITING LIST — one form, every product
   =========================================================================== */
.wl { border: 1px solid var(--line); border-radius: 22px; padding: 30px 24px;
  margin: 26px 0 8px; text-align: center;
  background: radial-gradient(120% 140% at 50% -30%, color-mix(in srgb, var(--pa) 12%, transparent), transparent 60%),
              rgba(255,255,255,.03); }
.wl h2 { font-family: 'Manrope', sans-serif; margin-bottom: 8px; }
.wl p { color: var(--muted); font-size: 14.5px; max-width: 520px; margin: 0 auto 18px; }
.wl-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wl-form input[type=email] { flex: 1 1 240px; max-width: 340px; padding: 14px 18px;
  border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.05);
  color: var(--ink); font: 500 15px 'Inter', sans-serif; outline: none;
  transition: border-color .2s ease; }
.wl-form input[type=email]::placeholder { color: var(--muted); }
.wl-form input[type=email]:focus { border-color: var(--pa); }
.wl-form button { padding: 14px 26px; border: 0; border-radius: 12px; cursor: pointer;
  font: 700 15px 'Inter', sans-serif; color: #fff;
  background: linear-gradient(120deg, var(--pa), var(--pb));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--pa) 35%, transparent);
  transition: transform .15s ease; }
.wl-form button:hover { transform: translateY(-1px); }
.wl-form button:disabled { opacity: .6; transform: none; }
.wl-msg { min-height: 22px; margin-top: 12px !important; font-size: 13.5px; }
.wl-msg.ok { color: #6fe3a5; }
.wl-msg.err { color: #ff8a8a; }
.wl small { display: block; margin-top: 10px; font-size: 11.5px; color: var(--muted);
  opacity: .8; }

/* ---- reduced motion: everything settles ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero h1, .hero .lede, .hero .hero-cta { animation: none; }
  .hero h1 em { animation: none; }
  .orbfield i, .twin-orbs .orb, .flame, .halo, .circle-links .dot, .wave i,
  .family-orbit .core, .family-orbit .sat, .family-orbit .sat > a { animation: none; }
  .chat-demo .bub, .fanfeed p { animation: none; opacity: 1; transform: none; position: static; }
  .fanfeed { height: auto; }
  .fanfeed p + p { display: none; }
}