/* ==========================================================================
   Premium Animations — Studio Medico Rizzo Trichini
   Versione: 1.1.0
   File: assets/css/premium-animations.css
   Tema figlio: hello-theme-child
   --------------------------------------------------------------------------
   Nota: tutte le regole che nascondono un elemento sono attive SOLO quando
   <html> ha la classe .pa-ready (aggiunta via JS). Se il JS non parte, il
   sito resta perfettamente visibile.
   ========================================================================== */

:root {
	--pa-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--pa-ease-soft: cubic-bezier(0.16, 0.84, 0.44, 1);
	--pa-dur: 900ms;
	--pa-dur-fast: 420ms;
	--pa-stagger: 90ms;
	--pa-brand: var(--e-global-color-accent, #21855A);
	--pa-brand-2: var(--e-global-color-primary, #00947B);
	--pa-brand-deep: var(--e-global-color-secondary, #214433);
	--pa-shadow: 0 18px 50px -18px rgba(13, 27, 42, 0.28);
	--pa-shadow-soft: 0 8px 24px -12px rgba(13, 27, 42, 0.18);
}

/* --------------------------------------------------------------------------
   1. Reveal allo scroll
   -------------------------------------------------------------------------- */

.pa-ready [data-pa-anim] {
	will-change: transform, opacity, filter;
	transition:
		opacity var(--pa-dur) var(--pa-ease),
		transform var(--pa-dur) var(--pa-ease),
		filter var(--pa-dur) var(--pa-ease),
		clip-path var(--pa-dur) var(--pa-ease);
	transition-delay: calc(var(--pa-i, 0) * var(--pa-stagger));
}

.pa-ready [data-pa-anim]:not(.pa-in) {
	opacity: 0;
}

.pa-ready [data-pa-anim="fade-up"]:not(.pa-in) {
	transform: translate3d(0, 42px, 0);
}

/* Titolo con split: si rivela tramite le parole, non con l'opacità del blocco */
.pa-ready [data-pa-anim="none-split"]:not(.pa-in) {
	opacity: 1;
}

.pa-ready [data-pa-anim="fade-down"]:not(.pa-in) {
	transform: translate3d(0, -32px, 0);
}

.pa-ready [data-pa-anim="fade-left"]:not(.pa-in) {
	transform: translate3d(-48px, 0, 0);
}

.pa-ready [data-pa-anim="fade-right"]:not(.pa-in) {
	transform: translate3d(48px, 0, 0);
}

.pa-ready [data-pa-anim="zoom-in"]:not(.pa-in) {
	transform: scale(0.9);
}

.pa-ready [data-pa-anim="rise"]:not(.pa-in) {
	transform: translate3d(0, 56px, 0) scale(0.965);
	filter: blur(8px);
}

.pa-ready [data-pa-anim="blur-in"]:not(.pa-in) {
	filter: blur(14px);
	transform: translate3d(0, 18px, 0);
}

/* Rivelazione a sipario: l'immagine si scopre dal basso e si stabilizza.
   Nessun arrotondamento negli angoli: il clip-path resta neutro e viene
   rimosso del tutto a fine animazione (.pa-done), così non altera il
   raggio dei bordi impostato in Elementor. */
.pa-ready [data-pa-anim="curtain"] {
	clip-path: inset(0 0 0 0);
}

.pa-ready [data-pa-anim="curtain"]:not(.pa-in) {
	clip-path: inset(0 0 100% 0);
	opacity: 1;
	transform: scale(1.04);
}

.pa-ready [data-pa-anim="curtain"].pa-done {
	clip-path: none;
}

/* Solo dissolvenza: per gli elementi con contesto 3D proprio (flip box),
   dove qualsiasi transform sull'antenato romperebbe il rendering. */
.pa-ready [data-pa-anim="fade-only"]:not(.pa-in) {
	transform: none;
}

.pa-ready [data-pa-anim].pa-in {
	opacity: 1;
	transform: none;
	filter: none;
}

/* Fine animazione: libera la GPU */
.pa-ready [data-pa-anim].pa-done {
	will-change: auto;
	transition-delay: 0ms;
}

/* --------------------------------------------------------------------------
   2. Titoli: rivelazione parola per parola con maschera
   -------------------------------------------------------------------------- */

.pa-split {
	display: inline;
}

.pa-split .pa-line {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}

.pa-split .pa-word {
	display: inline-block;
	transform: translate3d(0, 110%, 0) rotate(3deg);
	opacity: 0;
	transition:
		transform 1000ms var(--pa-ease),
		opacity 700ms var(--pa-ease);
	transition-delay: calc(var(--pa-wi, 0) * 55ms);
}

.pa-split.pa-in .pa-word,
.pa-in .pa-split .pa-word {
	transform: none;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   3. Bottoni premium: sheen, lift, magnetismo, ripple
   -------------------------------------------------------------------------- */

.pa-ready .elementor-button,
.pa-ready .ekit-btn,
.pa-ready .md-review-carousel__cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transform: translate3d(var(--pa-mx, 0px), var(--pa-my, 0px), 0);
	transition:
		transform 400ms var(--pa-ease),
		box-shadow 400ms var(--pa-ease),
		filter 400ms var(--pa-ease);
}

.pa-ready .elementor-button::after,
.pa-ready .ekit-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		115deg,
		transparent 20%,
		rgba(255, 255, 255, 0.38) 48%,
		transparent 76%
	);
	transform: translateX(-120%);
	transition: transform 900ms var(--pa-ease);
	pointer-events: none;
}

.pa-ready .elementor-button:hover::after,
.pa-ready .ekit-btn:hover::after {
	transform: translateX(120%);
}

.pa-ready .elementor-button:hover,
.pa-ready .ekit-btn:hover,
.pa-ready .md-review-carousel__cta:hover {
	box-shadow: 0 16px 32px -14px rgba(33, 133, 90, 0.65);
	filter: saturate(1.08);
}

.pa-ready .elementor-button:active {
	transform: translate3d(var(--pa-mx, 0px), var(--pa-my, 0px), 0) scale(0.97);
}

.pa-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	transform: scale(0);
	animation: pa-ripple 620ms var(--pa-ease-soft) forwards;
	pointer-events: none;
	z-index: -1;
}

