/*!
 * You by editings 1.0.4 — editings.eu
 */

:root {
	--yb-ink: #000;
	--yb-paper: #F9F8F5;
	--yb-blue: #0072FF;
	--yb-green: #00CB91;
	--yb-yellow: #FFCE00;
	--yb-red: #FF000C;
	--yb-text: #292929;
	--yb-font-head: Epilogue, "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--yb-font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------------- Cursore nativo nascosto ---------------- */

html.yb-active,
html.yb-active *,
html.yb-active *::before,
html.yb-active *::after {
	cursor: none !important;
}

/* Nei campi di testo resta il cursore di sistema (serve per vedere dove si scrive) */
html.yb-active input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]):not([type=range]):not([type=color]):not([type=file]),
html.yb-active textarea,
html.yb-active select,
html.yb-active option,
html.yb-active [contenteditable=""],
html.yb-active [contenteditable="true"] {
	cursor: auto !important;
}

/* ---------------- Cursore in stile Figma ---------------- */

.yb-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483647;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s ease;
	will-change: transform;
}

/* Il cursore vive nel "top layer" del browser: azzero gli stili predefiniti dei popover */
.yb-cursor[popover] {
	inset: auto;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.yb-cursor.is-visible { opacity: 1; }

.yb-cursor__pointer {
	position: absolute;
	display: block;
	line-height: 0;
	/* rilascio con un piccolo rimbalzo */
	transition: transform .35s cubic-bezier(.3, 1.8, .5, 1), color .2s ease;
}

.yb-cursor__pointer svg {
	display: block;
	overflow: visible;
}

.yb-cursor.is-down .yb-cursor__pointer {
	transform: scale(1.35);
	transition-duration: .12s, .2s;
	transition-timing-function: ease-out, ease;
}

/* Onda del clic, nel colore del puntatore */
.yb-ripple {
	position: absolute;
	left: -22px;
	top: -22px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 3px solid currentColor;
	box-shadow: 0 0 0 1.5px var(--yb-ink), inset 0 0 0 1.5px var(--yb-ink);
	pointer-events: none;
	animation: yb-ripple .6s cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes yb-ripple {
	0%   { transform: scale(.2); opacity: 1; }
	100% { transform: scale(1.4); opacity: 0; }
}

/* Freccia di default, manina sopra link e pulsanti */
.yb-cursor__pointer--hand { visibility: hidden; }
.yb-cursor.is-hand .yb-cursor__pointer--hand { visibility: visible; }
.yb-cursor.is-hand .yb-cursor__pointer--arrow { visibility: hidden; }

.yb-cursor__label {
	position: absolute;
	left: var(--yb-lx, 16px);
	top: var(--yb-ly, 18px);
	white-space: nowrap;
	padding: 4px 9px;
	border: 2px solid var(--yb-ink);
	border-radius: 4px 10px 10px 10px;
	box-shadow: 2px 2px 0 var(--yb-ink);
	font: 700 13px/1.25 var(--yb-font-body);
	letter-spacing: .01em;
	transition: background-color .2s ease, color .2s ease;
}

.yb-cursor.is-hand .yb-cursor__label {
	left: var(--yb-hlx, 20px);
	top: var(--yb-hly, 26px);
}

.yb-cursor__label[hidden] { display: none; }
.yb-cursor__label.is-placeholder { font-style: italic; font-weight: 600; }

/* ---------------- Velo rosso semitrasparente dietro la finestra ---------------- */

.yb-backdrop {
	position: fixed;
	inset: 0;
	z-index: 2147483645;
	overflow: hidden;
	/* Velo scuro in alto che lascia intravedere il sito */
	background: linear-gradient(to bottom, rgba(3, 6, 18, .62) 0%, rgba(3, 6, 18, .40) 55%, rgba(3, 6, 18, .25) 100%);
	opacity: 0;
	transition: opacity .4s ease;
}

/* Bagliore dal basso con i colori editings: blu, rosso, giallo, verde */
.yb-backdrop::before,
.yb-backdrop::after {
	content: "";
	position: absolute;
	left: -10%;
	right: -10%;
	bottom: -18vh;
	height: 80vh;
	pointer-events: none;
	filter: blur(60px);
}

.yb-backdrop::before {
	background:
		radial-gradient(40% 60% at 12% 85%, rgba(0, 114, 255, 1), transparent 70%),
		radial-gradient(30% 50% at 36% 82%, rgba(255, 0, 12, .75), transparent 70%),
		radial-gradient(32% 60% at 60% 90%, rgba(255, 206, 0, 1), transparent 70%),
		radial-gradient(38% 60% at 88% 82%, rgba(0, 203, 145, 1), transparent 70%);
	opacity: 1;
	animation: yb-glow 14s ease-in-out infinite alternate;
}

/* Onda luminosa sottile, come nella linea dell'orizzonte */
.yb-backdrop::after {
	height: 36vh;
	bottom: -14vh;
	background: radial-gradient(60% 40% at 50% 70%, rgba(255, 255, 255, .35), transparent 70%);
	filter: blur(40px);
	animation: yb-wave 10s ease-in-out infinite alternate;
}

@keyframes yb-glow {
	0%   { transform: translateX(-4%) scaleY(1); }
	50%  { transform: translateX(3%) scaleY(1.12); }
	100% { transform: translateX(-2%) scaleY(.95); }
}

@keyframes yb-wave {
	0%   { transform: translateX(-12%); opacity: .6; }
	100% { transform: translateX(12%); opacity: 1; }
}

.yb-backdrop.is-open { opacity: 1; }
.yb-backdrop.is-closing { opacity: 0; pointer-events: none; transition-duration: .2s; }

/* ---------------- Finestra di benvenuto (neo-brutalista) ---------------- */

.yb-welcome {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 2147483646;
	width: min(420px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	transform: translate(-50%, -50%) translate(0, 14px) rotate(-1.5deg);
	opacity: 0;
	transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1);
	font-family: var(--yb-font-body);
	color: var(--yb-text);
	text-align: left;
}

.yb-welcome.is-open {
	opacity: 1;
	transform: translate(-50%, -50%);
}

.yb-welcome.is-closing {
	opacity: 0;
	transform: translate(-50%, -50%) scale(.94);
	transition-duration: .2s;
	pointer-events: none;
}

.yb-welcome *,
.yb-welcome *::before,
.yb-welcome *::after { box-sizing: border-box; }

.yb-card {
	margin: 0 8px 8px 0;
	background: var(--yb-paper);
	border: 3px solid var(--yb-ink);
	border-radius: 14px;
	box-shadow: 8px 8px 0 var(--yb-ink);
	overflow: hidden;
}

.yb-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px 8px 14px;
	background: var(--yb-yellow);
	border-bottom: 3px solid var(--yb-ink);
}

.yb-bar__tag {
	font: 800 14px/1 var(--yb-font-head);
	letter-spacing: .01em;
	color: var(--yb-ink);
}

.yb-close {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	background: #fff;
	color: var(--yb-ink);
	border: 2px solid var(--yb-ink);
	border-radius: 8px;
	box-shadow: 2px 2px 0 var(--yb-ink);
	transition: transform .1s ease, box-shadow .1s ease, background .15s ease;
}

.yb-close:hover { background: var(--yb-red); color: #fff; }
.yb-close:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--yb-ink); }
.yb-close:focus-visible { outline: 3px solid var(--yb-blue); outline-offset: 2px; }

