/* ===== PAGE: thank-you after a demo request (/va-multumim-pentru-interesul-acordat, 2026-10-05) =====
   Markup: tools/build-thankyou.py · motion + blue confetti: js/thank-you.js. Tokens only (css/styles.css :root).
   Entrance = the evo-rise intro (top to bottom); the article cards rise in slowly when scrolled into view. */
.evo-ty { display: block; width: 100%; font-family: var(--evo-font); color: var(--evo-text); }
.evo-ty h1, .evo-ty h2, .evo-ty h3, .evo-ty p { margin: 0; }

/* --- hero --- */
.evo-ty-hero { position: relative; isolation: isolate; overflow: hidden; padding: 124px 20px 88px;
  background: linear-gradient(180deg, var(--evo-panel) 0%, rgba(243, 247, 251, 0) 78%); }
.evo-ty-bg { position: absolute; inset: 0 0 auto; height: 362px; z-index: -1; opacity: .9;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
.evo-ty-inner { max-width: 780px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; }

.evo-ty-art { width: min(320px, 78vw); height: auto; margin-bottom: 18px; overflow: visible; }
.evo-ty-plane { transform-box: fill-box; transform-origin: 50% 50%; }
.evo-ty-trail-mask { transform-box: view-box; transform-origin: 0 0; }

.evo-ty-title { font: 600 var(--evo-hero-h1)/1.12 var(--evo-font); color: var(--evo-ink); letter-spacing: normal; text-wrap-style: balance; }
.evo-ty-lead { margin-top: 18px !important; font: 600 var(--evo-hero-sub)/1.35 var(--evo-font); color: var(--evo-blue); text-wrap-style: balance; }
.evo-ty-text { margin-top: 18px !important; max-width: 660px; font: 400 clamp(16px, 1.6vw, 18px)/1.65 var(--evo-font); color: var(--evo-text); text-wrap-style: pretty; }
.evo-ty-text strong { font-weight: 600; color: var(--evo-ink); }

/* recap card: date | time (like the inspiration) */
.evo-ty-recap { display: flex; align-items: stretch; margin-top: 40px; padding: 22px 12px; border-radius: 22px !important; }
.evo-ty-recap-item { display: flex; align-items: center; gap: 16px; padding: 4px 30px; text-align: left; }
.evo-ty-recap-item + .evo-ty-recap-item { border-left: 1px solid var(--evo-line); }
.evo-ty-recap-icon { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(160deg, var(--evo-blue-light), var(--evo-blue)); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(47, 102, 155, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.evo-ty-recap-icon svg { width: 22px; height: 22px; stroke: currentColor; }
.evo-ty-recap b { font-size: 20px; font-weight: 600; color: var(--evo-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

.evo-ty-sign { margin-top: 40px !important; font: 600 clamp(19px, 2vw, 22px)/1.4 var(--evo-font); color: var(--evo-blue); }
.evo-ty-sign strong { font-weight: 700; }

/* --- recommended articles --- */
.evo-ty-blog { max-width: 1200px; margin: 0 auto; padding: 24px 20px 120px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.evo-ty-blog-title { margin-top: 16px !important; max-width: 720px; font: 700 clamp(26px, 3.2vw, 38px)/1.18 var(--evo-font); color: var(--evo-ink); text-wrap-style: balance; }
.evo-ty-posts { width: 100%; margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; text-align: left; }
.evo-ty-post { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow .45s var(--evo-ease), translate .45s var(--evo-ease); }
.evo-ty-post:hover { translate: 0 -4px; box-shadow: var(--evo-shadow-card-hover) !important; }
.evo-ty-post:focus-visible { outline: 3px solid var(--evo-blue-soft) !important; outline-offset: 3px !important; }
.evo-ty-post-media { display: block; aspect-ratio: 2 / 1; overflow: hidden; background: var(--evo-panel); }
.evo-ty-post-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; transition: scale 1.2s var(--evo-ease); }
.evo-ty-post:hover .evo-ty-post-media img { scale: 1.04; }
.evo-ty-post-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.evo-ty-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--evo-muted); }
.evo-ty-post-meta > span { color: var(--evo-blue); font-weight: 500; }
.evo-ty-post h3 { margin-top: 10px !important; font: 600 19px/1.35 var(--evo-font); color: var(--evo-blue); text-wrap-style: pretty; }
.evo-ty-post-more { margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 600; color: var(--evo-ink); }
.evo-ty-post-more span { display: inline-block; transition: translate .35s var(--evo-ease); }
.evo-ty-post:hover .evo-ty-post-more span { translate: 3px 0; }

/* --- motion: entrance (pure CSS, like the evo-rise page intro) --- */
@keyframes evo-ty-plane-in { from { opacity: 0; transform: translate(-70px, 46px) rotate(-14deg) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes evo-ty-trail-in { from { transform: scaleX(0); } to { transform: none; } }
@keyframes evo-ty-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes evo-ty-cloud { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .evo-ty-clouds { animation: evo-ty-cloud 1.6s var(--evo-ease) .1s both; }
  .evo-ty-trail-mask { animation: evo-ty-trail-in 1.5s cubic-bezier(.45, .05, .25, 1) .25s both; }
  .evo-ty-plane { animation: evo-ty-plane-in 1.3s var(--evo-ease) .9s both, evo-ty-float 5s ease-in-out 2.4s infinite; }
  .evo-ty-title { animation: evo-rise .9s var(--evo-ease) .35s both; }
  .evo-ty-lead { animation: evo-rise .9s var(--evo-ease) .5s both; }
  .evo-ty-text { animation: evo-rise .9s var(--evo-ease) .65s both; }
  .evo-ty-recap { animation: evo-rise-far 1.1s var(--evo-ease) .85s both; }
  .evo-ty-sign { animation: evo-rise .9s var(--evo-ease) 1.05s both; }
  /* articles: slow rise when scrolled into view (js/thank-you.js adds .is-in); JS off → visible */
  .evo-ty-js .evo-ty-blog > :is(.evo-badge, .evo-ty-blog-title), .evo-ty-js .evo-ty-post { opacity: 0; translate: 0 40px; } /* 0, not .01: below the fold (no LCP role), and a .01 text fails the contrast check */
  .evo-ty-js .evo-ty-blog > .is-in, .evo-ty-js .evo-ty-post.is-in { opacity: 1; translate: none;
    transition: opacity 1.3s ease var(--evo-delay, 0s), translate 1.6s var(--evo-ease) var(--evo-delay, 0s), box-shadow .45s var(--evo-ease); }
  .evo-ty-js .evo-ty-post.is-in.is-done { transition: box-shadow .45s var(--evo-ease), translate .45s var(--evo-ease); }
}

/* the confetti layer (js/thank-you.js) */
.evo-ty-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9; }

/* --- tablet --- */
@media (max-width: 1199.98px) {
  .evo-ty-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evo-ty-hero { padding-top: 116px; }
}
/* --- phone --- */
@media (max-width: 809.98px) {
  .evo-ty-hero { padding: 116px 20px 64px; }
  .evo-ty-title { font-size: var(--evo-hero-h1-sm); }   /* the site-wide hero title rule (css/styles.css) */
  .evo-ty-lead { font-size: var(--evo-hero-sub-sm); }
  .evo-ty-art { margin-bottom: 20px; }
  .evo-ty-recap { flex-direction: column; width: 100%; max-width: 360px; padding: 8px 20px; margin-top: 32px; }
  .evo-ty-recap-item { padding: 16px 0; }
  .evo-ty-recap-item + .evo-ty-recap-item { border-left: 0; border-top: 1px solid var(--evo-line); }
  .evo-ty-sign { margin-top: 32px !important; }
  .evo-ty-blog { padding-bottom: 88px; }
  .evo-ty-posts { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 36px; }
  .evo-ty-post-body { padding: 18px 20px 20px; }
  .evo-ty-post h3 { font-size: 18px; }
}