/* Newsletter CTA card, inner pages (Figma About 377:5397). Sand card with the logo mark as a soft background shape. */
.s-newsletter { padding-block: var(--space-12) var(--space-16); }
.s-newsletter__card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: var(--space-8); align-items: center;
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-lg); background: var(--sand-100);
}
.s-newsletter__art { position: absolute; z-index: -1; left: -10%; top: -60%; width: 720px; max-width: none; opacity: 0.22; filter: saturate(0.7) blur(2px); }
.s-newsletter__title { font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); color: var(--features-term); }
.s-newsletter__text { margin-top: var(--space-2); font-size: var(--para-lg-size); line-height: var(--para-lg-lh); color: var(--features-term); }
.s-newsletter__input { background: var(--base-high); }
.s-newsletter__input:hover { background: var(--base-high); }
.s-newsletter__msg { min-height: 20px; margin-top: var(--space-2); font-size: var(--body-sm-size); color: var(--text-strong); }
@media (min-width: 1024px) {
  .s-newsletter { padding-block: 0 var(--space-20); }
  .s-newsletter__card { grid-template-columns: 1fr auto; gap: var(--space-8); min-height: 245px; padding: var(--space-16) var(--space-20) var(--space-16) 88px; }
  .s-newsletter__art { left: -112px; top: -290px; width: 882px; }
  .s-newsletter__form { width: 355px; }
  .s-newsletter__form .subscribe { max-width: none; }
}

/* ---------- Interactions ----------
   Entrances come from data-reveal in partials/newsletter.html. Form states are driven by main.js:
   input[aria-invalid="true"] = error, input[aria-invalid="false"] = subscribed (cleared again on typing). */
.s-newsletter__art { animation: newsletter-float 12s var(--ease-in-out) infinite alternate; transition: opacity var(--dur-slow) var(--ease-out); }
@keyframes newsletter-float {
  from { translate: 0 0; rotate: 0deg; }
  to   { translate: 24px 16px; rotate: 6deg; }
}
@media (hover: hover) {
  .s-newsletter__card:hover .s-newsletter__art { opacity: 0.32; }
}

.s-newsletter__input { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }

/* Submit arrow leans forward once the email looks complete */
.s-newsletter__form .btn { position: relative; }
.s-newsletter__form .subscribe:has(.input:valid:not(:placeholder-shown)) .btn__icon--arrow { transform: translateX(2px); }

/* Error: shake the field and colour the message */
.s-newsletter__form:has(.input[aria-invalid="true"]) .subscribe { animation: newsletter-shake 400ms var(--ease-out); }
.s-newsletter__form:has(.input[aria-invalid="true"]) .s-newsletter__msg { color: var(--red-500); }
@keyframes newsletter-shake {
  20%, 60% { translate: -6px 0; }
  40%, 80% { translate: 6px 0; }
}

/* Success: the arrow turns into a check and the message gets a green tick */
.s-newsletter__form .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.2 3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.2 3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  scale: 0.4;
  transition: opacity var(--dur) var(--ease), scale var(--dur-slow) var(--ease-spring);
}
.s-newsletter__form .btn .btn__icon { transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.s-newsletter__form:has(.input[aria-invalid="false"]) .btn::after { opacity: 1; scale: 1; }
.s-newsletter__form:has(.input[aria-invalid="false"]) .btn .btn__icon { opacity: 0; transform: translateX(8px); }
.s-newsletter__form:has(.input[aria-invalid="false"]) .s-newsletter__msg { color: var(--green-600); }
.s-newsletter__form:has(.input[aria-invalid="false"]) .s-newsletter__msg::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  border-radius: 50%;
  background: var(--green-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.6 2.5L12 5.5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* Message slides in whenever a state appears */
.s-newsletter__form:has(.input[aria-invalid]) .s-newsletter__msg { animation: newsletter-msg 300ms var(--ease-out); }
@keyframes newsletter-msg {
  from { opacity: 0; translate: 0 -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .s-newsletter__art,
  .s-newsletter__form:has(.input[aria-invalid]) .subscribe,
  .s-newsletter__form:has(.input[aria-invalid]) .s-newsletter__msg { animation: none; }
  .s-newsletter__form .btn::after { scale: 1; }
  .s-newsletter__form .btn .btn__icon { transform: none !important; }
}