/* ===== Brutalist Maximalist — RAW Effects ===== */
/* NO orbs. NO mesh. NO glow. NO blur. NO glass. JUST RAW. */
/* PUNK. CHAOS. AGGRESSION. BROKEN GRID. XEROX AESTHETIC. */

/* Kill all soft effects — these classes exist in HTML but do nothing */
.hero-mesh,
.floating-orb,
.floating-orb-1,
.floating-orb-2,
.floating-orb-3,
.hero-mouse-glow,
.section-blob,
.section-blob-left,
.section-blob-right {
  display: none !important;
}

/* Glass cards — NO glass, just hard borders */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 4px solid #FFE500;
}

.glass-card:hover {
  background: var(--bg-card-hover);
  border-color: #FF3300;
  box-shadow: 8px 8px 0 #FF3300;
}

/* Gradient text — KILL IT. Use flat yellow */
.gradient-text-animated {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #FFE500 !important;
  background-clip: unset !important;
  animation: none !important;
}

/* Gradient border — KILL animated gradient, use hard border */
.gradient-border::before {
  display: none;
}

/* Shimmer — DEAD */
.stat-shimmer::after {
  display: none;
}

/* Reveal animation — instant, no easing */
.reveal-up {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0s;
}

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

/* ===== BRUTALIST UTILITY CLASSES ===== */

/* Hard shadow — offset, no blur, SOLID */
.hard-shadow {
  box-shadow: 6px 6px 0 #FFE500;
}

.hard-shadow-red {
  box-shadow: 6px 6px 0 #FF3300;
}

.hard-shadow-white {
  box-shadow: 6px 6px 0 #FFFFFF;
}

/* Rotation utilities */
.rotate-2 { transform: rotate(2deg); }
.rotate-3 { transform: rotate(3deg); }
.rotate-5 { transform: rotate(5deg); }
.rotate-8 { transform: rotate(8deg); }
.rotate-neg-2 { transform: rotate(-2deg); }
.rotate-neg-3 { transform: rotate(-3deg); }
.rotate-neg-5 { transform: rotate(-5deg); }
.rotate-neg-8 { transform: rotate(-8deg); }
.rotate-neg-12 { transform: rotate(-12deg); }

/* ===== STICKER SYSTEM — SCATTERED CHAOS ===== */
.sticker {
  display: inline-block;
  padding: 10px 22px;
  font-weight: 900;
  font-size: 1.2rem;
  text-transform: uppercase;
  position: absolute;
  z-index: 10;
  white-space: nowrap;
  border: 3px solid #000000;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6);
  letter-spacing: 0.05em;
  font-family: var(--font-heading);
  transition: transform 0.1s;
  pointer-events: auto;
}

.sticker:hover {
  animation: punk-shake 0.3s linear infinite;
}

.sticker-yellow {
  background: #FFE500;
  color: #000000;
}

.sticker-red {
  background: #FF3300;
  color: #FFFFFF;
}

.sticker-white {
  background: #FFFFFF;
  color: #000000;
}

.sticker-black {
  background: #000000;
  color: #FFE500;
  border-color: #FFE500;
}

.sticker-green {
  background: #00CC00;
  color: #000000;
  border-color: #000000;
}

.sticker-pink {
  background: #FF00FF;
  color: #FFFFFF;
  border-color: #000000;
}

/* ===== TORN PAPER / ROUGH EDGE ===== */
.torn-edge-top {
  position: relative;
}

.torn-edge-top::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 16px;
  background:
    linear-gradient(135deg, var(--bg-dark) 33.33%, transparent 33.33%) 0 0,
    linear-gradient(225deg, var(--bg-dark) 33.33%, transparent 33.33%) 0 0;
  background-size: 20px 16px;
  background-repeat: repeat-x;
  z-index: 2;
}

.torn-edge-bottom {
  position: relative;
}

.torn-edge-bottom::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 16px;
  background:
    linear-gradient(315deg, var(--bg-dark) 33.33%, transparent 33.33%) 0 0,
    linear-gradient(45deg, var(--bg-dark) 33.33%, transparent 33.33%) 0 0;
  background-size: 20px 16px;
  background-repeat: repeat-x;
  z-index: 2;
}

/* ===== DIAGONAL STRIPE DECORATION ===== */
.brutalist-stripe {
  background: repeating-linear-gradient(
    -45deg,
    #FFE500,
    #FFE500 10px,
    #000000 10px,
    #000000 20px
  );
  height: 16px;
  width: 100%;
}

/* Kill ALL animations globally */
@keyframes glow-pulse { 0%, 100% { box-shadow: none; } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } }
@keyframes gradient-shift { 0%, 100% { background-position: 0 0; } }

/* ===== 1. MARQUEE TICKER BAR ===== */

.marquee-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  background: #FFE500;
  border-bottom: 4px solid #000000;
  overflow: hidden;
  height: 38px;
  display: flex;
  align-items: center;
}

.marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marquee-scroll 15s linear infinite;
}

