/*
 * brand.css — warstwa brandingowa cynar.ski dla Gitea 1.27+
 *
 * Ładowana zawsze (z custom/templates/custom/header.tmpl), niezależnie od
 * wybranego motywu. Odpowiada za: font Oswald, stronę startową (home.tmpl)
 * i drobne poprawki UI. Kolory całego UI siedzą w theme-cynarski.css.
 */

/* ---------------------------------------------------------------- font --- */

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../fonts/oswald-var.woff2") format("woff2-variations");
}

:root {
  /* paleta marki — jedyne miejsce, w którym warto grzebać */
  --cyn-bg: #1d1e20;
  --cyn-bg-deep: #141518;
  --cyn-text: #dadadb;
  --cyn-copper: #b45a07;
  --cyn-copper-light: #c49267;
  --cyn-steel: #858585;
  --cyn-cobalt: #081abd;
  --cyn-radius: 1.3em;
  --cyn-font: "Oswald", var(--fonts-proportional), sans-serif;
}

/* Oswald na nagłówkach i w brandingu — reszta UI zostaje na foncie systemowym,
   bo Oswald jest wąski i przy 13px w tabelach robi się nieczytelny.
   Chcesz Oswalda wszędzie? Odkomentuj poniższe i przygotuj się na zwężenie. */
/* :root { --fonts-override: "Oswald"; } */

h1, h2, h3,
.ui.header,
#navbar .brand,
.repo-title,
.flex-item-title {
  font-family: var(--cyn-font);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------------- UI trim --- */

#navbar {
  border-bottom: 1px solid var(--color-secondary-alpha-40);
}

#navbar .brand img,
#navbar .brand .svg {
  filter: drop-shadow(0 0 6px rgb(180 90 7 / 35%));
}

.ui.button,
.ui.primary.button,
.ui.basic.button {
  border-radius: 8px;
}

/* ------------------------------------------------------ strona startowa --- */

.cyn-home {
  padding: clamp(12px, 3vw, 32px) !important;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cyn-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--cyn-radius);
  min-height: min(76vh, 660px);
  display: grid;
  place-items: center;
  padding: clamp(28px, 6vw, 72px) clamp(16px, 4vw, 56px);
  background-color: var(--cyn-bg-deep);
  background-image:
    /* przygaszenie — na cynar.ski pod spodem jest zdjęcie, tu robi to warstwa cienia */
    linear-gradient(170deg, rgb(10 11 13 / 34%), rgb(10 11 13 / 62%)),
    radial-gradient(75% 95% at 10% 6%, rgb(180 90 7 / 52%), transparent 60%),
    radial-gradient(80% 105% at 92% 96%, rgb(8 26 189 / 46%), transparent 62%),
    linear-gradient(50deg, rgb(70 42 7 / 56%) 20%, rgb(8 26 189 / 52%));
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 7%),
    0 30px 70px -40px #000;
}

/* siatka — bo wszystko jest kodem, nawet tło */
.cyn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 7%) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 7%) 0 1px, transparent 1px 44px);
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 20%, transparent 78%);
}

/* ziarno + winieta */
.cyn-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.cyn-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  max-width: 760px;
}

/* --- znak --- */

.cyn-mark {
  position: relative;
  width: clamp(140px, 22vw, 210px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(20 21 24 / 55%);
  backdrop-filter: blur(6px);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 10%),
    0 0 40px -10px rgb(180 90 7 / 60%);
}

.cyn-mark img {
  width: 72%;
  height: 72%;
}

.cyn-mark::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px dashed rgb(196 146 103 / 45%);
  animation: cyn-spin 48s linear infinite;
}

@keyframes cyn-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cyn-mark::before { animation: none; }
}

/* --- typografia --- */

.cyn-title {
  font-family: var(--cyn-font);
  font-weight: 300;
  font-size: clamp(2.1rem, 6.5vw, 4rem);
  line-height: 1.05;
  margin: 0;
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 24px rgb(0 0 0 / 55%);
}

.cyn-tagline {
  font-family: var(--cyn-font);
  font-weight: 300;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  margin: 0;
  color: rgb(255 255 255 / 88%);
  text-shadow: 0 1px 12px rgb(0 0 0 / 60%);
}

.cyn-lede {
  font-size: clamp(0.9rem, 1.7vw, 1.05rem);
  margin: 0;
  max-width: 46ch;
  color: rgb(255 255 255 / 72%);
  text-wrap: balance;
}

/* --- przyciski --- */

.cyn-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.cyn-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.55em 1.15em;
  border-radius: 8px;
  font-family: var(--cyn-font);
  font-weight: 300;
  font-size: 1.05rem;
  color: #fff !important;
  background: rgb(15 16 18 / 55%);
  border: 1px solid rgb(255 255 255 / 14%);
  backdrop-filter: blur(4px);
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.cyn-btn:hover,
.cyn-btn:focus-visible {
  transform: translateY(-2px);
  border-color: var(--cyn-copper-light);
  background: rgb(180 90 7 / 28%);
  text-decoration: none;
}

.cyn-btn--primary {
  background: rgb(180 90 7 / 62%);
  border-color: rgb(196 146 103 / 55%);
}

.cyn-btn .svg,
.cyn-btn svg {
  width: 18px;
  height: 18px;
}

/* --- ikony społecznościowe --- */

.cyn-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
}

.cyn-social a {
  display: inline-flex;
  padding: 10px;
  color: rgb(255 255 255 / 78%);
  transition: transform 0.12s ease, color 0.12s ease;
}

.cyn-social a:hover {
  transform: translateY(-3px);
  color: var(--cyn-copper-light);
}

.cyn-social svg {
  width: 26px;
  height: 26px;
}

/* --- stopka strony startowej --- */

.cyn-footnote {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-light-2);
  margin: 0;
}

.cyn-footnote a { color: var(--cyn-copper-light); }

@media (max-width: 767.98px) {
  .cyn-hero { min-height: auto; }
  .cyn-social svg { width: 22px; height: 22px; }
}