/* Home (upgrade): stessa identità della home su "/" (monete 1 + 2 = 3, illustrazioni, sfondo con l'onda, intro del
   marchio), con la tipografia, i pulsanti e il movimento della pagina API (api-omi.css). */

body.home { background: #F2F5FC; }
.riga { display: block; overflow: hidden; padding-bottom: .08em; }
.riga > span { display: inline-block; }

/* ---------- Intro: maschera bianca e scritta del marchio (solo alla prima visita della sessione) ---------- */
#intro-maschera, #intro-scritta { display: none; }
.intro-attesa #intro-maschera { display: block; position: fixed; inset: 0; z-index: 2000; background: #fff; }
.intro-attesa #intro-scritta { display: block; position: fixed; left: 0; top: 0; z-index: 2001; opacity: 0; transform-origin: 0 0;
  font: 800 clamp(38px, 6vw, 78px) / 1 var(--display); letter-spacing: -.02em; color: var(--navy); white-space: nowrap; will-change: transform, clip-path; }
/* stessa interlettera del logo (.marchio): scalata, la scritta coincide col logo e lo scambio finale non si vede */
.intro-attesa #logo-testo { opacity: 0; }
.intro-attesa body { overflow: hidden; }
/* lo spazio della barra di scorrimento è sempre riservato: quando l'intro finisce e la barra ricompare la pagina non si
   restringe e il logo non si sposta di lato */
html { scrollbar-gutter: stable; }

/* ---------- Hero: titolo, motto e l'equazione di monete ---------- */
.hero-monete { position: relative; overflow: hidden; text-align: center; padding: 40px 0 80px; min-height: calc(100svh - 72px);
  display: flex; align-items: center; background: url(/static/img/sfondo.webp) no-repeat center / cover; }
.hero-monete::before { content: ""; position: absolute; width: 70vmax; height: 70vmax; left: 50%; top: 58%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(65,84,241,.10), transparent 62%); pointer-events: none; }
.hero-monete .wrap { position: relative; width: 100%; }
.hero-monete h1 { font-size: clamp(36px, 4.6vw, 66px); line-height: 1.02; letter-spacing: -.045em; font-weight: 800; }
.motto { font-size: clamp(17px, 1.6vw, 21px); color: var(--muted); margin: 18px auto 0; max-width: 640px; }
.equazione { display: flex; justify-content: center; align-items: center; gap: clamp(8px, 2.4vw, 34px); margin: clamp(30px, 5vh, 56px) auto 0; }
.moneta { width: clamp(96px, 21vw, 290px); aspect-ratio: 1; perspective: 900px; position: relative; flex: none; }
.moneta-faccia { display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.moneta img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 26px 26px rgba(18,52,86,.22)); }
/* riflesso di luce che passa sulla moneta da 3 €: la maschera è la moneta stessa */
.riflesso { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 130% 0;
  -webkit-mask: url(/static/img/3euroindex.webp) center / contain no-repeat; mask: url(/static/img/3euroindex.webp) center / contain no-repeat; }
.segno { font: 800 clamp(44px, 8vw, 116px) var(--display); color: var(--navy); line-height: 1; flex: none; }
.segno-simbolo { display: inline-block; }
/* fluttuano piano, come nella home attuale; ognuna con il suo ritmo */
.galleggia .moneta img { animation: galleggia 5s ease-in-out infinite; }
.galleggia .moneta[data-moneta="2"] img { animation-duration: 5.6s; animation-delay: -1.4s; }
.galleggia .moneta[data-moneta="3"] img { animation-duration: 6.2s; animation-delay: -2.8s; }
@keyframes galleggia { 50% { transform: translateY(-14px); } }
.scorri { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-top: clamp(24px, 4vh, 44px); border-radius: 50%; color: var(--navy); font-size: 34px;
  background: rgba(255,255,255,.7); border: 1px solid var(--line); transition: background-color .3s ease, color .3s ease; animation: rimbalza 2.4s ease-in-out infinite; }
