/* ==========================================================================
   damianopiola.pl — strona rozdzielająca (hub)
   ========================================================================== */

/* --- Fluted Glass: parametry efektu --------------------------------------
   Odpowiednik atrybutów data-aifx-*, ale liczony przez przeglądarkę,
   bez zewnętrznego runtime'u. Zmiana którejkolwiek wartości przelicza całość.
   -------------------------------------------------------------------------- */

:root {
  --fx-c1: #202c39;             /* Jet Black — doliny żłobków */
  --fx-c2: #283845;             /* Jet Black 2 */
  --fx-c3: #3a4a59;             /* pochodna Jet Black 2, rozświetlone grzbiety */
  --fx-bg: 32 44 57;            /* #202c39 w kanałach — alfa osobno */
  --fx-bg-alpha: .82;           /* data-aifx-bg-alpha */
  --fx-flutes: 62;              /* data-aifx-flutes */
  --fx-flute-angle: 29deg;      /* data-aifx-flute-angle — 90 = pionowe, 0 = poziome */
  --fx-distortion: 1.36;        /* data-aifx-distortion */

  /* Wartości pochodne. W CSS gradient pod kątem X daje pasy prostopadłe do
     kierunku gradientu, więc kąt gradientu równa się wprost kątowi żeber
     liczonemu od poziomu: 0deg = pasy poziome, 90deg = pionowe. */
  --fx-angle: var(--fx-flute-angle);

  /* Przy żebrach pod 29° od poziomu rozpiętość kadru w poprzek żeber to
     sin(29°)*szerokość + cos(29°)*wysokość, czyli dla 1280x900 około 1408px;
     62 żebra dają ~22px. Dolny limit chroni telefony przed morą. */
  --fx-period: max(1.7vw, 12px);
  --fx-half: calc(var(--fx-period) / 2);

  /* data-aifx-shape="wave": profil żłobka jako przybliżenie sinusoidy —
     rozbłysk na grzbiecie, cień w dolinie, zera na przejściach. */
  --fx-mesh:
    radial-gradient(120% 85% at 15% 5%,   var(--fx-c3), transparent 58%),
    radial-gradient(95% 75% at 85% 20%,   var(--fx-c2), transparent 62%),
    radial-gradient(130% 110% at 50% 115%, var(--fx-c3), transparent 60%),
    linear-gradient(155deg, var(--fx-c1), var(--fx-c2) 52%, var(--fx-c1));

  --fx-wash:
    linear-gradient(rgb(var(--fx-bg) / var(--fx-bg-alpha)),
                    rgb(var(--fx-bg) / var(--fx-bg-alpha)));

  /* Warstwa refrakcji dostaje słabsze przyciemnienie niż pole bazowe — dzięki
     temu sąsiednie żłobki różnią się jasnością i wzór przestaje być płaski. */
  --fx-wash-soft:
    linear-gradient(rgb(var(--fx-bg) / calc(var(--fx-bg-alpha) * .45)),
                    rgb(var(--fx-bg) / calc(var(--fx-bg-alpha) * .45)));

  --fx-field: var(--fx-wash), var(--fx-mesh);
  --fx-field-soft: var(--fx-wash-soft), var(--fx-mesh);
}


/* --- Tokeny interfejsu ----------------------------------------------------
   Tło jest ciemne zawsze, więc motyw jasny nie ma tu zastosowania:
   czarny tekst na #043519 byłby nieczytelny.
   -------------------------------------------------------------------------- */

:root {
  /* Marka dev: Jet Black jako podstawa, Tangerine Dream jako jedyny akcent.
     Celowo inna rodzina koloru niż zielony hub na damianopiola.pl. */
  --bg: var(--fx-c1);
  --surface: 40 56 69;                    /* #283845 — karty półprzezroczyste */
  /* .90, nie .82: przy niższym kryciu rozbłyski żłobków przebijały przez
     karty i spychały Dry Sage na podpisach do 4.18:1, poniżej progu AA. */
  --surface-alpha: .90;
  --text: #f2d492;                        /* Soft Peach */
  --muted: #b8b08d;                       /* Dry Sage */
  --line: #3a4a59;
  --line-hover: #f29559;                  /* Tangerine Dream — tylko na interakcji */
  --accent: #f29559;
  --focus: #f29559;
  --shadow: 0 1px 2px rgb(0 0 0 / .35);
  --shadow-hover: 0 10px 30px rgb(0 0 0 / .5);

  --radius: 14px;
  --gap: 14px;
  --gutter: 20px;
  --measure: 46rem;
  --motion: 160ms ease;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* --- reset ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: clamp(2.5rem, 9vh, 5rem) var(--gutter);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;               /* trzyma warstwę -1 wewnątrz body */
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, p { margin: 0; }

/* --- Fluted Glass: warstwy ------------------------------------------------
   1. .fluted        — pole barwne (mesh + przyciemnienie --fx-bg)
   2. .fluted__slice — co drugi żłobek pokazuje przesuniętą kopię pola,
                       czyli to, co w prawdziwym szkle robi refrakcja
   3. .fluted__ribs  — cieniowanie żłobków (rozbłysk + dolina)
   -------------------------------------------------------------------------- */

.fluted {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--fx-c1);
  background-image: var(--fx-field);
}

