/* ============================================================
   FLUENTLY.IO — v7 · LIVING PRODUCT LAYER  (loaded last)
   Turns flat surfaces into an ecosystem: floating micro-widgets,
   depth glows, broken-symmetry bento, live accents.
   Brand tokens, colours, type, copy & IA all unchanged —
   only HOW the product is presented.
   ============================================================ */

/* ---------- shared floating-widget system ---------- */
.fxlayer{ position:absolute; inset:0; pointer-events:none; z-index:6; }
.fxw{
  position:absolute; pointer-events:none;
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:16px; padding:9px 12px; box-shadow:var(--depth-3), var(--hi);
  display:flex; align-items:center; gap:9px; white-space:nowrap;
  font-weight:800; font-size:.82rem; color:var(--ink);
  animation:floaty 6s var(--ease) infinite;
}
.fxw .ig{ width:30px; height:30px; flex:none; border-radius:10px; display:grid; place-items:center; font-size:1rem;
  background:var(--at, var(--coral-tint)); color:var(--a, var(--coral-deep)); box-shadow:var(--depth-1); }
.fxw .tx{ display:flex; flex-direction:column; line-height:1.14; }
.fxw .tx small{ font-size:.66rem; font-weight:800; color:var(--muted); letter-spacing:.01em; }
.fxw .tx b{ font-size:.9rem; font-weight:900; letter-spacing:-.01em; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
.fxw.d1{ animation-delay:-1.2s } .fxw.d2{ animation-delay:-2.4s }
.fxw.d3{ animation-delay:-3.6s } .fxw.d4{ animation-delay:-4.8s }

.fxw--pill{ border-radius:999px; }
.fxw--coral{ background:var(--grad-coral); color:#fff; border-color:transparent; box-shadow:var(--sh-coral), var(--hi); }
.fxw--coral .ig{ background:rgba(255,255,255,.24); color:#fff; }
.fxw--coral .tx small{ color:rgba(255,255,255,.82); }

/* progress ring chip */
.fxring{ width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--coral) calc(var(--p,70)*1%), var(--sage-deep) 0); }
.fxring::after{ content:""; width:17px; height:17px; border-radius:50%; background:var(--paper);
  display:grid; place-items:center; }
/* mini voice waveform */
.fxvoice{ display:inline-flex; align-items:center; gap:3px; height:20px; }
.fxvoice i{ width:3px; height:60%; border-radius:2px; background:var(--c-blue); transform-origin:center;
  animation:pwave 1s var(--ease) infinite; }
.fxvoice i:nth-child(2){ animation-delay:.12s } .fxvoice i:nth-child(3){ animation-delay:.24s }
.fxvoice i:nth-child(4){ animation-delay:.36s } .fxvoice i:nth-child(5){ animation-delay:.18s }

/* ============================================================
   HERO — the dashboard becomes a product ecosystem
   ============================================================ */
.hero2__stage{ overflow:visible; }
.hero2__stage::before{               /* layered depth glow behind the dashboard */
  content:""; position:absolute; inset:-8% -12% -12% -6%; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 58% at 72% 26%, rgba(221, 87, 28,.18), transparent 70%),
             radial-gradient(56% 56% at 22% 82%, rgba(86,170,140,.16), transparent 72%);
  filter:blur(10px);
}
.dash{ box-shadow:var(--depth-3), inset 0 1px 0 rgba(255,255,255,.72) !important; }

.hero-fx .fx-recall{ top:-26px; left:-46px; }
.hero-fx .fx-xp{ top:40px; right:-22px; }
.hero-fx .fx-streak{ top:226px; left:-58px; }
.hero-fx .fx-saved{ bottom:-26px; left:22px; }
.hero-fx .fx-voice{ bottom:48px; right:-34px; }
@media(max-width:1240px){ .hero-fx .fx-streak{ display:none } }
@media(max-width:1100px){ .hero-fx .fx-xp{ display:none } }
@media(max-width:920px){ .hero-fx{ display:none } }

/* ============================================================
   GROW — broken-symmetry bento (large → medium → small)
   ============================================================ */
@media(min-width:901px){
  .moddash{
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:minmax(128px,auto);
    grid-template-areas:
      "convo convo memory    translate"
      "convo convo vocab     grammar"
      "pron  goal  vocab     progress";
  }
}
.mod{ overflow:visible; }                 /* let floating badges pop out */
.mod--convo{ --a:var(--c-coral); --at:var(--t-coral); }
.mod--convo .uihead b{ font-size:1.12rem; }
.mod--convo .uihead .ico{ width:36px; height:36px; border-radius:11px; }
.mod--convo .uihead .ico svg{ width:19px; height:19px; }
.mod--convo .cv-bub{ font-size:.96rem; }
/* the primary card: let the thread breathe and fill the tall cell */
.mod--convo .modbody{ justify-content:space-between; gap:9px; }
.mod--vocab .vbars{ justify-content:space-between; gap:11px; }

