:root {
  --bg: #9aa4a8;       /* szaroniebieskie tło z faviconu */
  --skin: #e8d6c7;     /* jasna twarz */
  --navy: #1f2f4f;     /* włosy/granat */
  --cloak: #7b2a21;    /* płaszcz/czerwień brązowa */
  --accent: #d97c5b;   /* cieplejszy akcent */
  --text: #0f1524;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  padding: 80px 60px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background: radial-gradient(120% 120% at 10% 20%, rgba(255,255,255,0.16), transparent),
              radial-gradient(90% 90% at 80% 10%, rgba(255,255,255,0.12), transparent),
              var(--bg);
  overflow: hidden;
}

.static-noise {
  position: absolute;
  inset: -10%;
  background:
    repeating-radial-gradient(rgba(255,255,255,0.7) 0 0.0001%, rgba(255,255,255,0) 0 0.0002%) 60% 60%/3000px 3000px,
    repeating-conic-gradient(rgba(255,255,255,0.6) 0 0.0001%, rgba(255,255,255,0) 0 0.0002%) 40% 40%/3000px 3000px;
  background-blend-mode: screen;
  opacity: 0.38;
  mix-blend-mode: screen;
  animation: staticSnap 180ms steps(1, end) infinite;
  pointer-events: none;
  z-index: 1;
}

.paper-fibers {
  position: absolute;
  inset: -6%;
  background-image:
    radial-gradient(ellipse 60% 18% at 18% 22%, rgba(31,47,107,0.3) 0 55%, transparent 85%),
    radial-gradient(ellipse 55% 16% at 72% 18%, rgba(31,47,107,0.44) 0 52%, transparent 82%),
    radial-gradient(ellipse 50% 14% at 32% 62%, rgba(31,47,107,0.4) 0 50%, transparent 80%),
    radial-gradient(ellipse 64% 20% at 78% 66%, rgba(31,47,107,0.36) 0 58%, transparent 86%),
    radial-gradient(ellipse 44% 12% at 52% 78%, rgba(31,47,107,0.45) 0 48%, transparent 78%),
    radial-gradient(ellipse 70% 22% at 10% 78%, rgba(31,47,107,0.38) 0 60%, transparent 88%),
    radial-gradient(ellipse 46% 18% at 88% 42%, rgba(31,47,107,0.32) 0 52%, transparent 82%),
    radial-gradient(ellipse 52% 15% at 44% 34%, rgba(255,255,255,0.32) 0 54%, transparent 84%);
  mix-blend-mode: overlay;
  opacity: 0.62;
  filter: blur(0.08px);
  animation: fiberSnap 960ms steps(1, end) infinite;
  pointer-events: none;
  z-index: 1;
}

.hair-particles {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(82deg, rgba(0,0,0,0.7) 0 2px, transparent 2px),
    linear-gradient(12deg, rgba(0,0,0,0.7) 0 2px, transparent 2px),
    linear-gradient(138deg, rgba(0,0,0,0.7) 0 2px, transparent 2px),
    linear-gradient(54deg, rgba(0,0,0,0.7) 0 2px, transparent 2px),
    linear-gradient(-18deg, rgba(0,0,0,0.7) 0 2px, transparent 2px),
    linear-gradient(110deg, rgba(0,0,0,0.7) 0 2px, transparent 2px),
    linear-gradient(-34deg, rgba(0,0,0,0.7) 0 2px, transparent 2px),
    linear-gradient(70deg, rgba(0,0,0,0.7) 0 2px, transparent 2px),
    linear-gradient(24deg, rgba(0,0,0,0.7) 0 2px, transparent 2px),
    linear-gradient(128deg, rgba(0,0,0,0.7) 0 2px, transparent 2px),
    linear-gradient(-12deg, rgba(0,0,0,0.7) 0 2px, transparent 2px),
    linear-gradient(98deg, rgba(0,0,0,0.7) 0 2px, transparent 2px),
    linear-gradient(-48deg, rgba(0,0,0,0.7) 0 2px, transparent 2px),
    radial-gradient(80% 18% at 50% 50%, rgba(0,0,0,0.65) 0 30%, transparent 70%),
    radial-gradient(70% 16% at 20% 80%, rgba(0,0,0,0.65) 0 30%, transparent 70%),
    radial-gradient(60% 20% at 78% 24%, rgba(0,0,0,0.6) 0 32%, transparent 70%);
  background-size:
    2px 20px,
    2px 18px,
    2px 16px,
    2px 22px,
    2px 14px,
    2px 20px,
    2px 18px,
    2px 21px,
    2px 16px,
    2px 14px,
    2px 18px,
    2px 19px,
    2px 17px,
    18px 8px,
    16px 7px,
    14px 6px;
  background-repeat: no-repeat;
  background-position:
    10% 16%,
    32% 22%,
    58% 18%,
    78% 66%,
    22% 72%,
    54% 82%,
    86% 38%,
    42% 54%,
    64% 46%,
    16% 44%,
    70% 30%,
    82% 76%,
    26% 56%,
    48% 34%,
    14% 62%,
    76% 18%;
  mix-blend-mode: multiply;
  opacity: 0.75;
  animation: hairSnap 720ms steps(1, end) infinite;
  pointer-events: none;
  z-index: 2;
}