.yb-body { padding: 18px 18px 20px; }

.yb-title {
	margin: 0 0 6px;
	padding: 0;
	font: 800 24px/1.1 var(--yb-font-head);
	letter-spacing: -.02em;
	color: var(--yb-ink);
	text-transform: none;
}

.yb-subtitle {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--yb-text);
}

.yb-label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font: 800 14px/1.2 var(--yb-font-head);
	letter-spacing: 0;
	color: var(--yb-ink);
}

.yb-input {
	display: block;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 2.5px solid var(--yb-ink);
	border-radius: 10px;
	background: #fff;
	color: var(--yb-ink);
	font: 600 15px/1 var(--yb-font-body);
	box-shadow: 3px 3px 0 var(--yb-ink);
	outline: none;
	transition: box-shadow .12s ease, transform .12s ease;
}

.yb-input::placeholder { color: #8a8a8a; font-weight: 500; }

.yb-input:focus {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--yb-blue);
}

.yb-input[aria-invalid="true"] { box-shadow: 4px 4px 0 var(--yb-red); }

.yb-error {
	min-height: 16px;
	margin: 6px 0 8px;
	font-size: 12px;
	font-weight: 600;
	color: #c4000a;
}

.yb-colors {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.yb-swatches {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 9px 10px;
	padding: 0 3px 3px 0;
}

.yb-swatch-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.yb-swatch {
	width: 100%;
	aspect-ratio: 1;
	margin: 0;
	border: 2.5px solid var(--yb-ink);
	border-radius: 8px;
	background: var(--yb-swatch);
	box-shadow: 2px 2px 0 var(--yb-ink);
	transition: transform .1s ease, box-shadow .1s ease;
}

.yb-swatch:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--yb-ink); }

.yb-swatch-input:checked + .yb-swatch {
	transform: translate(2px, 2px);
	box-shadow: 0 0 0 var(--yb-ink), inset 0 0 0 3px #fff;
}

.yb-swatch-input:focus-visible + .yb-swatch {
	outline: 3px solid var(--yb-blue);
	outline-offset: 3px;
}

.yb-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

.yb-button {
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 18px;
	background: #0072FF;
	color: #fff;
	border: 2.5px solid var(--yb-ink);
	border-radius: 10px;
	box-shadow: 4px 4px 0 var(--yb-ink);
	font: 800 15px/1 var(--yb-font-head);
	letter-spacing: .01em;
	transition: transform .1s ease, box-shadow .1s ease;
}

.yb-button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--yb-ink); }
.yb-button:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--yb-ink); }
.yb-button:focus-visible { outline: 3px solid var(--yb-yellow); outline-offset: 3px; }

