/* ===========================================================
   landing.css — la "vetrina" (pagina d'ingresso narrativa).
   TUTTE le regole sono confinate sotto #landing, così non
   toccano in alcun modo lo stile dell'app. I token (--bg, --gold,
   ecc.) sono ereditati dal :root di app.css.
   =========================================================== */

#landing{
  position:fixed; inset:0; z-index:60;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(120% 60% at 50% -8%, #131C2C 0%, rgba(11,15,23,0) 60%),
    var(--bg);
  /* variabili usate solo dalla vetrina */
  --btn-gold: linear-gradient(135deg, #FFF1BE 0%, #F0C95A 48%, #C79A2A 100%);
  --btn-gold-text: #241A05;
  --glow: 0 0 24px rgba(231,192,77,.35);
}

#landing a{color:inherit}
#landing ::selection{background:rgba(231,192,77,.26)}
#landing :focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}

#landing .wrap{max-width:600px; margin:0 auto; padding:0 22px}

/* ---------- header ---------- */
#landing .topbar{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  max-width:880px; margin:0 auto; padding:18px 22px;
}
#landing .brand{display:flex; align-items:center; gap:10px; min-width:0}
#landing .brand .mark{width:26px; height:26px; flex:0 0 auto}
#landing .brand .name{
  font-family:var(--serif); font-weight:700; color:var(--gold);
  text-transform:uppercase; letter-spacing:.26em; font-size:.82rem;
  white-space:nowrap;
}
#landing .btn-ghost{
  font-family:var(--sans); font-size:.8rem; font-weight:500; letter-spacing:.04em;
  color:var(--gold); text-decoration:none; white-space:nowrap;
  padding:9px 18px; border:1px solid var(--gold-soft); border-radius:999px;
  background:var(--primary-soft); cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
#landing .btn-ghost:hover{background:rgba(231,192,77,.22); border-color:var(--gold)}

/* ---------- pulsanti ---------- */
#landing .btn-gold{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; max-width:340px;
  font-family:var(--sans); font-weight:600; font-size:.96rem;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--btn-gold-text);
  background:var(--btn-gold);
  border:none; border-radius:var(--radius);
  padding:16px 28px; cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .25s ease, filter .25s ease;
}
#landing .btn-gold:hover{filter:brightness(1.04); box-shadow:0 8px 26px rgba(231,192,77,.30); transform:translateY(-1px)}
#landing .btn-gold:active{transform:translateY(0)}

#landing .have-account{margin:16px 0 0; font-size:.9rem; color:var(--text-soft)}
#landing .have-account a{color:var(--gold); text-decoration:none; font-weight:500; cursor:pointer}
#landing .have-account a:hover{text-decoration:underline}

/* ---------- emblema ---------- */
#landing .brand .mark, #landing .emblem{color:var(--gold)}
#landing .emblem{filter:drop-shadow(0 4px 16px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(231,192,77,.25))}
#landing .emblem.glow{animation:lpBreathe 6s ease-in-out infinite}
@keyframes lpBreathe{0%,100%{opacity:.96}50%{opacity:1}}

