/* ============================================================
   MARCIN CHOCZAJ CONSULTING — choczaj.com
   Palette: absolute black & white, nothing else. As the brand book demands.
   Type:    Cinzel (Trajan-blooded display) · Raleway Light (whisper & data)
   ============================================================ */

/* ---------- fonts (self-hosted, zero external requests) ---------- */
@font-face {
  font-family: "Cinzel";
  src: local("Cinzel"), url("/fonts/cinzel-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: local("Raleway Light"), local("Raleway-Light"),
       url("/fonts/raleway-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --ink:    #000000;                  /* brand black, the only colour */
  --paper:  #ffffff;
  --smoke:  rgba(255, 255, 255, .58); /* the whisper */
  --ash:    rgba(255, 255, 255, .32); /* the colophon */
  --hair:   rgba(255, 255, 255, .22); /* hairlines */
  --display: "Cinzel", Georgia, "Times New Roman", serif;
  --utility: "Raleway", "Segoe UI", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- foundation ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: dark; }

body {
  min-height: 100dvh;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--utility);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--paper); color: var(--ink); }

/* ---------- portrait: a man emerging from the dark ---------- */
.portrait {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(46vw, 700px);
  height: 100dvh;
  animation: appear 2.4s var(--ease) both;
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: grayscale(1) contrast(1.04);
}
.portrait .veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,  rgba(0,0,0,0)   34%, var(--ink) 90%),
    linear-gradient(0deg,   rgba(0,0,0,.92) 0%,  rgba(0,0,0,0) 34%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%,  rgba(0,0,0,0) 22%),
    linear-gradient(270deg, rgba(0,0,0,0)   85%, rgba(0,0,0,.7) 100%);
}

/* ---------- the card ---------- */
.card {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  margin-left: min(42vw, 640px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(1.4rem, 3.2vh, 2.4rem);
  padding: clamp(4rem, 8vh, 6rem) clamp(1.5rem, 4vw, 4rem);
}

.logo {
  width: clamp(200px, 22vw, 300px);
  height: auto;
  animation: settle 1.8s var(--ease) .35s both;
}

.motto {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.6vw, 2.85rem);
  letter-spacing: .18em;
  padding-left: .18em; /* optical centering: tracking adds an invisible space after the final glyph */
  text-transform: uppercase;
  white-space: nowrap;
  animation: engrave 2.6s var(--ease) .7s both;
}
.motto .from { opacity: .55; }
.motto .dot  { opacity: .35; }

.rule {
  width: 58px;
  height: 1px;
  background: var(--hair);
  transform-origin: center;
  animation: unfold 1.6s var(--ease) 1.25s both;
}

.whisper {
  font-size: .78rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--smoke);
  padding-left: .34em; /* optical centering of tracked text */
  animation: settle 1.8s var(--ease) 1.55s both;
}

.contact { animation: settle 1.8s var(--ease) 1.95s both; }

.email {
  display: inline-block;
  font-size: .82rem;
  letter-spacing: .42em;
  padding: .9em 0 .55em .42em; /* left pad = optical centering */
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  position: relative;
}
a.email::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--hair);
  transform: scaleX(.55);
  transition: transform .7s var(--ease), background-color .7s var(--ease);
}
a.email:hover::after,
a.email:focus-visible::after {
  transform: scaleX(1);
  background: var(--paper);
}
a.email:focus-visible {
  outline: 1px solid var(--paper);
  outline-offset: 6px;
}

/* ---------- colophon ---------- */
.colophon {
  position: fixed;
  z-index: 2;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1.2rem, 2.5vw, 2rem);
  font-size: .62rem;
  letter-spacing: .28em;
  color: var(--ash);
  animation: settle 1.8s var(--ease) 2.3s both;
}
.colophon span { white-space: nowrap; }
.colophon span:last-child { letter-spacing: .22em; margin-right: -.22em; }

/* ---------- atmosphere ---------- */
.watermark {
  position: fixed;
  z-index: 1;
  top: 50%;
  left: calc((100vw + min(42vw, 640px)) / 2); /* dokładna oś kolumny treści, niezależna od szerokości okna */
  width: min(64vh, 60vw);
  aspect-ratio: 441 / 479;
  translate: -50% -50%;
  background: url("/assets/emblem-white.svg") center / contain no-repeat;
  opacity: .045;
  animation: breathe 22s ease-in-out infinite;
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: -160px;
  z-index: 3;
  background: url("/assets/noise.png") repeat;
  background-size: 160px 160px;
  opacity: .05;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: flicker 1.2s steps(4) infinite;
}

