/* grafica di login, recupero password e pagina dopo il primo accesso del portale paziente (anche nella app).
   Usato da agenda2/login/login.inc.php e agenda2/dati_mancanti.php */
/* LOGIN / RECUPERO PASSWORD del portale (anche dentro la app): card centrata, campi alti con etichetta sopra,
   bottone pieno. Solo grafica: id, campi e script restano quelli di prima */
.lg-card, .lg-card input, .lg-card .input-style span, .lg-card .uppercase { font-family: 'Noto Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important; }
.lg-card { box-sizing: border-box; width: min(420px, calc(100vw - 32px)) !important; max-width: none !important; margin: 0 auto !important; padding: 26px 24px 18px !important; background: #FFF !important; border-radius: 18px !important; box-shadow: 0 20px 50px rgba(0, 0, 0, .35) !important; font-family: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif; text-align: left; }
.lg-card > img.preload-image { display: block; width: 210px; max-width: 70%; height: auto; margin: 0 auto 6px !important; }
.lg-card .content { margin: 0 !important; padding: 0 !important; }
.lg-card .uppercase.font-700 { margin-top: 8px !important; color: #1f2933; font-size: 22px !important; font-weight: 700; text-transform: none !important; text-align: center; }
.lg-card .under-heading { margin: 4px 0 18px !important; color: #5f6b77; font-size: 14px !important; line-height: 1.45 !important; text-align: center; }
.lg-card .under-heading b { color: #1f2933; }
.lg-card .lg-intro { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #3c4650 !important; font-size: 15px !important; }
.lg-card .lg-pin { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: #f1f6ee; color: #3c6b33; font-size: 13px; }
.lg-card .lg-pin i { color: #2e9e3e; font-size: 12px; }
.lg-card .lg-pin-riga { margin: -6px 0 12px; } /* sotto il campo password */
.lg-card .lg-pin b { color: #2c5f24; }
.lg-card .lg-2righe { display: flex; flex-direction: column; gap: 2px; font-size: min(14px, 3.15vw); line-height: 1.4; } /* sempre 2 righe: sui telefoni stretti il testo si rimpicciolisce */
.lg-card .lg-2righe > span { white-space: nowrap; }
.lg-card .lg-blu { color: #2476c7 !important; }
/* campi: etichetta sopra, icona a sinistra dentro il campo */
.lg-card .input-style.has-icon { position: relative; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; height: auto !important; }
.lg-card .input-style.has-icon > span { position: static !important; display: block !important; opacity: 1 !important; margin: 0 0 6px !important; padding: 0 !important; background: none !important; color: #303740 !important; font-size: 13px !important; font-weight: 700 !important; transform: none !important; }
.lg-card .input-style.has-icon > em { display: none !important; }
.lg-card .input-style.has-icon > .input-icon { position: absolute !important; left: 14px !important; top: 39px !important; z-index: 2; margin: 0 !important; color: #8a95a1 !important; font-size: 15px !important; line-height: 1 !important; }
.lg-card .input-style.has-icon input { box-sizing: border-box; width: 100% !important; height: 50px !important; line-height: normal !important; margin: 0 !important; padding: 0 44px 0 40px !important; border: 1px solid #c9d1d9 !important; border-radius: 10px !important; background: #f7f9fb !important; color: #1f2933 !important; font-size: 17px !important; letter-spacing: .5px; }
.lg-card .input-style.has-icon input:focus { border-color: #2e9e3e !important; background: #FFF !important; box-shadow: 0 0 0 3px rgba(46, 158, 62, .18); outline: none; }
.lg-card #username, .lg-card #rec_codicefiscale { text-transform: uppercase; }
.lg-card #show_password_login, .lg-card #show_pwd1, .lg-card #show_pwd2 { top: 28px !important; right: 4px !important; z-index: 3 !important; display: grid; place-items: center; width: 42px; height: 50px; color: #5f6b77; font-size: 17px; }
/* ricorda i dati */
.lg-card .input-style:not(.has-icon) { display: flex; align-items: center; gap: 10px; margin: 2px 0 0 !important; padding: 0 !important; border: 0 !important; height: auto !important; }
.lg-card #ricorda_pw { flex: 0 0 auto; width: 20px !important; height: 20px !important; margin: 0 !important; accent-color: #2e9e3e; cursor: pointer; }
.lg-card .input-style:not(.has-icon) > span { position: static !important; opacity: 1 !important; color: #303740 !important; font-size: 14.5px !important; transform: none !important; }
/* bottoni */
.lg-card input.button { display: block; width: 100% !important; height: 52px !important; margin: 18px 0 0 !important; border: 0 !important; border-radius: 12px !important; color: #FFF !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: .6px; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.lg-card input.button.bg-green1-dark { background: #2e9e3e !important; }
.lg-card input.button.bg-blue2-dark { background: #2476c7 !important; }
.lg-card input.button:hover, .lg-card input.button:focus { filter: brightness(.94); outline: none; }
.lg-card .top-20.bottom-20 { margin: 16px 0 4px !important; text-align: center; }
.lg-card .top-20.bottom-20 a { display: inline-block !important; width: auto !important; padding: 8px 6px !important; background: none !important; color: #2476c7 !important; font-size: 14.5px !important; font-weight: 700 !important; text-transform: none !important; text-decoration: none; }
.lg-card .top-20.bottom-20 a:hover { text-decoration: underline; }
#informativa_banner { height: auto !important; padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box; background: rgba(0, 0, 0, .45) !important; color: rgba(255, 255, 255, .85); font-size: 11px !important; line-height: 1.35; }
@media (max-width: 480px) {
	.lg-card { padding: 22px 18px 14px !important; border-radius: 16px !important; }
	.lg-card .uppercase.font-700 { font-size: 20px !important; }
}

/* ===== pagina dopo il login col PIN (dati_mancanti.php): avviso GDPR, nuova password, email mancante ===== */
.lg-card .lg-eyebrow { display: block; margin: 6px 0 2px; color: #2e9e3e; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.lg-card .lg-titolo { margin: 0 0 6px !important; color: #1f2933; font-size: 22px !important; font-weight: 700; line-height: 1.25; text-align: center; text-transform: none !important; }
.lg-card .lg-testo { margin: 0 0 18px !important; color: #3c4650; font-size: 15px !important; line-height: 1.5 !important; text-align: center !important; }
.lg-card .lg-azioni { display: flex; gap: 10px; margin-top: 18px; }
.lg-card .lg-azioni .lg-btn { flex: 1 1 0; }
.lg-card .lg-btn { display: block; width: 100%; height: 52px; margin: 0; border: 0; border-radius: 12px; background: #2e9e3e; color: #FFF; font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: .5px; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.lg-card .lg-btn:hover, .lg-card .lg-btn:focus { filter: brightness(.94); outline: none; }
.lg-card .lg-btn--secondario { background: #FFF; color: #5f6b77; border: 1px solid #c9d1d9; box-shadow: none; }
/* requisiti della nuova password: pallino -> spunta verde / croce rossa (classi messe da PWD_CHK_FLY) */
.lg-card #CP { margin-top: 4px; padding: 12px 14px !important; border-radius: 12px; background: #f7f9fb; }
.lg-card #CP.CPOK { background: #eef8ec; }
.lg-card #CP.CPKO { background: #fdf1f0; }
.lg-card #CP > p { margin: 0 0 6px !important; color: #303740; font-size: 13.5px !important; font-weight: 700; }
.lg-card #li_pwd { margin: 0 0 0 22px !important; padding: 0 !important; }
.lg-card #li_pwd li { margin: 0 !important; padding: 3px 0; color: #3c4650; font-size: 14px !important; line-height: 1.35 !important; }
.lg-card #li_pwd .fa-li { top: 3px; }
.lg-card #li_pwd .classeLIsmall { font-size: 6px; color: #aab3bc; vertical-align: middle; }
/* simboli di esempio dei caratteri speciali */
.lg-card .lg-car { display: inline-block; min-width: 18px; margin: 0 2px; padding: 0 4px; border-radius: 5px; background: #e7f0fa; color: #1a5fa8; font-family: 'Noto Sans Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 13px; font-weight: 700; line-height: 18px; text-align: center; }
/* le due password coincidono (pwd_uguali() in dati_mancanti.php) */
.lg-card .lg-uguali { display: flex; align-items: center; gap: 8px; margin: 6px 0 0 2px; padding-top: 6px; border-top: 1px dashed #dde2e7; color: #3c4650; font-size: 14px; }
.lg-card .lg-uguali i { width: 14px; color: #aab3bc; font-size: 6px; text-align: center; }
.lg-card .lg-uguali.ok i { color: #2e9e3e; font-size: 13px; }
.lg-card .lg-uguali.ko i { color: #d93025; font-size: 13px; }
.lg-card .lg-uguali.ko span { color: #d93025; }
/* avviso (email mancante) */
.lg-card .lg-avviso { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; background: #fdf1f0; color: #9c2a20; font-size: 14px; line-height: 1.45; }
.lg-card .lg-avviso i { margin-top: 2px; font-size: 16px; }
@media (max-width: 480px) {
	.lg-card .lg-titolo { font-size: 20px !important; }
}

/* 23/10/26 recupero PIN: testi piu' grandi (lo usano persone anziane) */
#loginKO .lg-intro, #loginKO .lg-intro span { font-size: 16px !important; line-height: 1.5; }
#loginKO #rec_codicefiscale { font-size: 20px !important; letter-spacing: 1px; text-transform: uppercase; }
#loginKO #buttonGO { height: 52px !important; border-radius: 26px !important; font-size: 17px !important; }
/* 23/10/26 recupero password sul telefono: il testo a 16px con le righe "nowrap" usciva dal riquadro a destra e a sinistra.
   Qui le due frasi possono andare a capo e restano dentro la card */
#loginKO .lg-2righe { max-width: 100%; }
#loginKO .lg-2righe > span { white-space: normal !important; overflow-wrap: anywhere; text-align: center; }


/* 23/10/26 sfondo della pagina di accesso: al posto della foto di nuvole scurita, un'alba chiara e rassicurante
   (cielo azzurro che sfuma nel pesca), luci morbide che si spostano piano e il battito rosso del logo, fermo.
   Solo CSS, animazioni lente su transform. Vale per le schermate di login (#loginOK e #loginKO) */
.caption .caption-overlay.bg-black { opacity: 0 !important; }
.caption .caption-bg.bg-nuvole { background-image: none !important; overflow: hidden;
	background: radial-gradient(ellipse at 18% 12%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 45%),
		radial-gradient(ellipse at 85% 85%, rgba(255, 196, 170, .75) 0%, rgba(255, 196, 170, 0) 55%),
		linear-gradient(170deg, #CFEBFA 0%, #E6F3FB 38%, #FBEFE8 72%, #FFE2D2 100%) !important; }
.caption .caption-bg.bg-nuvole::before, .caption .caption-bg.bg-nuvole::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; pointer-events: none; }
.caption .caption-bg.bg-nuvole::before { width: 55vmax; height: 55vmax; left: -15vmax; top: -18vmax; background: rgba(120, 200, 245, .55); animation: lp-luce1 26s ease-in-out infinite; }
.caption .caption-bg.bg-nuvole::after { width: 45vmax; height: 45vmax; right: -12vmax; bottom: -14vmax; background: rgba(255, 170, 150, .5); animation: lp-luce2 32s ease-in-out infinite; }
/* battito del logo (rosso tenue), dietro la card */
.caption::after { content: ""; position: absolute; left: 0; right: 0; top: 66%; height: 110px; pointer-events: none; z-index: 1;
	background: linear-gradient(90deg, rgba(229, 57, 53, 0) 0%, rgba(229, 57, 53, .28) 25%, rgba(229, 57, 53, .45) 50%, rgba(229, 57, 53, .28) 75%, rgba(229, 57, 53, 0) 100%);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 H300 L320 70 L332 52 L344 70 L360 70 L376 14 L396 110 L412 42 L426 70 H760 L780 70 L792 52 L804 70 L820 70 L836 14 L856 110 L872 42 L886 70 H1200' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 H300 L320 70 L332 52 L344 70 L360 70 L376 14 L396 110 L412 42 L426 70 H760 L780 70 L792 52 L804 70 L820 70 L836 14 L856 110 L872 42 L886 70 H1200' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
@keyframes lp-luce1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(14vw, 10vh) scale(1.12); } }
@keyframes lp-luce2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-12vw, -8vh) scale(.92); } }
/* card bianca in rilievo sul fondo chiaro, banner in basso leggibile */
.lg-card { box-shadow: 0 24px 60px rgba(40, 70, 100, .18), 0 2px 8px rgba(40, 70, 100, .08) !important; }
#informativa_banner { background: rgba(255, 255, 255, .7) !important; color: #5f6b77 !important; }


/* 23/10/26 piu' emozionale: cuoricini rosa trasparenti che salgono piano come bolle (lo strato .caption-overlay, prima nero, ora
   trasparente con i cuori), raggi di luce dall'alto, un impulso luminoso che percorre il battito ogni 6 secondi e il cuore del logo
   che batte dolcemente. Tutto lento e morbido: deve dare calma e fiducia */
.caption .caption-overlay.bg-black { opacity: 1 !important; background: none !important; overflow: hidden; }
.caption .caption-overlay.bg-black::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 200%; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='1400'%3E%3Cpath transform='translate%2870 90%29 rotate%282%29 scale%281.062%29' d='M16 28C16 28 3.5 20.2 3.5 11.6 3.5 7.4 6.7 4.5 10.3 4.5 12.9 4.5 15 6 16 8.1 17 6 19.1 4.5 21.7 4.5 25.3 4.5 28.5 7.4 28.5 11.6 28.5 20.2 16 28 16 28Z' fill='%23FF9AA8' fill-opacity='0.16'/%3E%3Cpath transform='translate%28520 60%29 rotate%287%29 scale%280.562%29' d='M16 28C16 28 3.5 20.2 3.5 11.6 3.5 7.4 6.7 4.5 10.3 4.5 12.9 4.5 15 6 16 8.1 17 6 19.1 4.5 21.7 4.5 25.3 4.5 28.5 7.4 28.5 11.6 28.5 20.2 16 28 16 28Z' fill='%23FFC0C9' fill-opacity='0.22'/%3E%3Cpath transform='translate%28860 240%29 rotate%28-15%29 scale%281.438%29' d='M16 28C16 28 3.5 20.2 3.5 11.6 3.5 7.4 6.7 4.5 10.3 4.5 12.9 4.5 15 6 16 8.1 17 6 19.1 4.5 21.7 4.5 25.3 4.5 28.5 7.4 28.5 11.6 28.5 20.2 16 28 16 28Z' fill='%23FF7A8A' fill-opacity='0.12'/%3E%3Cpath transform='translate%28300 330%29 rotate%2816%29 scale%280.438%29' d='M16 28C16 28 3.5 20.2 3.5 11.6 3.5 7.4 6.7 4.5 10.3 4.5 12.9 4.5 15 6 16 8.1 17 6 19.1 4.5 21.7 4.5 25.3 4.5 28.5 7.4 28.5 11.6 28.5 20.2 16 28 16 28Z' fill='%23FF7A8A' fill-opacity='0.26'/%3E%3Cpath transform='translate%28700 520%29 rotate%285%29 scale%280.875%29' d='M16 28C16 28 3.5 20.2 3.5 11.6 3.5 7.4 6.7 4.5 10.3 4.5 12.9 4.5 15 6 16 8.1 17 6 19.1 4.5 21.7 4.5 25.3 4.5 28.5 7.4 28.5 11.6 28.5 20.2 16 28 16 28Z' fill='%23FF8796' fill-opacity='0.18'/%3E%3Cpath transform='translate%28120 640%29 rotate%28-15%29 scale%280.688%29' d='M16 28C16 28 3.5 20.2 3.5 11.6 3.5 7.4 6.7 4.5 10.3 4.5 12.9 4.5 15 6 16 8.1 17 6 19.1 4.5 21.7 4.5 25.3 4.5 28.5 7.4 28.5 11.6 28.5 20.2 16 28 16 28Z' fill='%23FF8796' fill-opacity='0.20'/%3E%3Cpath transform='translate%28450 780%29 rotate%28-5%29 scale%281.250%29' d='M16 28C16 28 3.5 20.2 3.5 11.6 3.5 7.4 6.7 4.5 10.3 4.5 12.9 4.5 15 6 16 8.1 17 6 19.1 4.5 21.7 4.5 25.3 4.5 28.5 7.4 28.5 11.6 28.5 20.2 16 28 16 28Z' fill='%23FF7A8A' fill-opacity='0.12'/%3E%3Cpath transform='translate%28980 700%29 rotate%28-13%29 scale%280.500%29' d='M16 28C16 28 3.5 20.2 3.5 11.6 3.5 7.4 6.7 4.5 10.3 4.5 12.9 4.5 15 6 16 8.1 17 6 19.1 4.5 21.7 4.5 25.3 4.5 28.5 7.4 28.5 11.6 28.5 20.2 16 28 16 28Z' fill='%23FFB3BE' fill-opacity='0.24'/%3E%3Cpath transform='translate%28240 980%29 rotate%288%29 scale%280.812%29' d='M16 28C16 28 3.5 20.2 3.5 11.6 3.5 7.4 6.7 4.5 10.3 4.5 12.9 4.5 15 6 16 8.1 17 6 19.1 4.5 21.7 4.5 25.3 4.5 28.5 7.4 28.5 11.6 28.5 20.2 16 28 16 28Z' fill='%23FF7A8A' fill-opacity='0.16'/%3E%3Cpath transform='translate%28800 1040%29 rotate%28-3%29 scale%280.625%29' d='M16 28C16 28 3.5 20.2 3.5 11.6 3.5 7.4 6.7 4.5 10.3 4.5 12.9 4.5 15 6 16 8.1 17 6 19.1 4.5 21.7 4.5 25.3 4.5 28.5 7.4 28.5 11.6 28.5 20.2 16 28 16 28Z' fill='%23FF7A8A' fill-opacity='0.20'/%3E%3Cpath transform='translate%28560 1240%29 rotate%2817%29 scale%281.125%29' d='M16 28C16 28 3.5 20.2 3.5 11.6 3.5 7.4 6.7 4.5 10.3 4.5 12.9 4.5 15 6 16 8.1 17 6 19.1 4.5 21.7 4.5 25.3 4.5 28.5 7.4 28.5 11.6 28.5 20.2 16 28 16 28Z' fill='%23FFB3BE' fill-opacity='0.14'/%3E%3Cpath transform='translate%2860 1180%29 rotate%28-15%29 scale%280.375%29' d='M16 28C16 28 3.5 20.2 3.5 11.6 3.5 7.4 6.7 4.5 10.3 4.5 12.9 4.5 15 6 16 8.1 17 6 19.1 4.5 21.7 4.5 25.3 4.5 28.5 7.4 28.5 11.6 28.5 20.2 16 28 16 28Z' fill='%23FF8796' fill-opacity='0.26'/%3E%3Cpath transform='translate%281020 1300%29 rotate%28-11%29 scale%280.938%29' d='M16 28C16 28 3.5 20.2 3.5 11.6 3.5 7.4 6.7 4.5 10.3 4.5 12.9 4.5 15 6 16 8.1 17 6 19.1 4.5 21.7 4.5 25.3 4.5 28.5 7.4 28.5 11.6 28.5 20.2 16 28 16 28Z' fill='%23FF9AA8' fill-opacity='0.14'/%3E%3C/svg%3E") repeat; background-size: 1100px 1400px; will-change: transform; animation: lp-cuori 90s linear infinite; }
.caption .caption-overlay.bg-black::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: repeating-conic-gradient(from 200deg at 22% -10%, rgba(255, 255, 255, .12) 0deg 3deg, rgba(255, 255, 255, 0) 3deg 12deg);
	-webkit-mask-image: radial-gradient(ellipse at 22% 0%, #000 0%, transparent 65%); mask-image: radial-gradient(ellipse at 22% 0%, #000 0%, transparent 65%);
	animation: lp-raggi 14s ease-in-out infinite; }
@keyframes lp-cuori { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes lp-raggi { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* impulso luminoso che scorre sul battito */
.caption::before { content: ""; position: absolute; left: 0; right: 0; top: 66%; height: 110px; pointer-events: none; z-index: 1;
	background: linear-gradient(90deg, rgba(255, 90, 100, 0) 0%, rgba(255, 90, 100, 0) 40%, #FF4D5E 49%, #FFFFFF 50%, rgba(255, 90, 100, 0) 51%, rgba(255, 90, 100, 0) 100%) no-repeat;
	background-size: 300% 100%; background-position: 100% 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 H300 L320 70 L332 52 L344 70 L360 70 L376 14 L396 110 L412 42 L426 70 H760 L780 70 L792 52 L804 70 L820 70 L836 14 L856 110 L872 42 L886 70 H1200' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 H300 L320 70 L332 52 L344 70 L360 70 L376 14 L396 110 L412 42 L426 70 H760 L780 70 L792 52 L804 70 L820 70 L836 14 L856 110 L872 42 L886 70 H1200' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	filter: drop-shadow(0 0 6px rgba(255, 77, 94, .8)); animation: lp-impulso 6s ease-in-out infinite; }
@keyframes lp-impulso { 0% { background-position: 100% 0; opacity: 0; } 8% { opacity: 1; } 55% { background-position: 0% 0; opacity: 1; } 60%, 100% { background-position: 0% 0; opacity: 0; } }
/* il cuore del logo batte dolcemente ogni pochi secondi */
.lg-card img.preload-image { transform-origin: 28% 55%; animation: lp-battito 3.2s ease-in-out infinite; }
@keyframes lp-battito { 0%, 30%, 100% { transform: scale(1); } 8% { transform: scale(1.06); } 16% { transform: scale(1); } 22% { transform: scale(1.035); } }