/* ==========================================================================
   Antea · Materiali: vetro, cristallo e luce prismatica
   Tre materiali: .a-glass (chiaro), .a-glass--dark (scuro), .a-crystal (azioni principali).
   Il riflesso segue il puntatore tramite --mx/--my impostate da main.js.
   ========================================================================== */

.a-glass {
	position: relative;
	isolation: isolate;
	background: var(--a-glass-bg);
	-webkit-backdrop-filter: var(--a-glass-blur);
	backdrop-filter: var(--a-glass-blur);
	border: var(--a-border) solid var(--a-glass-border);
	box-shadow: var(--a-glass-shadow);
	border-radius: var(--a-r-lg);
	color: var(--a-fg);
}

.a-glass--strong { background: var(--a-glass-bg-strong); }
.a-glass--soft { background: var(--a-glass-bg-soft); }
.a-glass--blur-strong { -webkit-backdrop-filter: var(--a-glass-blur-strong); backdrop-filter: var(--a-glass-blur-strong); }
.a-glass--pill { border-radius: var(--a-pill); }
.a-glass--sm { border-radius: var(--a-r); }
.a-glass--xl { border-radius: var(--a-r-xl); }

/* Riflesso speculare che segue il puntatore. */
.a-glass::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: -1;
	background:
		radial-gradient(260px 180px at var(--mx, 30%) var(--my, 0%), var(--a-glass-highlight), transparent 62%);
	opacity: var(--a-glass-glow, .55);
	transition: opacity var(--a-dur) var(--a-ease);
}

/* Bordo luminoso in alto: lo spessore del vetro. */
.a-glass::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	padding: 1px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .15) 40%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .25));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: .9;
}

.a-glass--dark,
.a-dark .a-glass {
	background: var(--a-glass-dark-bg);
	border-color: var(--a-glass-dark-border);
	box-shadow: var(--a-glass-dark-shadow);
	color: var(--a-silk);
	--a-glass-highlight: rgba(255, 255, 255, .28);
}

.a-glass--dark::after,
.a-dark .a-glass::after {
	background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .08));
}

/* Rifrazione liquida: solo dove il browser la rende bene (classe aggiunta da main.js). */
.has-liquid .a-glass--liquid {
	-webkit-backdrop-filter: var(--a-glass-blur) url(#a-liquid);
	backdrop-filter: var(--a-glass-blur) url(#a-liquid);
}

/* Cristallo: materiale delle azioni principali, bianco denso con bordo prismatico. */
.a-crystal {
	position: relative;
	isolation: isolate;
	background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .86));
	color: var(--a-ink);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 1) inset,
		0 -2px 6px rgba(215, 190, 191, .35) inset,
		0 18px 40px -18px rgba(25, 25, 26, .35);
	border-radius: var(--a-pill);
}

.a-crystal::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: var(--a-prism-conic);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: .55;
	pointer-events: none;
	animation: a-angle var(--a-dur-prism) linear infinite;
}

/* ---- Luce prismatica ---- */

/* Fondale: macchie di luce colorata, lente, sfocate. Da mettere dentro un contenitore con overflow: hidden. */
.a-prism-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
	contain: strict;
}

.a-prism-bg::before,
.a-prism-bg::after {
	content: "";
	position: absolute;
	width: 60vmax;
	height: 60vmax;
	border-radius: 50%;
	filter: blur(70px);
	opacity: var(--a-prism-opacity, .32);
	mix-blend-mode: screen;
	will-change: transform;
}

.a-prism-bg::before {
	top: -20vmax;
	left: -10vmax;
	background: var(--a-prism-conic);
	animation: a-drift var(--a-dur-prism) var(--a-ease) infinite alternate;
}

.a-prism-bg::after {
	bottom: -25vmax;
	right: -15vmax;
	width: 50vmax;
	height: 50vmax;
	background: conic-gradient(from 180deg, var(--a-prism-4), var(--a-prism-5), var(--a-prism-1), var(--a-prism-2), var(--a-prism-4));
	animation: a-drift calc(var(--a-dur-prism) * 1.3) var(--a-ease) infinite alternate-reverse;
}

.a-dark .a-prism-bg::before,
.a-dark .a-prism-bg::after,
[data-tone="dark"] .a-prism-bg::before,
[data-tone="dark"] .a-prism-bg::after {
	opacity: var(--a-prism-opacity, .34);
	mix-blend-mode: screen;
}

.a-prism-bg--soft::before,
.a-prism-bg--soft::after {
	opacity: .14;
}

