/* ============================================================
   FLUENTLY.IO  V2 — INTERACTIVE PRODUCT SHOWCASE
   Built only on existing tokens + components from styles.css
   ============================================================ */

/* ---- shared: live pops / fly-to-memory / confetti ---- */
@keyframes pop{ 0%{ transform:scale(1) } 40%{ transform:scale(1.3) } 100%{ transform:scale(1) } }
.pop{ animation:pop .5s var(--ease-back); }
@keyframes ringfill{ to{ stroke-dashoffset:var(--off); } }
@keyframes confetti{ 0%{ transform:translateY(0) scale(1) rotate(0); opacity:1 } 100%{ transform:translate(var(--cx,0),-70px) scale(.3) rotate(220deg); opacity:0 } }
.spark{ position:absolute; width:9px; height:9px; border-radius:2px; pointer-events:none; z-index:30; animation:confetti .85s var(--ease) forwards; }
.flyer{ position:fixed; z-index:200; pointer-events:none; font-weight:800; font-size:.8rem; padding:.32em .7em; border-radius:var(--pill);
  background:var(--coral); color:#fff; box-shadow:var(--sh-coral); transition:transform .75s var(--ease-back), opacity .75s var(--ease); }

/* =========== SECTION 1 — INTERACTIVE HERO =========== */
.hero2{ display:grid; grid-template-columns:1.02fr 1.16fr; gap:clamp(28px,4vw,68px); align-items:center; }
@media(max-width:920px){ .hero2{ grid-template-columns:1fr; gap:36px; } }
.hero2 .lead{ max-width:36ch; }
.hero2__stage{ position:relative; }

.appdemo{
  background:var(--sage); border-radius:var(--r-xl); padding:16px;
  box-shadow:var(--sh-lg); border:1px solid rgba(255,255,255,.55);
  display:flex; flex-direction:column; gap:12px; min-height:478px; position:relative; z-index:2;
}
.appdemo__bar{ display:flex; align-items:center; gap:10px; }
.appdemo__bar .ava{ width:38px; height:38px; border-radius:12px; background:var(--coral-tint); display:grid; place-items:center; overflow:hidden; flex:none; }
.appdemo__bar .ava img{ width:30px; }
.appdemo__bar b{ font-size:.98rem; }
.live{ display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:800; color:var(--muted); margin-left:auto; }
.live::before{ content:""; width:8px; height:8px; border-radius:50%; background:#54c08a; animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(84,192,138,.5) } 70%{ box-shadow:0 0 0 8px rgba(84,192,138,0) } 100%{ box-shadow:0 0 0 0 rgba(84,192,138,0) } }
.topics{ display:flex; gap:7px; flex-wrap:wrap; }
.topics .chip{ font-size:.84rem; padding:.42em .92em; }
.convo{ flex:1; display:flex; flex-direction:column; gap:9px; overflow:hidden; padding:2px; min-height:172px; justify-content:flex-end; }
.convo .bubble{ max-width:88%; opacity:0; transform:translateY(8px); animation:msgin .4s var(--ease) forwards; }
@keyframes msgin{ to{ opacity:1; transform:none; } }
.hl{ background:var(--butter); color:#3a4012; padding:.05em .35em; border-radius:7px; font-weight:800; cursor:pointer; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.06); transition:.2s; }
.hl:hover{ background:var(--coral); color:#fff; }
.hl.saved{ background:#cfe7c4; color:#3a4012; cursor:default; box-shadow:none; }
.savebar{ display:flex; align-items:center; gap:8px; font-size:.84rem; font-weight:700; color:var(--charcoal); min-height:24px; }
.appdemo__foot{ display:flex; align-items:center; gap:12px; background:#fff; border-radius:var(--pill); padding:8px 8px 8px 16px; box-shadow:var(--sh-xs); }
.appdemo__foot .ph{ color:var(--muted); font-weight:700; font-size:.9rem; flex:1; }
.holdmic{ width:50px; height:50px; border-radius:50%; background:var(--coral); display:grid; place-items:center; flex:none; box-shadow:var(--sh-coral); transition:transform .2s var(--ease-back); -webkit-user-select:none; user-select:none; }
.holdmic.rec{ transform:scale(.92); animation:micpulse 1s infinite; }
@keyframes micpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(221, 87, 28,.5),var(--sh-coral) } 50%{ box-shadow:0 0 0 13px rgba(221, 87, 28,0),var(--sh-coral) } }
.holdmic svg{ width:22px; color:#fff; }
.wave.idle i{ animation-play-state:paused; }
.thinking{ display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:700; color:var(--muted); }
.thinking img{ width:34px; }
.dotpulse{ display:inline-flex; gap:3px; }
.dotpulse i{ width:5px; height:5px; border-radius:50%; background:var(--coral); animation:dp 1s infinite; }
.dotpulse i:nth-child(2){ animation-delay:.15s } .dotpulse i:nth-child(3){ animation-delay:.3s }
@keyframes dp{ 0%,100%{ opacity:.3; transform:translateY(0) } 50%{ opacity:1; transform:translateY(-3px) } }

/* floating live widgets */
.fwidget{
  background:#fff; border-radius:var(--r); padding:11px 14px; box-shadow:var(--sh);
  display:flex; align-items:center; gap:10px; border:1px solid var(--line-soft); white-space:nowrap;
}
.fwidget .ic{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex:none; font-size:16px; background:var(--coral-tint); }
.fwidget .lab{ font-size:.66rem; font-weight:800; color:var(--muted); letter-spacing:.03em; text-transform:uppercase; }
.fwidget .val{ font-weight:900; font-size:1.02rem; line-height:1.05; letter-spacing:-.02em; }
.fwidget[data-pos]{ position:absolute; z-index:6; }
.fw-mem{ top:-22px; left:33%; } .fw-vocab{ top:29%; right:-24px; }
.fw-streak{ top:33%; left:-26px; } .fw-goal{ bottom:-20px; left:5%; }
@media(max-width:1180px){ .fw-vocab{ right:-8px } .fw-streak{ left:-8px } }
@media(max-width:920px){
  .fwidget[data-pos]{ position:static; }
  .fwrow{ display:flex!important; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
}
.fwrow{ display:contents; }

/* =========== SECTION 2 — BENTO FEATURES =========== */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(148px,auto); gap:18px; }
.bento .card{ display:flex; flex-direction:column; gap:10px; overflow:hidden; position:relative; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.bento .card:hover{ transform:translateY(-5px); box-shadow:var(--sh); }
.b-conv{ grid-column:span 2; grid-row:span 2; }
.b-mem{ grid-column:span 2; }
.b-voice{ grid-column:span 1; grid-row:span 2; }
.b-trans{ grid-column:span 1; }
.b-lesson{ grid-column:span 2; }
.b-tutor{ grid-column:span 1; }
@media(max-width:860px){ .bento{ grid-template-columns:repeat(2,1fr); } .b-conv,.b-mem,.b-lesson{ grid-column:span 2; } .b-voice,.b-trans,.b-tutor{ grid-column:span 1; grid-row:auto; } }
@media(max-width:520px){ .bento{ grid-template-columns:1fr; } .bento .card{ grid-column:span 1!important; grid-row:auto!important; } }
.b-head{ display:flex; align-items:center; gap:10px; }
.b-head .feature-ico{ width:40px; height:40px; border-radius:13px; margin:0; }
.b-head .feature-ico svg{ width:21px; }
.b-head b{ font-size:1.02rem; font-weight:800; }
.bento p{ color:var(--muted); font-size:.92rem; }
.b-rev{ max-height:0; opacity:0; transform:translateY(6px); transition:.45s var(--ease); overflow:hidden; }
.bento .card:hover .b-rev{ max-height:140px; opacity:1; transform:none; }
.flip__in{ display:inline-flex; gap:8px; align-items:center; transition:.4s var(--ease); }
.arrowdown{ color:var(--coral); font-weight:900; }
.tutor-word{ cursor:help; border-bottom:2.5px dotted var(--coral); font-weight:800; }
.b-voice .wave{ height:40px; } .b-voice .wave i{ width:4px; }

/* =========== SECTION 3 — PLAY TO LEARN =========== */
.games{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media(max-width:820px){ .games{ grid-template-columns:1fr; } }
.game{ position:relative; overflow:hidden; min-height:300px; display:flex; flex-direction:column; gap:14px; }
.game__h{ display:flex; align-items:center; justify-content:space-between; }
.game__h .tag{ font-size:.78rem; }
.combo{ font-weight:900; color:var(--coral); font-size:.95rem; }
.wm{ display:flex; flex-direction:column; gap:20px; align-items:center; justify-content:center; flex:1; }
.wm__prompt{ font-weight:700; color:var(--muted); font-size:.9rem; }
.draggable{ display:inline-flex; align-items:center; gap:6px; padding:.6em 1.25em; border-radius:var(--pill); background:var(--ink); color:#fff; font-weight:800; box-shadow:var(--sh-sm); touch-action:none; cursor:grab; -webkit-user-select:none; user-select:none; }
.draggable.drag{ cursor:grabbing; z-index:50; }
.wm__targets{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.drop{ min-width:108px; text-align:center; padding:.8em 1em; border-radius:var(--r-sm); border:2.5px dashed var(--line); font-weight:800; color:var(--charcoal); background:var(--cream-raise); transition:.2s; }
.drop.over{ border-color:var(--coral); background:var(--coral-tint); transform:scale(1.05); }
.drop.good{ border-style:solid; border-color:#54c08a; background:#dcefd2; color:#2f5d33; }
.drop.bad{ border-color:#e2856b; animation:shake .3s; }
@keyframes shake{ 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-5px) } 75%{ transform:translateX(5px) } }
.sb{ display:flex; flex-direction:column; gap:14px; flex:1; justify-content:center; }
.sb__ans{ min-height:54px; border-radius:var(--r-sm); background:var(--sage-tint); border:2px solid var(--line); display:flex; flex-wrap:wrap; gap:7px; padding:10px; align-items:center; }
.sb__ans.good{ border-color:#54c08a; background:#dcefd2; }
.sb__ans:empty::before{ content:"Tap the words in order…"; color:var(--muted-soft); font-weight:700; font-size:.86rem; }
.sb__pool{ display:flex; flex-wrap:wrap; gap:8px; }
.tile{ padding:.5em 1em; border-radius:var(--r-xs); background:#fff; font-weight:800; box-shadow:var(--sh-xs); cursor:pointer; border:1.5px solid var(--line); transition:.18s var(--ease-back); }
.tile:hover{ transform:translateY(-2px); border-color:var(--coral); }
.tile.used{ opacity:.25; pointer-events:none; }
.tile.inans{ background:var(--charcoal); color:#fff; border-color:transparent; }
.sb__hint{ font-size:.84rem; color:var(--muted); font-weight:700; }
.game__mascot{ position:absolute; width:62px; right:14px; bottom:10px; opacity:0; transform:translateY(10px) scale(.8); transition:.45s var(--ease-back); pointer-events:none; }
.game__mascot.show{ opacity:1; transform:none; }

/* =========== SECTION 4 — YOUR JOURNEY =========== */
.journey{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.j-mission{ grid-column:span 2; grid-row:span 2; }
.j-vocab{ grid-column:span 2; } .j-conf{ grid-column:span 2; }
.j-coach{ grid-column:span 3; } .j-time{ grid-column:span 3; }
.j-ach{ grid-column:span 6; }
@media(max-width:860px){ .journey{ grid-template-columns:repeat(2,1fr); } .j-mission,.j-vocab,.j-conf,.j-coach,.j-time,.j-ach{ grid-column:span 2; grid-row:auto; } }
.journey .card{ display:flex; flex-direction:column; gap:10px; }
.jlab{ font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.ring{ --sz:128px; width:var(--sz); height:var(--sz); margin:8px auto 2px; position:relative; }
.ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring .track{ fill:none; stroke:var(--sage-deep); stroke-width:11; }
.ring .fill{ fill:none; stroke:var(--coral); stroke-width:11; stroke-linecap:round; stroke-dasharray:var(--circ); stroke-dashoffset:var(--circ); }
.ring.go .fill{ animation:ringfill 1.3s var(--ease) forwards; }
.ring__c{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.ring__c b{ font-size:1.5rem; font-weight:900; line-height:1; }
.ring__c span{ font-size:.72rem; font-weight:800; color:var(--muted); }
.tl{ display:flex; flex-direction:column; }
.tl__i{ display:flex; align-items:center; gap:12px; padding:7px 0; position:relative; }
.tl__i::before{ content:""; position:absolute; left:8px; top:24px; bottom:-8px; width:2px; background:var(--line); }
.tl__i:last-child::before{ display:none; }
.tl__d{ width:18px; height:18px; border-radius:50%; flex:none; background:var(--sage-deep); display:grid; place-items:center; font-size:10px; color:#fff; z-index:1; }
.tl__d.done{ background:#54c08a; } .tl__d.now{ background:var(--coral); box-shadow:0 0 0 4px var(--coral-tint); }
.tl__i b{ font-weight:800; font-size:.95rem; } .tl__i.dim b{ color:var(--muted-soft); }
.conf-meter{ height:12px; border-radius:12px; background:var(--sage-deep); overflow:hidden; }
.conf-meter i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--coral),#f59b66); border-radius:12px; transition:width 1.3s var(--ease); }
.conf-scale{ display:flex; justify-content:space-between; font-size:.72rem; font-weight:800; color:var(--muted-soft); margin-top:6px; }
.j-ach .row{ display:flex; gap:12px; flex-wrap:wrap; }
.j-ach .ach{ flex:1; min-width:150px; }

/* =========== SECTION 5 — MEET FLUENT =========== */
.meet{ text-align:center; position:relative; overflow:hidden; }
.meet__mascot{ width:min(220px,50vw); margin:0 auto 8px; filter:drop-shadow(0 26px 40px rgba(35,39,31,.22)); }
.meet__lines p{ font-size:clamp(1.05rem,2vw,1.32rem); font-weight:700; color:var(--charcoal); line-height:1.55; margin:0; }
.meet__foot{ margin-top:46px; padding-top:24px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.meet__foot nav{ display:flex; gap:4px; flex-wrap:wrap; }
.meet__foot nav a{ padding:.4em .85em; border-radius:var(--pill); font-weight:700; font-size:.92rem; color:var(--charcoal); transition:.2s; }
.meet__foot nav a:hover{ background:var(--sage); color:var(--coral); }
.meet__foot .muted{ font-size:.85rem; font-weight:600; }

/* reduced-motion: ensure JS-revealed states stay visible */
@media(prefers-reduced-motion:reduce){
  .convo .bubble{ opacity:1 !important; transform:none !important; }
  .ring.go .fill{ stroke-dashoffset:var(--off) !important; }
  .fwidget .live::before{ animation:none; }
}