/* Chi siamo — "Metà designer. Metà Clic." */
.cs-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.cs-head .logo { color: var(--bosco); }
.cs-head nav { display: none; gap: 6px; font-size: 14px; }
.cs-head nav a { padding: 8px 12px; border-radius: 99px; color: var(--grigio-scuro); transition: background-color .25s; }
.cs-head nav a:hover, .cs-head nav a[aria-current] { background: rgba(14,19,17,.06); color: var(--nero); }
@media (min-width: 800px) { .cs-head nav { display: flex; } }

/* hero */
.cs-hero { display: grid; gap: 48px; padding-block: 32px 80px; align-items: center; }
@media (min-width: 960px) { .cs-hero { grid-template-columns: 1fr 1fr; gap: 64px; padding-block: 56px 120px; } }
.cs-title { font-size: clamp(52px, 9vw, 116px); line-height: .94; letter-spacing: -.055em; font-weight: 600; margin-top: 18px; }
.cs-title .soft { color: var(--bosco); }
.cs-title .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.js .cs-title .ln > span { display: inline-block; transform: translateY(105%); animation: cs-up 1.1s var(--ease-out) forwards; }
.js .cs-title .ln:nth-child(2) > span { animation-delay: .12s; }
@keyframes cs-up { to { transform: none; } }
.cs-lead { font-size: 19px; line-height: 1.45; color: var(--grigio-scuro); max-width: 34ch; margin-top: 22px; }
.cs-lead b { color: var(--nero); font-weight: 600; }