.blobs {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50% 58% 47% 63%;
  background: var(--cloak);
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.12));
  z-index: 1;
  clip-path: polygon(8% 26%, 28% 12%, 50% 7%, 70% 14%, 88% 32%, 92% 52%, 82% 76%, 62% 88%, 42% 94%, 22% 86%, 10% 70%, 6% 50%);
  mask-image:
    radial-gradient(circle at 40% 38%, rgba(0,0,0,0.95) 0 42%, rgba(0,0,0,0) 65%),
    radial-gradient(circle at 65% 62%, rgba(0,0,0,0.85) 0 35%, rgba(0,0,0,0) 60%);
  mask-composite: add;
  overflow: hidden;
}

.blobs::after {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    repeating-radial-gradient(rgba(255,255,255,0.75) 0 0.0001%, rgba(255,255,255,0) 0 0.0002%) 40% 50%/2400px 2400px,
    repeating-conic-gradient(rgba(255,255,255,0.65) 0 0.0001%, rgba(255,255,255,0) 0 0.0002%) 70% 30%/2600px 2600px;
  background-blend-mode: screen;
  mix-blend-mode: screen;
  opacity: 0.22;
  animation: staticSnap 200ms steps(1, end) infinite;
  pointer-events: none;
}

.blob-right::after {
  animation-duration: 240ms;
  opacity: 0.26;
}

.blob-left {
  left: -80px;
  top: -40px;
  transform: rotate(-6deg);
  background:
    radial-gradient(circle at 35% 40%, rgba(31,47,107,0.18) 0 35%, transparent 60%),
    radial-gradient(circle at 70% 55%, rgba(216,124,91,0.18) 0 30%, transparent 55%),
    var(--cloak);
}

.blob-right {
  right: -110px;
  bottom: -60px;
  width: 480px;
  height: 480px;
  transform: rotate(9deg);
  background:
    radial-gradient(circle at 62% 50%, rgba(31,47,107,0.22) 0 38%, transparent 60%),
    radial-gradient(circle at 35% 65%, rgba(216,124,91,0.16) 0 25%, transparent 55%),
    var(--cloak);
}


.tear {
  position: absolute;
  width: 180px;
  height: 240px;
  background:
    radial-gradient(circle at 22% 34%, rgba(232,214,199,0.5) 0 36%, transparent 58%),
    radial-gradient(circle at 78% 62%, rgba(31,47,107,0.22) 0 32%, transparent 55%),
    radial-gradient(circle at 52% 48%, rgba(216,124,91,0.18) 0 26%, transparent 46%);
  clip-path: polygon(16% 2%, 84% 8%, 100% 32%, 86% 72%, 70% 92%, 30% 100%, 0 86%, 4% 40%);
  opacity: 0.48;
  mix-blend-mode: screen;
  z-index: 2;
  --base: rotate(0deg);
  transform: var(--base);
}

