/*
 * Linea T Moda — Living Cartamodello
 * Modulo indipendente e reversibile: data-pattern-story="off" lo disattiva.
 */

#pattern-story-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 0;
  display: none;
  overflow: visible;
  pointer-events: none;
}

[data-pattern-story="on"] #pattern-story-layer { display: block; }
[data-pattern-story="on"] .hero-deco { opacity: .667; }
[data-pattern-story="on"] #main { position: relative; }
[data-pattern-story="on"] #main > section,
[data-pattern-story="on"] #main > .container { position: relative; z-index: 1; }
[data-pattern-story="on"] .hero-visual { position: relative; z-index: 5; }
[data-pattern-story="on"] section[data-pattern-step="shirt"] {
  background: rgba(243, 237, 226, .80) !important;
}

/* Nel fondo scuro il piazzamento passa davanti: qui non ci sono fotografie. */
#pattern-story-layer.pattern-story--dark { z-index: 3; }

.pattern-story__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.pattern-story__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pattern-step {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(12px) scale(.975);
  transition:
    opacity 680ms cubic-bezier(.2,.75,.25,1),
    transform 900ms cubic-bezier(.2,.75,.25,1);
}

.pattern-step.is-active {
  opacity: .155;
  transform: translateY(0) scale(1);
}

.pattern-outline,
.pattern-construction,
.pattern-notch,
.pattern-measure-line {
  fill: none;
  stroke: var(--ink);
  vector-effect: non-scaling-stroke;
}

.pattern-outline {
  stroke-width: 1.05;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1100ms cubic-bezier(.2,.75,.25,1) 90ms;
}

.pattern-step.is-active .pattern-outline { stroke-dashoffset: 0; }

.pattern-construction,
.pattern-measure-line {
  stroke-width: .62;
  stroke-dasharray: 4 6;
}

.pattern-notch { stroke-width: .85; }

.pattern-point {
  fill: var(--ink);
}

.pattern-label {
  fill: var(--ink-mute);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pattern-frame {
  fill: none;
  stroke: var(--line);
  stroke-width: .65;
  vector-effect: non-scaling-stroke;
  transition: opacity 450ms ease;
}

.pattern-hero-only {
  transition: opacity 450ms ease;
}

.pattern-story--dark .pattern-outline,
.pattern-story--dark .pattern-construction,
.pattern-story--dark .pattern-notch,
.pattern-story--dark .pattern-measure-line,
.pattern-story--dark .pattern-frame {
  stroke: var(--sand);
}

.pattern-story--dark .pattern-point,
.pattern-story--dark .pattern-tracer { fill: var(--sand); }
.pattern-story--dark .pattern-label { fill: var(--sand); }

.pattern-status {
  opacity: 0;
  transition: opacity 300ms ease;
}

.pattern-step.is-active .pattern-status { opacity: 1; }

.pattern-tracer {
  fill: var(--sand-deep);
  transform: translateX(var(--pattern-trace, 0px));
  transition: transform 120ms linear;
}

@media (max-width: 1024px) {
  .pattern-step.is-active { opacity: .121; }
  .pattern-label { font-size: 9px; }
}

/* Mobile: solo un'eco statica del corpino nella hero, niente layer persistente. */
@media (max-width: 760px) {
  #pattern-story-layer { opacity: .72; }
  .pattern-step:not(#pattern-bodice) { display: none; }
  .pattern-step.is-active { opacity: .104; }
  .pattern-frame,
  .pattern-status,
  .pattern-measure,
  .pattern-photo-marks,
  .pattern-baseline { display: none; }
  .pattern-outline { stroke-width: .9; }
}

@media (prefers-reduced-motion: reduce) {
  .pattern-step,
  .pattern-outline,
  .pattern-tracer {
    transition: none !important;
  }
  .pattern-outline { stroke-dashoffset: 0; }
}

@media print {
  #pattern-story-layer { display: none !important; }
}