.glow {
  position: fixed;
  z-index: 1;
  top: 0; left: 0;
  width: 26vmax;
  height: 48vmax;
  /* wierzcholek przy kursorze, jasne jadro tuz pod nim, korpus gasnie ku dolowi */
  background: radial-gradient(ellipse 50% 44% at 50% 38%,
    rgba(255,255,255,.05)  0%,
    rgba(255,255,255,.016) 40%,
    rgba(255,255,255,0)    68%);
  transform-origin: 50% 20%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.glow.lit { opacity: 1; animation: waver 6s ease-in-out infinite alternate; }

@keyframes waver {
  from { scale: 1 1; }
  to   { scale: .985 1.04; }
}

/* ---------- movements ---------- */
@keyframes appear  { from { opacity: 0; }                                to { opacity: 1; } }
@keyframes settle  { from { opacity: 0; transform: translateY(14px); }   to { opacity: 1; transform: none; } }
@keyframes engrave { from { opacity: 0; letter-spacing: .38em; }         to { opacity: 1; letter-spacing: .18em; } }
@keyframes unfold  { from { opacity: 0; transform: scaleX(0); }          to { opacity: 1; transform: scaleX(1); } }
@keyframes breathe {
  0%, 100% { transform: scale(1);     opacity: .04; }
  50%      { transform: scale(1.035); opacity: .06; }
}
@keyframes flicker {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-64px, 32px); }
  50%  { transform: translate(32px, -64px); }
  75%  { transform: translate(-32px, -32px); }
  100% { transform: translate(0, 0); }
}

/* ---------- smaller stages: pion = piętrowo, poziom = zawsze bok ---------- */
@media (max-width: 900px) and (orientation: portrait) {
  /* portret zajmuje górę ekranu i wygasa w czerń zanim zacznie się treść */
  .portrait {
    position: absolute;
    inset: 0 0 auto 0;
    width: 100vw;
    height: 54dvh;
    opacity: .9;
  }
  .portrait img { object-position: 50% 10%; }
  .portrait .veil {
    background:
      linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 42%, var(--ink) 96%),
      linear-gradient(90deg,  rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 72%, rgba(0,0,0,.55) 100%);
  }

  /* treść startuje pod twarzą, na litej czerni */
  .card {
    margin-left: 0;
    justify-content: flex-start;
    padding-top: 46dvh;
    padding-bottom: 5rem;
    gap: clamp(1.1rem, 2.6vh, 1.8rem);
  }
  .logo  { width: clamp(180px, 52vw, 230px); }
  .motto { white-space: normal; line-height: 1.5; }

  /* ciaśniejszy tracking, żeby nic nie łamało się dziwnie */
  .whisper { letter-spacing: .22em; padding-left: .22em; }
  .email   { letter-spacing: .26em; padding-left: .26em; font-size: .8rem; }

  /* znak wodny schodzi niżej, pod tekst, jeszcze dyskretniej */
  .watermark {
    left: 50%;
    top: 72%;
    width: min(52vh, 88vw);
    opacity: .035;
  }

  .colophon { font-size: .56rem; }
}

/* niskie ekrany pionowe (np. zewnętrzne wyświetlacze składanych) */
@media (max-width: 900px) and (orientation: portrait) and (max-height: 660px) {
  .portrait { height: 48dvh; }
  .card {
    padding-top: 40dvh;
    padding-bottom: 4.5rem;
    gap: clamp(.8rem, 2vh, 1.2rem);
  }
  .logo { width: 165px; }
}

/* wąski poziomy (fold w poziomie, mały tablet) — układ boczny, ale ciaśniej */
@media (max-width: 900px) and (orientation: landscape) {
  .portrait { width: 44vw; }
  .card {
    margin-left: 40vw;
    gap: clamp(.8rem, 2.6vh, 1.4rem);
    padding-top: 3rem;
    padding-bottom: 4rem;
  }
  .logo  { width: clamp(150px, 19vw, 220px); }
  .motto { font-size: clamp(1.15rem, 2.9vw, 2rem); }
  .watermark { left: 70vw; width: min(70vh, 42vw); } /* oś kolumny: (100vw + 40vw) / 2 */
  .colophon { font-size: .56rem; }
}

@media (max-height: 560px) {
  .card { gap: 1rem; padding-bottom: 4.5rem; }
  .logo { width: 170px; }
}

/* ---------- stillness, on request ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .grain, .glow { display: none; }
}