/* Effects for the public form page only. Everything here is decoration: with motion switched off
   (or scripts blocked) the page is complete and readable, just still. */

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--navy); background-image: radial-gradient(900px 420px at 85% 0%, rgba(20, 81, 138, 0.55), transparent 70%); }
.hero .top { background: transparent; position: relative; z-index: 1; }
.hero .intro { position: relative; z-index: 1; padding-block: 34px 56px; }
.hero .eyebrow { color: var(--sky); }
.hero h1 { color: #fff; }
.hero .lede { color: #CFE0EE; }

/* Brick motif: eight blocks rise into place one after another, then drift very gently. */
.bricks { position: absolute; right: -60px; bottom: -40px; width: min(560px, 80vw); height: auto; pointer-events: none; }
.brick rect { fill: var(--blue); }
.brick.sky rect { fill: var(--sky); opacity: 0.55; }
.brick { opacity: 0; transform-box: fill-box; transform-origin: center; animation: brick-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards, drift 9s ease-in-out infinite; }
.b1 { animation-delay: 0.10s, 1.0s; } .b2 { animation-delay: 0.18s, 1.8s; } .b3 { animation-delay: 0.26s, 0.6s; }
.b4 { animation-delay: 0.34s, 2.4s; } .b5 { animation-delay: 0.42s, 1.2s; } .b6 { animation-delay: 0.50s, 3.0s; }
.b7 { animation-delay: 0.58s, 2.0s; } .b8 { animation-delay: 0.66s, 0.8s; }
@keyframes brick-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 0.9; transform: none; } }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

/* Headline lines arrive one after the other. */
.hero .eyebrow, .hero h1, .hero .lede { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero .eyebrow { animation-delay: 0.05s; }
.hero h1 { animation-delay: 0.15s; }
.hero .lede { animation-delay: 0.3s; }
.hero .logo { animation: fade 0.8s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Scroll reveal (only armed when scripts run, so nothing can stay hidden without them) ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.what-list li:nth-child(2) { transition-delay: 0.1s; }
.what-list li:nth-child(3) { transition-delay: 0.2s; }

/* ---------- Cards and form controls ---------- */
.what-list li { transition: box-shadow 0.2s ease, translate 0.2s ease, border-color 0.2s ease; }
.what-list li:hover { translate: 0 -3px; border-color: var(--blue); box-shadow: 0 10px 24px -12px rgba(20, 81, 138, 0.45); }

input[type="text"], input[type="email"], input[type="tel"], textarea { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
input:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 4px rgba(163, 211, 255, 0.55); outline: none; }

.choice { transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, translate 0.15s ease; }
.choice:hover { border-color: var(--blue); translate: 0 -1px; }
.choice:has(input:checked) { box-shadow: 0 8px 20px -12px rgba(20, 81, 138, 0.6); }
.choice input { transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1); }
.choice input:checked, .check input:checked { transform: scale(1.18); }

.submit { position: relative; overflow: hidden; transition: background-color 0.2s ease, box-shadow 0.2s ease, translate 0.15s ease; }
.submit:hover:not(:disabled) { translate: 0 -2px; box-shadow: 0 12px 24px -12px rgba(20, 81, 138, 0.8); }
.submit:active:not(:disabled) { translate: 0 1px; box-shadow: none; }
/* A light sweep passes across the button when it is hovered. */
.submit::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); translate: -120% 0; }
.submit:hover:not(:disabled)::before { translate: 120% 0; transition: translate 0.7s ease; }
/* While sending, a small spinner shows that something is happening. */
.submit:disabled::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 10px; vertical-align: -2px; border: 2.5px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }

/* A field that needs attention gives a short shake, and its message slides in. */
[aria-invalid="true"] { animation: shake 0.4s ease; }
.choices:has([aria-invalid="true"]) { animation: shake 0.4s ease; }
.error:not([hidden]) { animation: rise 0.3s ease both; }
@keyframes shake { 20% { translate: -6px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }

/* ---------- Thank you ---------- */
.thanks:not([hidden]) { animation: rise 0.5s ease both; }
.tick { width: 76px; height: 76px; margin: 0 auto 14px; display: block; }
.tick-ring { fill: none; stroke: var(--blue); stroke-width: 3; stroke-dasharray: 145; stroke-dashoffset: 145; animation: draw 0.7s ease 0.1s forwards; }
.tick-mark { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 0.4s ease 0.7s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (max-width: 640px) {
  .bricks { opacity: 0.35; width: 120%; right: -35%; bottom: -30px; }
  .hero .intro { padding-block: 28px 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .brick { opacity: 0.9; }
  .js .reveal { opacity: 1; transform: none; }
  .tick-ring, .tick-mark { stroke-dashoffset: 0; }
}