/* ═══════════════════════════════════════════════════════════════
   JENGA TIMELINE — Frontend Styles
   Variabili colore iniettate inline via PHP:
     --sf-accent   (default #D2691E)
     --sf-bg       (default #1D1D1C)
═══════════════════════════════════════════════════════════════ */

/* Derivate */
.sf-section {
  --sf-accent-glow: color-mix(in srgb, var(--sf-accent) 35%, transparent);
  --sf-accent-soft: color-mix(in srgb, var(--sf-accent) 12%, transparent);
  --sf-text:        #F5F5F5;
  --sf-text-dim:    #A0A0A0;
  --sf-text-muted:  #6B6B6B;
  --sf-card-bg:     rgba(255,255,255,0.03);
  --sf-card-border: rgba(255,255,255,0.06);
  --sf-track:       rgba(255,255,255,0.06);
  --sf-radius:      16px;
}

/* ── Reset scope ─────────────────────────────────────────── */
.sf-section *,
.sf-section *::before,
.sf-section *::after { margin:0; padding:0; box-sizing:border-box; }

/* ── Sezione ─────────────────────────────────────────────── */
.sf-section {
  position: relative;
  width: 100%;
  padding: 20px 24px 40px;
  background: none;
  overflow: hidden;
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--sf-text);
}

/* Con sfondo proprio (non trasparente) */
.sf-section--with-bg {
  padding: 96px 24px 120px;
  background: var(--sf-bg);
}

/* Rumore sottile — solo con sfondo proprio */
.sf-section::before {
  display: none;
}

.sf-section--with-bg::before {
  content:'';
  display: block;
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity:.45;
  pointer-events:none;
}

/* ── Header ──────────────────────────────────────────────── */
.sf-header {
  text-align:center;
  max-width:700px;
  margin:0 auto 80px;
  position:relative;
}

.sf-header__label {
  display:block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sf-accent);
  margin-bottom: 18px;
}

.sf-header__title {
  font-size: 50px !important;
  font-weight: 700;
  line-height: 55px !important;
  color: var(--sf-text);
}

.sf-header__sub {
  margin-top: 15px !important;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--sf-text-dim);
  font-weight: 300;
}

/* ── Container ───────────────────────────────────────────── */
.sf-wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

/* ── Linea verticale ─────────────────────────────────────── */
.sf-line {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--sf-track);
  z-index: 1;
}

.sf-line__fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0;
  background: var(--sf-accent);
  box-shadow: 0 0 12px var(--sf-accent-glow), 0 0 28px var(--sf-accent-glow);
  border-radius: 0 0 2px 2px;
  will-change: height;
}

.sf-line__glow {
  position: absolute;
  top: 0; left: -3px;
  width: 8px;
  height: 0;
  background: linear-gradient(180deg, transparent, var(--sf-accent-glow), transparent);
  filter: blur(4px);
  border-radius: 0 0 4px 4px;
  pointer-events: none;
  will-change: height;
}

/* ── Item ────────────────────────────────────────────────── */
.sf-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 56px;
}
.sf-item:last-child { margin-bottom:0; }

.sf-item--left  { justify-content: flex-start; }
.sf-item--right { justify-content: flex-end; }

/* ── Nodo ────────────────────────────────────────────────── */
.sf-node {
  position: absolute;
  left: 50%;
  top: 28px;
  width: 18px; height: 18px;
  transform: translateX(-50%);
  z-index: 3;
}

.sf-node__dot {
  display:block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--sf-bg);
  border: 2px solid var(--sf-text-muted);
  transition: border-color .5s, background .5s, box-shadow .5s;
  position: relative;
  z-index: 2;
}

.sf-node__ring {
  position:absolute;
  inset: -6px;
  border-radius: 50%;
  background: var(--sf-accent-glow);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .5s, transform .5s;
}

/* Attivo */
.sf-item.sf-visible .sf-node__dot {
  border-color: var(--sf-accent);
  background: var(--sf-accent);
  box-shadow: 0 0 16px var(--sf-accent-glow);
}

