/* =================================================================
   Lingua public demo — visual port of the original app at
   c:/Users/Nico/Documents/GitHub/language-learning/static/index.html
   Identity preserved (vibrant dark, gradient title, hero word art).
   ================================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#08080d;
  --s1:#0f0f16;
  --s2:#16161f;
  --s3:#1e1e2a;
  --border:#22223a;
  --text:#eeeef5;
  --text2:#6b6b90;
  --text3:#383852;
  --accent:#7c6ff7;
  --a2:#a78bfa;
  --green:#34d399;
  --orange:#fb923c;
  --pink:#f472b6;
  --blue:#60a5fa;
  --t:.2s cubic-bezier(.4,0,.2,1);
}
html{font-size:16px}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  overflow-x:hidden;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}

@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes in{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slide-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}

/* ────────── DEMO BANNER ────────── */
#demo-banner{
  width:100%;
  background:linear-gradient(90deg,rgba(124,111,247,.18),rgba(244,114,182,.16));
  border-bottom:1px solid var(--border);
  color:var(--text2);
  font-size:.78rem;line-height:1.45;
  padding:10px 64px 10px 80px; /* leave room for the site-frame pill on the left */
  display:flex;align-items:center;gap:10px;justify-content:center;
  text-align:center;
}
#demo-banner .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px rgba(124,111,247,.18);
  flex-shrink:0;
}
#demo-banner strong{color:var(--text);font-weight:700}
#demo-banner a{color:var(--a2);text-decoration:underline;text-underline-offset:2px}
#demo-banner a:hover{color:var(--pink)}

@media(max-width:580px){
  #demo-banner{padding:9px 14px;font-size:.72rem;gap:8px}
}

/* ────────── SETUP ────────── */
#setup{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:calc(100vh - 50px);gap:52px;padding:40px 20px;animation:in .5s ease;
}
.s-title{
  font-size:clamp(3rem,8vw,5.5rem);font-weight:900;letter-spacing:-.07em;
  background:linear-gradient(125deg,#fff 20%,var(--a2) 55%,var(--pink));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  line-height:.95;
}
.s-sub{color:var(--text2);font-size:.88rem;text-align:center;max-width:320px;line-height:1.7;margin-top:-36px}
.s-langs{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.sg{display:flex;flex-direction:column;gap:6px}
.sg label{font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text2)}
.sg select{
  background:var(--s2);color:var(--text);border:1px solid var(--border);
  padding:10px 36px 10px 14px;border-radius:10px;min-width:180px;
  appearance:none;cursor:pointer;transition:var(--t);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236b6b90' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
  font-size:1rem;
}
.sg select:focus{outline:none;border-color:var(--accent)}
.s-arr{color:var(--text3);font-size:1.3rem}
.s-btn{
  background:linear-gradient(135deg,var(--accent),#4e35d6);color:#fff;
  font-weight:700;font-size:.95rem;padding:13px 48px;border-radius:50px;
  letter-spacing:.02em;transition:var(--t);
}
.s-btn:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(124,111,247,.35)}
.s-btn:disabled{opacity:.25;cursor:not-allowed;transform:none;box-shadow:none}

/* ────────── APP SHELL ────────── */
#app{display:none;flex-direction:column;align-items:center;width:100%;max-width:740px;padding:0 24px 220px}

.topbar{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:18px 0 16px;margin-bottom:8px;
}
.lbadge{font-size:.8rem;font-weight:600;letter-spacing:.01em}
.lbadge .t{color:var(--text)}
.lbadge .a{color:var(--text3);margin:0 6px}
.lbadge .n{color:var(--text2)}
.chg-btn{font-size:.73rem;color:var(--text3);padding:5px 12px;border-radius:50px;border:1px solid var(--border);transition:var(--t)}
.chg-btn:hover{color:var(--text2);border-color:var(--text3)}

.navrow{display:flex;align-items:center;gap:8px;margin-bottom:40px;opacity:0;pointer-events:none;transition:opacity .25s}
.navrow.on{opacity:1;pointer-events:auto}
.nb{width:28px;height:28px;border-radius:7px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:var(--t)}
.nb:hover:not(:disabled){background:var(--s2)}
.nb:disabled{opacity:.15;cursor:not-allowed}
.nb svg{width:12px;height:12px}
.nc{font-size:.72rem;color:var(--text3);min-width:42px;text-align:center}

.standby{
  display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:90px;
  animation:in 1.2s ease;color:var(--text3);font-size:.82rem;text-align:center;line-height:1.9;
}
.standby kbd{background:var(--s2);border:1px solid var(--border);border-radius:5px;padding:2px 8px;font-family:inherit;font-size:.76rem;color:var(--text2)}

.lw{display:none;flex-direction:column;align-items:center;gap:12px;margin-top:90px}
.lw.on{display:flex;animation:in .2s ease}
.sp{width:30px;height:30px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}
.lt{font-size:.78rem;color:var(--text3)}

.qpill{
  display:none;align-self:flex-start;
  font-size:.75rem;color:var(--text3);
  margin-bottom:32px;padding-left:2px;
  animation:in .3s ease;
}
.qpill::before{content:'"';color:var(--text3)}
.qpill::after{content:'"';color:var(--text3)}

/* ────────── CONTENT AREA ────────── */
#widgets{width:100%;display:flex;flex-direction:column}

/* ── HERO (word + translation + definition) ─────────── */
.hero{padding:0 0 48px;position:relative}
.hero-bg{
  position:absolute;right:-10px;top:-20px;
  font-size:clamp(10rem,30vw,18rem);font-weight:900;
  color:rgba(124,111,247,.035);line-height:1;
  user-select:none;pointer-events:none;letter-spacing:-.07em;
  z-index:0;
}
.hero-word{
  font-size:clamp(3rem,8vw,6rem);font-weight:900;
  letter-spacing:-.05em;line-height:1;
  background:linear-gradient(135deg,#ffffff,var(--a2) 70%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:14px;position:relative;z-index:1;
  word-break:break-word;
}
.hero-trans{
  font-size:clamp(1.3rem,3.5vw,2rem);font-weight:500;
  color:var(--green);letter-spacing:-.02em;line-height:1.2;
  margin-bottom:22px;position:relative;z-index:1;
}
.hero-def{
  font-size:1rem;color:var(--text2);line-height:1.75;
  max-width:560px;position:relative;z-index:1;
  border-left:2px solid var(--border);padding-left:18px;
}

/* ── SENTENCE (word-by-word) ─────────────────────────── */
.sentence{
  font-size:clamp(1.2rem,3vw,1.7rem);font-weight:600;
  line-height:1.6;letter-spacing:-.01em;
  padding:32px 0 40px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  border-top:1px solid var(--border);
}
.sw{
  position:relative;cursor:default;
  color:var(--text);transition:color var(--t);
  padding-bottom:4px;
}
.sw::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:3px;height:3px;border-radius:50%;
  background:var(--chip-c,var(--text3));
  opacity:.5;transition:all var(--t);
}
.sw:hover{color:var(--chip-c,var(--a2))}
.sw:hover::after{width:100%;height:1px;border-radius:0;opacity:.4}
.swt{
  position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);
  background:#1a1a2a;border:1px solid var(--border);border-top:2px solid var(--chip-c,var(--accent));
  border-radius:10px;padding:10px 14px;min-width:140px;max-width:min(220px,85vw);
  opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;
  box-shadow:0 16px 48px rgba(0,0,0,.6);z-index:20;white-space:normal;
  transform:translateX(-50%) translateY(4px);
}
.sw:hover .swt{opacity:1;transform:translateX(-50%) translateY(0)}
.swt-tr{font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:4px}
.swt-ro{font-size:.75rem;color:var(--text2);line-height:1.45}

