/*
 * ImperialCraft - animazioni e luci.
 * Tutto quello che si muove da solo parte solo se JavaScript è attivo (classe .js su <html>)
 * e si spegne con "riduci movimento" del sistema operativo.
 */

/* ---------- passaggio tra le pagine ---------- */

@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: .3s ease both svanisci;
}

::view-transition-new(root) {
	animation: .45s ease both appari;
}

@keyframes svanisci {
	to {
		opacity: 0;
	}
}

@keyframes appari {
	from {
		opacity: 0;
	}
}

/* ---------- comparsa allo scorrimento ---------- */

.js [data-rivela] {
	opacity: 0;
	translate: 0 30px;
	transition:
		opacity .9s cubic-bezier(.2, .8, .2, 1) var(--ritardo, 0s),
		translate .9s cubic-bezier(.2, .8, .2, 1) var(--ritardo, 0s),
		scale .9s cubic-bezier(.2, .8, .2, 1) var(--ritardo, 0s),
		transform .5s cubic-bezier(.2, .8, .2, 1),
		box-shadow .4s;
}

.js [data-rivela="sinistra"] {
	translate: -44px 0;
}

.js [data-rivela="destra"] {
	translate: 44px 0;
}

.js [data-rivela="zoom"] {
	translate: none;
	scale: .9;
}

.js [data-rivela].vista {
	opacity: 1;
	translate: none;
	scale: none;
}

/* ---------- titoli d'oro che luccicano ---------- */

.oro-vivo {
	background: linear-gradient(100deg, #c08f3e 0%, #f2d68f 22%, #fff7dc 30%, #f2d68f 38%, #c99a45 55%, #f2d68f 78%, #c08f3e 100%);
	background-size: 300% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.js .oro-vivo {
	animation: luccichio 9s linear infinite;
}

@keyframes luccichio {
	to {
		background-position: -200% 0;
	}
}

/* ---------- apertura ---------- */

.js .eroe-sfondo {
	translate: 0 calc(var(--parallasse, 0) * 1px);
}

.js .eroe-sfondo img {
	transform-origin: 50% 100%;
	animation: respiro 28s ease-in-out infinite alternate;
}

@keyframes respiro {
	from {
		transform: scale(1.03);
	}

	to {
		transform: scale(1.13) translateY(-1.5%);
	}
}

.nebbia {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
	width: 200%;
	height: 48%;
	pointer-events: none;
	background:
		radial-gradient(ellipse 18% 40% at 10% 75%, rgba(233, 220, 192, .13), transparent 70%),
		radial-gradient(ellipse 22% 35% at 32% 85%, rgba(233, 220, 192, .10), transparent 70%),
		radial-gradient(ellipse 16% 45% at 55% 72%, rgba(233, 220, 192, .12), transparent 70%),
		radial-gradient(ellipse 24% 38% at 78% 88%, rgba(233, 220, 192, .09), transparent 70%),
		radial-gradient(ellipse 18% 40% at 98% 75%, rgba(233, 220, 192, .13), transparent 70%);
	filter: blur(6px);
}

.nebbia.lenta {
	height: 36%;
	opacity: .8;
}

.js .nebbia {
	animation: nebbia 70s linear infinite;
}

.js .nebbia.lenta {
	animation-duration: 110s;
	animation-direction: reverse;
}

@keyframes nebbia {
	to {
		transform: translateX(-50%);
	}
}

.js .stendardo-telo {
	animation: ondeggia 6.5s ease-in-out infinite;
}

.js .stendardo.dx .stendardo-telo {
	animation-delay: -3.2s;
	animation-duration: 7.2s;
}

@keyframes ondeggia {
	0%,
	100% {
		transform: rotate(-1.8deg) skewX(.8deg);
	}

	50% {
		transform: rotate(1.8deg) skewX(-.8deg);
	}
}

.js .stendardo {
	animation: cala 1.6s .2s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes cala {
	from {
		translate: 0 -110%;
	}
}

/* aura dietro lo stemma */
.eroe-logo {
	position: relative;
	display: inline-block;
}

.eroe-logo::before {
	content: "";
	position: absolute;
	inset: -30%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(242, 214, 143, .38), rgba(212, 174, 98, .12) 40%, transparent 68%);
	pointer-events: none;
}

.js .eroe-logo::before {
	animation: aura 5s ease-in-out infinite;
}

@keyframes aura {
	0%,
	100% {
		opacity: .55;
		transform: scale(.92);
	}

	50% {
		opacity: 1;
		transform: scale(1.06);
	}
}

/* sequenza d'ingresso */
.js .entrata {
	animation: entrata 1s var(--d, 0s) cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes entrata {
	from {
		opacity: 0;
		translate: 0 24px;
		filter: blur(6px);
	}
}

/* il titolo grande sta in uno <span>: l'ombra (filter) va sull'h1, l'oro e la maschera sullo span,
   altrimenti Chrome disegna l'ombra come un rettangolo */
.eroe h1 .oro-vivo,
.pagina-testata h1 .oro-vivo {
	display: inline-block;
	padding: 0 .06em .08em;
}

.js .eroe h1 .oro-vivo,
.js .pagina-testata h1 .oro-vivo {
	-webkit-mask-image: linear-gradient(90deg, #000 34%, transparent 66%);
	mask-image: linear-gradient(90deg, #000 34%, transparent 66%);
	-webkit-mask-size: 300% 100%;
	mask-size: 300% 100%;
	animation:
		svela 1.8s var(--d, .25s) cubic-bezier(.3, .7, .2, 1) both,
		luccichio 9s 2.2s linear infinite;
}

@keyframes svela {
	from {
		-webkit-mask-position: 100% 0;
		mask-position: 100% 0;
		letter-spacing: .1em;
	}

	to {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
		letter-spacing: .01em;
	}
}

.js .scorri .icona {
	animation: rimbalza 2.2s ease-in-out infinite;
}

@keyframes rimbalza {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(7px);
	}
}

/* punto dello stato: pulsa se il server è acceso */
.js .stato:not(.spento) .stato-punto {
	animation: pulsa 2s ease-out infinite;
}

@keyframes pulsa {
	0% {
		box-shadow: 0 0 0 0 rgba(143, 207, 122, .7);
	}

	100% {
		box-shadow: 0 0 0 10px rgba(143, 207, 122, 0);
	}
}

/* ---------- luce che passa sui bottoni ---------- */

.bottone::after,
.targa::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -70%;
	width: 45%;
	pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255, 245, 220, .3), transparent);
	transform: skewX(-20deg);
	transition: left .75s ease;
}

.targa {
	overflow: hidden;
}

.bottone:hover::after,
.targa:hover::after {
	left: 135%;
}

.scintilla {
	position: absolute;
	z-index: 2;
	left: var(--x);
	top: var(--y);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--oro-luce);
	box-shadow: 0 0 8px 2px rgba(242, 214, 143, .8);
	pointer-events: none;
	animation: scintilla .9s ease-out forwards;
}

