/* =========================================================
   IL FILO ROSSO — stylesheet
   Tarocchi dell'amore — stile pulito, chiaro, simbolico, romantico
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Jost:wght@300;400;500;600&display=swap');

:root{
  /* --- colore --- */
  --c-bg:         #ffffff;
  --c-bg-soft:    #faf8fd;

  /* sfumatura viola chiaro usata su box letture / menu / carte */
  --c-panel-1:    #f4eefb;
  --c-panel-2:    #e7d9f6;
  --c-panel-3:    #dcc9f2;

  --c-gold:       #b8873f;
  --c-gold-soft:  #96702f;
  --c-gold-lite:  #d7ad5c;

  --c-thread:     #a11d3b;
  --c-thread-lite:#d94f6a;

  --c-text:       #2e2233;
  --c-text-dim:   rgba(46,34,51,.68);
  --c-text-mute:  rgba(46,34,51,.42);

  --shadow-soft:  rgba(107,74,148,.18);
  --shadow-hover: rgba(107,74,148,.28);

  /* --- tipografia --- */
  --f-display: 'Cormorant Garamond', serif;
  --f-body:    'Jost', sans-serif;

  /* --- misura carte (sovrascritte dai media query) --- */
  --card-w: 168px;
  --card-h: 288px;
  --card-radius: 14px;
  --card-border: 3px;

  --maxw: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--c-bg); min-height:100%; }
body{
  margin:0;
  min-height:100vh;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--f-body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--c-thread); color:#fff; }

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:500;
  margin:0 0 .4em;
  letter-spacing:.01em;
  color:var(--c-text);
}

.eyebrow{
  font-family:var(--f-body);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--c-gold-soft);
}

/* --- marchio "Il Filo Rosso": nero + rosso, bordatura oro --- */
.brand{
  -webkit-text-stroke: .6px var(--c-gold);
  text-stroke: .6px var(--c-gold);
}
.brand-black{ color:#000; }
.brand-red{ color:#9d0b0b; }

.thread-divider{
  width:120px;
  height:14px;
  margin:1.1em auto;
  display:block;
}
.thread-divider path{
  fill:none;
  stroke:var(--c-thread);
  stroke-width:1.4;
  stroke-linecap:round;
}

/* focus visibile per accessibilità */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--c-gold);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   HEADER / NAV — parte fissa
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:linear-gradient(120deg, rgba(244,238,251,.92), rgba(255,255,255,.92));
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(184,135,63,.25);
}
.header-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.logo-link{ display:flex; align-items:center; gap:12px; }
.logo-link img{ height:46px; width:auto; }
.logo-link .logo-word{
  font-family:var(--f-display);
  font-style:italic;
  font-size:1.15rem;
  color:var(--c-text);
  letter-spacing:.02em;
  display:none;
}

.main-nav ul{
  list-style:none; display:flex; gap:28px; margin:0; padding:0;
}
.main-nav a{
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--c-text-dim);
  position:relative;
  padding:6px 0;
  transition:color .25s;
}
.main-nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background:var(--c-gold);
  transition:width .3s;
}
.main-nav a:hover,
.main-nav a.active{ color:var(--c-gold-soft); }
.main-nav a:hover::after,
.main-nav a.active::after{ width:100%; }

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--c-gold);
  border-radius:8px;
  width:42px; height:38px;
  align-items:center; justify-content:center;
  color:var(--c-gold-soft);
}
.nav-toggle svg{ width:20px; height:20px; }