.marquee-text {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 900;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding-right: 60px;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== 2. STAMP / SEAL EFFECT ===== */

.stamp-seal {
  position: absolute;
  z-index: 11;
  width: 150px;
  height: 150px;
  border: 5px dashed #FF3300 !important;
  border-radius: 50% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(-15deg);
  opacity: 0.9;
  pointer-events: none;
  box-shadow: inset 0 0 0 4px rgba(255, 51, 0, 0.4);
  animation: stamp-rotate 20s linear infinite;
}

.stamp-seal span {
  font-weight: 900;
  font-size: 1rem;
  text-transform: uppercase;
  color: #FF3300;
  line-height: 1.1;
  letter-spacing: 0.1em;
}

.stamp-seal span:first-child {
  font-size: 1.8rem;
}

@keyframes stamp-rotate {
  0% { transform: rotate(-15deg); }
  100% { transform: rotate(345deg); }
}

/* ===== 3. BOLD HIGHLIGHT BOXES ===== */

.highlight-box {
  background: #FFE500;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  padding: 2px 12px;
  display: inline;
  transform: rotate(-1deg);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-weight: 900;
}

.highlight-box-sm {
  font-size: inherit;
  font-weight: 800;
  padding: 1px 8px;
  transform: rotate(0.5deg);
}

.highlight-box-red {
  background: #FF3300;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* ===== 4. HOVER SHAKE — cards shake on hover ===== */

@keyframes punk-shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  15% { transform: translate(-3px, 2px) rotate(-1deg); }
  30% { transform: translate(3px, -2px) rotate(1deg); }
  45% { transform: translate(-2px, 3px) rotate(-0.5deg); }
  60% { transform: translate(2px, -3px) rotate(0.5deg); }
  75% { transform: translate(-3px, 1px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.card:hover,
.service-card:hover,
.testimonial-card:hover,
.portfolio-card:hover,
.video-card:hover {
  animation: punk-shake 0.3s linear;
}

/* ===== 5. SECTION BORDERS — thick, misaligned, hand-drawn feel ===== */

section {
  border-top: 5px solid #FFE500;
  border-bottom: none;
}

section:nth-child(odd) {
  border-top-color: #FF3300;
  border-top-width: 6px;
}

section:nth-child(even) {
  border-top-color: #FFE500;
  border-top-width: 4px;
}

section:nth-child(3n) {
  border-top-color: #FFFFFF;
  border-top-width: 5px;
}

/* ===== 6. TORN PAPER EDGE — jagged clip-path between sections ===== */

.torn-edge-clip {
  position: relative;
}

section::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 24px;
  z-index: 3;
  clip-path: polygon(
    0% 0%, 3% 60%, 5% 20%, 8% 70%, 11% 10%, 14% 55%, 17% 0%, 20% 65%,
    23% 15%, 26% 50%, 29% 5%, 32% 60%, 35% 20%, 38% 70%, 41% 0%, 44% 55%,
    47% 10%, 50% 65%, 53% 20%, 56% 50%, 59% 5%, 62% 60%, 65% 15%, 68% 70%,
    71% 0%, 74% 55%, 77% 20%, 80% 65%, 83% 5%, 86% 50%, 89% 10%, 92% 60%,
    95% 0%, 97% 55%, 100% 20%, 100% 100%, 0% 100%
  );
  background: inherit;
  pointer-events: none;
}

.stats-bar::after,
.hero::after {
  background: #000000;
}

.services::after,
.portfolio::after,
.testimonials::after,
.contact::after {
  background: #000000;
}

.process::after,
.advantage::after,
.faq::after,
.video-showcase::after {
  background: #0A0A0A;
}

.stats-bar::after {
  background: #FFE500;
}

/* ===== 7. HARSH CURSOR ===== */

*, *::before, *::after {
  cursor: crosshair;
}

a, button, .btn, [role="button"], input, select, textarea, .faq-question {
  cursor: crosshair;
}

/* ===== 8. SECTION NUMBER LABELS ===== */

.section-number {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 900;
  color: #FF3300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
  border: 2px solid #FF3300;
  padding: 4px 12px;
  background: rgba(255, 51, 0, 0.1);
}

/* ===== 9. GLITCH TEXT EFFECT ===== */

@keyframes glitch-skew {
  0% { transform: skew(0deg); }
  20% { transform: skew(-2deg); }
  40% { transform: skew(1deg); }
  60% { transform: skew(-1deg); }
  80% { transform: skew(2deg); }
  100% { transform: skew(0deg); }
}

.glitch-text:hover {
  animation: glitch-skew 0.3s linear;
}

/* ===== 10. XEROX NOISE OVERLAY ===== */

.noise-overlay::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ===== 11. DOTTED UNDERLINE FOR LINKS ===== */

.brutalist-link {
  text-decoration: none;
  border-bottom: 3px dotted #FFE500;
  padding-bottom: 2px;
}

.brutalist-link:hover {
  border-bottom-style: solid;
  border-bottom-color: #FF3300;
}

/* ===== 12. DIAGONAL CUT CORNERS ===== */

.cut-corner {
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

/* ===== 13. X-MARKS / CROSS DECORATIONS ===== */

.x-mark::before {
  content: 'X';
  font-weight: 900;
  font-size: 2rem;
  color: #FF3300;
  position: absolute;
  opacity: 0.3;
}

/* Reduced motion — already instant, but be safe */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: 0s !important;
  }
  .marquee-track {
    animation: none !important;
  }
  .stamp-seal {
    animation: none !important;
  }
}