/* ---------- hero ---------- */
#landing .hero{text-align:center; padding:14px 0 clamp(46px,9vh,80px)}
#landing .hero .emblem{width:84px; height:84px; margin:0 auto}
#landing .logo-lockup{
  font-family:var(--serif); font-weight:700; color:var(--gold);
  text-transform:uppercase; letter-spacing:.34em; text-indent:.34em;
  font-size:clamp(1.5rem,1.2rem + 2vw,2.2rem); line-height:1.35;
  margin:18px 0 0; text-shadow:var(--glow);
}
#landing .eyebrow-hero{
  font-family:var(--sans); font-size:.74rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-soft); margin:22px 0 0;
}
#landing .promise-line{
  margin:14px auto 0;
  font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:clamp(1.6rem,1.3rem + 2.4vw,2.9rem); line-height:1.2; color:var(--gold);
  text-shadow:0 0 22px rgba(231,192,77,.22);
}
#landing .promise{position:relative; display:inline-block; max-width:100%; white-space:normal; text-wrap:balance}
#landing .promise .txt{display:inline-block}
#landing .promise .caret{
  position:absolute; top:.12em; bottom:.16em; left:0; width:2px;
  background:var(--gold); box-shadow:0 0 10px var(--gold);
}
#landing .lede{
  max-width:34ch; margin:20px auto 0; color:var(--text-soft);
  font-size:1.04rem; line-height:1.65;
}
#landing .hero .btn-gold{margin-top:30px}
#landing .scrolldown{display:block; margin:42px auto 0; width:1px; height:40px;
  background:linear-gradient(var(--gold), transparent); opacity:.55}

/* ---------- leggenda ---------- */
#landing .lp-legend{padding:6px 0 10px}
#landing .lp-movement{padding:clamp(30px,6vh,52px) 0}
#landing .lp-movement + .lp-movement{border-top:1px solid var(--border)}
#landing .eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:var(--serif); font-weight:700; color:var(--gold);
  text-transform:uppercase; letter-spacing:.16em; font-size:.82rem;
  margin:0 0 14px;
}
#landing .eyebrow::before{content:""; width:24px; height:2px; background:var(--gold); border-radius:2px; flex:0 0 auto}
#landing .lp-movement h2{
  font-family:var(--serif); font-weight:700; color:var(--text);
  font-size:clamp(1.4rem,1.2rem + 1.4vw,2rem); line-height:1.28;
  margin:0 0 14px;
}
#landing .lp-movement p{margin:0 0 14px; color:var(--text)}
#landing .lp-movement p:last-child{margin-bottom:0}
#landing .soft{color:var(--text-soft)}
#landing .spark{color:var(--gold); font-weight:500}
#landing .appname{color:var(--gold); font-family:var(--serif); font-weight:700; letter-spacing:.04em}

/* ---------- patto (card) ---------- */
#landing .lp-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:clamp(24px,5.5vw,32px);
}
#landing .lp-card-gold{border-color:var(--gold-soft)}
#landing .pact{margin:clamp(30px,6vh,52px) 0}
#landing .pact .eyebrow{margin-bottom:14px}
#landing .pact h2{
  font-family:var(--serif); font-weight:700; color:var(--text);
  font-size:clamp(1.3rem,1.15rem + 1.2vw,1.8rem); line-height:1.3; margin:0 0 14px;
}
#landing .pact p{margin:0 0 14px}
#landing .pact p:last-child{margin-bottom:0}

/* ---------- cosa fa: entrate / uscite / traguardi ---------- */
#landing .features{padding:clamp(30px,6vh,52px) 0; border-top:1px solid var(--border)}
#landing .features .intro{color:var(--text-soft); margin:0 0 22px; max-width:42ch}
#landing .feat-grid{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:520px){#landing .feat-grid{grid-template-columns:repeat(3,1fr)}}
#landing .feat{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px}
#landing .lp-chip{width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px}
#landing .lp-chip svg{width:22px; height:22px}
#landing .lp-chip-in{background:rgba(91,185,139,.14); color:var(--entrata)}
#landing .lp-chip-out{background:rgba(214,75,92,.14); color:var(--uscita)}
#landing .lp-chip-goal{background:var(--primary-soft); color:var(--gold)}
#landing .feat h3{font-family:var(--sans); font-weight:600; font-size:1.02rem; color:var(--text); margin:0 0 6px}
#landing .feat p{font-family:var(--sans); color:var(--text-soft); font-size:.92rem; line-height:1.55; margin:0}

