/* ===========================================================
   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);
}
/* Vetrina-storia nel tema chiaro: sfondo pergamena + bagliore oro più tenue */
html[data-theme="light"] #landing {
  background:
    radial-gradient(120% 60% at 50% -8%, #FBF6E8 0%, rgba(239,230,210,0) 60%),
    var(--bg);
  --glow: 0 0 16px rgba(154,110,18,.25);
  /* (v260, rilievo di Claudio) La pillola d'oro partiva da un chiaro TROPPO chiaro
     (#FFF1BE ≈ la pergamena stessa): l'estremità si confondeva col fondo.
     Sul chiaro la sfumatura parte dal miele, non dal burro. */
  --btn-gold: linear-gradient(135deg, #F2CF6B 0%, #DFAE3C 50%, #A8781A 100%);
}
/* Footer in fondo alla Home/storia ("Cioffi Count · MMXXVI"): oro tenue invisibile sul chiaro → oro scuro */
html[data-theme="light"] #landing .copy { color: #8A6310; }
/* Il filetto che completa lo stacco dell'estremità (la base ha border:none) */
html[data-theme="light"] #landing .btn-gold { border: 1px solid rgba(138,99,16,.35); }
/* (v260, rilievo di Claudio) Il Condividi «fantasma» della card finale era quasi invisibile
   sul chiaro (oro pallido su pergamena): si carica — oro profondo e velo dorato di fondo. */
html[data-theme="light"] #landing.lp-tab .finale .lp-share {
  color: #8A6310;
  border-color: rgba(138,99,16,.55);
  background: rgba(154,110,18,.10);
}

/* (v283) Vetrina-storia con la Veste del Conte: la notte si fa più profonda, il
   bagliore più caldo, e la filigrana del tally sussurra anche sotto la leggenda —
   qui la Storia apre il capitolo segreto di Saint-Germain (slot lpc.*, scambiati
   da applyConteStory in app.js). */
html[data-theme="conte"] #landing {
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(240,201,90,.07) 0%, rgba(10,12,26,0) 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='40' viewBox='0 0 72 40'%3E%3Cg stroke='%23F0C95A' stroke-opacity='.045' stroke-width='1.4' stroke-linecap='round'%3E%3Cline x1='10' y1='10' x2='10' y2='30'/%3E%3Cline x1='17' y1='10' x2='17' y2='30'/%3E%3Cline x1='24' y1='10' x2='24' y2='30'/%3E%3Cline x1='31' y1='10' x2='31' y2='30'/%3E%3Cline x1='5' y1='27' x2='36' y2='13'/%3E%3C/g%3E%3C/svg%3E"),
    var(--bg);
  --glow: 0 0 26px rgba(240,201,90,.4);
}

/* ===== (v284) LA VESTE BAROCCA della vetrina — variante «A · Il frontespizio»
   scelta da Claudio sul bozzetto (Bozzetto Veste Barocca): l'apertura diventa un
   frontespizio cerimoniale incorniciato, i capitoli guadagnano capolettera d'oro
   e separatori col fleuron. Tutto e SOLO sotto la Veste del Conte. ===== */

/* — Il frontespizio: cornice a doppio filetto con angoli ornati — */
html[data-theme="conte"] #landing .hero {
  position: relative;
  border: 3px double rgba(240,201,90,.45); border-radius: 4px;
  background: rgba(20,25,48,.35);
  width: min(556px, calc(100% - 28px));
  margin: 14px auto 0; padding: clamp(28px, 6vw, 44px) clamp(18px, 4vw, 34px) clamp(34px, 6vw, 48px);
}
html[data-theme="conte"] #landing .hero::before,
html[data-theme="conte"] #landing .hero::after,
html[data-theme="conte"] #landing .hero .lp-ang::before,
html[data-theme="conte"] #landing .hero .lp-ang::after {
  content: "❧\FE0E"; position: absolute; color: var(--gold); font-size: 1.05rem; opacity: .85;
  line-height: 1;
}
html[data-theme="conte"] #landing .hero::before { top: 8px; left: 12px; transform: scaleX(-1); }
html[data-theme="conte"] #landing .hero::after  { top: 8px; right: 12px; }
html[data-theme="conte"] #landing .hero .lp-ang::before { bottom: 8px; left: 12px; transform: scale(-1,-1); }
html[data-theme="conte"] #landing .hero .lp-ang::after  { bottom: 8px; right: 12px; transform: scaleY(-1); }

