/* "Una giornata in azienda": scena isometrica della home (assets/art/saga.svg, assets/js/saga.js). */

.saga {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border: 1px solid rgba(140, 200, 255, 0.28);
	border-radius: 22px;
	background: radial-gradient(120% 90% at 50% 40%, #0d3157 0%, #061a31 70%);
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7), inset 0 0 90px rgba(0, 0, 0, 0.45);
	color: #fff;
}

.sgsvg {
	display: block;
	width: 100%;
	height: 100%;
}

.saga__cap {
	position: absolute;
	right: 24px;
	bottom: 22px;
	left: 24px;
	margin: 0;
	padding: 12px 18px;
	border-radius: 14px;
	background: rgba(4, 18, 36, 0.78);
	color: #fff;
	font-size: clamp(0.95rem, 1.5vw, 1.35rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.3;
	text-align: center;
	text-wrap: balance;
}

.saga__cap.is-in {
	animation: cc2-fade 0.8s ease both;
}

.saga__clock,
.saga__stat {
	position: absolute;
	top: 18px;
	padding: 7px 14px;
	border: 1px solid rgba(140, 200, 255, 0.4);
	border-radius: 999px;
	background: rgba(4, 18, 36, 0.78);
	font: 600 0.85rem var(--cc-mono);
	letter-spacing: 0.12em;
}

.saga__clock {
	left: 18px;
}

.saga__stat {
	right: 66px;
}

.saga__stat[data-tone="ok"] {
	border-color: #6fdc8c;
	color: #6fdc8c;
}

.saga__stat[data-tone="bad"] {
	border-color: #ff6b6b;
	color: #ff8f8f;
}

.saga__stat[data-tone="fix"] {
	border-color: #ffd37a;
	color: #ffd37a;
}

.saga__stat[data-tone="safe"] {
	border-color: #9fd2ff;
	color: #cfe8ff;
}

.saga__pause {
	position: absolute;
	top: 12px;
	right: 12px;
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(4, 18, 36, 0.78);
	color: #fff;
	cursor: pointer;
	place-items: center;
}

.saga.has-js .saga__pause {
	display: inline-grid;
}

.saga__pause:focus-visible {
	outline: 3px solid var(--cc2-hl);
	outline-offset: 2px;
}

.saga__pause .i-play,
.saga.is-paused .i-pause {
	display: none;
}

.saga.is-paused .i-play {
	display: block;
}

.saga.is-static .saga__pause {
	display: none;
}

/* Stati del disegno ----------------------------------------------------- */

.sgsvg [data-on] {
	transition: opacity 0.6s;
}

.sgsvg [data-on]:not(.on) {
	opacity: 0;
	visibility: hidden;
}

.sgsvg .ko,
.sgsvg .tint,
.sgsvg .alarm,
.sgsvg .smoke,
.sgsvg .mail,
.sgsvg .crack,
.sgsvg .quar,
.sgsvg .wv,
.sgsvg .bk {
	opacity: 0;
	transition: opacity 0.5s;
}

.sgsvg .is-down .ok,
.sgsvg .is-bad .ok {
	opacity: 0;
}

.sgsvg .is-down .ko,
.sgsvg .is-bad .ko,
.sgsvg .is-down .alarm,
.sgsvg .is-down .smoke,
.sgsvg .is-bad .crack {
	opacity: 1;
}

.sgsvg .room.is-down .tint {
	opacity: 0.2;
}

.sgsvg .pcwrap.is-bad .tint,
.sgsvg .inf.is-bad {
	opacity: 1;
}

.sgsvg .is-down .mail {
	opacity: 1;
	animation: cc2-fade 0.6s ease both;
}

.sgsvg .m1 { animation-delay: 1s; }
.sgsvg .m2 { animation-delay: 2s; }
.sgsvg .m3 { animation-delay: 3s; }
.sgsvg .m4 { animation-delay: 4s; }

.sgsvg .cab.is-down .cl {
	stroke: #566679;
}

.sgsvg .cab.is-down .pk {
	opacity: 0;
}

.sgsvg .wv.go {
	opacity: 1;
	stroke-dasharray: 0.14 2;
	stroke-dashoffset: 0.14;
	animation: sg-wave 4s linear forwards;
}

.sgsvg .quar.is-q {
	opacity: 1;
}

.sgsvg .bk.is-bk {
	opacity: 1;
}

.sgsvg .bkf {
	transform-box: fill-box;
	transform-origin: left center;
	transform: scaleX(0);
}

.sgsvg .bk.is-bk .bkf {
	animation: sg-fill 12s linear forwards;
}

/* Movimento continuo ---------------------------------------------------- */

.saga:not(.is-live) .sgsvg *,
.saga.is-paused .sgsvg * {
	animation-play-state: paused !important;
}

.sgsvg .pp {
	animation: sg-bob 1.7s ease-in-out infinite;
	animation-delay: var(--d, 0s);
	transform-box: fill-box;
	transform-origin: bottom center;
}

.sgsvg .is-down .pp {
	animation-play-state: paused;
}

.sgsvg .cab .pk {
	animation: sg-flow 1.6s linear infinite;
}

.sgsvg .inf {
	animation: sg-flow 0.7s linear infinite;
}

.sgsvg .belt {
	animation: sg-belt 5s linear infinite;
}

.sgsvg .fast .belt,
.saga.fast .belt {
	animation-duration: 2.6s;
}

.sgsvg .is-down .belt,
.sgsvg .is-down .arm,
.sgsvg .is-down .tr {
	animation-play-state: paused;
}

.sgsvg .arm {
	transform-origin: 0 0;
	animation: sg-arm 2.4s ease-in-out infinite alternate;
	animation-delay: var(--d, 0s);
}

.sgsvg .tr {
	animation: sg-truck 11s ease-in-out infinite;
}

.sgsvg .led {
	animation: sg-led 1.8s steps(2, jump-none) infinite;
}

.sgsvg .l1 { animation-delay: 0.45s; }
.sgsvg .l2 { animation-delay: 0.9s; }

.sgsvg .alarm .halo {
	transform-box: fill-box;
	transform-origin: center;
	animation: sg-halo 1.4s ease-in-out infinite;
}

.sgsvg .sm {
	transform-box: fill-box;
	transform-origin: center;
	animation: sg-smoke 2.4s ease-out infinite;
}

.sgsvg .s2 { animation-delay: 0.8s; }
.sgsvg .s3 { animation-delay: 1.6s; }

.sgsvg .spark {
	animation: sg-led 0.9s steps(2, jump-none) infinite;
}

.sgsvg .hub.on .hubi {
	animation: sg-drop 1.1s cubic-bezier(0.3, 0, 0.55, 1) both, sg-hover 3.2s ease-in-out 1.1s infinite;
}

.sgsvg .atk {
	opacity: 0;
	animation: sg-strike 5s ease-in infinite;
	animation-delay: var(--d, 0s);
}

.sgsvg .atk2 {
	animation: sg-strike2 1.6s ease-in infinite;
	animation-delay: var(--d, 0s);
}

@keyframes sg-bob {
	50% { transform: translateY(-2px); }
}

@keyframes sg-flow {
	to { stroke-dashoffset: -24; }
}

@keyframes sg-wave {
	to { stroke-dashoffset: -1.2; }
}

@keyframes sg-fill {
	to { transform: scaleX(1); }
}

@keyframes sg-belt {
	to { transform: translate(27.9px, 16.1px); }
}

@keyframes sg-arm {
	from { transform: rotate(-9deg); }
	to { transform: rotate(12deg); }
}

@keyframes sg-truck {
	0%, 6% { transform: translate(0, 0); }
	40%, 62% { transform: translate(-67px, 39px); }
	96%, 100% { transform: translate(0, 0); }
}

@keyframes sg-led {
	50% { opacity: 0.25; }
}

@keyframes sg-halo {
	0%, 100% { opacity: 0.1; transform: scale(0.8); }
	50% { opacity: 1; transform: scale(1.2); }
}

@keyframes sg-smoke {
	0% { opacity: 0.7; transform: translateY(0) scale(0.6); }
	100% { opacity: 0; transform: translateY(-44px) scale(1.6); }
}

@keyframes sg-drop {
	0% { opacity: 0; transform: translateY(-340px); }
	55% { opacity: 1; transform: translateY(0); }
	75% { transform: translateY(-16px); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes sg-hover {
	50% { transform: translateY(-6px); }
}

@keyframes sg-strike {
	0% { opacity: 0; transform: translate(0, 0); }
	8% { opacity: 1; }
	62% { opacity: 1; transform: translate(var(--dx), var(--dy)); }
	66%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(2.4); }
}

@keyframes sg-strike2 {
	0% { opacity: 1; transform: translate(0, 0); }
	100% { opacity: 1; transform: translate(var(--dx), var(--dy)); }
}

.saga.is-static .sgsvg *,
.saga.is-static {
	animation: none !important;
}

.sgsvg .sg-t {
	fill: #fff;
	font: 600 10px var(--cc-mono);
	letter-spacing: 0.1em;
}

.sgsvg .sg-n {
	fill: #fff;
	font: 700 8px var(--cc-mono);
}

.sgsvg .sg-q {
	fill: #ff6b6b;
	font: 700 16px var(--cc-mono);
}

/* Hero della home: testo a sinistra (un quarto), scena a destra (tre quarti), alta come lo schermo. */
@media (min-width: 1025px) {
	.cc2-hero--cinema .cc2-hero__grid {
		grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr);
		gap: 28px;
		padding-top: 96px;
		padding-bottom: 56px;
	}

	.cc2-hero--cinema h1 {
		font-size: clamp(2.2rem, 3.6vw, 3.9rem);
	}

	.cc2-hero--cinema .cc2-hero__sub {
		font-size: 1rem;
	}

	.cc2-hero--cinema .cc2-hero__cta {
		flex-direction: column;
		align-items: flex-start;
	}

	.cc2-hero--cinema .saga {
		justify-self: end;
		width: min(100%, calc((100svh - 160px) * 1.7778));
	}
}

@media (max-width: 700px) {
	.saga {
		aspect-ratio: 4 / 3;
		border-radius: 16px;
	}

	.saga__cap {
		right: 10px;
		bottom: 10px;
		left: 10px;
		padding: 9px 12px;
	}

	.saga__stat {
		display: none;
	}
}

/* Colpo di scena: disturbo da segnale video e toni più spenti nella linea "senza CodyCloud". */
.saga__glitch {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0 2px, transparent 2px 6px);
	mix-blend-mode: screen;
}

.saga__glitch.is-g {
	animation: sg-glitch 0.9s steps(6, jump-none) 4 both;
}

.saga .sgsvg {
	transition: filter 0.8s;
}

.saga.dark .sgsvg {
	filter: saturate(0.65) brightness(0.86);
}

.sgsvg .steam {
	animation: sg-steam 2.2s ease-in-out infinite;
}

@keyframes sg-glitch {
	0% { opacity: 0.9; transform: translateX(-6px); }
	30% { opacity: 0.2; transform: translateX(8px); }
	60% { opacity: 0.8; transform: translateX(-3px); }
	100% { opacity: 0; transform: none; }
}

@keyframes sg-steam {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 1; }
}