/* ============================================================
   IDENTITA' DI MESTIERE — «LA CIOCCA»
   Il motivo viene dal marchio, che e' un anello di ciocche attorno
   a un volto. Qui vive come segno grafico e come strumento: la
   cartella colore e la ciocca disegnata a capello singolo.
   ============================================================ */

/* ============================================================
   CIOCCHE DELL'HERO — canvas 2D. In hero conta partire subito.
   ============================================================ */
.ciocche-hero {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
}
.ciocche-hero.is-pronta { opacity: 1; }

/* ============================================================
   FILETTO A CIOCCA — l'arco del marchio ridotto a segno di sezione
   ============================================================ */
.filo-ciocca { display: block; width: 100%; height: auto; color: var(--c-accent); }
.filo-ciocca path {
  fill: none; stroke: currentColor;
  stroke-width: 1.2; stroke-linecap: round;
  opacity: .5;
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset 620ms var(--ease-out);
}
.filo-ciocca path:nth-child(2) { opacity: .26; }
.filo-ciocca path:nth-child(3) { opacity: .13; }
.is-visibile .filo-ciocca path,
.filo-ciocca.is-visibile path { stroke-dashoffset: 0; }
.filo-ciocca.is-visibile path:nth-child(2) { transition-delay: 60ms; }
.filo-ciocca.is-visibile path:nth-child(3) { transition-delay: 120ms; }

/* ============================================================
   CARTELLA COLORE — il gesto vero del mestiere.
   Ogni pastiglia disegna la tecnica: righe per i colpi di sole,
   sfumata per il balayage, meta' intatta per lo shatush, tono
   pieno per la copertura. Si distinguono prima di toccarle.
   ============================================================ */
.cartella {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  padding: 0; margin: 0; border: 0;
}
.cartella legend { padding: 0; margin-bottom: var(--space-4); }

.tinta { position: relative; }
.tinta input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer;
}
.tinta span {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 52px; padding: 7px var(--space-5) 7px 7px;
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r-full);
  font-size: var(--text-small); font-weight: 500;
  color: var(--c-text);
  background: transparent;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-press) var(--ease);
}
.tinta span::before {
  content: ""; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--grad, linear-gradient(180deg, var(--da) 0%, var(--tra) 52%, var(--a) 100%));
  box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .22);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.tinta:hover span                  { border-color: var(--c-accent); }
.tinta input:focus-visible + span  { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.tinta input:checked + span        { border-color: var(--c-accent); font-weight: 700;
                                     background: color-mix(in srgb, var(--c-accent) 10%, transparent); }
.tinta input:checked + span::before{ box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .3),
                                                 0 0 0 2px var(--c-accent); }
.tinta input:active + span         { transform: scale(.97); }

/* ============================================================
   LA CIOCCA — centinaia di capelli sottili su canvas 2D.
   Mostra cosa succede al capello dalla radice alla punta, che e'
   la cosa che le clienti non sanno chiedere a parole.
   ============================================================ */
.ciocca {
  position: relative;
  aspect-ratio: 4/5;
  max-width: 460px; width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(130% 90% at 50% -10%, hsl(336 9% 16%) 0%, hsl(336 10% 6%) 74%);
  box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .06), var(--shadow-3);
  touch-action: pan-y;
  cursor: grab;
}
.ciocca:active { cursor: grabbing; }
.ciocca canvas { display: block; width: 100%; height: 100%; }

.ciocca__nota {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-5);
  font-size: var(--text-caption); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-text-muted);
  text-align: center;
  pointer-events: none;
}
.ciocca__nota::before {
  content: ""; display: block;
  width: 34px; height: 3px; margin: 0 auto var(--space-3);
  border-radius: 2px;
  background: hsl(0 0% 100% / .28);
}

/* Se il canvas non parte resta una scala colore leggibile: mai un buco */
.ciocca__ripiego { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-8); }
.ciocca__ripiego i {
  display: block; width: 30%; height: 76%;
  border-radius: var(--r-full);
  background: linear-gradient(180deg, var(--da) 0%, var(--tra) 52%, var(--a) 100%);
  box-shadow: 0 24px 60px -24px hsl(0 0% 0% / .85);
  transition: background var(--dur-slow) var(--ease-out);
}
.ciocca.is-attiva .ciocca__ripiego { display: none; }

/* Campione piccolo: stessa ciocca, ferma, dentro le schede */
.ciocca-campione {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, hsl(336 9% 15%), hsl(336 10% 6%));
}
.ciocca-campione canvas { display: block; width: 100%; height: 100%; }

/* Le tre righe fisse accanto alla ciocca */
.scheda-tecnica { display: grid; gap: var(--space-5); align-content: center; }
.scheda-tecnica__voce { display: grid; gap: var(--space-1); }
.scheda-tecnica__voce b {
  font-size: var(--text-caption); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-accent);
}
.scheda-tecnica__voce span { color: var(--c-text); }
.scheda-tecnica h3 { margin-bottom: var(--space-2); }

/* Il testo cambia insieme alla ciocca: 200ms, non un salto */
.scheda-tecnica.is-cambio { animation: scatto 200ms var(--ease-out); }
@keyframes scatto {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

.tecniche-griglia { display: grid; gap: var(--space-7); }
@media (min-width: 900px) {
  .tecniche-griglia {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
  }
}
.tecniche-griglia .cartella { margin-bottom: var(--space-7); }

/* ============================================================
   ENTRATE ALLO SCROLL
   8px di salita e una scala che parte da 0.99. Quello che e' gia'
   sullo schermo al caricamento parte subito: il JS lo marca visibile
   al primo giro, senza aspettare l'osservatore.
   ============================================================ */
.js .rivela {
  opacity: 0;
  transform: translateY(8px) scale(.99);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.rivela.is-visibile { opacity: 1; transform: none; }
.rivela--1 { transition-delay: calc(var(--stagger) * 1); }
.rivela--2 { transition-delay: calc(var(--stagger) * 2); }
.rivela--3 { transition-delay: calc(var(--stagger) * 3); }
.rivela--4 { transition-delay: calc(var(--stagger) * 4); }

/* Titolo che sale da sotto una maschera, riga per riga */
.pettine > span {
  display: block; overflow: hidden;
  padding-bottom: .1em; margin-bottom: -.1em;
}
.js .pettine > span > i {
  display: block; font-style: inherit;
  transform: translateY(105%);
  transition: transform 380ms var(--ease-out);
}
.pettine.is-visibile > span > i { transform: none; }
.pettine > span:nth-child(2) > i { transition-delay: 55ms; }
.pettine > span:nth-child(3) > i { transition-delay: 110ms; }

/* Rete di sicurezza: il JS non ha risposto in tempo */
.senza-moto .rivela,
.senza-moto .pettine > span > i { opacity: 1 !important; transform: none !important; }
.senza-moto .filo-ciocca path  { stroke-dashoffset: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .rivela, .pettine > span > i { opacity: 1; transform: none; transition: none; }
  .filo-ciocca path { stroke-dashoffset: 0; transition: none; }
  .ciocche-hero { display: none; }
}