@media (max-width: 780px){
  .logo-link img{ height:38px; }
  .main-nav{
    position:fixed; inset:64px 0 0 0;
    background:linear-gradient(165deg, var(--c-panel-1) 0%, var(--c-panel-2) 100%);
    transform:translateY(-8px);
    opacity:0; pointer-events:none;
    transition:opacity .25s, transform .25s;
    padding:30px 24px;
    border-top:1px solid rgba(184,135,63,.25);
  }
  .main-nav.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .main-nav ul{ flex-direction:column; gap:22px; }
  .main-nav a{ font-size:1rem; color:var(--c-text); }
  .nav-toggle{ display:flex; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  border-top:1px solid rgba(184,135,63,.22);
  padding:34px 24px 44px;
  text-align:center;
  color:var(--c-text-mute);
  font-size:.78rem;
  letter-spacing:.03em;
  background:var(--c-bg-soft);
}
.site-footer .foot-word{
  font-family:var(--f-display);
  font-style:italic;
  color:var(--c-gold-soft);
  font-size:1rem;
  margin-bottom:6px;
}

/* =========================================================
   HERO (home)
   ========================================================= */
.hero{
  max-width:760px;
  margin:0 auto;
  padding:76px 24px 40px;
  text-align:center;
  background:var(--c-bg);
}
.hero h1{
  font-size:clamp(2.4rem, 6vw, 3.6rem);
  font-style:italic;
  color:var(--c-text);
}
.hero p.lead{
  font-size:1.02rem;
  color:var(--c-text-dim);
  max-width:480px;
  margin:0 auto;
}

/* =========================================================
   HOME — Scegli la tua Lettura
   ========================================================= */
.choose-section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:20px 24px 100px;
}
.choose-heading{ text-align:center; margin-bottom:46px; }
.choose-heading h2{
  font-size:clamp(1.8rem,4vw,2.4rem);
  font-style:italic;
}

.reading-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:34px;
  position:relative;
}
@media (max-width: 860px){
  .reading-grid{ grid-template-columns:1fr; gap:30px; }
}

.reading-card{
  display:flex;
  gap:22px;
  align-items:flex-start;
  background:linear-gradient(160deg, var(--c-panel-1) 0%, var(--c-panel-2) 100%);
  border:1px solid rgba(184,135,63,.35);
  border-radius:20px;
  padding:26px;
  box-shadow:0 14px 30px -18px var(--shadow-soft);
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
}
.reading-card:hover{
  transform:translateY(-4px);
  border-color:var(--c-gold);
  background:linear-gradient(160deg, var(--c-panel-2) 0%, var(--c-panel-3) 100%);
  box-shadow:0 20px 40px -18px var(--shadow-hover);
}
.reading-card .card-thumb{
  flex:0 0 auto;
  width:96px;
  border-radius:10px;
  border:var(--card-border) solid var(--c-gold);
  overflow:hidden;
  background:#fff;
}
.reading-card .card-thumb img{ width:100%; height:auto; display:block; }
.reading-card .card-thumb.placeholder{
  aspect-ratio:2/3.4;
  display:flex; align-items:center; justify-content:center;
  color:var(--c-gold-soft);
  font-size:.65rem; text-align:center; padding:8px;
  letter-spacing:.04em;
  background:linear-gradient(160deg, var(--c-panel-2), var(--c-panel-3));
}

.reading-card .rc-body h3{
  font-size:1.32rem;
  font-style:italic;
  color:var(--c-text);
}
.reading-card .rc-body p{
  margin:0 0 8px;
  font-size:.9rem;
  color:var(--c-text-dim);
}
.reading-card .rc-body p.rc-tagline{
  color:var(--c-gold-soft);
  font-family:var(--f-display);
  font-style:italic;
  font-size:1rem;
}
.reading-card .rc-cta{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-gold-soft);
}
.reading-card .rc-cta svg{ width:14px; height:14px; transition:transform .3s; }
.reading-card:hover .rc-cta svg{ transform:translateX(4px); }

@media (max-width:520px){
  .reading-card{ flex-direction:column; }
  .reading-card .card-thumb{ width:120px; }
}

/* =========================================================
   READING PAGE — header di percorso
   ========================================================= */
