/* ==========================================================================
   Base — Reset, Grundtypografie, Container, A11y, Load-in, Keyframes
   ========================================================================== */

/* ---------- reset / grundlagen ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:clamp(1rem,1.04rem,1.1rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(60% 50% at 88% 6%, rgba(43,231,221,.16), transparent 60%),
    radial-gradient(55% 45% at 6% 96%, rgba(255,46,139,.12), transparent 60%),
    linear-gradient(165deg,#F7F5FC 0%,#FBEFF6 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
}
a{color:inherit}
svg{display:block}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- accessibility ---------- */
.skip{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;border-radius:0 0 12px 0;
  font-family:var(--ff-mono);font-size:.85rem;text-decoration:none;
}
.skip:focus{left:0}
:focus-visible{outline:2.5px solid var(--violet);outline-offset:3px;border-radius:6px}

/* ---------- load-in ---------- */
.rise{opacity:0;transform:translateY(16px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.14s}.d3{animation-delay:.23s}
.d4{animation-delay:.32s}.d5{animation-delay:.41s}.d6{animation-delay:.5s}
.art{opacity:0;animation:fade 1s ease .2s forwards}

/* ---------- keyframes ---------- */
@keyframes rise{to{opacity:1;transform:translateY(0)}}
@keyframes fade{to{opacity:1}}
@keyframes sway{0%,100%{transform:rotate(-3.2deg)}50%{transform:rotate(3.2deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,46,139,.5)}
  70%{box-shadow:0 0 0 10px rgba(255,46,139,0)}
  100%{box-shadow:0 0 0 0 rgba(255,46,139,0)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
  .rise{opacity:1;transform:none}
  .art{opacity:1}
}