@keyframes scintilla {
	to {
		opacity: 0;
		transform: translate(var(--dx), var(--dy)) scale(.2);
	}
}

/* ---------- fregi e sentieri che si disegnano ---------- */

.js .fregio .disegna {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.8s cubic-bezier(.4, .1, .2, 1) .1s;
}

.js .fregio.vista .disegna {
	stroke-dashoffset: 0;
}

.js .viaggio::after {
	transform: scaleX(0);
	transition: transform 2.8s cubic-bezier(.4, .1, .2, 1) .3s;
}

.js .viaggio.vista::after {
	transform: none;
}

.js .fregio .centro {
	opacity: 0;
	transform: scale(.4);
	transform-box: fill-box;
	transform-origin: center;
	transition: opacity .6s .9s, transform .8s .9s cubic-bezier(.3, 1.6, .5, 1);
}

.js .fregio.vista .centro {
	opacity: 1;
	transform: none;
}

/* ---------- stemmi, tappe, schede ---------- */

.stemma-scudo {
	transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
}

.stemma:hover .stemma-scudo {
	transform: translateY(-6px) rotate(-3deg);
}

.js .stemma-scudo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 200, .35) 50%, transparent 65%);
	background-size: 250% 100%;
	background-position: 150% 0;
	animation: riflesso-scudo 6s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * .8s);
}

@keyframes riflesso-scudo {
	0%,
	60% {
		background-position: 150% 0;
	}

	100% {
		background-position: -50% 0;
	}
}

.tappa-segno {
	transition: transform .4s cubic-bezier(.3, 1.4, .5, 1), box-shadow .4s;
}

.tappa:hover .tappa-segno {
	transform: translateY(-6px) scale(1.06);
	box-shadow: 0 0 0 2px var(--oro-luce), 0 0 0 6px rgba(21, 15, 11, .95), 0 0 0 7px rgba(242, 214, 143, .6), 0 0 26px rgba(242, 214, 143, .35);
}

.js .tappa.finale .tappa-segno {
	animation: brace 3s ease-in-out infinite;
}

@keyframes brace {
	0%,
	100% {
		box-shadow: 0 0 0 2px var(--oro), 0 0 0 6px rgba(21, 15, 11, .95), 0 0 0 7px rgba(212, 174, 98, .35), 0 0 12px rgba(255, 90, 31, .25);
	}

	50% {
		box-shadow: 0 0 0 2px var(--oro-luce), 0 0 0 6px rgba(21, 15, 11, .95), 0 0 0 7px rgba(242, 214, 143, .5), 0 0 30px rgba(255, 90, 31, .55);
	}
}