.reading-hero{
  max-width:700px; margin:0 auto; text-align:center;
  padding:56px 24px 10px;
}
.reading-hero .eyebrow{ display:block; margin-bottom:10px; }
.reading-hero h1{ font-style:italic; font-size:clamp(2rem,5vw,2.7rem); }
.reading-hero p{ color:var(--c-text-dim); max-width:480px; margin:0 auto; }
.reading-hero .reading-description{
  max-width:600px;
  margin:0 auto;
  text-align:center;
  font-size:.98rem;
  line-height:1.75;
}
.reading-hero .reading-description p{
  max-width:none;
  margin:0 0 1em;
  text-align:center;
}
.reading-hero .reading-description p:last-child{ margin-bottom:0; }
.reading-hero .reading-description .description-quote{
  font-family:var(--f-display);
  font-style:italic;
  font-size:1.2rem;
  color:var(--c-text);
  margin-bottom:1.2em;
}
.reading-hero .reading-description .description-quote cite{
  display:block;
  font-style:italic;
  font-size:.82rem;
  color:var(--c-gold-soft);
  margin-top:6px;
}
.reading-hero .reading-description .description-quote cite::before{ content:"— "; }

.choose-prompt{
  max-width:560px;
  margin:0 auto;
  padding:0 24px;
  text-align:center;
  font-family:var(--f-display);
  font-style:italic;
  font-size:1.15rem;
  color:var(--c-text);
}

.step-track{
  display:flex; justify-content:center; gap:8px;
  margin:26px auto 0;
}
.step-track span{
  width:7px; height:7px; border-radius:50%;
  background:var(--c-panel-3);
  transition:background .3s, transform .3s;
}
.step-track span.active{ background:var(--c-gold); transform:scale(1.3); }

.step{ display:none; }
.step.active{ display:block; }

/* =========================================================
   STEP 1 — Scelta della domanda
   ========================================================= */
.question-list{
  max-width:620px; margin:36px auto 100px;
  padding:0 24px;
  display:flex; flex-direction:column; gap:14px;
}
.question-btn{
  background:linear-gradient(160deg, var(--c-panel-1) 0%, var(--c-panel-2) 100%);
  border:1px solid rgba(184,135,63,.32);
  border-radius:14px;
  padding:20px 24px;
  text-align:left;
  color:var(--c-text);
  font-family:var(--f-display);
  font-style:italic;
  font-size:1.12rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  box-shadow:0 10px 24px -18px var(--shadow-soft);
  transition:border-color .25s, background .25s, transform .25s, box-shadow .25s;
}
.question-btn span.arrow{
  font-family:var(--f-body); font-style:normal;
  color:var(--c-gold);
  font-size:1rem;
  transition:transform .3s;
}
.question-btn:hover{
  border-color:var(--c-gold);
  background:linear-gradient(160deg, var(--c-panel-2) 0%, var(--c-panel-3) 100%);
  transform:translateX(4px);
  box-shadow:0 14px 28px -16px var(--shadow-hover);
}
.question-btn:hover span.arrow{ transform:translateX(6px); }