/* ── EXAMPLES — carousel ─────────────────────────────── */
.carousel{border-top:1px solid var(--border);padding:36px 0 44px}
.car-count{
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text3);margin-bottom:20px;
  font-variant-numeric:tabular-nums;
}
.car-slide{animation:slide-in .25s ease both}
.car-tgt{
  font-size:clamp(1.25rem,3.5vw,1.75rem);font-weight:700;
  line-height:1.35;letter-spacing:-.02em;color:var(--text);
  margin-bottom:10px;
}
.car-nat{font-size:1rem;color:var(--text2);line-height:1.5;margin-bottom:20px}
.car-exp{font-size:.83rem;color:var(--text3);line-height:1.55}
.car-nav{display:flex;align-items:center;gap:14px;margin-top:28px}
.car-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;transition:var(--t);
  color:var(--text3);
}
.car-btn:hover:not(:disabled){border-color:var(--text2);color:var(--text)}
.car-btn:disabled{opacity:.18;cursor:not-allowed}
.car-btn svg{width:13px;height:13px}
.car-dots{display:flex;gap:6px;align-items:center}
.car-dot{
  width:4px;height:4px;border-radius:50%;background:var(--border);
  transition:all var(--t);cursor:pointer;
}
.car-dot.on{width:20px;border-radius:2px;background:var(--accent)}

