/* =========================================================
   Jarmark Świętego Michała — Żagań 2026
   Luxury gold-on-black heritage poster
   ========================================================= */

:root {
  --black:        #050403;
  --black-2:      #0c0907;

  /* metallic gold ramp (top highlight -> deep bronze) */
  --gold-hi:      #fff4cf;
  --gold-1:       #ffe49b;
  --gold-2:       #f6c453;
  --gold-3:       #e0a83a;
  --gold-deep:    #a9772a;

  --glow:         rgba(246, 196, 83, 0.35);

  --maxw:         min(620px, 92vw);

  --ease:         cubic-bezier(.22, .61, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  min-height: 100svh;
  background: var(--black);
  color: var(--gold-2);
  font-family: "Science Gothic", system-ui, sans-serif;
  text-transform: uppercase;
  overflow-x: hidden;
  display: grid;
  place-items: center;
  position: relative;
}

/* ---------- Background layers ---------- */

#glitter {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 46%,
      rgba(120, 84, 24, 0.20) 0%,
      rgba(60, 42, 12, 0.10) 32%,
      rgba(0, 0, 0, 0) 60%),
    radial-gradient(140% 120% at 50% 50%,
      rgba(0, 0, 0, 0) 55%,
      rgba(0, 0, 0, 0.55) 100%);
  mix-blend-mode: screen;
}
.atmosphere::after {           /* vignette on top */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 110% at 50% 50%,
      transparent 60%, rgba(0,0,0,.65) 100%);
  mix-blend-mode: multiply;
}

/* ---------- Poster ---------- */

.poster {
  position: relative;
  z-index: 2;
  width: var(--maxw);
  margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 5rem) 1rem clamp(3rem, 8vw, 5.5rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Shared metallic-gold text treatment */
.title .line,
.edition, .dates, .month, .year, .city,
.mask-label__top, .mask-label__bottom {
  background: linear-gradient(176deg,
      var(--gold-hi) 0%,
      var(--gold-1) 22%,
      var(--gold-2) 48%,
      var(--gold-3) 74%,
      var(--gold-deep) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.5))
          drop-shadow(0 0 18px var(--glow));
  line-height: 0.98;
}

/* Title block */
.title {
  --title-size: clamp(2.6rem, 10vw, 4.6rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  display: flex;
  flex-direction: column;
  gap: .3em;
}
.line--lead {
  font-size: var(--title-size);
  letter-spacing: 0.12em;
}
.line--big {
  font-weight: 400;
  font-size: clamp(2.1rem, 8.2vw, 3.7rem);
  letter-spacing: 0.045em;
}

.edition {
  margin-top: clamp(1.2rem, 3.4vw, 1.9rem);
  font-weight: 400;
  font-size: clamp(1.1rem, 3.4vw, 1.7rem);
  letter-spacing: 0.4em;
  padding-left: 0.4em;        /* compensate tracking */
}

.dates {
  margin-top: clamp(1.3rem, 4.2vw, 2.4rem);
  font-weight: 400;
  font-size: clamp(3.6rem, 14vw, 6.4rem);
  letter-spacing: 0.04em;
}

.month {
  margin-top: clamp(.4rem, 1.4vw, .8rem);
  font-weight: 400;
  font-size: clamp(2.4rem, 9.5vw, 4.4rem);
  letter-spacing: 0.06em;
}

.year {
  margin-top: clamp(.9rem, 2.8vw, 1.5rem);
  font-weight: 400;
  font-size: clamp(1.1rem, 4vw, 1.7rem);
  letter-spacing: 0.4em;
  padding-left: 0.4em;
}

.city {
  margin-top: clamp(1.7rem, 5vw, 2.9rem);
  font-weight: 400;
  font-size: clamp(2.3rem, 9vw, 4rem);
  letter-spacing: 0.18em;
  padding-left: 0.18em;
}

/* ---------- Maszkaron ---------- */

.mask {
  margin-top: clamp(1.8rem, 5vw, 3rem);
  width: clamp(190px, 52vw, 340px);
  aspect-ratio: 1 / 1;
  will-change: transform;
  animation: levitate 7s ease-in-out infinite;
}
.mask img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 18px 34px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 40px rgba(246, 196, 83, 0.28));
  animation: glow-pulse 5.5s ease-in-out infinite;
}

.mask-label {
  margin-top: clamp(1.7rem, 5vw, 2.9rem);
  font-weight: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.9;
  gap: 0.04em;
}
.mask-label__top {
  font-size: clamp(2.2rem, 8.6vw, 3.8rem);   /* unchanged size */
  letter-spacing: 0.16em;
  padding-left: 0.16em;
}
.mask-label__bottom {
  font-size: clamp(3.1rem, 12.5vw, 5.6rem);  /* larger */
  letter-spacing: 0.14em;
  padding-left: 0.14em;
}

/* ---------- Line-up / artists ---------- */

.lineup {
  width: 100%;
  margin-top: clamp(2.8rem, 8vw, 5rem);
}

.lineup__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  margin-bottom: clamp(1.6rem, 4.5vw, 2.6rem);
}
.lineup__title {
  font-weight: 400;
  font-size: clamp(1.9rem, 7vw, 3.2rem);
  letter-spacing: 0.14em;
  padding-left: 0.14em;
  /* metallic gold text */
  background: linear-gradient(176deg,
      var(--gold-hi) 0%, var(--gold-1) 22%, var(--gold-2) 48%,
      var(--gold-3) 74%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 18px var(--glow));
}
/* thin gold rule flanking the kicker */
.lineup__head::before {
  content: "";
  width: clamp(40px, 12vw, 90px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-3), transparent);
  opacity: 0.6;
}