/* a floating badge / notification clipped to a card corner */
.modbadge{ position:absolute; z-index:4; top:-10px; right:-8px; pointer-events:none;
  display:inline-flex; align-items:center; gap:5px;
  background:var(--grad-coral); color:#fff; font-size:.64rem; font-weight:900; letter-spacing:.03em;
  padding:5px 9px; border-radius:999px; box-shadow:var(--sh-coral);
  animation:floaty 5s var(--ease) infinite; }
.modbadge.blue{ background:linear-gradient(135deg,#6aa0ec,#4E83D8); box-shadow:0 14px 30px -12px rgba(78,131,216,.5); }
.modbadge.green{ background:linear-gradient(135deg,#5cc190,#3F9E6E); box-shadow:0 14px 30px -12px rgba(63,158,110,.5); }

/* typing indicator (lives in the larger conversation card) */
.typing{ display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
  background:var(--sage); padding:10px 13px; border-radius:13px; border-bottom-left-radius:4px; }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--muted-soft); animation:typed 1.25s infinite; }
.typing i:nth-child(2){ animation-delay:.18s } .typing i:nth-child(3){ animation-delay:.36s }
@keyframes typed{ 0%,60%,100%{ transform:translateY(0); opacity:.45 } 30%{ transform:translateY(-4px); opacity:1 } }

/* ============================================================
   MEMORY — floating timeline chips + connectors
   ============================================================ */
.mempanel{ z-index:1; }
.memshow::before{                         /* soft glow tying the two panels together */
  content:""; position:absolute; inset:auto; pointer-events:none; }
.memtag.float{ animation:floaty 6s var(--ease) infinite; box-shadow:var(--depth-2); }
.mempanel .day .liveclock{ margin-left:auto; font-size:.62rem; font-weight:900; color:var(--c-green);
  background:var(--t-green); padding:3px 8px; border-radius:999px; letter-spacing:.02em; }

/* ============================================================
   EXPLORE — game-dashboard micro widgets
   ============================================================ */
.xstrip{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,16px); margin-bottom:clamp(16px,2vw,22px); }
.xw{ position:relative; overflow:hidden; background:var(--cream-raise); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:14px 15px; box-shadow:var(--depth-2), var(--hi);
  display:flex; flex-direction:column; gap:9px; transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  --a:var(--c-coral); --at:var(--t-coral); }
.xw:hover{ transform:translateY(-4px); box-shadow:var(--depth-3), var(--hi); }
.xw.blue{ --a:var(--c-blue); --at:var(--t-blue); } .xw.green{ --a:var(--c-green); --at:var(--t-green); }
.xw.purple{ --a:var(--c-purple); --at:var(--t-purple); } .xw.amber{ --a:var(--c-amber); --at:var(--t-amber); }
.xw .xh{ display:flex; align-items:center; gap:7px; font-size:.7rem; font-weight:900; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); }
.xw .xh .d{ width:7px; height:7px; border-radius:50%; background:var(--a);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--a) 16%, transparent); }
.xw .xh .ig{ margin-left:auto; width:24px; height:24px; border-radius:8px; display:grid; place-items:center;
  background:var(--at); color:var(--a); font-size:.85rem; }
.xw .xbig{ font-size:1.55rem; font-weight:900; letter-spacing:-.03em; line-height:1; color:var(--ink); }
.xw .xbig small{ font-size:.7rem; font-weight:800; color:var(--muted); margin-left:3px; }
.xw .xsub{ font-size:.78rem; font-weight:700; color:var(--muted); }
.xw .xtrack{ height:8px; border-radius:999px; background:var(--sage-deep); overflow:hidden; }
.xw .xtrack i{ display:block; height:100%; border-radius:999px; background:var(--grad-coral); }
.xw.blue .xtrack i{ background:linear-gradient(90deg,#6aa0ec,#4E83D8); }
.xdots{ display:flex; gap:5px; }
.xdots i{ width:13px; height:13px; border-radius:5px; background:var(--sage-deep); }
.xdots i.on{ background:var(--a); }
.xachs{ display:flex; gap:6px; }
.xach{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:1rem;
  background:var(--at); box-shadow:var(--depth-1); }
.xach.lock{ background:var(--sage); opacity:.5; filter:grayscale(.6); }
@media(max-width:820px){ .xstrip{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   MEET — floating product widgets orbit the mascot
   ============================================================ */
.meet{ overflow:visible; }
.meetfx{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.meetfx .fxw{ position:absolute; }
.meetfx .mf1{ top:14%;  left:7%; }
.meetfx .mf2{ top:30%;  right:8%; }
.meetfx .mf3{ top:54%;  left:11%; }
.meetfx .mf4{ bottom:20%; right:12%; }
.meetfx .mf5{ top:8%;   right:24%; }
.meet .wrap{ z-index:1; }
@media(max-width:1080px){ .meetfx .mf3,.meetfx .mf5{ display:none } }
@media(max-width:760px){ .meetfx{ display:none } }

/* ---------- motion-safety ---------- */
@media (prefers-reduced-motion:reduce){
  .fxw,.modbadge,.memtag.float,.typing i,.fxvoice i{ animation:none !important; }
}