.sf-item.sf-visible .sf-node__ring {
  opacity:1;
  transform: scale(1);
  animation: sf-pulse 2.5s ease-out infinite;
}

@keyframes sf-pulse {
  0%   { transform:scale(.8); opacity:.6; }
  100% { transform:scale(2.2); opacity:0; }
}

/* ── Card ────────────────────────────────────────────────── */
.sf-card {
  position: relative;
  width: calc(50% - 56px);
  background: var(--sf-card-bg);
  border: 1px solid var(--sf-card-border);
  border-radius: var(--sf-radius);
  padding: 36px 32px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .5s, box-shadow .5s;

  /* Stato iniziale — completamente nascosto */
  opacity: 0;
  filter: blur(6px);
  will-change: opacity, transform, filter;
}

.sf-item--left  .sf-card { transform: translateY(60px) translateX(-50px) scale(0.94); }
.sf-item--right .sf-card { transform: translateY(60px) translateX(50px) scale(0.94); }

/* Visibile — animazione entrata */
.sf-item.sf-visible .sf-card {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) translateX(0) scale(1);
  transition: opacity .8s cubic-bezier(.16,1,.3,1),
              transform .8s cubic-bezier(.16,1,.3,1),
              filter .8s cubic-bezier(.16,1,.3,1),
              border-color .5s, box-shadow .5s;
}

/* Stagger delay — applicato via JS con custom property */
.sf-item.sf-visible .sf-card {
  transition-delay: var(--sf-delay, 0s);
}

/* Animazione anche del nodo con delay */
.sf-item.sf-visible .sf-node__dot {
  transition-delay: var(--sf-delay, 0s);
}
.sf-item.sf-visible .sf-node__ring {
  animation-delay: var(--sf-delay, 0s);
}

/* Contenuto card: stagger interno */
.sf-card__step,
.sf-card__title,
.sf-card__text,
.sf-card__tag {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}

.sf-item.sf-visible .sf-card__step {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(var(--sf-delay, 0s) + 0.1s);
}
.sf-item.sf-visible .sf-card__title {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(var(--sf-delay, 0s) + 0.2s);
}
.sf-item.sf-visible .sf-card__text {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(var(--sf-delay, 0s) + 0.3s);
}
.sf-item.sf-visible .sf-card__tag {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(var(--sf-delay, 0s) + 0.4s);
}

/* Hover */
.sf-card:hover {
  border-color: color-mix(in srgb, var(--sf-accent) 22%, transparent);
  box-shadow: 0 8px 40px color-mix(in srgb, var(--sf-accent) 8%, transparent);
}

/* Connettore orizzontale */
.sf-card::after {
  content:'';
  position:absolute;
  top: 36px;
  width: 40px; height: 1px;
  background: var(--sf-card-border);
  opacity:0;
  transition: opacity .6s .3s;
}
.sf-item--left  .sf-card::after { right: -42px; }
.sf-item--right .sf-card::after { left:  -42px; }

.sf-item.sf-visible .sf-card::after { opacity:1; }

/* ── Contenuto card ──────────────────────────────────────── */
.sf-card__step {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--sf-accent);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sf-card__step::before {
  content:'';
  display:inline-block;
  width:16px; height:1px;
  background: var(--sf-accent);
}

.sf-card__title {
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--sf-text);
  margin-bottom: 12px;
}

.sf-card__text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--sf-text-dim);
  font-weight: 300;
}