.tear.left { left: 6%; top: 16%; --base: rotate(-6deg); }
.tear.right { right: 4%; bottom: 10%; --base: rotate(9deg); }

main {
  position: relative;
  z-index: 3;
  padding: 32px 36px;
  background: rgba(232,214,199,0.92);
  border: 2px solid rgba(31,47,107,0.22);
  border-radius: 26px 18px 24px 16px;
  box-shadow: 0 18px 36px rgba(0,0,0,0.18), 6px 6px 0 rgba(31,47,107,0.12);
  max-width: 620px;
  text-align: center;
  backdrop-filter: blur(6px);
}

main::before,
main::after {
  content: "";
  position: absolute;
  inset: -10px -12px -14px -8px;
  border-radius: 32px 22px 28px 20px;
  border: 1.5px solid rgba(197,58,50,0.35);
  mix-blend-mode: multiply;
  pointer-events: none;
  transform: rotate(-2deg);
  opacity: 0.55;
}

main::after {
  inset: -18px -6px -10px -14px;
  border: 1px dashed rgba(31,47,107,0.28);
  transform: rotate(3deg);
  opacity: 0.45;
}

h1 {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 0.35em;
  color: var(--navy);
  animation: fadeIn 1s ease forwards;
}

p.bio {
  font-size: 1.05rem;
  color: #303346;
  margin: 0 0 1.8em;
  animation: fadeIn 1.2s ease forwards;
}

.links a {
  display: block;
  font-size: 1.1rem;
  color: var(--cloak);
  text-decoration: none;
  margin: 10px 0;
  padding: 8px 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(31,47,107,0.08), rgba(216,124,91,0.12));
  border: 1px solid rgba(31,47,107,0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  opacity: 0.92;
  animation: fadeIn 1.3s ease forwards;
}

.links a:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 12px 18px rgba(0,0,0,0.12);
  background: linear-gradient(90deg, rgba(31,47,107,0.16), rgba(216,124,91,0.18));
}