.half-wrap { position: relative; width: min(100%, 520px); justify-self: center; aspect-ratio: 1; }
.half { position: absolute; inset: 7%; border-radius: 999px; overflow: hidden; isolation: isolate; cursor: none; box-shadow: 0 40px 80px -40px rgba(14,19,17,.5); transform: rotate(var(--hr, 0deg)); transition: transform .8s var(--ease-out); }
@media (hover: none) { .half { cursor: pointer; } }
.half .leo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); transition: transform 1.2s var(--ease-out), filter .6s; }
.clic-half { position: absolute; top: 0; bottom: 0; left: 50%; right: 0; background: var(--bosco); display: grid; place-items: center; overflow: hidden; transition: background-color .6s; }
.clic-half::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 40%), rgba(155,227,180,.35), transparent 55%); }
.big-clic { position: relative; width: 62%; margin-left: -14%; overflow: visible; filter: drop-shadow(0 16px 20px rgba(0,0,0,.35)); }
.bc-body { transform-box: fill-box; transform-origin: 50% 100%; animation: bc-breathe 3.4s ease-in-out infinite; }
@keyframes bc-breathe { 50% { transform: scale(1.03, .97); } }
.bc-eyes { transform-box: fill-box; transform-origin: center; transition: transform .12s; }
.big-clic.blink .bc-eyes { transform: scaleY(.1); }
.bc-pupils { transition: transform .3s var(--ease-out); }
.bc-cheek { opacity: .25; transition: opacity .4s; }
.half.on-r .bc-cheek { opacity: .95; }
.big-clic .ring { transform-box: fill-box; transform-origin: center; opacity: 0; }
.big-clic.click .ring { animation: clic-ring .5s var(--ease-out); }
.big-clic.click .bc-body { animation: clic-squash .5s var(--ease-out); }
/* metà evidenziata al passaggio */
.half.on-l .leo { transform: scale(1.06); filter: grayscale(0) contrast(1.02); }
.half.on-l .clic-half { background: #173A31; }
.half.on-r .clic-half { background: #2E6655; }
.half.on-r .leo { filter: grayscale(1) brightness(.85); }
.half-tag { position: absolute; bottom: 18%; z-index: 3; display: grid; padding: 8px 14px; border-radius: 16px; font-size: 15px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .5s var(--ease-out); }
.half-tag small { font-size: 11px; font-weight: 500; opacity: .75; }
.half-tag.l { left: 12%; background: #fff; color: var(--nero); }
.half-tag.r { right: 12%; background: var(--nero); color: #fff; text-align: right; }
.half.on-l .half-tag.l, .half.on-r .half-tag.r { opacity: 1; transform: none; }
.ring-text { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 36s linear infinite; pointer-events: none; }
.ring-text text { font-size: 4.3px; font-weight: 600; letter-spacing: 1.2px; fill: var(--grigio-scuro); }
.js .half-wrap { opacity: 0; transform: scale(.9) rotate(-8deg); animation: half-in 1.4s var(--ease-out) .25s forwards; }
@keyframes half-in { to { opacity: 1; transform: none; } }

/* mazzo di carte */
.cs-deck-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .cs-deck-grid { grid-template-columns: 1fr 1fr; gap: 72px; } }
.deck-ctrl { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.deck-count { font-size: 14px; color: var(--grigio-testo); font-variant-numeric: tabular-nums; }
.deck { position: relative; height: 420px; width: min(100%, 440px); justify-self: center; cursor: grab; touch-action: pan-y; }
.card {
  position: absolute; inset: 0; border-radius: 30px; padding: 30px; display: flex; flex-direction: column; gap: 14px;
  background: #fff; border: 1px solid var(--linea); box-shadow: 0 30px 50px -30px rgba(14,19,17,.35);
  transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0deg)) scale(var(--sc, 1)); transition: transform .7s var(--ease-out), opacity .5s;
  user-select: none;
}
.card .k { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio-testo); }
.card h3 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; margin-top: auto; }
.card p { font-size: 16px; color: var(--grigio-scuro); }
.card::after { content: attr(data-n); position: absolute; right: 22px; top: 12px; font-size: 90px; font-weight: 700; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.2px var(--linea); }
.card.c1 { background: var(--bosco); color: #fff; border: 0; } .card.c1 p, .card.c1 .k { color: rgba(255,255,255,.72); }
.card.c3 { background: var(--nero); color: #fff; border: 0; } .card.c3 p, .card.c3 .k { color: rgba(255,255,255,.68); }
.card.c5 { background: #DCE6DD; }
.card.c1::after, .card.c3::after { -webkit-text-stroke-color: rgba(255,255,255,.2); }
.card.gone { transform: translate(var(--gx, 140%), -10%) rotate(var(--gr, 24deg)); opacity: 0; transition: transform .7s var(--ease-out), opacity .45s; }
.card.dragging { transition: none; }

/* cose che non facciamo */
.nope { margin-top: 40px; display: grid; gap: 4px; }
.nope li { font-size: clamp(26px, 4.4vw, 56px); font-weight: 600; letter-spacing: -.045em; line-height: 1.15; }
.nope li span { color: var(--nero); background: linear-gradient(#D52B1E, #D52B1E) no-repeat 0 58% / 0% .085em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .8s var(--ease-out), color .6s; }
.nope li.struck span { background-size: 100% .085em; color: #B9BDB6; }
.hint-touch { display: none; }
@media (hover: none) { .hint-fine { display: none; } .hint-touch { display: inline; } }
.nope-after { margin-top: 36px; font-size: 20px; line-height: 1.4; max-width: 40ch; color: var(--grigio-scuro); }
.nope-after b { color: var(--bosco); }

/* quiz */
.quiz { position: relative; overflow: hidden; border-radius: var(--r-l); background: var(--nero); color: #fff; padding: 36px 24px; min-height: 360px; display: grid; align-content: center; }
@media (min-width: 768px) { .quiz { padding: 64px; } }
.quiz::before { content: ""; position: absolute; width: 480px; height: 480px; right: -140px; top: -160px; border-radius: 999px; background: radial-gradient(circle, rgba(46,102,85,.7), transparent 65%); }
.quiz > * { position: relative; }
.quiz h2 { font-size: clamp(36px, 6vw, 72px); font-weight: 600; letter-spacing: -.05em; line-height: 1; margin-top: 16px; }
.quiz .qq { font-size: 22px; margin-top: 28px; color: rgba(255,255,255,.85); }
.qa { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.qa button { padding: 14px 20px; border-radius: 99px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color .25s, color .25s, transform .3s var(--ease-out); }
.qa button:hover { background: #fff; color: var(--nero); transform: translateY(-2px); }
.quiz-q, .quiz-res { animation: q-in .6s var(--ease-out); }
@keyframes q-in { from { opacity: 0; transform: translateY(16px); } }
.res-name { color: #9BE3B4; }
.res-why { font-size: 18px; color: rgba(255,255,255,.75); margin-top: 14px; max-width: 46ch; }
.quiz-again { background: none !important; border: 0 !important; text-decoration: underline; color: rgba(255,255,255,.6) !important; }

/* fine */
.end-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.cs-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-block: 32px 48px; font-size: 13px; color: var(--grigio-testo); border-top: 1px solid var(--linea); }
.cs-foot nav { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.cs-foot nav a { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .js .half-wrap, .js .cs-title .ln > span { opacity: 1; transform: none; animation: none; }
  .bc-body, .ring-text { animation: none; }
  .nope li::after { transition: none; }
}
@media (max-width: 599px) { .cs-head > .btn { display: none; } }