/* ============================================================================
 * Evolution Travel — Pagina "Grazie" (Thank You)
 * Foglio di stile SOLO per page-grazie.php (caricato in coda a landing.css).
 * Riusa variabili/classi condivise di landing.css: --et-*, .lp-section,
 * .lp-eyebrow, .lp-h1/.lp-h2, .lp-lead, .lp-grid--pillars/.lp-pillar/
 * .lp-icon-tile, .lp-grid--services/.lp-service, .lp-community, .lp-footer,
 * .lp-tp-*. Qui solo gli elementi nuovi: header semplice, hero di conferma
 * animata, trust-strip su sfondo chiaro, card social.
 *
 * Convenzioni: come landing.css — variabili --et-, classi .ty- (thank you).
 * ========================================================================== */

.ty-header { display: flex; align-items: center; justify-content: center; padding: 26px var(--et-pad-x); border-bottom: 1px solid var(--et-hairline); }
.ty-header img { height: 30px; width: auto; display: block; }

.ty-hero { display: flex; align-items: center; justify-content: center; text-align: center;
	padding: var(--et-pad-y) var(--et-pad-x);
	background: radial-gradient(120% 90% at 50% 0%, var(--et-accent-light) 0%, var(--et-white) 60%); }
.ty-hero__inner { max-width: 720px; width: 100%; margin: 0 auto; }
.ty-hero .lp-h1 { margin: 18px auto 0; max-width: 620px; }
.ty-hero .lp-lead { margin: 18px auto 0; max-width: 560px; text-align: center; }

/* ---------- Spunta animata ---------- */
.ty-check { position: relative; width: 96px; height: 96px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; }
.ty-check__ring { position: absolute; inset: 0; border-radius: var(--et-radius-pill); background: var(--et-trust-green); opacity: .18; animation: tyRingPulse 2.4s var(--et-ease) .6s infinite; }
.ty-check__circle { position: relative; width: 88px; height: 88px; border-radius: var(--et-radius-pill); background: var(--et-trust-green); display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 34px rgba(0,182,122,.34); animation: tyPop .55s cubic-bezier(.16,1,.3,1) both; }
.ty-check svg path { stroke-dasharray: 44; stroke-dashoffset: 44; animation: tyDraw .5s cubic-bezier(.65,0,.35,1) .45s forwards; }

/* ---------- Badge "Richiesta inviata" (verde, distinto dal badge glass ciano) ---------- */
.ty-badge-success { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 7px 15px; border-radius: var(--et-radius-pill); background: #EAF8F2; color: #00885C; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ty-badge-success i { font-size: 16px; }

/* ---------- Trust-strip hero (variante testo scuro, sfondo chiaro) ---------- */
.ty-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin-top: 30px; }
.ty-trust__item { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--et-dark); }
.ty-trust__item i { font-size: 18px; color: var(--et-accent); }

/* ---------- Card social (riusa .lp-service, solo link + larghezza) ---------- */
.ty-social-grid { max-width: 620px; margin-left: auto; margin-right: auto; }
a.lp-service { text-decoration: none; }

/* ---------- Animazioni ---------- */
@keyframes tyPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes tyRingPulse { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(1.55); opacity: 0; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes tyDraw { from { stroke-dashoffset: 44; } to { stroke-dashoffset: 0; } }
@keyframes tyRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.ty-rise { animation: tyRise .7s cubic-bezier(.16,1,.3,1) both; }
.ty-d1 { animation-delay: .12s; }
.ty-d2 { animation-delay: .22s; }
.ty-d3 { animation-delay: .34s; }
.ty-d4 { animation-delay: .46s; }

@media (prefers-reduced-motion: reduce) {
	.ty-rise, .ty-check__ring, .ty-check__circle, .ty-check svg path { animation: none; }
}