.scorri:hover { background: var(--navy); color: #fff; }
@keyframes rimbalza { 50% { transform: translateY(8px); } }

/* ---------- Sezioni e card con le illustrazioni ---------- */
.sezione-carte { padding: 96px 0 24px; }
.sezione-carte + .sezione-carte { padding-top: 72px; }
.titolo-sezione { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -.04em; font-weight: 800; margin-bottom: 28px; }
.testa-sezione { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.testa-sezione .titolo-sezione { margin-bottom: 14px; }
.aggiornamento { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; font: 700 14px var(--display); color: var(--ok); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.punto-vivo { width: 8px; height: 8px; border-radius: 50%; background: #2bb673; box-shadow: 0 0 0 0 rgba(43,182,115,.5); animation: vivo 2s ease-out infinite; }
@keyframes vivo { 70% { box-shadow: 0 0 0 9px rgba(43,182,115,0); } 100% { box-shadow: 0 0 0 0 rgba(43,182,115,0); } }
.introduzione { font-size: 18px; color: var(--muted); max-width: 820px; margin: 0 0 34px; }
.introduzione strong { color: var(--navy); }

/* Card a un solo livello: superficie bianca e filo di bordo, l'illustrazione grande e centrata appoggiata direttamente
   (ha già lo sfondo bianco), niente riquadri annidati né ombre sfocate. Il sollevamento al passaggio usa "translate",
   così non si scontra con il "transform" delle animazioni di ingresso. */
.carte { display: grid; gap: 20px; }
.carte-evidenza { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.carte-tutte { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.carta { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(18,52,86,.08); border-radius: 26px; padding: 18px 18px 22px;
  color: var(--navy); min-width: 0; transition: border-color .35s ease, translate .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s cubic-bezier(.2,.8,.2,1); }
.carta:hover { color: var(--navy); border-color: rgba(65,84,241,.3); translate: 0 -5px; box-shadow: 0 22px 44px -30px rgba(18,52,86,.4); }
.carta-figura { display: grid; place-items: center; aspect-ratio: 16 / 10; margin-bottom: 6px; }
/* brightness porta a bianco puro lo sfondo 253-254 delle illustrazioni */
.carta-figura img { width: 82%; height: 92%; object-fit: contain; mix-blend-mode: multiply; filter: brightness(1.02); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.carta:hover .carta-figura img { transform: scale(1.06); }
.carte-tutte .carta-figura { aspect-ratio: 4 / 3; }
.carta-corpo { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 0 8px; }
.carta-titolo { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.carta-grande .carta-titolo { font-size: clamp(21px, 1.9vw, 25px); }
.carta-testo { font-size: 15px; color: var(--muted); line-height: 1.5; }
.carta-apri { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 4px; font: 700 15px var(--display); color: var(--accent); }
.carta-apri .bx { font-size: 20px; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.carta:hover .carta-apri .bx { transform: translateX(4px); }

/* ---------- Blog ---------- */
.blog { padding-bottom: 110px; }
.articoli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.articolo { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: center; background: #fff; border: 1px solid rgba(18,52,86,.08);
  border-radius: 26px; padding: 14px; color: var(--navy); transition: border-color .35s ease, translate .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s cubic-bezier(.2,.8,.2,1); }
.articolo:hover { color: var(--navy); border-color: rgba(65,84,241,.3); translate: 0 -5px; box-shadow: 0 22px 44px -30px rgba(18,52,86,.4); }
.articolo-copertina { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #0e3053; }
.articolo-copertina img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.articolo:hover .articolo-copertina img { transform: scale(1.04); }
.articolo-testo { font-size: clamp(18px, 1.6vw, 21px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; padding-right: 10px; }
.articolo-testo .bx { display: inline-block; vertical-align: middle; color: var(--accent); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.articolo:hover .articolo-testo .bx { transform: translateX(4px); }

/* ---------- Piè di pagina ---------- */
.piede-home { background: rgba(18,52,86,.04); border-top: 1px solid var(--line); padding: 56px 0 64px; color: var(--muted); font-size: 15px; }
.piede-home .wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.piede-marchio p { margin: 0 0 8px; }
.moneta-piede { width: 96px; height: 96px; object-fit: contain; margin-bottom: 14px; filter: drop-shadow(0 14px 16px rgba(18,52,86,.2)); transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.moneta-piede:hover { transform: rotate(360deg); }
.copyright a { color: var(--accent); }
.piede-colonna h3 { font-size: 15px; color: var(--navy); margin-bottom: 12px; }
.piede-colonna a { display: block; color: var(--muted); padding: 3px 0; }
.piede-colonna a:hover { color: var(--accent); }

.torna-su { position: fixed; right: 18px; bottom: 18px; z-index: 800; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 24px;
  background: var(--navy); color: #fff; box-shadow: 0 14px 30px -12px rgba(18,52,86,.7); opacity: 0; transform: translateY(16px) scale(.8); pointer-events: none;
  transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1), background-color .3s ease; }
.torna-su.visibile { opacity: 1; transform: none; pointer-events: auto; }
.torna-su:hover { background: var(--accent); color: #fff; }

/* ---------- Stati iniziali delle animazioni (solo con JS e movimento consentito) ---------- */
/* la hero parte nascosta solo alla prima visita della sessione (.gia-visto = si torna dal sito: è già composta) */
.anima:not(.gia-visto) .home .riga > span { transform: translateY(105%); }
.anima:not(.gia-visto) .home .entra, .anima:not(.gia-visto) .moneta-faccia, .anima:not(.gia-visto) .segno-simbolo,
.anima:not(.gia-visto) .scorri { opacity: 0; }
.anima .carta, .anima .articolo, .anima .titolo-sezione, .anima .testa-sezione .aggiornamento, .anima .introduzione { opacity: 0; }

@media (max-width: 1100px) { .carte-tutte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .carte-evidenza, .carte-tutte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .articoli { grid-template-columns: minmax(0, 1fr); }
  .piede-home .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .piede-marchio { grid-column: 1 / -1; }
}

/* ---------- Telefono: layout pensato per il pollice, non la versione desktop rimpicciolita. Niente scorrimento
   orizzontale: tutto in colonna o in griglia. ---------- */
@media (max-width: 600px) {
  .hero-monete { min-height: calc(100svh - 62px); padding: 24px 0 20px; }
  .hero-monete h1 { font-size: 38px; line-height: 1.04; }
  .motto { font-size: 16px; margin-top: 12px; padding: 0 8px; }
  /* l'equazione si ricompone in verticale: 1 € + 2 € sopra, poi "=", e il 3 € grande come risultato */
  .equazione { display: grid; grid-template-columns: auto auto auto; grid-template-areas: "uno piu due" "uguale uguale uguale" "tre tre tre";
    justify-content: center; align-items: center; column-gap: 6px; margin-top: 26px; }
  .equazione > :nth-child(1) { grid-area: uno; }
  .equazione > :nth-child(2) { grid-area: piu; }
  .equazione > :nth-child(3) { grid-area: due; }
  .equazione > :nth-child(4) { grid-area: uguale; justify-self: center; margin: 6px 0 -2px; }
  .equazione > :nth-child(5) { grid-area: tre; justify-self: center; }
  .moneta { width: 30vw; max-width: 150px; }
  .moneta-tre { width: 54vw; max-width: 260px; }
  .segno { font-size: 40px; }
  .scorri { display: none; }

  .sezione-carte { padding-top: 56px; }
  .sezione-carte + .sezione-carte { padding-top: 48px; }
  .titolo-sezione { font-size: 30px; margin-bottom: 18px; }
  .testa-sezione { display: block; }
  .testa-sezione .titolo-sezione { margin-bottom: 12px; }
  .aggiornamento { font-size: 13px; margin-bottom: 14px; }
  .introduzione { font-size: 16px; margin-bottom: 22px; }

  .carte { gap: 14px; }
  .carte-evidenza { grid-template-columns: minmax(0, 1fr); }
  .carte-evidenza .carta { padding: 14px 14px 20px; border-radius: 24px; }
  .carte-evidenza .carta-figura { aspect-ratio: 2 / 1; }
  .carte-evidenza .carta-figura img { width: 70%; }
  .carta:hover { translate: none; box-shadow: none; border-color: rgba(18,52,86,.08); }

  /* tutti gli strumenti: una tessera per riga, illustrazione a sinistra, nome e descrizione a destra */
  .carte-tutte { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .carte-tutte .carta { flex-direction: row; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 24px; border-color: transparent;
    box-shadow: 0 1px 2px rgba(18,52,86,.05), 0 10px 26px -16px rgba(18,52,86,.22); transition: scale .2s ease; }
  .carte-tutte .carta:active { scale: .98; }
  .carte-tutte .carta-figura { width: 84px; aspect-ratio: 1; margin: 0; flex: none; }
  .carte-tutte .carta-figura img { width: 100%; height: 100%; }
  .carte-tutte .carta-corpo { padding: 0; gap: 4px; justify-content: center; }
  .carte-tutte .carta-titolo { font-size: 15.5px; line-height: 1.2; }
  .carte-tutte .carta-testo { font-size: 13.5px; line-height: 1.4; }
  .carte-tutte .carta-apri { display: none; }

  /* blog: un articolo per card, copertina grande e centrata in alto, testo centrato sotto */
  .blog { padding-bottom: 72px; }
  .articoli { gap: 14px; }
  .articolo { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 16px; padding: 18px 18px 22px; border-radius: 24px; }
  .articolo:hover { translate: none; box-shadow: none; }
  .articolo-copertina { width: 72%; max-width: 280px; border-radius: 18px; }
  .articolo-testo { font-size: 18px; padding: 0 6px; }

  .piede-home { padding: 40px 0 48px; }
  .moneta-piede { width: 72px; height: 72px; }
  .torna-su { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .galleggia .moneta img, .scorri, .punto-vivo { animation: none; }
}

/* Passaggio tra le pagine: il marchio scivola tra la home e le altre pagine (stesse regole in sito.css) */
@view-transition { navigation: auto; }
.marchio { view-transition-name: marchio; }
::view-transition-group(marchio) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}