/**
 * INKMORPH — style niestandardowe
 * Tailwind obsługuje layout i utility; tutaj: animacje, efekty i komponenty
 * wymagające CSS poza klasami utility.
 */

/* -------------------------------------------------------------------------- */
/* Design tokens                                                              */
/* -------------------------------------------------------------------------- */

:root {
  --color-ink: #e8192c;
  --color-bone: #f0ebe3;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  --ease-smooth: cubic-bezier(0.23, 1, 0.32, 1);
  --z-grain: 9998;
  --z-cursor: 99999;
}

/* Fallbacki kolorów marki — działają nawet gdy CDN Tailwind nie wczyta configu */
.text-ink { color: var(--color-ink); }
.bg-ink { background-color: var(--color-ink); }
.border-ink { border-color: var(--color-ink); }
.text-bone { color: var(--color-bone); }
.bg-bone { background-color: var(--color-bone); }

/* -------------------------------------------------------------------------- */
/* Globalne efekty                                                            */
/* -------------------------------------------------------------------------- */

@media (pointer: fine) {
  * {
    cursor: none;
  }
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* -------------------------------------------------------------------------- */
/* Custom cursor (desktop)                                                    */
/* -------------------------------------------------------------------------- */

#cursor {
  position: fixed;
  width: 12px;
  height: 12px;
  background: var(--color-ink);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width 0.2s, height 0.2s, background 0.2s;
}

#cursor.is-hover {
  width: 48px;
  height: 48px;
  background: #fff;
}

/* -------------------------------------------------------------------------- */
/* Typografia dekoracyjna                                                     */
/* -------------------------------------------------------------------------- */

.text-stroke {
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.25);
  color: transparent;
}

/* -------------------------------------------------------------------------- */
/* Animacje                                                                   */
/* -------------------------------------------------------------------------- */

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee-track {
  animation: marquee 22s linear infinite;
}

.marquee-track-reverse {
  animation: marquee 28s linear infinite reverse;
}

@keyframes drip {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(1.15); opacity: 0.85; }
}

.ink-drip {
  animation: drip 3s ease-in-out infinite;
  transform-origin: top;
}

@keyframes buzz {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-0.5px, 0.5px) rotate(-0.3deg); }
  75% { transform: translate(0.5px, -0.5px) rotate(0.3deg); }
}

.machine-buzz {
  animation: buzz 0.08s linear infinite;
}

@keyframes flicker {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: 0.4; }
  97% { opacity: 1; }
  98% { opacity: 0.6; }
}

.neon-flicker {
  animation: flicker 4s infinite;
}

/* -------------------------------------------------------------------------- */
/* Sekcja: Style (flash cards)                                                */
/* -------------------------------------------------------------------------- */

.flash-scroll {
  scrollbar-width: none;
}

.flash-scroll::-webkit-scrollbar {
  display: none;
}

.flash-card {
  transition: transform 0.5s var(--ease-smooth), box-shadow 0.5s;
}

.flash-card img {
  filter: grayscale(100%) contrast(1.1);
  transition: filter 0.5s var(--ease-smooth);
}

.flash-card:hover img {
  filter: grayscale(0) contrast(1);
}

.flash-card:hover {
  transform: rotate(0deg) scale(1.04) !important;
  box-shadow: 0 0 60px rgba(232, 25, 44, 0.25);
  z-index: 10;
}

/* -------------------------------------------------------------------------- */
/* Sekcja: Artyści                                                            */
/* -------------------------------------------------------------------------- */

.artist-panel {
  transition: flex 0.7s var(--ease-smooth);
}

.artist-panel img {
  object-position: center 18%;
  transform-origin: center 18%;
  filter: grayscale(100%);
  transition: transform 0.7s var(--ease-smooth), filter 0.7s ease;
}

.artist-panel:hover {
  flex: 2.2;
}

.artist-panel:hover img {
  transform: scale(1.18);
  filter: grayscale(0);
}

.artist-panel:hover .artist-overlay {
  opacity: 1;
}

.artist-panel:hover .artist-num {
  color: var(--color-ink);
}

/* -------------------------------------------------------------------------- */
/* Scroll reveal                                                              */
/* -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------------------------- */
/* Formularz                                                                  */
/* -------------------------------------------------------------------------- */

.form-field {
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--color-zinc-800);
  border-radius: 0;
}

.form-field:focus {
  border-bottom-color: var(--color-ink);
  outline: none;
  box-shadow: none;
}

select.form-field {
  color-scheme: dark;
  background-color: var(--color-zinc-950);
}

select.form-field option {
  background-color: var(--color-zinc-900);
  color: var(--color-bone);
}

/* -------------------------------------------------------------------------- */
/* Hero                                                                       */
/* -------------------------------------------------------------------------- */

.hero-img {
  filter: grayscale(100%) contrast(1.15) brightness(0.9);
  transition: filter 0.7s ease;
}

.group:hover .hero-img {
  filter: grayscale(0) contrast(1.05) brightness(1);
}

/* Hero — większa typografia na mobile, desktop bez zmian */
.hero-heading span {
  font-size: clamp(3.5rem, 16vw, 5.5rem);
}

@media (min-width: 1024px) {
  .hero-heading span {
    font-size: clamp(2.75rem, 10vw, 7.5rem);
  }
}

.scanlines {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
}

/* -------------------------------------------------------------------------- */
/* Mobile menu                                                                */
/* -------------------------------------------------------------------------- */

body.is-menu-open {
  overflow: hidden;
}

/* -------------------------------------------------------------------------- */
/* Responsywność                                                              */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  * {
    cursor: auto;
  }

  #cursor {
    display: none;
  }

  .artist-panel:hover {
    flex: 1;
  }
}