/* ---------- finale ---------- */
#landing .finale{text-align:center; margin:clamp(40px,8vh,76px) 0 14px; padding:clamp(34px,7vw,44px) clamp(22px,5vw,40px)}
#landing .finale .emblem{width:60px; height:60px; margin:0 auto 18px}
#landing .finale h2{
  font-family:var(--serif); font-weight:700; color:var(--gold);
  font-size:clamp(1.5rem,1.25rem + 1.6vw,2.1rem); line-height:1.3; margin:0 0 10px;
  text-shadow:0 0 18px rgba(231,192,77,.2);
}
#landing .finale p{max-width:32ch; margin:0 auto 28px; color:var(--text-soft)}
#landing .finale .btn-gold{margin:0 auto}

/* ---------- footer ---------- */
#landing footer{border-top:1px solid var(--border); padding:28px 22px 46px; text-align:center}
#landing .wink{font-family:var(--serif); font-style:italic; color:var(--text-soft);
  max-width:48ch; margin:0 auto 14px; font-size:1rem; line-height:1.55}
#landing .copy{font-family:var(--serif); font-weight:700; font-size:.72rem; letter-spacing:.26em;
  text-transform:uppercase; color:rgba(231,192,77,.55)}

/* ---------- movimento (animazioni) ---------- */
#landing .promise .txt{clip-path:inset(0 100% 0 0); animation:lpReveal 2s cubic-bezier(.55,.06,.3,1) .5s forwards}
#landing .promise .caret{animation:lpTravel 2s cubic-bezier(.55,.06,.3,1) .5s forwards, lpBlink .85s step-end .5s 3, lpCfade .4s ease 2.6s forwards}
@keyframes lpReveal{to{clip-path:inset(0 0 0 0)}}
@keyframes lpTravel{to{left:100%}}
@keyframes lpBlink{50%{opacity:0}}
@keyframes lpCfade{to{opacity:0}}

#landing .reveal{opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s ease}
#landing .reveal.in{opacity:1; transform:none}

@media (max-width:374px){ #landing .promise{white-space:normal} #landing .promise .caret{display:none} }

@media (prefers-reduced-motion: reduce){
  #landing *{animation:none !important; transition:none !important}
  #landing .promise .txt{clip-path:none}
  #landing .promise .caret{display:none}
  #landing .reveal{opacity:1; transform:none}
  #landing{scroll-behavior:auto}
}

/* ---------- freccia "indietro" sulla schermata d'accesso (torna alla vetrina) ---------- */
.auth-back{
  position:absolute; top:calc(env(safe-area-inset-top,0px) + 14px); left:16px; z-index:5;
  display:inline-flex; align-items:center; gap:4px;
  background:none; border:none; cursor:pointer;
  color:var(--text-soft); font-family:var(--sans); font-size:.92rem;
  padding:8px 6px;
}
.auth-back:hover{color:var(--gold)}

/* ---------- modalità "scheda Home" (utente loggato): la STESSA storia, dentro l'app ---------- */
/* sta SOTTO la barra schede (z-index 25), con spazio in fondo per non finirci sotto */
#landing.lp-tab{ z-index:10; padding-top:var(--safe-top); padding-bottom:calc(78px + var(--safe-bottom)); }
/* il pulsante "Condividi" compare SOLO nella Home; resta nascosto nella landing pubblica */
#landing .lp-share{ display:none; }
#landing.lp-tab .lp-share{ display:inline-flex; }
/* nella Home i pulsanti registrazione/login non servono (sei già dentro) → nascosti */
#landing.lp-tab [data-lp="start"],
#landing.lp-tab [data-lp="login"],
#landing.lp-tab .have-account{ display:none; }

/* ---------- da destra a sinistra (arabo/persiano) ---------- */
/* il layout si specchia da solo (dir=rtl); qui spengo solo l'effetto "macchina da scrivere" che è pensato LTR */
[dir="rtl"] #landing .promise .txt{ clip-path:none; animation:none; }
[dir="rtl"] #landing .promise .caret{ display:none; }