/* Sezione "Il problema": illustrazioni in HTML/CSS.
   Ogni illustrazione è una tela con misure in cqw, così scala con la card. */

.problem { padding-top: 24px; }
.problem .carousel { margin-top: 36px; }

.art {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 100 / 56;
  margin-top: auto;
  /* spazio fisso tra testo e illustrazione */
  transform: translateY(0);
}
.card { justify-content: flex-start; }
.card .art { margin-top: auto; }
.card__text { margin-bottom: 20px; }

/* Illustrazione più compatta: stessa composizione, card meno alte */
.card .art { width: 86%; margin-inline: auto; }
@media (min-width: 768px) { .card .art { width: 76%; } }

.art > * { position: absolute; }

.art__float { animation: art-float 7s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes art-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
  50% { transform: translate3d(0, -1.6cqw, 0) rotate(var(--r, 0deg)); }
}

/* Superficie base: foglio/card bianca con ombra morbida */
.sheet, .doc, .cal, .bubble, .notes, .blank {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 2.6cqw;
  box-shadow: 0 1.6cqw 3.6cqw -1.6cqw rgba(85, 37, 131, 0.22);
}

/* ---------- Card 1: il tempo che se ne va ---------- */
.sheet {
  --r: -5deg;
  left: 5cqw; top: 9cqw; width: 36cqw; height: 29cqw;
  transform: rotate(var(--r));
  overflow: hidden;
  background:
    linear-gradient(var(--color-line) 1px, transparent 1px) 0 6cqw / 100% 5.5cqw,
    linear-gradient(90deg, var(--color-line) 1px, transparent 1px) 0 0 / 9cqw 100%,
    #fff;
}
.sheet::before { /* riga di intestazione */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6cqw;
  background: var(--color-yellow-100); border-bottom: 1px solid var(--color-line);
}
.sheet::after { /* celle compilate */
  content: ""; position: absolute; left: 1.6cqw; top: 8.2cqw; width: 5.4cqw; height: 1.6cqw;
  border-radius: 1cqw; background: var(--color-purple-100);
  box-shadow: 9cqw 5.5cqw 0 var(--color-purple-100), 18cqw 11cqw 0 var(--color-purple-100), 0 11cqw 0 var(--color-purple-100), 18cqw 0 0 var(--color-purple-100);
}

.doc {
  --r: 4deg;
  left: 33cqw; top: 3cqw; width: 22cqw; height: 29cqw;
  transform: rotate(var(--r));
  padding: 4cqw 3cqw;
  background:
    repeating-linear-gradient(transparent 0 2.6cqw, var(--color-purple-100) 2.6cqw 3.4cqw) 3cqw 4cqw / calc(100% - 6cqw) calc(100% - 8cqw) no-repeat,
    #fff;
}
.doc::after { /* angolo piegato */
  content: ""; position: absolute; right: -1px; top: -1px; width: 5cqw; height: 5cqw;
  background: linear-gradient(225deg, #fff 50%, var(--color-purple-50) 50%);
  border-radius: 0 2.6cqw 0 1.4cqw; border-left: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line);
}

.bubble { height: 10cqw; border-radius: 3.4cqw; display: flex; align-items: center; gap: 1.2cqw; padding: 0 3cqw; }
.bubble--in { right: 7cqw; top: 6cqw; width: 30cqw; background: var(--color-purple-50); border-radius: 3.4cqw 3.4cqw 3.4cqw 0.8cqw; }
.bubble--out { right: 3cqw; top: 19cqw; width: 26cqw; background: var(--color-purple); border-color: var(--color-purple); border-radius: 3.4cqw 3.4cqw 0.8cqw 3.4cqw; }
.bubble i { display: block; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--color-purple); opacity: 0.35; animation: art-blink 1.6s ease-in-out infinite; }
.bubble i:nth-child(2) { animation-delay: 0.2s; }
.bubble i:nth-child(3) { animation-delay: 0.4s; }
.bubble--out i { background: #fff; }
.bubble--out::after { content: ""; flex: 1; height: 1.6cqw; margin-left: 1cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.55); }
@keyframes art-blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }

.cal {
  --r: 5deg;
  right: 10cqw; bottom: 3cqw; width: 24cqw; height: 22cqw;
  transform: rotate(var(--r));
  overflow: hidden;
  background:
    radial-gradient(circle, var(--color-purple-100) 0.7cqw, transparent 0.8cqw) 2.2cqw 8cqw / 4.2cqw 4cqw,
    #fff;
}
.cal::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5.6cqw; background: var(--color-purple); }
.cal::after { content: ""; position: absolute; left: 10.4cqw; top: 12cqw; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: var(--color-yellow); }

/* ---------- Card 2: la memoria che si perde ---------- */
.notes { left: 5cqw; top: 6cqw; width: 34cqw; height: 40cqw; padding: 4cqw 3.6cqw; }
.notes::before { /* righe di appunti che sfumano */
  content: ""; position: absolute; inset: 4cqw 3.6cqw;
  background:
    linear-gradient(var(--color-purple-100), var(--color-purple-100)) 0 0 / 60% 1.6cqw no-repeat,
    repeating-linear-gradient(transparent 0 3.4cqw, var(--color-purple-100) 3.4cqw 4.8cqw) 0 5cqw / 100% 30cqw no-repeat;
  -webkit-mask-image: linear-gradient(#000 30%, transparent 92%);
  mask-image: linear-gradient(#000 30%, transparent 92%);
}
.notes::after { /* segnalino giallo */
  content: ""; position: absolute; left: -1px; top: 8cqw; width: 2cqw; height: 6cqw; border-radius: 0 1cqw 1cqw 0; background: var(--color-yellow);
}

.year-break { /* linea del cambio d'anno */
  left: 50cqw; top: 4cqw; bottom: 6cqw; width: 0; border-left: 1.5px dashed #C9BCD8;
}
.year-break::after {
  content: ""; position: absolute; left: -2.4cqw; top: 50%; width: 4.8cqw; height: 4.8cqw; margin-top: -2.4cqw; border-radius: 50%;
  background: var(--color-yellow-100); border: 1.5px solid var(--color-yellow); box-sizing: border-box;
}

.blank {
  right: 5cqw; top: 6cqw; width: 34cqw; height: 40cqw;
  border-style: dashed; border-color: #D3C7E0; background: var(--color-purple-50); box-shadow: none;
}
.blank::before {
  content: ""; position: absolute; inset: 4cqw 3.6cqw;
  background:
    linear-gradient(#E6DDF0, #E6DDF0) 0 0 / 60% 1.6cqw no-repeat,
    linear-gradient(#EFE9F5, #EFE9F5) 0 5cqw / 100% 1.6cqw no-repeat,
    linear-gradient(#EFE9F5, #EFE9F5) 0 8.4cqw / 70% 1.6cqw no-repeat;
}

.chip {
  left: 33cqw; top: var(--y); width: 15cqw; height: 6.4cqw;
  display: flex; align-items: center; gap: 1.2cqw; padding: 0 1.6cqw;
  background: #fff; border: 1px solid var(--color-line); border-radius: 3.2cqw;
  box-shadow: 0 1cqw 2.4cqw -1cqw rgba(85, 37, 131, 0.3);
  animation: art-drift 6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.chip::before { content: ""; flex: none; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: var(--c, var(--color-purple)); }
.chip::after { content: ""; flex: 1; height: 1.4cqw; border-radius: 1cqw; background: var(--color-purple-100); }
.chip--1 { --y: 11cqw; --c: var(--color-purple); }
.chip--2 { --y: 23cqw; --c: var(--color-yellow); --d: 2s; }
.chip--3 { --y: 35cqw; --c: var(--color-teal); --d: 4s; }
@keyframes art-drift {
  0% { transform: translateX(-4cqw); opacity: 0; }
  15% { opacity: 1; }
  55% { transform: translateX(7cqw); opacity: 1; }
  80%, 100% { transform: translateX(14cqw) scale(0.9); opacity: 0; }
}

@media (min-width: 768px) {
  .problem { padding-top: 40px; }
  .problem .carousel { margin-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .art__float, .bubble i { animation: none; }
  .chip { animation: none; opacity: 1; transform: translateX(3cqw); }
  .chip--2 { transform: translateX(7cqw); opacity: 0.7; }
  .chip--3 { transform: translateX(11cqw); opacity: 0.4; }
}