/* — Il sigillo: doppio anello + raggiera attorno all'emblema — */
html[data-theme="conte"] #landing .hero .lp-sigillo {
  position: relative; display: inline-block; width: 84px; height: 84px;
}
html[data-theme="conte"] #landing .hero .lp-sigillo::before {
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
  border: 1px solid rgba(240,201,90,.55);
  box-shadow: 0 0 0 4px rgba(240,201,90,.08), inset 0 0 0 2px rgba(240,201,90,.10);
}
html[data-theme="conte"] #landing .hero .lp-sigillo::after {
  content: ""; position: absolute; inset: -22px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(240,201,90,.35) 0deg .8deg, transparent .8deg 12deg);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 72%, transparent 73%);
          mask: radial-gradient(circle, transparent 62%, #000 63%, #000 72%, transparent 73%);
}

/* — Il titolo veste l'oro vero (gradiente); il glow passa da text-shadow a drop-shadow,
     altrimenti l'ombra si stamperebbe sopra il testo trasparente — */
html[data-theme="conte"] #landing .logo-lockup {
  background: linear-gradient(175deg, #FFF1BE 0%, #F0C95A 55%, #C79A2A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 18px rgba(240,201,90,.28));
}

/* — L'occhiello del frontespizio coi fleuron e il latino d'oro — */
html[data-theme="conte"] #landing .eyebrow-hero {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  letter-spacing: .24em;
}
html[data-theme="conte"] #landing .eyebrow-hero::before,
html[data-theme="conte"] #landing .eyebrow-hero::after {
  content: "❦\FE0E"; color: var(--gold); font-size: .9rem; letter-spacing: 0; text-indent: 0;
}
#landing .lat { color: var(--gold); font-weight: 600; }

/* — Il motto respira di più nel quadro — */
html[data-theme="conte"] #landing .promise-line { text-shadow: 0 0 26px rgba(240,201,90,.3); }

/* — I capitoli: capolettera d'oro sul primo paragrafo narrativo (spento in RTL:
     il glifo isolato spezzerebbe le legature arabe/persiane) — */
html[data-theme="conte"] #landing .lp-movement h2 + p::first-letter {
  font-family: var(--serif); font-weight: 700; color: var(--gold);
  font-size: 3.05em; line-height: .82; float: left; padding: .08em .12em 0 0;
  text-shadow: 0 0 16px rgba(240,201,90,.35);
}
[dir="rtl"] html[data-theme="conte"] #landing .lp-movement h2 + p::first-letter,
html[dir="rtl"][data-theme="conte"] #landing .lp-movement h2 + p::first-letter {
  float: none; font-size: inherit; color: inherit; text-shadow: none; padding: 0; font-weight: inherit;
}

/* — I separatori tra capitoli: via la riga, arriva il fleuron tra due filetti — */
html[data-theme="conte"] #landing .lp-movement + .lp-movement {
  border-top: 0; position: relative;
}
html[data-theme="conte"] #landing .lp-movement + .lp-movement::before {
  content: "❦\FE0E"; position: absolute; top: -13px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1.05rem; opacity: .9; line-height: 1;
}
html[data-theme="conte"] #landing .lp-movement + .lp-movement::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft) 28%, transparent 46%, transparent 54%, var(--gold-soft) 72%, transparent);
}

/* — Le card d'oro (patto e finale) col doppio filetto — */
html[data-theme="conte"] #landing .lp-card-gold {
  border: 3px double rgba(240,201,90,.5);
}

#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;
  /* Nel guscio nativo (tappa 4) la pagina arriva fin sotto l'orologio: la barra
     scende dell'area sicura. Nel browser e nella PWA vale 0: niente cambia. */
  padding-top:calc(18px + max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px)));
}
#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-legend{padding-left:22px; padding-right:22px}
#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(max(env(safe-area-inset-top,0px), var(--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:calc(var(--safe-top) + 80px); 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; }
/* «Vai alla Home» (v252): esiste SOLO nella veste-linguetta, e SOLO nella card finale —
   dove prende il posto del Condividi (per un iniziato, l'invito a entrare si chiude a casa).
   Il Condividi in cima alla pagina resta anche nella linguetta.
   NB: serve «#landing» davanti, o perde il braccio di ferro con «#landing .btn-gold» (riga 65). */
#landing .lp-gohome{ display:none; }
#landing.lp-tab .finale .lp-gohome{ display:inline-flex; }
/* (v252, deciso da Claudio) Il Condividi nella finale RESTA anche per gli iniziati, ma da
   secondo violino sotto il «Vai alla Home»: abito fantasma — bordo oro, fondo trasparente. */
#landing.lp-tab .finale .lp-share{
  display:inline-flex;
  background:none;
  color:#E7C04D;
  border:1.5px solid rgba(231,192,77,.45);
  box-shadow:none;
  margin-top:12px;
}

/* ---------- 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; }