/* ── DERIVATIONS — floating cloud ────────────────────── */
.derivs{
  display:flex;flex-wrap:wrap;gap:10px;
  padding:36px 0 44px;
  border-top:1px solid var(--border);
}
.dc{
  position:relative;
  font-size:.92rem;font-weight:600;
  padding:9px 16px;border-radius:50px;
  background:var(--s1);border:1px solid var(--border);
  cursor:default;transition:var(--t);
}
.dc:hover{border-color:var(--dc-c,var(--pink));color:var(--dc-c,var(--pink));transform:translateY(-2px)}
.dct{
  position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  background:#1a1a2a;border:1px solid var(--border);border-top:2px solid var(--dc-c,var(--pink));
  border-radius:10px;padding:10px 14px;min-width:150px;max-width:min(220px,85vw);
  opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;
  box-shadow:0 16px 48px rgba(0,0,0,.65);z-index:20;
  transform:translateX(-50%) translateY(4px);white-space:normal;
}
.dc:hover .dct{opacity:1;transform:translateX(-50%) translateY(0)}
.dct-tr{font-size:.82rem;color:var(--text2);margin-bottom:4px}
.dct-re{font-size:.74rem;color:var(--dc-c,var(--pink));line-height:1.4}

/* tap-to-show on touch devices */
.sw.tip-open .swt{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.dc.tip-open .dct{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}

/* ── CONJUGATION ─────────────────────────────────────── */
.conj-section{border-top:1px solid var(--border);padding:36px 0 44px}
.conj-wrap{display:flex;flex-wrap:wrap;gap:36px}
.ct{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green);margin-bottom:14px;
}
.cf-rows{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline}
.cp{font-size:.78rem;color:var(--text3);font-style:italic}
.cv{font-size:1.05rem;font-weight:600;color:var(--text)}

/* ── GRAMMAR NOTE ────────────────────────────────────── */
.gram{border-top:1px solid var(--border);padding:36px 0 44px;position:relative}
.gram::before{
  content:attr(data-title);
  display:block;
  font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);opacity:.6;margin-bottom:14px;
}
.gram-body{
  font-size:1.05rem;line-height:1.8;color:var(--text);
  padding-left:22px;border-left:3px solid var(--accent);
  max-width:560px;
}

/* ── CULTURAL NOTE ───────────────────────────────────── */
.cult{
  border-top:1px solid var(--border);
  padding:32px 0 40px;
  display:flex;gap:16px;align-items:flex-start;
}
.cult-mark{font-size:1.5rem;color:var(--pink);flex-shrink:0;line-height:1;margin-top:2px}
.cult-body{font-size:.93rem;color:var(--text2);line-height:1.75;font-style:italic;max-width:520px}

/* ── PRONUNCIATION ───────────────────────────────────── */
.pron-foot{
  padding:14px 0 8px;border-top:1px solid var(--border);
  font-size:.78rem;color:var(--text3);display:flex;align-items:center;gap:10px;
}
.pron-ipa{font-style:italic;letter-spacing:.03em}
.pron-sep{color:var(--border)}

/* ────────── INPUT BAR ────────── */
/* Sits above the demo-cta footer (~46px tall on desktop, ~70px wrapped on mobile) */
#ibar{
  position:fixed;bottom:50px;left:0;right:0;z-index:50;
  display:none;justify-content:center;
  padding:10px 20px 14px;
  background:linear-gradient(to top,var(--bg) 60%,transparent);
}
.ib{
  width:100%;max-width:640px;background:var(--s2);border:1px solid var(--border);
  border-radius:16px;display:flex;align-items:center;
  padding:6px 6px 6px 16px;gap:6px;
  box-shadow:0 8px 52px rgba(0,0,0,.6);
  transition:border-color var(--t);
}
.ib:focus-within{border-color:rgba(124,111,247,.5)}
.ib-inp{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:1rem;padding:8px 0;min-width:0}
.ib-inp::placeholder{color:var(--text3)}
.ib-div{width:1px;height:24px;background:var(--border);margin:0 2px;flex-shrink:0}
.rb{
  width:44px;height:44px;border-radius:11px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#4e35d6);
  display:flex;align-items:center;justify-content:center;
  transition:var(--t);box-shadow:0 2px 10px rgba(124,111,247,.3);
}
.rb:hover{transform:scale(1.06)}
.rb:disabled{opacity:.4;cursor:not-allowed;transform:none}
.rb svg{width:18px;height:18px}

@media(max-width:580px){
  #app{padding:0 16px 200px}
  .hero-word{font-size:3rem}
  .hero-bg{font-size:9rem}
  .sentence{font-size:1.1rem;gap:6px}
  .car-tgt{font-size:1.25rem}
  .topbar{padding:14px 0 12px}
  .s-langs{flex-direction:column;align-items:center}
  .s-arr{transform:rotate(90deg)}
  .standby{margin-top:60px}
  .sg select{min-width:220px}
  #ibar{bottom:80px;padding:8px 14px 10px}
}
@media(max-width:380px){
  .s-btn{padding:12px 32px}
  .sg select{min-width:180px}
}

/* prefers-reduced-motion: kill animations + transitions across the app */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .sp{animation:none !important;border-top-color:var(--accent)}
}