@keyframes pa-ripple {
	to {
		transform: scale(2.6);
		opacity: 0;
	}
}

/* --------------------------------------------------------------------------
   4. Card / icon box: lift, bordo luminoso, spotlight che segue il mouse
   -------------------------------------------------------------------------- */

.pa-ready .pa-card {
	position: relative;
	transition:
		transform 550ms var(--pa-ease),
		box-shadow 550ms var(--pa-ease);
}

.pa-ready .pa-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		320px circle at var(--pa-px, 50%) var(--pa-py, 0%),
		rgba(0, 148, 123, 0.14),
		transparent 62%
	);
	opacity: 0;
	transition: opacity 450ms var(--pa-ease);
	pointer-events: none;
	z-index: 0;
}

.pa-ready .pa-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--pa-shadow);
}

.pa-ready .pa-card:hover::before {
	opacity: 1;
}

.pa-ready .pa-card > * {
	position: relative;
	z-index: 1;
}

/* Icona che "respira" all'hover della card */
.pa-ready .pa-card .elementskit-info-box-icon,
.pa-ready .pa-card .ekit-wid-con .elementskit-box-header i,
.pa-ready .pa-card .elementor-icon {
	transition: transform 600ms var(--pa-ease);
	display: inline-block;
}

.pa-ready .pa-card:hover .elementskit-info-box-icon,
.pa-ready .pa-card:hover .ekit-wid-con .elementskit-box-header i,
.pa-ready .pa-card:hover .elementor-icon {
	transform: translateY(-4px) scale(1.12) rotate(-4deg);
}

/* --------------------------------------------------------------------------
   5. Immagini: zoom lento + riflesso che attraversa
   -------------------------------------------------------------------------- */

.pa-ready .pa-img-fx {
	position: relative;
	overflow: hidden;
	border-radius: inherit;
	display: block;
}

.pa-ready .pa-img-fx img {
	transition: transform 1200ms var(--pa-ease), filter 900ms var(--pa-ease);
	will-change: transform;
	display: block;
}

.pa-ready .pa-img-fx:hover img {
	transform: scale(1.07);
	filter: saturate(1.06) contrast(1.02);
}

.pa-ready .pa-img-fx::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 55%;
	left: -70%;
	background: linear-gradient(
		100deg,
		transparent,
		rgba(255, 255, 255, 0.32),
		transparent
	);
	transform: skewX(-18deg);
	transition: left 1100ms var(--pa-ease);
	pointer-events: none;
}

.pa-ready .pa-img-fx:hover::after {
	left: 130%;
}

/* --------------------------------------------------------------------------
   6. Parallasse
   -------------------------------------------------------------------------- */

.pa-ready [data-pa-parallax] {
	will-change: transform;
	transform: translate3d(0, var(--pa-shift, 0px), 0);
}

.pa-ready .pa-parallax-bg {
	background-attachment: scroll;
	background-position: center calc(50% + var(--pa-shift, 0px));
}

/* --------------------------------------------------------------------------
   7. Header sticky dinamico
   -------------------------------------------------------------------------- */

/* L'header è gestito dallo sticky di Elementor: NON tocchiamo transform,
   position o dimensioni del logo, altrimenti al rientro in cima si vede
   uno scatto. Interveniamo solo su ombra e sfocatura, e soltanto mentre
   la barra è effettivamente in stato sticky. */
