@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;600;800;900&family=Permanent+Marker&display=swap');


/* =========================================
   OSNOVNE POSTAVKE
========================================= */

:root {

  --black: #070707;
  --black2: #101010;

  --white: #eee9df;

  --gray: #aaa59b;

  --red: #d91f1f;

  --red-dark: #7d0e0e;

  --gold: #b48a3a;

  --border: rgba(238,233,223,.18);

}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  background:
    radial-gradient(
      circle at 50% 10%,
      #241010 0,
      transparent 34%
    ),
    #070707;

  color: var(--white);

  font-family:
    Inter,
    Arial,
    sans-serif;

  overflow-x: hidden;

}


body::before {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  opacity: .08;

  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.15) 0 1px,
      transparent 1px 4px
    );

  z-index: 20;

}


.noise {

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 19;

  opacity: .12;

  background:

    radial-gradient(
      circle at 20% 30%,
      #d91f1f 0 1px,
      transparent 2px
    ),

    radial-gradient(
      circle at 80% 70%,
      #eee9df 0 1px,
      transparent 2px
    );

  background-size:
    37px 41px,
    53px 47px;

  mix-blend-mode: screen;

}


a {
  color: inherit;
}


/* =========================================
   HEADER
========================================= */

.site-header {

  position: sticky;

  top: 0;

  z-index: 10;

  min-height: 64px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
    12px 4vw;

  border-bottom:
    1px solid var(--border);

  background:
    rgba(7,7,7,.92);

  backdrop-filter:
    blur(8px);

}


.logo {

  text-decoration: none;

  font-family:
    'Bebas Neue',
    Impact,
    sans-serif;

  letter-spacing: 2px;

  font-size: 25px;

}


.logo span {

  color: var(--red);

}


nav {

  display: flex;

  gap: 22px;

  align-items: center;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 1px;

}


nav a {

  text-decoration: none;

  opacity: .78;

}


nav a:hover {

  opacity: 1;

  color: var(--red);

}


.nav-kofi {

  border:
    1px solid var(--red);

  padding:
    9px 12px;

  color:
    var(--white) !important;

}


/* =========================================
   HERO
========================================= */

.hero {

  min-height:
    calc(100vh - 64px);

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding:
    30px 3vw 70px;

  max-width: 1400px;

  margin: auto;

}


.hero-image-wrap {

  width: 100%;

  border:
    1px solid var(--border);

  box-shadow:
    0 0 0 8px #050505,
    0 0 50px rgba(217,31,31,.15);

  background: #050505;

  overflow: hidden;

}


.hero-image-wrap img {

  width: 100%;

  display: block;

  aspect-ratio: 3 / 1;

  object-fit: cover;

}


.hero-copy {

  text-align: center;

  padding:
    35px 10px 0;

}


.eyebrow {

  color: var(--red);

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 2px;

}


h1,
h2,
h3 {

  margin: 0;

  font-family:
    'Bebas Neue',
    Impact,
    sans-serif;

  font-weight: 400;

  letter-spacing: 2px;

}


h1 {

  font-size:
    clamp(58px, 11vw, 150px);

  line-height: .78;

  margin:
    8px 0 18px;

}


h1 span,
h2 span {

  color: var(--red);

}


.lead {

  color: var(--gray);

  font-size:
    clamp(15px, 2vw, 20px);

  line-height: 1.6;

}


/* =========================================
   GUMBOVI
========================================= */

.buttons {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 12px;

  margin-top: 25px;

}


.btn {

  display: inline-block;

  padding:
    15px 24px;

  text-decoration: none;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 1px;

  border:
    1px solid var(--white);

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease;

}


.btn:hover {

  transform:
    translateY(-3px)
    rotate(-1deg);

}


.btn-red {

  background:
    var(--red);

  border-color:
    var(--red);

  color:
    white;

  box-shadow:
    5px 5px 0 #4c0808;

}


.btn-red:hover {

  background:
    #f12a2a;

  box-shadow:
    8px 8px 0 #4c0808;

}


.btn-light {

  background:
    transparent;

}


.btn.big {

  font-size: 14px;

  padding:
    18px 30px;

  margin-top: 14px;

}


/* =========================================
   SEKCIJE
========================================= */

.section {

  width:
    min(1050px, 90vw);

  margin:
    0 auto;

  padding:
    120px 0;

  border-top:
    1px solid var(--border);

}


.section-tag {

  color: var(--red);

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 2px;

}


.intro {

  text-align: center;

}


h2 {

  font-size:
    clamp(55px, 9vw, 110px);

  line-height: .83;

  margin:
    12px 0 25px;

}


.intro p:not(.section-tag):not(.small) {

  color: var(--gray);

  line-height: 1.9;

  font-size: 17px;

}


.small {

  margin-top: 30px;

  color: var(--red);

  font-weight: 800;

}


/* =========================================
   ČOPOR
========================================= */

.pack h2,
.chaos h2 {

  text-align: center;

}


.animals {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 12px;

  margin-top: 50px;

}