/* --- variante "stesa": titolo + descrizione su due righe --- */
.question-btn.has-desc{
  align-items:flex-start;
  gap:18px;
  padding:24px 26px;
}
.question-btn.has-desc .qb-text{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.question-btn.has-desc .qb-title{
  font-family:var(--f-display);
  font-style:italic;
  font-size:1.18rem;
  color:var(--c-text);
}
.question-btn.has-desc .qb-desc{
  font-family:var(--f-body);
  font-style:normal;
  font-size:.86rem;
  line-height:1.6;
  color:var(--c-text-dim);
}
.question-btn.has-desc .arrow{ margin-top:4px; flex:0 0 auto; }

/* --- variante "stesa unica": nessun box, solo un invito ad iniziare --- */
.question-list.single-spread{
  align-items:center;
  text-align:center;
  padding-top:10px;
}
.start-spread-btn{ align-self:center; }

/* --- variante "scelta del genere": due carte, Lui / Lei --- */
.question-list.gender-select{
  align-items:center;
  text-align:center;
  padding-top:6px;
}
.gender-prompt{
  font-family:var(--f-display);
  font-style:italic;
  font-size:1.3rem;
  color:var(--c-text);
  margin:0 0 30px;
}
.gender-row{
  display:flex;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
  width:100%;
}
.gender-card{
  background:linear-gradient(160deg, var(--c-panel-1) 0%, var(--c-panel-2) 100%);
  border:1px solid rgba(184,135,63,.32);
  border-radius:18px;
  padding:18px 18px 22px;
  width:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  box-shadow:0 10px 24px -18px var(--shadow-soft);
  transition:border-color .25s, background .25s, transform .25s, box-shadow .25s;
}
.gender-card:hover{
  border-color:var(--c-gold);
  background:linear-gradient(160deg, var(--c-panel-2) 0%, var(--c-panel-3) 100%);
  transform:translateY(-4px);
  box-shadow:0 14px 28px -16px var(--shadow-hover);
}
.gender-thumb{
  display:block;
  width:100%;
  aspect-ratio:168/288;
  border:var(--card-border) solid var(--c-gold);
  border-radius:var(--card-radius);
  overflow:hidden;
  box-shadow:0 14px 26px -16px var(--shadow-hover);
}
.gender-thumb img{ width:100%; height:100%; object-fit:cover; }
.gender-label{
  font-family:var(--f-display);
  font-style:italic;
  font-size:1.2rem;
  color:var(--c-text);
}

@media (max-width:480px){
  .gender-card{ width:150px; }
}

/* =========================================================
   STEP 2 — Mescola
   ========================================================= */
.shuffle-stage{
  max-width:520px; margin:30px auto 90px;
  padding:0 24px;
  text-align:center;
}
.shuffle-instruction{
  font-family:var(--f-display);
  font-style:italic;
  font-size:1.3rem;
  color:var(--c-text);
  max-width:420px;
  margin:0 auto 40px;
}

.deck-wrap{
  position:relative;
  width:var(--card-w);
  height:var(--card-h);
  margin:0 auto 44px;
}
.deck-wrap .deck-card{
  position:absolute; inset:0;
  border:var(--card-border) solid var(--c-gold);
  border-radius:var(--card-radius);
  overflow:hidden;
  background:linear-gradient(160deg, var(--c-panel-1), var(--c-panel-2));
  box-shadow:0 20px 40px -20px var(--shadow-hover);
  transition:transform .5s cubic-bezier(.22,.9,.32,1);
}
.deck-wrap .deck-card img{ width:100%; height:100%; object-fit:cover; }

.deck-wrap.shuffling .deck-card:nth-child(1){ animation:shuffleA 1.6s ease-in-out; }
.deck-wrap.shuffling .deck-card:nth-child(2){ animation:shuffleB 1.6s ease-in-out; }
.deck-wrap.shuffling .deck-card:nth-child(3){ animation:shuffleC 1.6s ease-in-out; }

@keyframes shuffleA{
  0%{ transform:translate(0,0) rotate(0); }
  25%{ transform:translate(-46px,-14px) rotate(-14deg); }
  50%{ transform:translate(0,-4px) rotate(0deg); }
  75%{ transform:translate(40px,-16px) rotate(11deg); }
  100%{ transform:translate(0,0) rotate(0); }
}
@keyframes shuffleB{
  0%{ transform:translate(0,0) rotate(0); }
  25%{ transform:translate(38px,10px) rotate(9deg); }
  50%{ transform:translate(-6px,2px) rotate(-3deg); }
  75%{ transform:translate(-44px,8px) rotate(-10deg); }
  100%{ transform:translate(0,0) rotate(0); }
}
@keyframes shuffleC{
  0%{ transform:translate(0,0) rotate(0); }
  30%{ transform:translate(8px,-24px) rotate(4deg); }
  60%{ transform:translate(-18px,-8px) rotate(-6deg); }
  100%{ transform:translate(0,0) rotate(0); }
}

.btn-gold{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(180deg, var(--c-gold-lite), var(--c-gold-soft));
  color:#fffaf2;
  border:none;
  border-radius:999px;
  padding:15px 38px;
  font-size:.82rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  box-shadow:0 14px 30px -12px rgba(184,135,63,.45);
  transition:transform .25s, box-shadow .25s, opacity .25s;
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(184,135,63,.6); }
.btn-gold:disabled{ opacity:.5; pointer-events:none; }

/* =========================================================
   STEP 3 — Risultato
   ========================================================= */
.result-stage{
  max-width:var(--maxw); margin:0 auto 40px;
  padding:26px 24px;
}
.cards-row{
  display:flex; flex-wrap:wrap;
  justify-content:center;
  gap:40px;
  margin-bottom:20px;
}

.tarot-card{
  width:var(--card-w);
  perspective:1400px;
}
.tarot-card .position-label{
  text-align:center;
  font-family:var(--f-display);
  font-style:italic;
  font-size:1rem;
  color:var(--c-gold-soft);
  margin:0 0 10px;
  min-height:2.6em;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.tarot-card .card-position-note{
  text-align:center;
  font-family:var(--f-body);
  font-style:italic;
  font-size:.8rem;
  color:var(--c-text-mute);
  margin:6px 0 0;
  line-height:1.5;
}
.tarot-card .flip-inner{
  position:relative;
  width:100%; height:var(--card-h);
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.22,.9,.32,1);
}
.tarot-card.flipped .flip-inner{ transform:rotateY(180deg); }

.card-face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  border:var(--card-border) solid var(--c-gold);
  border-radius:var(--card-radius);
  overflow:hidden;
  background:linear-gradient(160deg, var(--c-panel-1), var(--c-panel-2));
  box-shadow:0 16px 32px -20px var(--shadow-soft);
  cursor:pointer;
}
.card-face img{ width:100%; height:100%; object-fit:cover; }
.card-back{ z-index:2; }
.card-front{ transform:rotateY(180deg); }