.fluted__slice {
  position: absolute;
  inset: 0;
  -webkit-mask-image: repeating-linear-gradient(
    var(--fx-angle),
    #000 0 var(--fx-half),
    transparent var(--fx-half) var(--fx-period));
  mask-image: repeating-linear-gradient(
    var(--fx-angle),
    #000 0 var(--fx-half),
    transparent var(--fx-half) var(--fx-period));
}

.fluted__shift {
  position: absolute;
  inset: -18% -20%;
  background-image: var(--fx-field-soft);
  /* Skala + odbicie + przesunięcie w obu osiach. Samo przesunięcie o krotność
     okresu żłobka nic by nie dało: mesh jest gładki, więc kopia przesunięta
     o kilkadziesiąt pikseli ma niemal ten sam kolor co oryginał. */
  transform:
    scale(1.25)
    scaleX(-1)
    translate(calc(var(--fx-distortion) * 6vw), calc(var(--fx-distortion) * -3vh));
}

.fluted__ribs {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    var(--fx-angle),
    rgb(255 255 255 / 0)                                 0,
    rgb(255 255 255 / calc(.05 * var(--fx-distortion)))  calc(var(--fx-period) * .14),
    rgb(255 255 255 / calc(.13 * var(--fx-distortion)))  calc(var(--fx-period) * .27),
    rgb(255 255 255 / calc(.04 * var(--fx-distortion)))  calc(var(--fx-period) * .40),
    rgb(0 0 0 / 0)                                       calc(var(--fx-period) * .50),
    rgb(0 0 0 / calc(.09 * var(--fx-distortion)))        calc(var(--fx-period) * .64),
    rgb(0 0 0 / calc(.17 * var(--fx-distortion)))        calc(var(--fx-period) * .78),
    rgb(0 0 0 / calc(.07 * var(--fx-distortion)))        calc(var(--fx-period) * .91),
    rgb(255 255 255 / 0)                                 var(--fx-period));
}

/* Host płótna WebGL. Leży nad warstwami CSS, ale pod ::after,
   więc winieta i przyciemnienie pod treścią nadal działają na wierzchu. */
.fluted__gl {
  position: absolute;
  inset: 0;
}

.fluted::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(78% 58% at 50% 45%,
      rgb(0 0 0 / .54) 0%, rgb(0 0 0 / .26) 60%, transparent 100%),
    radial-gradient(120% 95% at 50% 42%,
      transparent 35%, rgb(0 0 0 / .54) 100%);
}

/* --- layout --------------------------------------------------------------- */

.page {
  width: 100%;
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 5vw, 2.5rem);
}

/* --- intro ---------------------------------------------------------------- */

.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.avatar {
  width: clamp(104px, 26vw, 128px);
  height: clamp(104px, 26vw, 128px);
  border-radius: 50%;
  object-fit: cover;
  background: rgb(var(--surface));
  box-shadow: 0 0 0 1px var(--line), 0 6px 24px rgb(0 0 0 / .4);
}

.intro h1 {
  font-size: clamp(1.6rem, 6vw, 2.125rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 650;
}

.lead {
  max-width: 38rem;
  color: var(--muted);
  font-size: clamp(.975rem, 2.6vw, 1.0625rem);
  text-wrap: pretty;
}

/* --- dwie równorzędne ścieżki --------------------------------------------- */
/* grid 1fr 1fr + stretch = identyczna szerokość i wysokość obu kart.         */
/* Żadna z nich nie ma wyróżnienia kolorem, obramowaniem ani wagą typografii. */

.choices {
  display: grid;
  gap: var(--gap);
}

@media (min-width: 42rem) {
  .choices { grid-template-columns: repeat(2, 1fr); }
}

.choice {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: clamp(1.125rem, 4vw, 1.5rem);
  background: rgb(var(--surface) / var(--surface-alpha));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--motion), box-shadow var(--motion),
              transform var(--motion), background-color var(--motion);
}

.choice:hover {
  background: rgb(var(--surface) / .96);
  border-color: var(--line-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.choice:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.choice:active { transform: translateY(0); }

.choice__icon {
  width: 22px;
  height: 22px;
  color: var(--muted);
  flex: none;
}

.choice__title {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: clamp(1.0625rem, 3.2vw, 1.1875rem);
  line-height: 1.35;
  letter-spacing: -.01em;
  font-weight: 600;
}

.choice__arrow {
  margin-left: auto;
  color: var(--accent);
  transition: transform var(--motion), color var(--motion);
}

.choice:hover .choice__arrow {
  transform: translateX(3px);
  color: var(--accent);
}

.choice__note {
  color: var(--muted);
  font-size: .9375rem;
  text-wrap: pretty;
}

/* --- stopka --------------------------------------------------------------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1.25rem;
  color: var(--muted);
  font-size: .875rem;
}

.footer a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--motion);
}

.footer a:hover { color: var(--text); }

.footer a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.footer svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* --- dostępność ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .choice:hover { transform: none; }
  .choice:hover .choice__arrow { transform: none; }
}