/* ---------- boss ---------- */

.boss:hover {
	box-shadow: var(--cornice), 0 22px 48px rgba(0, 0, 0, .65), 0 0 36px color-mix(in srgb, var(--tinta) 32%, transparent);
}

.boss:hover .boss-riflesso {
	opacity: 1;
}

.boss:not(.sigillato):hover .boss-ritratto img,
.boss.sigillato:has(.sigillo[open]):hover .boss-ritratto img {
	transform: scale(1.06);
}

.boss:hover .boss-livello {
	animation: oscilla .9s ease-in-out;
}

@keyframes oscilla {
	0%,
	100% {
		rotate: 0deg;
	}

	30% {
		rotate: -6deg;
	}

	65% {
		rotate: 4deg;
	}
}

/* la cera si spezza in due */
.cera-meta {
	transition: transform .65s cubic-bezier(.5, 0, .8, .4), opacity .65s ease-in;
}

.cera .icona {
	transition: opacity .3s;
}

.sigillo.rompe .cera-meta.sx {
	opacity: 0;
	transform: translate(-16px, 10px) rotate(-34deg);
}

.sigillo.rompe .cera-meta.dx {
	opacity: 0;
	transform: translate(16px, 10px) rotate(34deg);
}

.sigillo.rompe .cera .icona {
	opacity: 0;
}

.js .boss.sigillato:not(:has(.sigillo[open])) .cera {
	animation: cera 2.8s ease-in-out infinite;
}

@keyframes cera {
	0%,
	100% {
		filter: drop-shadow(0 0 0 rgba(231, 103, 90, 0));
	}

	50% {
		filter: drop-shadow(0 0 10px rgba(231, 103, 90, .65));
	}
}

.boss.lampo .boss-riflesso {
	animation: lampo 1.4s ease-out;
}

@keyframes lampo {
	0% {
		opacity: 0;
		background: radial-gradient(circle at 50% 45%, rgba(255, 214, 140, .9), rgba(255, 120, 40, .3) 40%, transparent 70%);
	}

	18% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		background: radial-gradient(circle at 50% 45%, rgba(255, 214, 140, .9), rgba(255, 120, 40, .3) 40%, transparent 70%);
	}
}

.boss.lampo .sigillo[open] > :not(summary) {
	animation: entrata .9s .15s cubic-bezier(.2, .8, .2, 1) both;
}

/* ---------- l'isola ---------- */

.js .carta-isola .carta-scritta {
	opacity: 0;
	scale: .6;
	transition: opacity .5s, scale .6s cubic-bezier(.3, 1.6, .5, 1);
	transition-delay: calc(var(--i, 0) * 110ms + .3s);
}

.js .carta-isola.vista .carta-scritta {
	opacity: 1;
	scale: 1;
}

.carta-scritta.accesa {
	color: var(--oro-luce);
	animation: lampeggia 1.2s ease-out 2;
}

@keyframes lampeggia {
	50% {
		scale: 1.3;
	}
}

.js .carta-isola::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 40%, rgba(255, 240, 200, .14) 50%, transparent 60%);
	background-size: 300% 100%;
	background-position: 120% 0;
	/* il riflesso passa solo sul plastico, non sullo sfondo trasparente */
	-webkit-mask: url("../img/isola.webp") center / 100% 100% no-repeat;
	mask: url("../img/isola.webp") center / 100% 100% no-repeat;
	animation: riflesso-carta 9s ease-in-out infinite;
}

@keyframes riflesso-carta {
	0%,
	55% {
		background-position: 120% 0;
	}

	100% {
		background-position: -20% 0;
	}
}

/* ---------- guida e regolamento ---------- */

.js .fasce .fascia-barra {
	transform: scaleX(0);
	transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 90ms + .2s);
}

.js .fasce.vista .fascia-barra {
	transform: none;
}

.js .hud-barra.vivace span {
	animation: barra-viva 3.6s ease-in-out infinite alternate;
}

@keyframes barra-viva {
	from {
		width: var(--pieno);
	}

	to {
		width: var(--meno, 20%);
	}
}

.domanda[open] .domanda-risposta {
	animation: entrata .45s cubic-bezier(.2, .8, .2, 1) both;
}

.capitolo-titolo .segno {
	transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
}

.capitolo:hover .capitolo-titolo .segno {
	transform: rotate(-10deg) scale(1.06);
}

/* ---------- chi preferisce poco movimento ---------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}

	.js [data-rivela] {
		opacity: 1;
		translate: none;
		scale: none;
	}

	.nebbia,
	.braci {
		display: none;
	}
}

/* bussola che gira mentre la mappa dal vivo si carica */
.js .mappa-stato .icona {
	animation: gira 4s linear infinite;
}

@keyframes gira {
	to {
		rotate: 360deg;
	}
}