footer {
  position: absolute;
  bottom: 24px;
  font-size: 0.85rem;
  color: rgba(31,47,107,0.8);
  letter-spacing: 0.08em;
  animation: fadeIn 1.6s ease forwards;
  z-index: 3;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes jitter {
  0% { transform: var(--base) translate(-2px, 1px) rotate(-2deg) scale(1); }
  45% { transform: var(--base) translate(3px, -3px) rotate(1deg) scale(1.01); }
  100% { transform: var(--base) translate(-3px, 4px) rotate(3deg) scale(0.99); }
}

@keyframes staticSnap {
  0% { background-position: 60% 60%, 40% 40%; }
  20% { background-position: 12% 78%, 68% 22%; }
  40% { background-position: 88% 18%, 26% 72%; }
  60% { background-position: 34% 8%, 82% 86%; }
  80% { background-position: 54% 52%, 18% 28%; }
  100% { background-position: 74% 68%, 36% 82%; }
}

@keyframes fiberSnap {
  0%   { background-position: 12% 18%, 80% 18%, 22% 76%, 82% 64%, 64% 78%, 10% 78%, 90% 52%, 30% 20%; transform: translate3d(0,0,0); }
  16%  { background-position: 16% 22%, 76% 20%, 26% 72%, 78% 62%, 60% 76%, 12% 74%, 86% 50%, 34% 24%; transform: translate3d(-2px,2px,0); }
  32%  { background-position: 10% 24%, 82% 22%, 20% 78%, 84% 60%, 66% 74%, 8% 72%, 92% 54%, 32% 26%; transform: translate3d(2px,-2px,0); }
  48%  { background-position: 18% 26%, 78% 18%, 28% 70%, 80% 66%, 62% 80%, 14% 76%, 88% 48%, 36% 22%; transform: translate3d(-2px,1px,0); }
  64%  { background-position: 14% 28%, 84% 20%, 24% 74%, 86% 62%, 68% 76%, 10% 78%, 94% 52%, 38% 24%; transform: translate3d(2px,-1px,0); }
  80%  { background-position: 16% 24%, 74% 22%, 26% 72%, 82% 58%, 60% 78%, 12% 74%, 90% 50%, 34% 28%; transform: translate3d(-1px,1px,0); }
  100% { background-position: 12% 18%, 80% 18%, 22% 76%, 82% 64%, 64% 78%, 10% 78%, 90% 52%, 30% 20%; transform: translate3d(0,0,0); }
}

@keyframes hairSnap {
  0% {
    background-position: 10% 16%, 32% 22%, 58% 18%, 78% 66%, 22% 72%, 54% 82%, 86% 38%, 42% 54%, 64% 46%, 16% 44%, 70% 30%, 82% 76%, 26% 56%, 48% 34%, 14% 62%, 76% 18%;
    background-size: 2px 20px, 2px 18px, 2px 16px, 2px 22px, 2px 14px, 2px 20px, 2px 18px, 2px 21px, 2px 16px, 2px 14px, 2px 18px, 2px 19px, 2px 17px, 18px 8px, 16px 7px, 14px 6px;
    opacity: 0.78;
  }
  25% {
    background-position: 18% 30%, 44% 14%, 60% 24%, 70% 58%, 28% 64%, 46% 76%, 84% 28%, 48% 42%, 60% 58%, 20% 52%, 66% 26%, 78% 70%, 30% 62%, 52% 30%, 12% 58%, 80% 22%;
    background-size: 2px 14px, 2px 12px, 0 0, 2px 16px, 2px 12px, 2px 13px, 2px 11px, 2px 16px, 2px 12px, 2px 10px, 2px 12px, 18px 8px, 14px 6px, 2px 13px, 2px 9px, 2px 11px;
    opacity: 0.7;
  }
  50% {
    background-position: 12% 24%, 40% 18%, 56% 20%, 76% 62%, 24% 70%, 52% 80%, 88% 36%, 44% 52%, 68% 34%, 18% 60%, 72% 24%, 84% 64%, 22% 50%, 46% 32%, 18% 66%, 74% 20%;
    background-size: 2px 16px, 2px 14px, 2px 10px, 2px 14px, 0 0, 2px 16px, 2px 14px, 2px 10px, 2px 12px, 2px 11px, 2px 13px, 16px 7px, 2px 9px, 2px 12px, 2px 10px, 2px 12px;
    opacity: 0.72;
  }
  75% {
    background-position: 20% 18%, 36% 16%, 62% 18%, 74% 52%, 30% 68%, 48% 82%, 86% 34%, 54% 56%, 46% 42%, 22% 48%, 68% 28%, 80% 68%, 24% 58%, 50% 36%, 16% 52%, 78% 24%;
    background-size: 2px 12px, 2px 11px, 2px 9px, 2px 13px, 2px 11px, 0 0, 2px 12px, 2px 11px, 12px 5px, 2px 9px, 2px 10px, 14px 6px, 2px 8px, 2px 10px, 2px 8px, 2px 9px;
    opacity: 0.7;
  }
  100% {
    background-position: 10% 16%, 32% 22%, 58% 18%, 78% 66%, 22% 72%, 54% 82%, 86% 38%, 42% 54%, 64% 46%, 16% 44%, 70% 30%, 82% 76%, 26% 56%, 48% 34%, 14% 62%, 76% 18%;
    background-size: 2px 20px, 2px 18px, 2px 16px, 2px 22px, 2px 14px, 2px 20px, 2px 18px, 2px 21px, 2px 16px, 2px 14px, 2px 18px, 2px 19px, 2px 17px, 18px 8px, 16px 7px, 14px 6px;
    opacity: 0.78;
  }
}

@keyframes drift {
  0% { transform: var(--base) translate(0,0) rotate(0deg) scale(1); }
  40% { transform: var(--base) translate(6px,-4px) rotate(-2deg) scale(1.02); }
  100% { transform: var(--base) translate(-6px,5px) rotate(3deg) scale(0.98); }
}