.lineup__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.9rem, 2.6vw, 1.5rem);
}

/* ---- card ---- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(36,27,12,.55), rgba(10,8,5,.65));
  border: 1px solid rgba(246, 196, 83, 0.22);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 240, 200, 0.06);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease),
              border-color .45s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(246, 196, 83, 0.55);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.55),
    0 0 34px rgba(246, 196, 83, 0.22),
    inset 0 1px 0 rgba(255, 240, 200, 0.12);
}

.card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.card--artist:hover .card__media img { transform: scale(1.06); }

/* warm gradient veil so caption sits cleanly + ties photo to gold theme */
.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(8, 6, 4, 0.85) 0%, rgba(8, 6, 4, 0.12) 38%, rgba(8, 6, 4, 0) 60%);
}

/* date pill on the photo */
.card__day {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  font-size: clamp(.6rem, 1.7vw, .74rem);
  letter-spacing: 0.18em;
  padding: 0.42em 0.8em 0.36em 0.95em;
  border-radius: 999px;
  color: #1a1206;
  background: linear-gradient(160deg, var(--gold-1), var(--gold-3));
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  font-weight: 500;
}

/* TBA placeholder media */
.card__media--tba {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 50% 35%,
      rgba(246, 196, 83, 0.10), rgba(0,0,0,0) 70%),
    repeating-linear-gradient(45deg,
      rgba(246,196,83,.025) 0 10px, rgba(0,0,0,0) 10px 20px);
}
.card__media--tba::after { background: none; }   /* no veil on TBA */
.card__qmark {
  font-size: clamp(3.4rem, 13vw, 5.2rem);
  font-weight: 300;
  line-height: 1;
  color: transparent;
  background: linear-gradient(176deg, var(--gold-1), var(--gold-deep));
  -webkit-background-clip: text;
          background-clip: text;
  filter: drop-shadow(0 0 16px rgba(246, 196, 83, 0.28));
  opacity: 0.85;
  animation: qpulse 3.6s ease-in-out infinite;
}
.card--tba:nth-of-type(odd) .card__qmark  { animation-delay: -1.2s; }
.card--tba:nth-of-type(even) .card__qmark { animation-delay: -2.4s; }

.card__body {
  padding: clamp(.7rem, 2vw, 1rem) clamp(.8rem, 2.2vw, 1.1rem) clamp(.85rem, 2.4vw, 1.15rem);
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  text-align: left;
}
.card__name {
  font-size: clamp(1.05rem, 3.4vw, 1.5rem);
  letter-spacing: 0.1em;
  color: var(--gold-1);
}
.card--tba .card__name { color: var(--gold-3); opacity: 0.85; }
.card__meta {
  font-size: clamp(.62rem, 1.8vw, .78rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246, 196, 83, 0.62);
}

@keyframes qpulse {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50%      { opacity: 0.95; transform: translateY(-3px); }
}

/* Żagań emblem */
.emblem {
  margin-top: clamp(2.4rem, 7vw, 4rem);
  width: clamp(120px, 30vw, 200px);
  aspect-ratio: 1 / 1;
}
.emblem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 26px rgba(246, 196, 83, 0.22));
}

/* ---------- Motion ---------- */

@keyframes levitate {
  0%   { transform: translateY(0)        rotate(-0.6deg); }
  50%  { transform: translateY(-16px)    rotate(0.8deg); }
  100% { transform: translateY(0)        rotate(-0.6deg); }
}

@keyframes glow-pulse {
  0%, 100% { filter: drop-shadow(0 18px 34px rgba(0,0,0,.7))
                      drop-shadow(0 0 34px rgba(246,196,83,.22)); }
  50%      { filter: drop-shadow(0 22px 40px rgba(0,0,0,.72))
                      drop-shadow(0 0 54px rgba(246,196,83,.42)); }
}

/* Reveal — triggers on load AND on scroll (toggled by IntersectionObserver).
   Hidden by default; .in-view animates it into place with a per-element
   stagger via --d. Leaving the viewport resets it so it replays on return. */
.reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  filter: blur(2px);
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease),
    filter 0.55s var(--ease);
  transition-delay: 0ms;          /* scroll reveals: no wait → snappy */
  will-change: opacity, transform;
}
/* Stagger only the very first paint; .loading is dropped shortly after load */
.loading .reveal { transition-delay: var(--d, 0ms); }
.reveal.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Until JS runs, don't leave content invisible (progressive enhancement) */
.no-js .reveal { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .mask, .mask img { animation: none; }
  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ---------- Fine tuning for very small / very large screens ---------- */

@media (max-width: 360px) {
  .edition { letter-spacing: 0.3em; }
  .year    { letter-spacing: 0.28em; }
}

/* Desktop: wider poster, "Świętego Michała" on one line at the same
   size as "Jarmark". */
@media (min-width: 992px) {
  :root { --maxw: min(1060px, 94vw); }

  .line--big {
    font-size: var(--title-size);   /* match "Jarmark" */
    letter-spacing: 0.045em;
    white-space: nowrap;
  }

  /* line-up gets a roomier 3-column grid on desktop */
  .lineup { max-width: 880px; margin-inline: auto; }
  .lineup__grid { grid-template-columns: repeat(3, 1fr); }

  /* a lone card on the last row (10 ÷ 3 → 1 leftover) sits centered */
  .lineup__grid > .card:last-child:nth-child(3n + 1) {
    grid-column: 2;
  }
}

/* small tablets / large phones: keep the artist roomy but still 2-up */
@media (min-width: 560px) and (max-width: 991px) {
  .lineup { max-width: 640px; margin-inline: auto; }
}