/* seal.css — sigillo di ceralacca, cordicelle, handle di trascinamento, hint */

.seal { cursor: grab; }
.seal.is-dragging { cursor: grabbing; }

/* colori sigillo (i token non passano dagli attributi SVG: si applicano via CSS) */
#waxGrad .s1 { stop-color: var(--wax-hi); }
#waxGrad .s2 { stop-color: var(--wax); }
#waxGrad .s3 { stop-color: var(--wax-lo); }
.seal__body .monogram { fill: color-mix(in oklab, var(--wax) 78%, #000 14%); }

/* crepe: partono invisibili, rivelate col progress del tiraggio */
.seal__cracks path {
  stroke: color-mix(in oklab, var(--wax-lo) 70%, #000 20%);
  stroke-width: 1.2;
  fill: none;
  stroke-linecap: round;
  opacity: 0.9;
}

/* frammenti: nascosti finché il sigillo non si spezza */
.seal__shards { visibility: hidden; }
.seal__shards path {
  fill: url(#waxGrad);
  stroke: color-mix(in oklab, var(--wax-lo) 75%, #000 15%);
  stroke-width: 0.7;
  will-change: transform, opacity;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

/* nastro fisso incrociato sulla cera */
.ribbon .ribbon-core { fill: none; stroke: url(#cordGrad); stroke-width: 6; stroke-linecap: round; opacity: 0.92; }
.ribbon .ribbon-hi { fill: none; stroke: color-mix(in oklab, var(--gold-hi) 80%, #fff 20%); stroke-width: 1.4; stroke-linecap: round; opacity: 0.6; }

/* codolo: due fili gemelli attorcigliati che si tirano */
.cords path { fill: none; stroke-linecap: round; }
.cords .cord-core { stroke: url(#cordGrad); stroke-width: 5; }
.cords .cord-hi { stroke: color-mix(in oklab, var(--gold-hi) 85%, #fff 15%); stroke-width: 1.3; opacity: 0.7; }

/* nodo/handle da tirare */
.cord-handle {
  cursor: grab;
  touch-action: none; /* il pull non deve scrollare la pagina */
}
.cord-handle:active { cursor: grabbing; }
.cord-handle .knot {
  fill: var(--wax);
  stroke: var(--wax-lo);
  stroke-width: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}
.cord-handle .knot-hi { fill: color-mix(in oklab, var(--gold-hi) 60%, transparent); }
.cord-handle .tassel { stroke: url(#cordGrad); stroke-width: 1.6; opacity: 0.85; }

/* hint "tira le cordicelle" */
.hint {
  position: fixed;
  left: 50%;
  bottom: clamp(2.4rem, 12vh, 6rem);
  transform: translateX(-50%);
  z-index: 9;
  font-family: var(--font-serif);
  font-size: clamp(0.66rem, 0.58rem + 0.6vw, 0.82rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--gold-hi) 88%, #fff 12%);
  text-shadow: 0 0 14px color-mix(in oklab, var(--candle) 60%, transparent);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}