/* ==========================================
   AEZZE KINETIC BRUTALISM DESIGN SYSTEM
   ========================================== */

body {
  background-color: #FFFFFF;
}

* {
  scrollbar-color: #000 transparent;
}

/* ---- Signature Brutalist Shadows ---- */
.brutal-shadow {
  box-shadow: 12px 12px 0px 0px #000;
}
.brutal-shadow-blue {
  box-shadow: 12px 12px 0px 0px #0033FF;
}
.brutal-shadow-sm {
  box-shadow: 6px 6px 0px 0px #000;
}
.brutal-interactive {
  transition: none;
}
.brutal-interactive:active {
  transform: translate(4px, 4px);
  box-shadow: 8px 8px 0px 0px #000 !important;
}

/* ---- Custom Scrollbar ---- */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: transparent;
  border-left: 4px solid #000;
}
::-webkit-scrollbar:horizontal {
  border-left: 0;
  border-top: 4px solid #000;
}
::-webkit-scrollbar-thumb {
  background: #000;
}

/* ---- Hover Transitions ---- */
.kinetic-nav-hover {
  transition: transform 0.1s ease-in-out, background-color 0.1s, color 0.1s;
}
.kinetic-nav-hover:hover {
  transform: skewX(-5deg);
  background-color: #000 !important;
  color: #fff !important;
}
.kinetic-btn-invert {
  transition: background-color 0.1s, color 0.1s;
}
.kinetic-btn-invert:hover {
  background-color: #000 !important;
  color: #fff !important;
}
.kinetic-btn-blue-invert {
  transition: background-color 0.1s, color 0.1s, border-color 0.1s;
}
.kinetic-btn-blue-invert:hover {
  background-color: #fff !important;
  color: #0033FF !important;
  border-color: #0033FF !important;
}
.kinetic-card-hover {
  transition: background-color 0.12s ease-in-out, color 0.12s;
}
.kinetic-card-hover:hover {
  background-color: #0033FF !important;
  color: #fff !important;
}
.kinetic-card-hover:hover *:not(input):not(select):not(textarea) {
  color: #fff !important;
  border-color: #fff !important;
}

/* ---- Motion & Entrance Animations ---- */
@keyframes horizontal-jitter-slide {
  0% { transform: translateX(-100%) skewX(0deg); opacity: 0; }
  40% { transform: translateX(2%) skewX(2deg); opacity: 1; }
  60% { transform: translateX(-1%) skewX(-1deg); }
  80% { transform: translateX(0.5%) skewX(0.5deg); }
  100% { transform: translateX(0) skewX(0deg); opacity: 1; }
}

@keyframes card-stagger {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.animate-panel-entrance {
  animation: horizontal-jitter-slide 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.animate-card-stagger {
  opacity: 0;
  animation: card-stagger 0.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out forwards;
}

/* ---- Form Inputs ---- */
.ab-input, .ab-textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 4px solid #000;
  font-family: "Syne", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #000;
  padding: 8px 4px;
  outline: none;
  transition: border-color .12s;
}
@media (max-width: 900px) {
  .ab-input, .ab-textarea { font-size: 16px; }
}
.ab-textarea {
  resize: vertical;
  line-height: 1.5;
}
.ab-input:focus, .ab-textarea:focus {
  border-bottom-color: #0033FF;
}
.ab-input::placeholder, .ab-textarea::placeholder {
  font-family: "Anybody", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: #8f8e9e;
  letter-spacing: -.02em;
}

/* Boxed inputs */
.ab-box {
  width: 100%;
  background: #fff;
  border: 4px solid #000;
  font-family: "Syne", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #000;
  padding: 12px 14px;
  outline: none;
}
@media (max-width: 900px) {
  .ab-box { font-size: 16px; }
}
.ab-box:focus {
  border-color: #0033FF;
}
select.ab-box {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 40px;
}

.ab-box::placeholder {
  color: #8f8e9e;
}

/* ---- Halftone & Shader backgrounds ---- */
.halftone {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPgo8cmVjdCB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSIjZGVkZWZlIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDBMOCA4Wk04IDBMMCA4WiIgc3Ryb2tlPSIjY2RjZGU1IiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KPC9zdmc+');
}

#shader-fallback {
  position: fixed;
  inset: 0;
  z-index: -10;
  background-color: #fbf8ff;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0px, rgba(0,0,0,.035) 1px, transparent 1px, transparent 3px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><circle cx='1' cy='1' r='1' fill='rgba(0,0,0,0.05)'/></svg>");
  display: none;
}
body.no-shader #shader-fallback {
  display: block;
}
body.no-shader #shader-host {
  display: none !important;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .animate-panel-entrance, .animate-card-stagger, .animate-fade-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  * {
    transition: none !important;
  }
}