/* Raggio: una lama di luce diagonale (come nelle foto del brand). */
.a-prism-ray {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.a-prism-ray::before {
	content: "";
	position: absolute;
	top: -30%;
	left: 55%;
	width: 18vw;
	min-width: 120px;
	height: 160%;
	transform: rotate(24deg);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35) 30%, var(--a-prism-2) 45%, var(--a-prism-3) 52%, var(--a-prism-4) 58%, rgba(255, 255, 255, .3) 70%, transparent);
	filter: blur(28px);
	opacity: .55;
	animation: a-ray 14s var(--a-ease) infinite alternate;
}

/* Riflesso al passaggio: usato da card e pulsanti. */
.a-glint {
	position: relative;
	overflow: hidden;
}

.a-glint::after {
	content: "";
	position: absolute;
	inset: -40% auto -40% -60%;
	width: 50%;
	transform: skewX(-18deg) translateX(-120%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55) 35%, rgba(255, 214, 223, .45) 48%, rgba(211, 230, 255, .45) 56%, rgba(255, 255, 255, .5) 65%, transparent);
	mix-blend-mode: screen;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--a-dur-fast) var(--a-ease);
}

.a-glint:hover::after,
.a-glint:focus-visible::after,
.a-glint.is-glinting::after {
	opacity: 1;
	animation: a-glint 900ms var(--a-ease) 1;
}

/* Alone prismatico attorno a un elemento (focus, hover sui pulsanti principali). */
.a-halo {
	position: relative;
}

.a-halo::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: inherit;
	background: var(--a-prism-conic);
	filter: blur(14px);
	opacity: 0;
	z-index: -1;
	transition: opacity var(--a-dur) var(--a-ease);
	animation: a-angle var(--a-dur-prism) linear infinite;
}

.a-halo:hover::before,
.a-halo:focus-visible::before {
	opacity: .55;
}

/* Il pittogramma che respira: caricamenti e stati vuoti. */
.a-mark-pulse {
	display: inline-block;
	width: 44px;
	color: var(--a-fg);
	animation: a-breathe 2.4s var(--a-ease) infinite;
}

.a-mark-pulse svg { width: 100%; height: auto; }

/* ---- Keyframe ---- */
@keyframes a-spin { to { transform: rotate(360deg); } }

@keyframes a-drift {
	0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
	50% { transform: translate3d(8vmax, 6vmax, 0) scale(1.08) rotate(40deg); }
	100% { transform: translate3d(-4vmax, 10vmax, 0) scale(.96) rotate(90deg); }
}

@keyframes a-ray {
	0% { transform: rotate(24deg) translateX(-8vw); opacity: .35; }
	100% { transform: rotate(20deg) translateX(10vw); opacity: .6; }
}

@keyframes a-glint {
	0% { transform: skewX(-18deg) translateX(-120%); }
	100% { transform: skewX(-18deg) translateX(320%); }
}

@keyframes a-breathe {
	0%, 100% { transform: scale(1); opacity: .85; filter: drop-shadow(0 0 0 rgba(215, 190, 191, 0)); }
	50% { transform: scale(1.06); opacity: 1; filter: drop-shadow(0 6px 18px rgba(215, 190, 191, .6)); }
}

/* ---- Ripieghi ---- */

/* Browser senza backdrop-filter: superfici quasi opache. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.a-glass { background: rgba(255, 255, 255, .96); }
	.a-glass--dark, .a-dark .a-glass { background: rgba(32, 32, 32, .97); }
}

/* Chi chiede meno trasparenza: vetro opaco, nessun riflesso. */
@media (prefers-reduced-transparency: reduce) {
	.a-glass, .a-glass--dark, .a-dark .a-glass, .a-crystal {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: var(--a-surface);
	}
	.a-glass::before, .a-prism-bg, .a-prism-ray, .a-glint::after, .a-halo::before { display: none; }
}

/* Chi chiede meno movimento: luce ferma. */
@media (prefers-reduced-motion: reduce) {
	.a-prism-bg::before, .a-prism-bg::after, .a-prism-ray::before, .a-crystal::after, .a-halo::before, .a-text-prism {
		animation: none;
	}
	.a-glint:hover::after { animation: none; opacity: 0; }
}

/* Dispositivi senza puntatore fine: il riflesso resta fisso in alto a sinistra. */
@media (pointer: coarse) {
	.a-glass::before { --mx: 25%; --my: 0%; }
}