.pa-ready header.elementor-location-header .elementor-sticky {
	transition:
		box-shadow 450ms var(--pa-ease),
		backdrop-filter 450ms var(--pa-ease);
}

.pa-scrolled header.elementor-location-header .elementor-sticky--effects {
	box-shadow: 0 10px 30px -18px rgba(13, 27, 42, 0.45);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
}

/* Nasconde l'header scendendo, lo ripropone risalendo (opzione disattivata
   di default: hideHeaderOnScrollDown) */
.pa-ready header.elementor-location-header .elementor-sticky--effects {
	transition:
		box-shadow 450ms var(--pa-ease),
		backdrop-filter 450ms var(--pa-ease),
		transform 450ms var(--pa-ease);
}

.pa-hide-header header.elementor-location-header .elementor-sticky--effects {
	transform: translate3d(0, -110%, 0);
}

/* Sottolineatura animata voci di menu */
.pa-ready .elementor-nav-menu .elementor-item {
	position: relative;
}

.pa-ready .elementor-nav-menu > li > a.elementor-item::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--pa-brand-2), var(--pa-brand));
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 420ms var(--pa-ease);
}

.pa-ready .elementor-nav-menu > li > a.elementor-item:hover::before,
.pa-ready .elementor-nav-menu > li > a.elementor-item-active::before {
	transform: scaleX(1);
	transform-origin: left center;
}

/* --------------------------------------------------------------------------
   8. Barra di avanzamento lettura
   -------------------------------------------------------------------------- */

.pa-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background: linear-gradient(90deg, var(--pa-brand-2), var(--pa-brand), var(--pa-brand-deep));
	z-index: 99990;
	pointer-events: none;
}

.admin-bar .pa-progress {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .pa-progress {
		top: 46px;
	}
}

/* --------------------------------------------------------------------------
   9. Gradiente animato (utility: aggiungere la classe in Elementor)
   -------------------------------------------------------------------------- */

.pa-gradient-move {
	background-size: 220% 220% !important;
	animation: pa-gradient 16s ease infinite;
}

@keyframes pa-gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Testo con gradiente scorrevole (utility) */
.pa-text-gradient {
	background: linear-gradient(100deg, var(--pa-brand-2), var(--pa-brand-deep), var(--pa-brand));
	background-size: 220% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: pa-gradient 9s linear infinite;
}

/* --------------------------------------------------------------------------
   10. Contatori
   -------------------------------------------------------------------------- */

.pa-count {
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   11. Carosello recensioni
   -------------------------------------------------------------------------- */

.pa-ready .md-review-carousel__arrow {
	transition: transform 350ms var(--pa-ease), box-shadow 350ms var(--pa-ease);
}

.pa-ready .md-review-carousel__arrow:hover:not([disabled]) {
	transform: translateY(-2px) scale(1.08);
	box-shadow: var(--pa-shadow-soft);
}

/* --------------------------------------------------------------------------
   12. Flip box: nessun transform esterno, solo curva di rotazione più morbida
   --------------------------------------------------------------------------
   Il flip box costruisce un contesto 3D (transform-style: preserve-3d +
   backface-visibility: hidden). Un transform applicato al widget o a un
   contenitore appiattisce il contesto e fa comparire la faccia posteriore
   specchiata. Qui blindiamo il comportamento a prescindere dalle classi. */

.pa-ready .elementor-widget-flip-box,
.pa-ready .elementor-widget-flip-box [data-pa-anim],
.pa-ready .elementor-widget-flip-box .pa-card,
.pa-ready .elementor-widget-flip-box .pa-card:hover {
	transform: none !important;
	filter: none !important;
	clip-path: none !important;
}

.pa-ready .elementor-widget-flip-box .pa-card::before {
	display: none !important;
}

.pa-ready .elementor-flip-box__layer {
	transition-timing-function: var(--pa-ease) !important;
}

/* --------------------------------------------------------------------------
   13. Accessibilità e ambienti particolari
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.pa-ready [data-pa-anim],
	.pa-ready [data-pa-anim]:not(.pa-in),
	.pa-split .pa-word {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		transition: none !important;
	}

	.pa-gradient-move,
	.pa-text-gradient {
		animation: none !important;
	}

	.pa-progress {
		display: none;
	}
}

/* In editor Elementor non si anima nulla */
body.elementor-editor-active [data-pa-anim],
body.elementor-editor-preview [data-pa-anim] {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
	clip-path: none !important;
}

/* Stampa */
@media print {
	[data-pa-anim] {
		opacity: 1 !important;
		transform: none !important;
	}
	.pa-progress {
		display: none !important;
	}
}