/* "Non voglio presentarmi": blocchetto rosso giocattoloso, sempre visibile */
.yb-skip {
	position: relative;
	margin: 0;
	width: 100%;
	padding: 0 12px;
	height: 42px;
	background: #FF000C;
	color: #fff;
	border: 2.5px solid var(--yb-ink);
	border-radius: 10px;
	box-shadow: 3px 3px 0 var(--yb-ink);
	font: 800 14px/1 var(--yb-font-head);
	letter-spacing: .01em;
	transform: none;
	transition: transform .25s cubic-bezier(.3, 1.8, .5, 1), box-shadow .1s ease;
}

.yb-skip:hover {
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--yb-ink);
	animation: yb-wiggle .45s ease-in-out;
}

.yb-skip:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--yb-ink); animation: none; }
.yb-skip:focus-visible { outline: 3px solid var(--yb-yellow); outline-offset: 3px; }

@keyframes yb-wiggle {
	0%   { transform: translate(0, 0); }
	40%  { transform: translate(-3px, -4px); }
	70%  { transform: translate(-1px, -1px); }
	100% { transform: translate(-2px, -2px); }
}

@media (prefers-reduced-motion: reduce) {
	.yb-welcome, .yb-backdrop, .yb-backdrop::before, .yb-backdrop::after, .yb-cursor, .yb-cursor__pointer, .yb-button, .yb-input, .yb-swatch, .yb-close, .yb-skip { transition: none; animation: none; }
}

/* Testi centrati */
.yb-title,
.yb-subtitle,
.yb-label,
.yb-input,
.yb-error {
	text-align: center;
}

.yb-colors > .yb-label {
	width: 100%;
	text-align: center;
}

/* ---------------- Rettangolo in basso per cambiare nome e colore ---------------- */

.yb-pill {
	position: fixed;
	left: 50%;
	bottom: 18px;
	z-index: 2147483640;
	width: max-content;
	max-width: calc(100vw - 32px);
	margin: 0;
	padding: 6px 14px;
	background: #fff;
	color: var(--yb-ink);
	border: 2px solid var(--yb-ink);
	border-radius: 999px;
	box-shadow: 3px 3px 0 var(--yb-ink);
	font: 700 12.5px/1.3 var(--yb-font-body);
	text-align: center;
	letter-spacing: 0;
	text-transform: none;
	transform: translate(-50%, calc(100% + 30px));
	opacity: 0;
	pointer-events: none;
	/* discesa rapida quando si scorre in basso */
	transition: transform .35s cubic-bezier(.5, 0, .75, 0), opacity .3s ease, box-shadow .12s ease, background-color .3s ease, color .3s ease;
}

.yb-pill.is-shown {
	transform: translate(-50%, 0);
	opacity: 1;
	pointer-events: auto;
	transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), opacity .7s ease, box-shadow .12s ease, background-color .3s ease, color .3s ease;
}

.yb-pill.is-shown.is-settled {
	transition: transform .15s ease, opacity .2s ease, box-shadow .12s ease, background-color .3s ease, color .3s ease;
}

.yb-pill.is-shown:hover {
	transform: translate(calc(-50% - 2px), -2px);
	box-shadow: 5px 5px 0 var(--yb-ink);
}

.yb-pill.is-shown:active {
	transform: translate(calc(-50% + 3px), 3px);
	box-shadow: 0 0 0 var(--yb-ink);
}

.yb-pill:focus-visible { outline: 3px solid var(--yb-blue); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.yb-pill { transition: opacity .2s ease; }
}

/* ---------------- Testo evidenziato col colore del puntatore ---------------- */

html.yb-sel ::selection {
	background-color: var(--yb-sel-bg);
	color: var(--yb-sel-fg);
}

html.yb-sel ::-moz-selection {
	background-color: var(--yb-sel-bg);
	color: var(--yb-sel-fg);
}

/* Testo dei pulsanti sempre bianco, anche se il tema del sito prova a cambiarlo */
.yb-welcome .yb-button,
.yb-welcome .yb-button:hover,
.yb-welcome .yb-button:focus,
.yb-welcome .yb-button:active,
.yb-welcome .yb-skip,
.yb-welcome .yb-skip:hover,
.yb-welcome .yb-skip:focus,
.yb-welcome .yb-skip:active {
	color: #fff !important;
	-webkit-text-fill-color: #fff;
	text-decoration: none !important;
	text-shadow: none !important;
}

/* Puntatore di colore scuro: contorni bianchi per staccarsi dallo sfondo */
.yb-cursor.is-dark .yb-outline { stroke: #fff; }
.yb-cursor.is-dark .yb-outline--fill { fill: #fff; }
.yb-cursor.is-dark .yb-cursor__label {
	border-color: #fff;
	box-shadow: 2px 2px 0 #fff, 2px 2px 0 1.5px var(--yb-ink);
}
.yb-cursor.is-dark .yb-ripple {
	box-shadow: 0 0 0 1.5px #fff, inset 0 0 0 1.5px #fff;
}