.tarot-card .card-hint{
  text-align:center;
  margin-top:10px;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-gold-soft);
}
.tarot-card.flipped .card-hint{ opacity:0; }

.card-name{
  text-align:center;
  font-family:var(--f-display);
  font-style:italic;
  font-size:1.1rem;
  margin-top:12px;
  color:var(--c-text);
  min-height:0;
}

/* --- fisarmonica: altezza variabile, senza spazio fisso --- */
.accordion{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .5s ease;
  margin-top:8px;
}
.tarot-card.flipped .accordion{ grid-template-rows:1fr; }
.accordion-inner{ overflow:hidden; }
.accordion-inner p{
  font-size:.8rem;
  color:var(--c-text-dim);
  padding-top:6px;
  line-height:1.65;
}

@media (max-width:560px){
  .cards-row{ gap:26px; }
}

/* interpretazione globale */
.overview-box{
  max-width:760px;
  margin:60px auto 100px;
  background:linear-gradient(160deg, var(--c-panel-1) 0%, var(--c-panel-2) 100%);
  border:1px solid rgba(184,135,63,.35);
  border-radius:20px;
  padding:38px 34px;
  text-align:center;
  box-shadow:0 18px 40px -22px var(--shadow-soft);
}
.overview-box h3{
  font-style:italic;
  font-size:1.5rem;
  color:var(--c-gold-soft);
  margin-bottom:18px;
}
.overview-box .overview-text{ max-width:560px; margin:0 auto; }
.overview-box p{
  color:var(--c-text-dim);
  font-size:.98rem;
  margin:0 auto;
}
.overview-box p + p{ margin-top:16px; }
.overview-box.locked p{ color:var(--c-text-mute); font-style:italic; }

/* =========================================================
   RESPONSIVE — dimensionamento carte
   ========================================================= */
:root{
  --card-w: 168px;
  --card-h: 288px;
}
@media (max-width: 900px){
  :root{ --card-w:150px; --card-h:258px; --card-radius:12px; }
}
@media (max-width: 560px){
  :root{ --card-w:128px; --card-h:220px; --card-radius:10px; --card-border:2px; }
  .deck-wrap{ margin-bottom:34px; }
}
@media (max-width: 380px){
  :root{ --card-w:112px; --card-h:192px; }
}