.sf-card__tag {
  display: inline-block;
  margin-top: 16px;
  padding: 5px 14px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sf-accent);
  background: var(--sf-accent-soft);
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--sf-accent) 15%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE  ≤ 768px — Linea a sinistra, card tutte a destra
═══════════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  .sf-section { padding: 16px 16px 40px; }
  .sf-section--with-bg { padding: 60px 16px 80px; }
  .sf-header  { margin-bottom: 52px; }

  .sf-line { left:18px; transform:none; }

  .sf-item { justify-content:flex-end !important; }

  .sf-node { left:18px; transform:translateX(-50%); top:18px; }

  .sf-card {
    width: calc(100% - 48px);
    padding: 22px 20px;
  }

  .sf-item--left  .sf-card,
  .sf-item--right .sf-card {
    transform: translateY(40px) translateX(24px) scale(0.94);
  }
  .sf-item.sf-visible .sf-card {
    transform: translateY(0) translateX(0) scale(1);
  }

  .sf-card::after { display:none; }

  .sf-card__title { font-size:1.08rem; }
  .sf-card__text  { font-size:.87rem; }
  .sf-item { margin-bottom:36px; }
}

/* ═══════════════════════════════════════════════════════════════
   RILEVAMENTO AUTOMATICO TEMA
   Senza .sf-section--with-bg, il plugin è trasparente e il JS
   aggiunge .sf-theme-light o .sf-theme-dark in base allo sfondo
   ereditato dalla riga del page builder.
═══════════════════════════════════════════════════════════════ */

/* ── Tema chiaro (applicato via JS) ──────────────────────── */
.sf-section.sf-theme-light {
  --sf-text:        #1a1a1a;
  --sf-text-dim:    #4a4a4a;
  --sf-text-muted:  #999999;
  --sf-card-bg:     rgba(0, 0, 0, 0.03);
  --sf-card-border: rgba(0, 0, 0, 0.08);
  --sf-track:       rgba(0, 0, 0, 0.08);
}

.sf-section.sf-theme-light .sf-node__dot {
  background: #fff;
  border-color: #ccc;
}

.sf-section.sf-theme-light .sf-item.sf-visible .sf-node__dot {
  background: var(--sf-accent);
  border-color: var(--sf-accent);
}

.sf-section.sf-theme-light .sf-card {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}

.sf-section.sf-theme-light .sf-card:hover {
  box-shadow: 0 6px 30px rgba(0,0,0,0.07);
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT ORIZZONTALE — struttura identica al reference j8
═══════════════════════════════════════════════════════════════ */
.sf-hz__outer { padding: 0; }

.sf-hz__stage {
  position: relative;
  overflow: hidden;
  height: 420px;
  width: 100%;
  /* Fade laterale solo a sinistra/destra per le card che entrano/escono */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%);
}

.sf-hz__line {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  background: rgba(255,255,255,.06);
  z-index: 1;
  transform: translateY(-50%);
}

.sf-hz__line-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  background: var(--sf-accent);
  box-shadow: 0 0 8px var(--sf-accent-glow);
  border-radius: 0 2px 2px 0;
  transition: width 60ms linear;
}

.sf-hz__track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  position: relative;
  z-index: 2;
  height: 420px;
  align-items: center;
}
.sf-hz__track:active { cursor: grabbing; }
.sf-hz__track::-webkit-scrollbar { display: none; }

.sf-hz__item {
  flex: 0 0 360px; /* fallback, sovrascritto da JS */
  min-width: 0;
  height: 420px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
}

/* Nodo */
.sf-hz__node {
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 16px;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.sf-hz__node-dot {
  display: block;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--sf-bg, #1D1D1C);
  border: 2px solid var(--sf-text-muted);
  transition: all .5s;
}
.sf-hz__node-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: var(--sf-accent-glow);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .5s, transform .5s;
}
.sf-hz__item.sf-visible .sf-hz__node-dot {
  border-color: var(--sf-accent);
  background: var(--sf-accent);
  box-shadow: 0 0 12px var(--sf-accent-glow);
  transition-delay: var(--nd, .15s);
}
.sf-hz__item.sf-visible .sf-hz__node-ring {
  opacity: 1; transform: scale(1);
  animation: sf-pulse 2.4s ease-out infinite;
  animation-delay: var(--nd, .15s);
}

