/* Chi siamo. Tokens, nav, buttons, cursor and footer come from ../style.css; iris from ../lavori/lavori.css.
   Every class here starts with cs- so nothing clashes with the portfolio styles. */

body.cs { background: #efe9df; }
/* the page opens on light colours: keep the nav dark from the first frame */
body.cs .nav { background: rgba(15, 17, 19, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
/* the viewfinder inverts so it reads on the light card colours and on the dark footer alike */
body.cs .vf { mix-blend-mode: difference; }

.cs-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }

/* ---------- the collection ---------- */
.cs-show { --top: 120px; height: 350vh; position: relative; color: var(--dark-ink); }
.cs-stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cs-bg { position: absolute; inset: 0; background: #86cdee; }

/* the giant name running behind the cards */
.cs-names { position: absolute; inset: 0; display: grid; align-items: center; pointer-events: none; }
.cs-nm { grid-area: 1 / 1; white-space: nowrap; font-size: clamp(120px, 26vw, 460px); font-weight: 800; line-height: .8; letter-spacing: -.04em; text-transform: uppercase; opacity: 0; will-change: transform, opacity; }
.cs-nm span { display: inline-block; padding-right: .25em; }

.cs-info { position: absolute; left: var(--gut); top: var(--top); bottom: 90px; width: min(40vw, 520px); display: grid; grid-template-rows: auto 1fr; z-index: 3; }
.cs-info h1 { margin: 14px 0 0; font-size: clamp(40px, 4.4vw, 74px); font-weight: 650; line-height: .9; letter-spacing: -.02em; text-transform: uppercase; }
.cs-who-wrap { position: relative; align-self: end; min-height: 240px; }
.cs-who { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; will-change: transform, opacity; }
.cs-who .k { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.cs-who h2 { margin: 10px 0 12px; font-size: clamp(44px, 5.2vw, 90px); font-weight: 700; line-height: .88; letter-spacing: -.03em; text-transform: uppercase; }
.cs-who .r { margin: 0; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; }
.cs-who .pos { margin: 4px 0 0; font-size: 16px; color: rgba(18, 20, 22, .72); }
.cs-who .lead { margin: 0 0 12px; font-size: clamp(22px, 2vw, 30px); font-weight: 500; line-height: 1.2; }
.cs-who p.t { margin: 0 0 10px; font-size: 16px; color: rgba(18, 20, 22, .72); max-width: 460px; }

.cs-stage { position: absolute; top: 0; bottom: 0; right: 0; width: 60%; perspective: 1500px; z-index: 2; }
.cs-card { position: absolute; left: 50%; top: 52%; transform-style: preserve-3d; will-change: transform; -webkit-tap-highlight-color: transparent; touch-action: pan-y; }
.cs-tilt, .cs-flipper { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.cs-face { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(18, 20, 22, .12); }
.cs-front { background: #fff; transform: translateZ(1px); }
.cs-front img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.cs-idx { position: absolute; display: grid; justify-items: center; line-height: .9; font-family: var(--mono); font-weight: 600; font-size: clamp(16px, 1.6vw, 24px); color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.cs-idx b { font-weight: 400; color: var(--dark-ink); margin-top: 3px; }
.cs-card.red .cs-idx b { color: #e0232e; }
.cs-idx.tl { top: 14px; left: 15px; }
.cs-idx.br { bottom: 14px; right: 15px; transform: rotate(180deg); }

/* holographic foil: rainbow bands, glitter and a glare, all driven by the pointer */
.cs-holo, .cs-sparkle, .cs-glare { position: absolute; inset: 0; pointer-events: none; }
.cs-holo { background: repeating-linear-gradient(115deg, #ff7773 0%, #ffed5f 6%, #a8ff5f 12%, #83fff7 18%, #7894ff 24%, #d875ff 30%, #ff7773 36%); background-size: 320% 320%; background-position: var(--px, 50%) var(--py, 50%); mix-blend-mode: color-dodge; filter: brightness(.55) contrast(1.6) saturate(1.3); opacity: calc(var(--hov, .2) * .55); }
.cs-sparkle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 9 -6.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px; background-position: calc(var(--px, 50%) * -1) var(--py, 50%); mix-blend-mode: color-dodge; opacity: max(0, calc((var(--hov, .2) - .35) * .7)); }
.cs-glare { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .75), rgba(255, 255, 255, .12) 28%, rgba(255, 255, 255, 0) 58%); mix-blend-mode: overlay; opacity: var(--hov, .2); }

.cs-back { transform: rotateY(180deg) translateZ(1px); background: #121416; color: #f6f1e8; }
.cs-back::before { content: ''; position: absolute; inset: 0; background:
  radial-gradient(circle at 50% 50%, rgba(251, 106, 34, .18) 0 1px, transparent 1.6px) 0 0 / 10px 10px,
  repeating-linear-gradient(45deg, rgba(251, 106, 34, .07) 0 1px, transparent 1px 10px),
  repeating-linear-gradient(-45deg, rgba(54, 169, 225, .06) 0 1px, transparent 1px 10px); }
.cs-frame { position: absolute; inset: 12px; border: 1px solid rgba(251, 106, 34, .85); border-radius: 11px; }
.cs-frame::after { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(246, 241, 232, .22); border-radius: 7px; }
.cs-oval { position: absolute; left: 20%; right: 20%; top: 12%; bottom: 50%; border: 1px solid rgba(251, 106, 34, .8); border-radius: 50%; display: grid; place-items: center; outline: 1px solid rgba(251, 106, 34, .35); outline-offset: 6px; background: radial-gradient(closest-side, rgba(251, 106, 34, .14), transparent); }
.cs-oval img { width: 74%; }
.cs-bidx { position: absolute; font-family: var(--mono); font-weight: 600; font-size: clamp(15px, 1.4vw, 21px); line-height: .9; text-align: center; }
.cs-bidx b { display: block; color: var(--orange); font-weight: 400; margin-top: 3px; }
.cs-bidx.tl { top: 24px; left: 26px; }
.cs-bidx.br { bottom: 24px; right: 26px; transform: rotate(180deg); }
.cs-bio { position: absolute; left: 11%; right: 11%; bottom: 12%; text-align: center; display: grid; gap: 6px; }
.cs-bio b { font-size: clamp(18px, 1.7vw, 26px); font-weight: 650; line-height: 1; text-transform: uppercase; }
.cs-bio span { font-family: var(--mono); font-size: clamp(9px, .8vw, 11px); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.cs-bio i { font-style: normal; font-size: clamp(12px, 1vw, 14px); color: rgba(246, 241, 232, .72); line-height: 1.3; }

.cs-foot { position: absolute; left: var(--gut); right: var(--gut); bottom: 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; z-index: 3; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.cs-pips { display: flex; gap: 6px; align-items: center; }
.cs-pips i { width: 24px; height: 3px; background: rgba(18, 20, 22, .2); transition: background .4s, width .4s var(--ease); }
.cs-pips i.on { background: var(--dark-ink); width: 40px; }

/* ---------- after the collection ---------- */
.cs-after { background: #efe9df; color: var(--dark-ink); padding: clamp(72px, 8vw, 112px) var(--gut); display: grid; grid-template-columns: 1.25fr 1fr; gap: 60px clamp(40px, 6vw, 110px); align-items: start; }
.cs-after .cs-eyebrow { color: #3a3d41; }
.cs-after h2 { margin: 20px 0 28px; font-size: clamp(44px, 6vw, 108px); font-weight: 650; line-height: .9; letter-spacing: -.02em; text-transform: uppercase; }
.cs-after-copy p { margin: 0 0 16px; font-size: 19px; max-width: 620px; }
.cs-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.cs-after-copy .btn::before { background: var(--dark-ink); }
.cs-after-copy .btn:hover { color: var(--cream); }

.cs-game { position: relative; background: #15181b; color: #f6f1e8; border-radius: 26px; padding: clamp(26px, 3vw, 40px); margin-top: 20px; }
.cs-game::before { content: ''; position: absolute; inset: 12px; border: 1.5px dashed rgba(251, 106, 34, .4); border-radius: 18px; pointer-events: none; }
.cs-game-cards { position: relative; height: clamp(150px, 14vw, 200px); margin: 4px 0 26px; }
.cs-game-cards span { position: absolute; left: 50%; top: 0; height: 100%; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .7); transition: transform .6s var(--ease); }
.cs-game-cards span img { width: 100%; height: 100%; object-fit: cover; }
.cs-game-cards span:nth-child(1) { transform: translateX(-125%) rotate(-8deg); }
.cs-game-cards span:nth-child(2) { transform: translateX(-50%) translateY(-6px); z-index: 2; }
.cs-game-cards span:nth-child(3) { transform: translateX(25%) rotate(8deg); }
.cs-game-cards span.back { background: #0d0f11; display: grid; place-items: center; outline: 1px solid rgba(251, 106, 34, .85); outline-offset: -9px; }
.cs-game-cards span.back img { width: 70%; height: auto; object-fit: contain; }
.cs-game:hover .cs-game-cards span:nth-child(1) { transform: translateX(-140%) rotate(-12deg); }
.cs-game:hover .cs-game-cards span:nth-child(2) { transform: translateX(-50%) translateY(-16px); }
.cs-game:hover .cs-game-cards span:nth-child(3) { transform: translateX(40%) rotate(12deg); }
.cs-game h3 { position: relative; margin: 0 0 10px; font-size: clamp(30px, 2.8vw, 46px); font-weight: 650; line-height: 1; text-transform: uppercase; letter-spacing: -.015em; }
.cs-game p { position: relative; margin: 0 0 26px; font-size: 17px; color: rgba(246, 241, 232, .82); max-width: 440px; }
.cs-game .btn { position: relative; }
.cs-game .btn::before { background: #f6f1e8; }
.cs-game .btn:hover { color: var(--dark-ink); }

@media (max-width: 820px) {
  .cs-show { --top: 90px; }
  .cs-info { bottom: auto; width: auto; right: var(--gut); grid-template-rows: auto; }
  .cs-info h1 { font-size: clamp(30px, 9vw, 44px); margin-top: 8px; }
  .cs-eyebrow { font-size: 10.5px; }
  .cs-who-wrap { position: absolute; left: 0; right: 0; top: calc(100vh - var(--top) - 250px); top: calc(100svh - var(--top) - 250px); min-height: 0; }
  .cs-who { bottom: auto; top: 0; }
  .cs-who h2 { font-size: clamp(32px, 10vw, 48px); margin: 6px 0 6px; }
  .cs-who .r { font-size: 16px; }
  .cs-who .lead { font-size: 19px; }
  .cs-who p.t:not(:nth-of-type(2)) { display: none; }
  .cs-stage { width: 100%; top: calc(var(--top) + 96px); bottom: 262px; }
  .cs-card { top: 50%; }
  .cs-foot { bottom: 18px; font-size: 9.5px; }
  .cs-after { grid-template-columns: 1fr; gap: 40px; }
  .cs-after h2 { font-size: clamp(38px, 11vw, 60px); }
  .cs-after-copy p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .cs-nm { opacity: 0 !important; } }

/* Touch-friendly and compact on mobile. */
@media (max-width: 820px) {
  .cs-show { height: 330vh; }
  .cs-foot { letter-spacing: .07em; }
  .cs-after { padding-block: 68px; }
  .cs-links .btn, .cs-game .btn { min-height: 44px; }
}
@media (max-width: 390px) {
  .cs-after { gap: 24px; }
  .cs-game { padding: 20px; }
  .cs-info h1 { font-size: 30px; }
  .cs-game h3 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  body.cs .cs-show { height: auto; }
  body.cs .cs-stick { position: relative; height: auto; min-height: 0; overflow: visible; background: #efe9df; padding: 110px var(--gut) 45px; }
  body.cs .cs-bg, body.cs .cs-names, body.cs .cs-foot { display: none; }
  body.cs .cs-info { position: relative; inset: auto; width: auto; display: block; }
  body.cs .cs-who-wrap { position: relative; inset: auto; min-height: 0; margin-top: 24px; }
  body.cs .cs-who { position: static; opacity: 1 !important; transform: none !important; }
  body.cs .cs-who:not(:last-child) { display: none; }
  body.cs .cs-stage { position: relative; inset: auto; width: 100%; display: flex; justify-content: center; gap: 12px; padding: 30px 0 0; }
  body.cs .cs-card { position: relative; left: auto; top: auto; margin: 0 !important; width: min(28vw,180px) !important; height: min(42vw,270px) !important; transform: none !important; pointer-events: auto !important; }
  body.cs .cs-tilt, body.cs .cs-flipper { transform: none !important; }
  body.cs .cs-holo, body.cs .cs-sparkle, body.cs .cs-glare { display: none; }
}

/* Progressive enhancement: real staff photos remain visible if scripts/CDNs fail. */
.cs-static-gallery { position:absolute; inset: 0; display:flex; align-items:center; justify-content:center; gap:clamp(6px,1vw,20px); padding:12px; }
.cs-static-gallery img { display:block; width:min(26%,200px); height:auto; aspect-ratio:2/3; object-fit:cover; border-radius:14px; box-shadow:0 20px 45px -20px #0008; transform:rotate(-5deg); }
.cs-static-gallery img:nth-child(2) { transform:translateY(-14px); z-index:2; }
.cs-static-gallery img:nth-child(3) { transform:rotate(5deg); }
@media (max-width:820px) { .cs-static-gallery img {width:min(28%,150px);} .cs-static-gallery {align-items:center;} }
@media (prefers-reduced-motion:reduce) { .cs-static-gallery {position:relative; width:100%;} }