.animal {

  padding:
    25px 18px;

  min-height: 230px;

  border:
    1px solid var(--border);

  background:
    #0c0c0c;

  text-align: center;

  transform:
    rotate(var(--r, 0deg));

  transition:
    transform .2s ease,
    border-color .2s ease;

}


.animal:nth-child(1) {
  --r: -1deg;
}


.animal:nth-child(2) {
  --r: 1deg;
}


.animal:nth-child(3) {
  --r: -1deg;
}


.animal:nth-child(4) {
  --r: 1deg;
}


.animal:hover {

  border-color:
    var(--red);

  transform:
    translateY(-6px)
    rotate(0);

}


.animal-icon {

  font-size: 65px;

  filter:
    grayscale(.8);

}


.animal h3 {

  font-size: 30px;

}


.animal p {

  color: var(--gray);

  min-height: 42px;

}


.animal span {

  color: var(--red);

  font-family:
    'Permanent Marker',
    cursive;

  font-size: 14px;

}


/* =========================================
   INTERAKTIVNI KAOS
========================================= */

.chaos {

  text-align: center;

}


.choice-grid {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 18px;

  margin:
    40px 0 20px;

}


.choice {

  appearance: none;

  cursor: pointer;

  color: var(--white);

  background:
    #101010;

  border:
    1px solid var(--border);

  padding:
    30px 20px;

  text-align: left;

  font-family:
    inherit;

  transition:
    .2s ease;

}


.choice:hover {

  border-color:
    var(--red);

  background:
    #170909;

  transform:
    translateY(-3px);

}


.choice strong {

  display: block;

  font-family:
    'Bebas Neue',
    Impact,
    sans-serif;

  font-size: 30px;

  letter-spacing: 1px;

}


.choice small {

  color:
    var(--gray);

}


.response {

  min-height: 90px;

  display: grid;

  place-items: center;

  border:
    1px dashed #555;

  padding:
    20px;

  color:
    var(--red);

  font-family:
    'Permanent Marker',
    cursive;

  font-size: 20px;

}


/* =========================================
   KO-FI / DONACIJA
========================================= */

.donation {

  text-align: center;

}


.donation-card {

  position: relative;

  padding:
    65px 30px;

  border:
    1px solid #473020;

  background:
    linear-gradient(
      rgba(70,46,24,.2),
      rgba(70,46,24,.2)
    ),
    #18110b;

  box-shadow:
    10px 10px 0 #050505;

}


.donation-card::before {

  content:
    "NAŠA ZADNJA KOVANICA";

  position: absolute;

  top: 12px;

  left: 16px;

  color:
    #80694c;

  font-size: 9px;

  letter-spacing: 2px;

  transform:
    rotate(-2deg);

}


.donation-line {

  color:
    var(--gray);

  font-size:
    17px;

}


.tiny {

  color:
    #8b867d;

  font-size:
    12px;

  line-height:
    1.6;

  margin-top:
    25px;

}


/* =========================================
   KRAJ
========================================= */

.ending {

  text-align: center;

  border-bottom:
    1px solid var(--border);

}


.ending-art {

  display: flex;

  justify-content: center;

  gap: 10px;

  font-size: 60px;

  filter:
    grayscale(.8);

  margin-bottom:
    30px;

}


.ending p {

  color:
    var(--gray);

}


/* =========================================
   FOOTER
========================================= */

footer {

  width:
    min(1050px, 90vw);

  margin:
    auto;

  padding:
    25px 0 40px;

  display: flex;

  justify-content: space-between;

  gap: 20px;

  color:
    #777;

  font-size:
    9px;

  letter-spacing:
    1.5px;

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 800px) {

  .site-header {

    align-items:
      flex-start;

  }


  nav {

    gap: 10px;

    flex-wrap:
      wrap;

    justify-content:
      flex-end;

  }


  nav a:nth-child(-n+3) {

    display:
      none;

  }


  .hero {

    padding-top:
      18px;

  }


  .hero-image-wrap img {

    aspect-ratio:
      2 / 1;

  }


  .animals {

    grid-template-columns:
      1fr 1fr;

  }

}


/* =========================================
   MOBITEL
========================================= */

@media (max-width: 520px) {

  .site-header {

    position:
      relative;

  }


  .logo {

    font-size:
      20px;

  }


  .hero-image-wrap img {

    aspect-ratio:
      1.55 / 1;

    object-position:
      center;

  }


  .hero-copy {

    padding-top:
      28px;

  }


  h1 {

    font-size:
      58px;

  }


  h2 {

    font-size:
      54px;

  }


  .buttons {

    display:
      grid;

    grid-template-columns:
      1fr;

  }


  .btn {

    width:
      100%;

  }


  .choice-grid {

    grid-template-columns:
      1fr;

  }


  .animals {

    grid-template-columns:
      1fr;

  }


  .animal {

    min-height:
      auto;

  }


  .section {

    padding:
      80px 0;

  }


  footer {

    flex-direction:
      column;

  }

}