/* Connettore verticale */
.sf-hz__conn {
  position: absolute;
  left: calc(50% - .5px);
  width: 1px;
  background: rgba(255,255,255,.1);
  z-index: 3;
  height: 0; opacity: 0;
  transition: height .4s, opacity .4s;
}
.sf-hz__item--top .sf-hz__conn { bottom: calc(50% + 9px); }
.sf-hz__item--bot .sf-hz__conn { top:    calc(50% + 9px); }
.sf-hz__item.sf-visible .sf-hz__conn {
  height: 26px; opacity: 1;
  transition-delay: calc(var(--nd, .15s) + .05s);
}

/* Card: position absolute identico al reference */
.sf-hz__card {
  position: absolute;
  left: 12px; right: 12px;
  background: var(--sf-card-bg);
  border: 1px solid var(--sf-card-border);
  border-radius: 12px;
  padding: 22px 20px;
  opacity: 0;
  filter: blur(6px);
  transition: border-color .4s;
}
.sf-hz__item--top .sf-hz__card { bottom: calc(50% + 42px); transform: translateY(22px) scale(.93); }
.sf-hz__item--bot .sf-hz__card { top:    calc(50% + 42px); transform: translateY(-22px) scale(.93); }
.sf-hz__card:hover { border-color: color-mix(in srgb, var(--sf-accent) 22%, transparent); }

/* Animazione entrata controllata da --nd */
.sf-hz__item.sf-visible .sf-hz__card {
  opacity: 1; filter: blur(0); transform: none;
  transition: opacity .75s cubic-bezier(.16,1,.3,1),
              transform .75s cubic-bezier(.16,1,.3,1),
              filter .75s cubic-bezier(.16,1,.3,1),
              border-color .4s;
  transition-delay: var(--nd, .15s);
}

/* Contenuto card con stagger */
.sf-hz__card .sf-card__step,
.sf-hz__card .sf-card__title,
.sf-hz__card .sf-card__text,
.sf-hz__card .sf-card__tag {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .45s, transform .45s;
}
.sf-hz__item.sf-visible .sf-hz__card .sf-card__step  { opacity:1; transform:none; transition-delay: calc(var(--nd,.15s) + .1s); }
.sf-hz__item.sf-visible .sf-hz__card .sf-card__title { opacity:1; transform:none; transition-delay: calc(var(--nd,.15s) + .2s); }
.sf-hz__item.sf-visible .sf-hz__card .sf-card__text  { opacity:1; transform:none; transition-delay: calc(var(--nd,.15s) + .3s); }
.sf-hz__item.sf-visible .sf-hz__card .sf-card__tag   { opacity:1; transform:none; transition-delay: calc(var(--nd,.15s) + .4s); }

/* Hint scroll */
.sf-hz__hint {
  text-align: center;
  margin-top: 18px;
  padding: 0 24px;
  font-size: 11px;
  color: rgba(255,255,255,.25);
  letter-spacing: .04em;
  user-select: none;
}

/* Tema chiaro */
.sf-section.sf-theme-light .sf-hz__node-dot { background: #fff; border-color: #ccc; }
.sf-section.sf-theme-light .sf-hz__item.sf-visible .sf-hz__node-dot { background: var(--sf-accent); border-color: var(--sf-accent); }

/* Responsive */
@media (max-width: 768px) {
  .sf-hz__item { flex: 0 0 280px; min-width: 280px; }
  .sf-hz__card { padding: 16px 14px; }
  .sf-hz__card .sf-card__title { font-size: .95rem; }
  .sf-hz__card .sf-card__text  { font-size: 13px; }
}

/* ── Override font card orizzontali ────────────────────── */
.sf-hz__card .sf-card__title {
  font-size: 1.05rem;
  line-height: 1.3;
  margin-bottom: 10px;
}
.sf-hz__card .sf-card__step {
  font-size: .68rem;
  margin-bottom: 8px;
}
.sf-hz__card .sf-card__text {
  font-size: 14px;
  line-height: 1.65;
}
.sf-hz__card .sf-card__tag {
  margin-top: 12px;
  font-size: .62rem;
}

/* Timeline orizzontale: full width senza padding laterale */
.sf-section--horizontal {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.sf-section--horizontal .sf-header {
  padding: 0 24px;
}