/* SNANS Portfolio theme — ported from the Claude Design "SNANS Portfolio" file.
   Base + keyframes + hover/focus rules. Layout lives inline in the Twig markup
   (1:1 with the design); theme colors are injected as CSS vars by snans.js. */

html { scroll-behavior: auto; }
body {
  margin: 0;
  background: #F2F1EC;
  color: #16150F;
  -webkit-font-smoothing: antialiased;
  font-family: Archivo, system-ui, sans-serif;
}
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; opacity: .8; }
img { max-width: 100%; }
::selection { background: #D0872E; color: #16150F; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* ---- Preloader / logo animation ---- */
@keyframes sl-draw { 0% { stroke-opacity: 1; stroke-dashoffset: 1; } 100% { stroke-opacity: 1; stroke-dashoffset: 0; } }
@keyframes sl-fill { to { fill-opacity: 1; } }
@keyframes sl-out { to { transform: scale(1.15); opacity: 0; } }
@keyframes sl-heart {
  0%   { -webkit-mask-size: 0px 0px, 100% 100%; mask-size: 0px 0px, 100% 100%; }
  12%  { -webkit-mask-size: 34px 31px, 100% 100%; mask-size: 34px 31px, 100% 100%; }
  22%  { -webkit-mask-size: 22px 20px, 100% 100%; mask-size: 22px 20px, 100% 100%; }
  32%  { -webkit-mask-size: 42px 38px, 100% 100%; mask-size: 42px 38px, 100% 100%; }
  42%  { -webkit-mask-size: 28px 25px, 100% 100%; mask-size: 28px 25px, 100% 100%; }
  54%  { -webkit-mask-size: 52px 47px, 100% 100%; mask-size: 52px 47px, 100% 100%; }
  100% { -webkit-mask-size: 390vmax 390vmax, 100% 100%; mask-size: 390vmax 390vmax, 100% 100%; visibility: hidden; }
}
@keyframes sl-fade { to { opacity: 0; visibility: hidden; } }
@keyframes sl-slog-draw { 0% { stroke-opacity: 1; stroke-dashoffset: 120; } 100% { stroke-opacity: 1; stroke-dashoffset: 0; } }
@keyframes sl-slog-fill { to { fill-opacity: 1; } }
@keyframes sl-photo { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 1; } }
@keyframes cc-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Hover / focus states (were style-hover / style-focus in the design) ---- */
.sn-navlink { opacity: .68; transition: opacity .2s ease; }
.sn-navlink:hover { opacity: 1; }

.sn-pill { transition: background .2s ease, color .2s ease; }
.sn-pill:hover { background: var(--acc, #D0872E); color: #16150F; }

.sn-toggle { transition: border-color .2s ease; }
.sn-toggle:hover { border-color: color-mix(in srgb, currentColor 60%, transparent); }

.sn-consent-all { transition: filter .2s ease; }
.sn-consent-all:hover { filter: brightness(1.08); }
.sn-consent-ess { transition: border-color .2s ease; }
.sn-consent-ess:hover { border-color: var(--acc, #D0872E); }

.sn-underline { transition: border-color .2s ease; }
.sn-underline:hover { border-bottom-color: var(--acc, #D0872E); }

.sn-footlink { transition: color .2s ease; }
.sn-footlink:hover { color: var(--ink, #16150F); }

.sn-field { transition: border-color .2s ease; }
.sn-field:focus { border-bottom-color: var(--acc, #D0872E); }

.sn-submit { transition: transform .2s ease; }
.sn-submit:hover { transform: translateY(-2px); }

/* ---- SuluFormBundle dynamic form (CTA panel), matching the design ---- */
.sn-form { display: flex; flex-direction: column; gap: 26px; }
/* Symfony renders a compound wrapper div between <form> and the rows —
   the row spacing must live there, otherwise rows sit flush on each other. */
.sn-form > div:not(.sn-form-row) { display: flex; flex-direction: column; gap: 26px; }
.sn-form .sn-form-row { display: flex; flex-direction: column; gap: 8px; }
.sn-form-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--panel-sub, #B9B7AC);
}
.sn-form-input {
  width: 100%; box-sizing: border-box; background: transparent;
  border: none; border-bottom: 1px solid var(--panel-line, rgba(242,241,236,.35));
  border-radius: 0; padding: 10px 0;
  font-family: Archivo, system-ui, sans-serif; font-size: 16.5px;
  color: var(--panel-ink, #F2F1EC); outline: none; line-height: 1.55;
}
textarea.sn-form-input { resize: vertical; }
.sn-form-submit {
  align-self: flex-start; background: var(--acc, #D0872E); color: #16150F;
  font-family: Archivo, system-ui, sans-serif; font-weight: 700; font-size: 15.5px;
  border: none; cursor: pointer; border-radius: 999px; padding: 16px 32px;
}
.sn-form ul { margin: 0; padding: 0; list-style: none; }
.sn-form ul li {
  font-size: 13.5px; font-weight: 600; color: var(--acc, #D0872E);
}
/* ---- Static pages (Impressum, Datenschutz, ...) ---- */
.sn-static-text a {
  border-bottom: 1px solid var(--line, #DDDACE);
}
.sn-static-text p { margin: 0; }
.sn-static-text p + p { margin-top: 12px; }

/* Honeypot wrapper — keep off-screen for humans (bots still "see" the input) */
.sn-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}