/**
 * Telecom Security SA — Security Signal Rail CSS (v1.7.0)
 *
 * Stile per la barra laterale contestuale minimale:
 * - Visibile unicamente su schermi desktop ampi (>= 1366px) con spazio laterale
 * - Nessun riquadro di sfondo, nessuna ombra o bordo scatolare
 * - Tipografia verticale leggibile dal basso verso l'alto (writing-mode: vertical-rl)
 * - Avanzamento fluido dello scroll con hardware-acceleration (scaleY e translateY)
 * - Visibilità continua anche nelle transizioni e nel Metodo
 * - Transizioni cromatiche armoniose tra temi chiari e scuri
 * - Supporto completo per prefers-reduced-motion
 *
 * @version 1.7.0
 */

/* Nascosta di default; la pagina Servizi la riattiva da tablet in su. */
.ts-signal-rail {
	display: none;
}

/* The Services viewer keeps its navigator functional on tablet. */
@media (min-width: 768px) and (max-width: 1365px) {
	body.ts-services-archive .ts-signal-rail {
		display: block;
		position: fixed;
		right: 7px;
		top: 50%;
		z-index: 850;
		transform: translateY(-50%);
		pointer-events: none;
		user-select: none;
		transition: opacity .35s ease, transform .35s ease;
	}
	body.ts-services-archive .ts-signal-rail.is-footer-hidden {
		opacity: 0;
		transform: translateY(-50%) translateX(10px);
	}
	body.ts-services-archive .ts-signal-rail.is-footer-hidden * {
		pointer-events: none !important;
	}
	body.ts-services-archive .ts-signal-rail__inner {
		display: flex;
		align-items: flex-start;
		gap: 5px;
	}
	body.ts-services-archive .ts-signal-rail__label-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 180px;
	}
	body.ts-services-archive .ts-signal-rail__label {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		color: var(--ts-text-muted, #64748b);
		font: 600 9px/1 var(--ts-font, sans-serif);
		letter-spacing: .12em;
		text-transform: uppercase;
		white-space: nowrap;
	}
	body.ts-services-archive .ts-signal-rail__axis {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}
	body.ts-services-archive .ts-signal-rail__track-container {
		position: relative;
		display: flex;
		justify-content: center;
		width: 10px;
		height: 180px;
	}
	body.ts-services-archive .ts-signal-rail__track {
		position: relative;
		width: 2px;
		height: 100%;
		background: rgba(15,23,42,.14);
	}
	body.ts-services-archive .ts-signal-rail__progress {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: var(--ts-signal, #ea580c);
		transform-origin: top;
		transform: scaleY(0);
		transition: transform .12s linear;
	}
	body.ts-services-archive .ts-signal-rail__dot {
		position: absolute;
		top: 0;
		left: 50%;
		width: 7px;
		height: 7px;
		margin-top: -3.5px;
		border-radius: 50%;
		background: var(--ts-signal, #ea580c);
		transform: translate(-50%,0);
		transition: transform .12s linear;
	}
	body.ts-services-archive .ts-signal-rail__arrow-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--ts-text-muted, #64748b);
		pointer-events: auto;
		cursor: pointer;
	}
	body.ts-services-archive .ts-signal-rail__arrow-btn:focus-visible {
		outline: 2px solid var(--ts-signal, #ea580c);
		outline-offset: 1px;
	}
	body.ts-services-archive .ts-signal-rail__arrow-btn.is-at-bottom .ts-signal-rail__arrow-icon {
		transform: rotate(180deg);
	}
}

body.ts-services-archive .ts-signal-rail__label-wrap {
	margin-top: 42px;
}

body.ts-services-archive .ts-signal-rail__arrow-btn--prev .ts-signal-rail__arrow-icon {
	transform: rotate(180deg);
}

body.ts-services-archive .ts-signal-rail__arrow-btn:disabled {
	opacity: .28;
	cursor: default;
}

/* Attiva soltanto quando esiste spazio laterale reale a destra del container (>= 1366px) */
@media (min-width: 1366px) and (hover: hover) {
	.ts-signal-rail {
		display: block;
		position: fixed;
		right: clamp(12px, calc((100vw - 1300px) / 2 - 50px), 36px);
		top: 50%;
		transform: translateY(-50%);
		z-index: 850;
		pointer-events: none;
		user-select: none;
		opacity: 1;
		transition: opacity 0.4s ease, transform 0.4s ease;
	}

	.ts-signal-rail.is-footer-hidden {
		opacity: 0;
		transform: translateY(-50%) translateX(12px);
	}

	.ts-signal-rail.is-footer-hidden * {
		pointer-events: none !important;
	}

	.ts-signal-rail__inner {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 8px;
		pointer-events: none;
	}

	/* ==========================================================================
	   1. ETICHETTA CONTESTUALE VERTICALE (A SINISTRA DELL'ASSE)
	   ========================================================================== */
	.ts-signal-rail__label-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 220px; /* Perfettamente coordinata con l'altezza costante della linea */
		pointer-events: auto;
		cursor: default;
	}

	.ts-signal-rail__label {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		text-transform: uppercase;
		font-family: var(--ts-font, 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif);
		font-size: 0.6875rem; /* ~11px */
		font-weight: 600;
		letter-spacing: 0.16em;
		line-height: 1;
		white-space: nowrap;
		transition: color 0.25s ease;
	}

	/* ==========================================================================
	   2. ASSE VERTICALE: TRACCIA A LUNGHEZZA FISSA INVARIANTE & FRECCIA
	   ========================================================================== */
	.ts-signal-rail__axis {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 14px;
		pointer-events: none;
	}

	.ts-signal-rail__track-container {
		width: 12px;
		height: 220px; /* Lunghezza SEMPRE costante: non si accorcia MAI per parole lunghe */
		display: flex;
		justify-content: center;
		position: relative;
		padding: 0;
		pointer-events: none;
	}

	.ts-signal-rail__track {
		position: relative;
		width: 2px;
		height: 100%;
		border-radius: 2px;
		transition: background-color 0.35s ease;
	}

	/* Porzione arancione di avanzamento lungo la pagina */
	.ts-signal-rail__progress {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--ts-signal, #ea580c);
		border-radius: 2px;
		transform-origin: top center;
		transform: scaleY(0);
		transition: transform 0.12s linear;
		will-change: transform;
	}

	/* Punto arancione sul livello corrente */
	.ts-signal-rail__dot {
		position: absolute;
		top: 0;
		left: 50%;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background-color: var(--ts-signal, #ea580c);
		transform: translate(-50%, 0);
		margin-top: -3.5px;
		box-shadow: 0 0 0 0 rgba(234, 88, 12, 0);
		transition: transform 0.12s linear;
		will-change: transform;
	}

	/* ==========================================================================
	   3. PULSANTE FRECCIA INFERIORE
	   ========================================================================== */
	.ts-signal-rail__arrow-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		padding: 0;
		margin: 0;
		border: none;
		background: transparent;
		cursor: pointer;
		pointer-events: auto;
		border-radius: 50%;
		outline: none;
		transition: color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.ts-signal-rail__arrow-btn:focus-visible {
		outline: 2px solid var(--ts-signal, #ea580c);
		outline-offset: 2px;
	}

	.ts-signal-rail__arrow-icon {
		display: block;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	}

	/* Hover sulla freccia: spostamento di 3-4px verso il basso */
	.ts-signal-rail__arrow-btn:hover .ts-signal-rail__arrow-icon {
		transform: translateY(3px);
	}

	/* A fine pagina la freccia ruota di 180 gradi e punta verso l'alto */
	.ts-signal-rail__arrow-btn.is-at-bottom .ts-signal-rail__arrow-icon {
		transform: rotate(180deg);
	}

	.ts-signal-rail__arrow-btn.is-at-bottom:hover .ts-signal-rail__arrow-icon {
		transform: rotate(180deg) translateY(3px);
	}

	/* ==========================================================================
	   4. ADATTAMENTO CROMATICO: TEMA CHIARO VS TEMA SCURO
	   ========================================================================== */
	/* Sfondo Chiaro (default) */
	.ts-signal-rail[data-signal-theme="light"] .ts-signal-rail__label {
		color: var(--ts-text-muted, #64748b);
	}
	.ts-signal-rail[data-signal-theme="light"] .ts-signal-rail__track {
		background-color: rgba(15, 23, 42, 0.12);
	}
	.ts-signal-rail[data-signal-theme="light"] .ts-signal-rail__arrow-btn {
		color: var(--ts-text-muted, #64748b);
	}
	.ts-signal-rail[data-signal-theme="light"]:hover .ts-signal-rail__label {
		color: var(--ts-graphite-950, #060b17);
		opacity: 0.95;
	}
	.ts-signal-rail[data-signal-theme="light"]:hover .ts-signal-rail__arrow-btn {
		color: var(--ts-signal, #ea580c);
	}

	/* Sfondo Scuro (Hero Video e Footer) */
	.ts-signal-rail[data-signal-theme="dark"] .ts-signal-rail__label {
		color: rgba(255, 255, 255, 0.72);
	}
	.ts-signal-rail[data-signal-theme="dark"] .ts-signal-rail__track {
		background-color: rgba(255, 255, 255, 0.16);
	}
	.ts-signal-rail[data-signal-theme="dark"] .ts-signal-rail__arrow-btn {
		color: rgba(255, 255, 255, 0.72);
	}
	.ts-signal-rail[data-signal-theme="dark"]:hover .ts-signal-rail__label {
		color: rgba(255, 255, 255, 0.98);
		opacity: 1;
	}
	.ts-signal-rail[data-signal-theme="dark"]:hover .ts-signal-rail__arrow-btn {
		color: var(--ts-signal, #ea580c);
	}
}

@media (min-width: 1366px) and (hover: hover) {
	body.ts-services-archive .ts-signal-rail__arrow-btn--prev:hover .ts-signal-rail__arrow-icon {
		transform: rotate(180deg) translateY(3px);
	}
	body.ts-services-archive .ts-signal-rail__arrow-btn:disabled:hover .ts-signal-rail__arrow-icon {
		transform: none;
	}
	body.ts-services-archive .ts-signal-rail__arrow-btn--prev:disabled:hover .ts-signal-rail__arrow-icon {
		transform: rotate(180deg);
	}
}

/* ==========================================================================
   5. ACCESSIBILITÀ: PREFERS-REDUCED-MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ts-signal-rail,
	.ts-signal-rail__label,
	.ts-signal-rail__track,
	.ts-signal-rail__progress,
	.ts-signal-rail__dot,
	.ts-signal-rail__arrow-btn,
	.ts-signal-rail__arrow-icon {
		transition: none !important;
		animation: none !important;
	}

}