.scatter {
  position: fixed;
  top: var(--y);
  transform: rotate(var(--r));
  font-size: var(--fs);
  font-family: "Anybody", sans-serif;
  font-weight: 900;
  font-style: italic;
  color: #000;
  opacity: .18;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.3s ease, font-size 0.3s ease, left 0.3s ease, right 0.3s ease, top 0.3s ease, transform 0.3s ease;
}

/* Left-aligned tags */
.tag-0, .tag-2, .tag-3 {
  left: var(--x) !important;
  right: auto !important;
}

/* Right-aligned tags */
.tag-1, .tag-4 {
  right: var(--rx) !important;
  left: auto !important;
}

/* Center style for STUDIO to keep it balanced */
.tag-5 {
  left: var(--x) !important;
  right: auto !important;
  transform: translate(-50%, 0) rotate(var(--r)) !important;
}

/* Optimize background tags for different viewport sizes and zoom levels to prevent overlap */
@media (max-width: 1200px) {
  .scatter {
    font-size: calc(var(--fs) * 0.95);
  }
}

@media (max-width: 1024px) {
  .scatter {
    font-size: calc(var(--fs) * 0.85);
    opacity: 0.15;
  }
}

@media (max-width: 768px) {
  .scatter {
    font-size: calc(var(--fs) * 0.7);
    opacity: 0.15;
  }
  
  /* Stagger coordinates for tablet to prevent overlaps using zoom-friendly rem spacing */
  .tag-5 { /* STUDIO */
    --x: 50%;
    top: 1rem !important;
  }
  .tag-0 { /* TRAVELERS PLACE */
    --x: 5%;
    top: 11rem !important;
  }
  .tag-1 { /* AEZZE */
    --rx: 5%;
    top: 6rem !important;
  }
  
  .tag-4 { /* ONLY TOKENMAXERS */
    --rx: 5%;
    top: auto !important;
    bottom: 11rem !important;
  }
  .tag-2 { /* TOOFANI TOWN */
    --x: 5%;
    top: auto !important;
    bottom: 6rem !important;
  }
  .tag-3 { /* EZZEA */
    --x: 5%;
    top: auto !important;
    bottom: 1rem !important;
  }
}

@media (max-width: 600px) {
  .scatter {
    font-size: calc(var(--fs) * 0.6);
    opacity: 0.14;
  }
  
  /* Fine-tuned staggered coordinates for mobile to keep all visible without overlapping */
  .tag-5 { /* STUDIO */
    --x: 50%;
    top: 1rem !important;
  }
  .tag-1 { /* AEZZE */
    --rx: 2%;
    top: 5.6rem !important;
  }
  .tag-0 { /* TRAVELERS PLACE */
    --x: 2%;
    top: 9.6rem !important;
  }
  
  .tag-4 { /* ONLY TOKENMAXERS */
    --rx: 2%;
    top: auto !important;
    bottom: 9.6rem !important;
  }
  .tag-2 { /* TOOFANI TOWN */
    --x: 2%;
    top: auto !important;
    bottom: 4.8rem !important;
  }
  .tag-3 { /* EZZEA */
    --x: 2%;
    top: auto !important;
    bottom: 1rem !important;
  }
}