/* Footer-specific styles with V3 Design System Integration */

/* Main Footer Structure */
.brutalist-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--footer-height-collapsed);
  z-index: var(--z-footer-overlay);
  transition: height var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1);
}

.brutalist-footer.expanded {
  height: var(--footer-height-expanded);
}

/* Footer Wrapper - Controls the width and clipping */
/* START CLEAN-FIX-8A-B8-C5-FOOTER-WIDTH */
/* XL base: 22% (was 25%) — 8% narrower than header's 30% */
/* Clip-path taper mirrors header's 8%/92% exactly */
/* To revert: Restore width: 25% */
.brutalist-footer .footer-wrapper {
  position: relative;
  width: 22%;
  height: 100%;
  margin: 0 auto;
  background-color: var(--black);
  overflow: hidden;
  transition: width var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1),
              clip-path var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1);
  /* Angular shape for collapsed state — mirrors header taper percentage */
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0% 100%);
  border-top: 1px solid var(--dark);
}
/* END CLEAN-FIX-8A-B8-C5-FOOTER-WIDTH */

.brutalist-footer.expanded .footer-wrapper {
  width: 100%;
  /* Angular shape for expanded state */
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0% 100%);
}

/* Ensure expanded footer visibility */
.brutalist-footer.expanded .footer-expanded {
    opacity: 1;
}

/* Grid Overlay */
/* CLEAN-FIX-8A-B8-C4C5-COLLAPSED-ELEMENT-ALIGN: Tokenized opacity, color, thickness to match header */
.brutalist-footer .footer-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: var(--line-grid-opacity);
  z-index: 1;
}

.brutalist-footer .grid-line {
  position: absolute;
  background-color: var(--line-grid-color);
}

.brutalist-footer .grid-line.horizontal {
  height: var(--line-grid-thickness);
  width: 100%;
}

.brutalist-footer .grid-line.horizontal:nth-child(1) {
  top: 33%;
}

.brutalist-footer .grid-line.horizontal:nth-child(2) {
  top: 66%;
}

.brutalist-footer .grid-line.vertical {
  width: var(--line-grid-thickness);
  height: 100%;
}

.brutalist-footer .grid-line.vertical:nth-child(3) {
  left: 25%;
}

.brutalist-footer .grid-line.vertical:nth-child(4) {
  left: 50%;
}

.brutalist-footer .grid-line.vertical:nth-child(5) {
  left: 75%;
}

/* ========================================
   EXPAND HINT — Footer Directional Overrides
   Position: bottom (above collapsed footer), z-index: footer base
   Arrow bounce: DOWN (FIX: was incorrectly bouncing UP like header)
   Auto-hide: slides DOWN to hide, UP to show
   Shared base (.expand-hint, .hint-arrow, .hint-text) in v3-design-system.css
   ======================================== */

/* START CLEAN-FIX-8A-B8-FOOTER-HINT-DIRECTIONAL */
/* To revert: Restore original expand-hint rules from git commit before this change */

.brutalist-footer .expand-hint {
  bottom: calc(var(--footer-height-collapsed) + var(--spacing-6));
  z-index: var(--z-footer-base);
  transition: opacity var(--transition-fast) ease,
              visibility var(--transition-fast) ease,
              transform var(--transition-medium) ease;
  visibility: visible;
}

/* Hide hint when footer is expanded */
.brutalist-footer.expanded .expand-hint {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(20px);
  pointer-events: none;
}

/* Concrete-slide: footer hint slides DOWN to hide, UP to show */
/* Easing: Hide = heavy start, abrupt stop. Show = slow grind, smooth settle. */
.brutalist-footer .expand-hint.hint-hiding {
  animation: hint-footer-hide 0.6s cubic-bezier(0.7, 0, 1, 0.5) forwards;
}
.brutalist-footer .expand-hint.hint-showing {
  animation: hint-footer-show 0.6s cubic-bezier(0, 0.5, 0.3, 1) forwards;
}

@keyframes hint-footer-hide {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(24px); pointer-events: none; }
}
@keyframes hint-footer-show {
  0% { opacity: 0; transform: translateX(-50%) translateY(24px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
}

/* Arrow bounce DOWN (FIX: was bouncing UP like header — incorrect for bottom-positioned element) */
.brutalist-footer .hint-arrow.pulse {
  animation: hint-arrow-pulse-down 1.5s ease-in-out;
}

@keyframes hint-arrow-pulse-down {
  0% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(var(--spacing-6)); opacity: 1; }
  100% { transform: translateY(0); opacity: 0.7; }
}
/* END CLEAN-FIX-8A-B8-FOOTER-HINT-DIRECTIONAL */

/* Collapsed Footer State */
.brutalist-footer .footer-collapsed {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  transition: opacity var(--transition-fast) ease;
  z-index: 2;
}

/* Coords System - Collapsed State */
.brutalist-footer .coords-system.mini {
  display: flex;
  align-items: center;
  position: relative;
  padding: var(--spacing-6) var(--spacing-12);
}

/* Coord point set to light color */
.brutalist-footer .coords-system.mini .coord-point {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--coord-point-size);
  height: var(--coord-point-size);
  background-color: var(--coord-color-primary);
  border-radius: 50%;
  clip-path: none; /* Override any inherited clip-path to show circle */
  transform: translateY(-50%);
  opacity: 1;
}

.brutalist-footer .coords-system.mini .coord-line {
  position: absolute;
  background-color: var(--coord-line-color);
  opacity: var(--coord-opacity);
  z-index: 3; /* Above text for intersection effect */
}

.brutalist-footer .coords-system.mini .coord-line.x {
  top: 50%;
  left: -50%; /* Extend line to intersect text */
  height: var(--coord-line-thickness);
  width: 200%; /* Full width to intersect text */
  transform: translateY(-50%);
}

.brutalist-footer .coords-system.mini .coord-line.y {
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
}

.brutalist-footer .coords-system.mini .coord-info {
  margin-left: 12px;
  display: flex;
  align-items: center;
}

.brutalist-footer .coords-system.mini .coord-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* CLEAN-FIX-8A-B8-C4C5-COLLAPSED-ELEMENT-ALIGN: color --lightest → --light to match header .title-line */
.brutalist-footer .coords-system.mini .coord-value {
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--light);
  text-transform: uppercase;
  line-height: 1.6;
}

/* CLEAN-FIX-8A-B8-C4C5-COLLAPSED-ELEMENT-ALIGN: color --lightest → --light to match header */
.brutalist-footer .coords-system.mini .coord-dot {
  color: var(--light);
  margin: 0 2px;
}

/* General container */
.brutalist-footer .container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  position: relative;
  z-index: var(--z-footer-top);
}

/* Accent lines for brutalist feel */
/* CLEAN-FIX-8A-B8-C4C5-COLLAPSED-ELEMENT-ALIGN: Tokenized opacity (was hardcoded 0.24) */
.brutalist-footer::before,
.brutalist-footer::after {
  content: '';
  position: absolute;
  background-color: var(--dark);
  opacity: var(--opacity-light);
  z-index: 0;
}

.brutalist-footer::before {
  top: 0;
  left: -5%;
  width: 120%;
  height: 1px;
  transform: rotate(-2deg);
}

.brutalist-footer::after {
  bottom: 30%;
  left: -5%;
  width: 110%;
  height: 1px;
  transform: rotate(1deg);
}

/* Expanded Footer State */
.brutalist-footer .footer-expanded {
  display: flex;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--transition-fast) ease;
  z-index: var(--z-footer-overlay);
  position: relative;
}

/* CTA Boxes - Left & Right Sections */
.brutalist-footer .cta-box {
  flex: 1;
  display: flex;
  align-items: center;
  z-index: 3;
  position: relative;
}

.brutalist-footer .cta-box.left {
  justify-content: flex-start;
  padding-left: 3%;
}

.brutalist-footer .cta-box.right {
  justify-content: flex-end;
  padding-right: 3%;
}

/* START CLEAN-FIX-PHASE8A-LOCK-FOOTER-MIDDLE-BASE */
/* Zero CTA padding in expanded state — container padding handles edge alignment
   Clip-path expanded = polygon(4% 0, 96% 0, 100% 100%, 0% 100%)
   Container padding 5% exceeds 4% clip-path taper with ~1% clearance at all breakpoints
   XS already has this pattern (lines 1116-1122). Collapsed state retains 3% padding above
   To revert: Delete everything between START and END markers */
.brutalist-footer.expanded .cta-box.left  { padding-left: 0; }
.brutalist-footer.expanded .cta-box.right { padding-right: 0; }
/* END CLEAN-FIX-PHASE8A-LOCK-FOOTER-MIDDLE-BASE */

/* START CLEAN-FIX-PHASE8A-REBUILD-CENTER-SHRINK */
/* Center-section flex fix: Start at 0 width and grow only into leftover space after CTAs are sized
   Root cause 1: Flexbox default min-width: auto prevents shrinking below content width
   Root cause 2: Base flex: 2 is too aggressive for expanded where CTAs need predictable space
   flex: 1 1 0% = zero basis with grow factor → center gets only what CTAs don't need
   To revert: Remove flex line, change min-width back to auto default, remove overflow */
.brutalist-footer.expanded .center-section {
    flex: 1 1 0%;     /* Start at 0, grow into leftover only (base has flex: 2) */
    min-width: 0;
    overflow: hidden;
}
/* END CLEAN-FIX-PHASE8A-REBUILD-CENTER-SHRINK */

/* START CLEAN-FIX-8A-B8-C5-FOOTER-CTA-PADDING */
/* XL expanded: 108px cube (18×6n) — coordinated with header Phase 5 reduction (96px) */
/* Footer cubes slightly larger since two CTAs share expanded width */
/* Was 120px (20×6n). To revert: Restore width: 120px */
.brutalist-footer.expanded .cube-wrapper {
    width: 108px;
}
/* END CLEAN-FIX-8A-B8-C5-FOOTER-CTA-PADDING */

/* CTA Links - Footer Specific */
.brutalist-footer .cta-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  position: relative;
  transition: transform var(--transition-fast) ease;
  
  /* Footer-specific hover translation (upward) */
  --cta-hover-translate-y: -2px;
  --cta-hover-translate-x: 0;
}

/* Position-specific customizations */
/* Left CTA - View Work (Cases) */
.brutalist-footer .cta-box.left .cta-link {
  --cta-rotation: -90deg;
  --cta-accent-color: var(--magenta);
  --cta-pulse-color: rgba(255, 0, 204, 0.62);
}

/* Right CTA - Say Hi (Contact) */
.brutalist-footer .cta-box.right .cta-link {
  --cta-rotation: 90deg;
  --cta-accent-color: var(--blue);
  --cta-pulse-color: rgba(0, 0, 255, 0.62);
}

/* Invisible hover bridge to extension menus */
.brutalist-footer .cta-link::after {
  content: '';
  position: absolute;
  width: 120%;
  height: 80px;
  bottom: 100%;
  left: -10%;
  pointer-events: none;
  z-index: var(--z-footer-max);
}

/* Enable hover bridge when link is active or hovered */
.brutalist-footer .cta-link:hover::after,
.brutalist-footer .cta-link.extension-active::after {
  pointer-events: auto;
}

/* Maintain hover state when extension is active */
.brutalist-footer .cta-link.extension-active .cube {
  transform: rotateX(180deg);
}

.brutalist-footer .cta-link.extension-active .cta-module {
  transform: scale(1.1);
  border-color: var(--white);
  border-width: 1.2px;
  box-shadow: 0 0 6px rgba(250, 250, 250, 0.16);
}

.brutalist-footer .cta-link.extension-active .module-name {
  color: var(--white);
  transform: rotate(var(--cta-rotation));
}

.brutalist-footer .cta-link.extension-active .footer-module-indicator {
  opacity: 0.84;
  transform: scale(1.2);
  animation: module-indicator-breathe 2s ease-in-out infinite;
}

.brutalist-footer .cta-link.extension-active .footer-pulse-ring {
  display: block;
  background-color: var(--cta-pulse-color);
  animation: module-pulse-breathe 2s ease-in-out infinite;
}

.brutalist-footer .cta-link.extension-active .cube-face.back::after {
  width: calc(100% + 2px);  /* CLEAN-FIX-PHASE8A-ACCENT-WIDTH: Full border-box width (padding-box + 2×1px transparent border from --cta-cube-border-back) */
  background-color: var(--cta-accent-color);
}

/* Module styling with enhanced pulse effect */
.brutalist-footer .cta-module {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  /* TODO: CTA Module Width Discrepancy (Technical Debt)
   * Expected: 32px (matching height for square appearance)
   * Actual Required: 44px to appear square
   * Discrepancy: 12px unaccounted for in layout calculation
   *
   * Investigation needed for the 12px difference:
   * - Could be intrinsic content width (arrow character)
   * - Possible flex container constraints
   * - Box model calculation issue
   *
   * Current workaround: Fixed width of 44px
   * Original variable: var(--cta-module-size) = 32px
   */
  height: var(--cta-module-size);
  width: 44px; /* Workaround: Should be var(--cta-module-size) */
  border: var(--cta-module-border);
  background-color: var(--cta-module-bg);
  position: relative;
  transition: transform var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1),
              border-color var(--transition-fast) ease,
              border-width var(--transition-fast) ease,
              box-shadow var(--transition-medium) ease;
  margin-right: var(--cta-module-gap);
}

/* Enhanced module border and glow on hover */
/* Phase 0 CTA rebuild: .hovered class to be replaced with :hover */
.brutalist-footer .cta-module.hovered {
  border: 1.2px solid var(--white);
  box-shadow: 0 0 6px rgba(250, 250, 250, 0.16);
}

.brutalist-footer .cta-box.right .cta-module {
  margin-right: 0;
  margin-left: 10px;
  order: 2;
}

/* Footer Module Indicator - Clean component-specific naming */
.brutalist-footer .footer-module-indicator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-bottom: 2px;
  position: relative;
  opacity: var(--opacity-soft);
  transition: opacity var(--transition-fast) ease, transform var(--transition-fast) ease;
  border: none;
}


/* Footer CTA specific colors */
.brutalist-footer .cta-box.left .footer-module-indicator {
  background-color: var(--magenta);
}

.brutalist-footer .cta-box.right .footer-module-indicator {
  background-color: var(--blue);
}

/* Footer Pulse Ring - Clean component-specific naming */
.brutalist-footer .footer-module-indicator .footer-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0.5;
}

/* Footer pulse ring animation */
.brutalist-footer .footer-module-indicator .footer-pulse-ring.animate {
  animation: module-pulse-breathe 2s infinite;
}

@keyframes module-pulse-breathe {
  0% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.8); opacity: 0.36; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }
}

/* Footer pulse ring colors */
.brutalist-footer .cta-box.left .footer-module-indicator .footer-pulse-ring {
  background-color: rgba(255, 0, 204, 0.62);
}

.brutalist-footer .cta-box.right .footer-module-indicator .footer-pulse-ring {
  background-color: rgba(0, 0, 255, 0.62);
}

/* Footer active state removed - not applicable for site-wide footer */

/* Footer module indicator hover states - Clean implementation */
.brutalist-footer .cta-box:hover .footer-module-indicator {
  opacity: 0.84;
  transform: scale(1.2);
  transform-origin: center center;
  animation: module-indicator-breathe 2s ease-in-out infinite;
}

/* Footer pulse ring hover display */
.brutalist-footer .cta-box:hover .footer-module-indicator .footer-pulse-ring {
  display: block;
  transform-origin: center center;
  animation: module-pulse-breathe 2s infinite;
}

/* Footer indicator breathe animation */
@keyframes module-indicator-breathe {
  0%, 100% { transform: scale(1.2); opacity: 0.84; }
  50% { transform: scale(1.8); opacity: 0.92; }
}

/* Updated Module name styling with rotation on hover */
.brutalist-footer .module-name {
  font-size: var(--font-size-small);
  font-weight: 400;
  color: var(--cool);
  transition: transform var(--transition-medium) ease, 
              color var(--transition-medium) ease;
}

/* Module name rotations now handled via CSS variables in universal system */

/* 3D Cube Effect */
.brutalist-footer .cube-wrapper {
  perspective: 600px;
  position: relative;
  min-width: var(--cta-cube-min-width);
  height: var(--cta-cube-height);
  margin-left: 5px;
}

.brutalist-footer .cta-box.right .cube-wrapper {
  margin-left: 4px;
  margin-right: 4px;
}

.brutalist-footer .cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform var(--cta-transition-duration) var(--cta-transition-easing);
}

.brutalist-footer .cube-face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap; /* CLEAN-FIX-PHASE8A-NOWRAP: Prevent CTA text wrapping — defensive safety for all cube faces. Empty decorative faces unaffected (no-op). To revert: Delete this line */
}

.brutalist-footer .cube-face.front {
  transform: translateZ(12px);
  background-color: var(--cta-cube-bg-front);
  border: var(--cta-cube-border-front);
  color: var(--cta-cube-text-color-front);
  font-weight: 400;
  padding-left: var(--cta-text-padding-left);
  padding-right: var(--cta-text-padding-right);
}

/* Enhanced back face with line effect */
.brutalist-footer .cube-face.back {
  transform: rotateX(180deg) translateZ(12px);
  background-color: var(--cta-cube-bg-back);
  border: var(--cta-cube-border-back);
  color: var(--cta-cube-text-color-back);
  font-weight: 700;
  position: relative;
  padding-left: var(--cta-text-padding-left);
  padding-right: var(--cta-text-padding-right);
}

/* Add line effect to cube back face with updated colors */
.brutalist-footer .cube-face.back::after {
  content: '';
  position: absolute;
  bottom: var(--cta-accent-line-position);
  left: -1px;  /* CLEAN-FIX-PHASE8A-ACCENT-WIDTH: Extend to border-box left edge (compensates for 1px transparent border from --cta-cube-border-back) */
  width: 0;
  height: var(--cta-accent-line-height);
  transition: width var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1);
}

/* Accent colors now handled via CSS variables in position-specific rules above */

/* Phase 0 CTA rebuild: .hovered class to be replaced with :hover */
.brutalist-footer .cta-link.hovered .cube-face.back::after {
  width: calc(100% + 2px);  /* CLEAN-FIX-PHASE8A-ACCENT-WIDTH: Match extension-active width (border-box compensation) */
}

.brutalist-footer .cube-face.top,
.brutalist-footer .cube-face.bottom,
.brutalist-footer .cube-face.left,
.brutalist-footer .cube-face.right {
  background-color: rgba(18, 18, 18, 0.2);
  opacity: 0.8;
}

.brutalist-footer .cube-face.top {
  height: 24px;
  transform: rotateX(90deg) translateZ(12px);
}

.brutalist-footer .cube-face.bottom {
  height: 24px;
  transform: rotateX(-90deg) translateZ(12px);
}

.brutalist-footer .cube-face.left {
  width: 24px;
  height: 100%;
  left: 50%;
  margin-left: -12px;
  transform: rotateY(-90deg) translateZ(12px);
}

.brutalist-footer .cube-face.right {
  width: 24px;
  height: 100%;
  left: 50%;
  margin-left: -12px;
  transform: rotateY(90deg) translateZ(12px);
}

/* Center Section - Reordered with marquee on top */
.brutalist-footer .center-section {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.brutalist-footer .section-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 800px;
  gap: 10px;
}

/* Marquee Animation - Now positioned on top */
.brutalist-footer .copyright-marquee {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  order: 1;
  margin-bottom: 6px;
}

/* Ensure marquee visibility when expanded */
.brutalist-footer .copyright-marquee.visible {
  opacity: 1;
  display: block;
  visibility: visible;
}

.brutalist-footer .marquee-content {
  display: inline-block;
  animation: marquee 30s linear infinite;
}

.brutalist-footer .marquee-content span {
  font-size: var(--font-size-standard);
  font-weight: 600;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-right: 50px;
}

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

/* NEW: Wave Grid - Replaces Particle Field */
.brutalist-footer .wave-grid {
  width: 80%;
  height: 16px;
  position: relative;
  order: 2;
  overflow: hidden;
  background-color: rgba(10, 10, 11, 0.3);
  border-radius: 1px;
  margin-top: 4px;
}

.brutalist-footer .grid-node {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.brutalist-footer .grid-node.visible {
  opacity: 0.8;
}

/* Nodes with different primary colors */
.brutalist-footer .grid-node:nth-child(6n+1) {
  background-color: var(--cyan);
}

.brutalist-footer .grid-node:nth-child(6n+2) {
  background-color: var(--blue);
}

.brutalist-footer .grid-node:nth-child(6n+3) {
  background-color: var(--purple);
}

.brutalist-footer .grid-node:nth-child(6n+4) {
  background-color: var(--pink);
}

.brutalist-footer .grid-node:nth-child(6n+5) {
  background-color: var(--magenta);
}

.brutalist-footer .grid-node:nth-child(6n) {
  background-color: var(--blue);
}

/* Wave movement animation */
@keyframes wave-move {
  0% { 
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Grid connection lines */
.brutalist-footer .grid-line-connection {
  position: absolute;
  background-color: var(--dark);
  height: 1px;
  transform-origin: 0 0;
  opacity: 0.2;
  z-index: 1;
  transition: opacity 0.5s ease;
}

.brutalist-footer .grid-line-connection.visible {
  opacity: 0.3;
}

/* Accent Animations */
.brutalist-footer .copyright-marquee::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 1px;
  height: 8px;
  background-color: var(--dark);
  animation: connection-pulse 2s infinite;
}

@keyframes connection-pulse {
  0%, 100% { height: 4px; opacity: 0.5; }
  50% { height: 8px; opacity: 1; }
}

.brutalist-footer .copyright-marquee::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 40px;
  height: 1px;
  background-color: var(--purple);
  animation: accent-line-move 8s infinite alternate;
}

@keyframes accent-line-move {
  0% {
    left: 0;
    background-color: var(--magenta);
  }
  25% {
    background-color: var(--cyan);
  }
  50% {
    left: calc(100% - 40px);
    background-color: var(--blue);
  }
  75% {
    background-color: var(--cyan);
  }
  100% {
    left: 0;
    background-color: var(--magenta);
  }
}

/* CLEAN-FIX-CTA-ACCENTS-START */
/* Removed CTA box accent pseudo-elements causing floating backslash appearance
   To revert: Uncomment lines 789-809 */
/*
.brutalist-footer .cta-box.left::before,
.brutalist-footer .cta-box.right::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 1px;
  background-color: var(--dark);
  opacity: 0.6;
}

.brutalist-footer .cta-box.left::before {
  top: 15px;
  left: 20px;
  transform: rotate(45deg);
}

.brutalist-footer .cta-box.right::before {
  top: 15px;
  right: 20px;
  transform: rotate(-45deg);
}
*/
/* CLEAN-FIX-CTA-ACCENTS-END */

/* Media Queries */
/* START CLEAN-FIX-PHASE8-BREAKPOINT-FOOTER */
/* Phase 8: Standardized to match 599px, 767px, 991px, 1199px boundaries */
/* OLD breakpoints: 1200px, 980px, 768px, 600px */

/* LG Breakpoint - Large Laptops/Small Desktops */
@media (max-width: 1199px) {
  /* START CLEAN-FIX-8A-B8-C4C5-FOOTER-COLLAPSED-WIDTH-LG */
  /* Collapsed footer width: 34% (midpoint of 30–36% user-confirmed range) */
  /* Replaces vw-based clamp() that failed in iframe vw resolution */
  /* To revert: Remove this rule, restore CLEAN-FIX-8A-B8-C4C5-FOOTER-FLUID-WIDTH block at EOF */
  .brutalist-footer:not(.expanded) .footer-wrapper {
    width: 34%;
  }
  /* END CLEAN-FIX-8A-B8-C4C5-FOOTER-COLLAPSED-WIDTH-LG */

  .brutalist-footer .section-content {
    max-width: 600px;
  }

  .brutalist-footer .cube-wrapper {
    width: 114px;  /* CLEAN-FIX-PHASE8A-CTA-WIDTH-LG: Was 75px — 19×6n, fits text at 12.8px. To revert: Change to 75px */
  }

  .brutalist-footer .marquee-content span {
    font-size: var(--font-size-small);
  }

  /* START CLEAN-FIX-PHASE8A-REBUILD-CTA-AUTO */
  /* LG Expanded CTA: Content-sized — CTAs take exactly the space their children need
     Previous (PHASE8A-1C-LG-CTA): flex: 0 0 25%; max-width: 30% — percentage basis wasted space at narrow LG
     To revert: Restore flex: 0 0 25%; max-width: 30% */
  .brutalist-footer.expanded .cta-box {
    flex: 0 0 auto;   /* Content-sized: CTA takes only cube-wrapper + cta-link width */
  }

  /* START CLEAN-FIX-PHASE8A-REBUILD-SECTION-FILL */
  /* LG section-content: Remove max-width cap — center-section flex: 2 constrains naturally
     Previous (PHASE8A-LOCK-FOOTER-MIDDLE-LG): max-width: 480px (80×6n)
     To revert: Restore max-width: 480px */
  .brutalist-footer.expanded .section-content {
    flex: 1 1 0%;     /* Start at 0, grow into leftover space */
    min-width: 0;
    max-width: none;  /* CLEAN-FIX-PHASE8A-REBUILD-SECTION-FILL: Was 480px — center-section wrapper constrains naturally */
  }
  /* END CLEAN-FIX-PHASE8A-REBUILD-SECTION-FILL */

  /* START CLEAN-FIX-PHASE8A-LOCK-FOOTER-MIDDLE-LG */
  /* LG: Container padding 5% exceeds 4% clip-path top taper (~10px clearance at 992px)
     Static % replaces calc(2vw + 6px) for iframe compatibility and clip-path clearance
     24px gap = 4×6n between CTA and middle section
     To revert: Delete this rule AND change section-content max-width back to 300px */
  .brutalist-footer.expanded .container {
    padding: 0 5%;
    gap: 24px;
  }
  /* END CLEAN-FIX-PHASE8A-LOCK-FOOTER-MIDDLE-LG */

  /* START CLEAN-FIX-PHASE8A-CUBE-MINWIDTH-LG */
  /* LG expanded: Override base min-width: 120px so width: 75px (line 883) takes effect
     Root cause: --cta-cube-min-width: 120px (v3-design-system.css:254) overrides all responsive widths
     Collapsed state retains 120px minimum (not scoped to .expanded)
     To revert: Delete between START and END markers */
  .brutalist-footer.expanded .cube-wrapper {
      min-width: 0;
  }
  /* END CLEAN-FIX-PHASE8A-CUBE-MINWIDTH-LG */

  /* END CLEAN-FIX-PHASE8A-REBUILD-CTA-AUTO */
}

/* MD Breakpoint - Tablets/Small Laptops */
@media (max-width: 991px) {
  /* START CLEAN-FIX-8A-B8-C4C5-FOOTER-COLLAPSED-WIDTH-MD */
  /* Collapsed footer width: 44% (midpoint of 36–48% user-confirmed range) */
  /* To revert: Remove this rule, restore CLEAN-FIX-8A-B8-C4C5-FOOTER-FLUID-WIDTH block at EOF */
  .brutalist-footer:not(.expanded) .footer-wrapper {
    width: 44%;
  }
  /* END CLEAN-FIX-8A-B8-C4C5-FOOTER-COLLAPSED-WIDTH-MD */

  .brutalist-footer .cta-box.left {
    padding-left: 2%;
  }

  .brutalist-footer .cta-box.right {
    padding-right: 2%;
  }

  .brutalist-footer .section-content {
    max-width: 500px;
  }

  .brutalist-footer .cube-wrapper {
    width: 70px;
  }

  .brutalist-footer .cube-face {
    font-size: var(--font-size-specialized);
  }

  /* CLEAN-FIX-PHASE8-MD-EXPANDED-START */
  /* MD Expanded: Scaled layout for 768-991px range */
  /* Addresses iPad Air (820px), iPad 10th (820px), iPhone Landscape (840px) */
  /* To revert: Delete this entire block */
  .brutalist-footer.expanded {
    height: 100px;    /* Slightly taller than SM (90px) */
    max-height: 110px;
  }

  .brutalist-footer.expanded .container {
    justify-content: space-between;
    align-items: center;
    gap: 18px;                     /* 6×3 = 18px */
    padding: 0 5%;                /* CLEAN-FIX-PHASE8A-LOCK-FOOTER-MIDDLE-MD: 5% exceeds 4% clip-path taper (was: calc(2vw + 6px)) */
  }

  /* START CLEAN-FIX-PHASE8A-REBUILD-CTA-AUTO */
  /* MD Expanded CTA: Content-sized — same auto pattern as LG and XS
     Previous (PHASE8A-1C-MD-CTA): flex: 0 0 28%; max-width: 28% — percentage basis pushed CTA off-screen at narrow MD
     To revert: Restore flex: 0 0 28%; max-width: 28% */
  .brutalist-footer.expanded .cta-box {
    flex: 0 0 auto;   /* Content-sized: CTA takes only cube-wrapper + cta-link width */
  }

  /* START CLEAN-FIX-PHASE8A-REBUILD-SECTION-FILL */
  /* MD section-content: Remove max-width cap — center-section flex: 2 constrains naturally
     Previous (PHASE8A-LOCK-FOOTER-MIDDLE-MD): max-width: 360px (60×6n)
     To revert: Restore max-width: 360px */
  .brutalist-footer.expanded .section-content {
    flex: 1 1 0%;     /* Start at 0, grow into leftover space */
    min-width: 0;     /* Allow shrink to nothing if no space available */
    max-width: none;  /* CLEAN-FIX-PHASE8A-REBUILD-SECTION-FILL: Was 360px — center-section wrapper constrains naturally */
    overflow: hidden;
  }
  /* END CLEAN-FIX-PHASE8A-REBUILD-SECTION-FILL */
  /* END CLEAN-FIX-PHASE8A-REBUILD-CTA-AUTO */

  .brutalist-footer.expanded .cube-wrapper {
    width: 90px;      /* CLEAN-FIX-PHASE8A-CTA-WIDTH-MD: Was 50px — 15×6n, fits text at 10.4px with 6px padding. To revert: Change to 50px */
    min-width: 0;     /* CLEAN-FIX-PHASE8A-CUBE-MINWIDTH-MD: Override base 120px so responsive width takes effect */
  }
  /* CLEAN-FIX-PHASE8-MD-EXPANDED-END */
}

/* SM Breakpoint - Large Phones/Small Tablets */
@media (max-width: 767px) {
  /* START CLEAN-FIX-8A-B8-C4C5-FOOTER-COLLAPSED-WIDTH-SM */
  /* Collapsed footer width: 56% (midpoint of 48–66% user-confirmed range) */
  /* XS block below overrides to 70% at <600px */
  /* To revert: Remove this rule, restore CLEAN-FIX-8A-B8-C4C5-FOOTER-FLUID-WIDTH block at EOF */
  .brutalist-footer:not(.expanded) .footer-wrapper {
    width: 56%;
  }
  /* END CLEAN-FIX-8A-B8-C4C5-FOOTER-COLLAPSED-WIDTH-SM */

  .brutalist-footer.expanded {
    height: 90px;
    max-height: 100px;  /* CLEAN-FIX-PHASE8-BOTTOM-ALIGN-SM: Constrain height */
  }

  /* CLEAN-FIX-PHASE8-SM-6N-START */
  /* SM Expanded: 6n layout, flexible middle section */
  /* Middle section visible at upper SM (700-767px), naturally hides at lower SM when space insufficient */
  /* To revert: Restore flex: 0 0 35% for cta-box, flex: 0 0 20% for section-content */
  .brutalist-footer.expanded .container {
    justify-content: space-between;
    align-items: center;
    gap: 12px;                     /* 6×2 = 12px */
    padding: 0 5%;                /* CLEAN-FIX-PHASE8A-LOCK-FOOTER-MIDDLE-SM: 5% exceeds 4% clip-path taper (was: calc(2vw + 6px)) */
  }

  /* START CLEAN-FIX-PHASE8A-REBUILD-CTA-AUTO */
  /* SM Expanded CTA: Content-sized — same auto pattern as LG, MD, and XS
     Previous (PHASE8A-GATE-SM-FLEX): flex: 0 0 30%; max-width: 35% — percentage basis pushed CTA off-screen at 618px
     To revert: Restore flex: 0 0 30%; max-width: 35% */
  .brutalist-footer.expanded .cta-box {
    flex: 0 0 auto;   /* Content-sized: CTA takes only cube-wrapper + cta-link width */
  }

  /* START CLEAN-FIX-PHASE8A-REBUILD-SECTION-FILL */
  /* SM section-content: Remove max-width cap — center-section flex: 2 constrains naturally
     Previous (PHASE8A-LOCK-FOOTER-MIDDLE-SM): max-width: 264px (44×6n)
     To revert: Restore max-width: 264px */
  .brutalist-footer.expanded .section-content {
    flex: 1 1 0%;     /* Start at 0 width, grow into leftover space */
    min-width: 0;     /* Allow shrink to nothing if no space available */
    max-width: none;  /* CLEAN-FIX-PHASE8A-REBUILD-SECTION-FILL: Was 264px — center-section wrapper constrains naturally */
    overflow: hidden;  /* Hide cleanly if too narrow */
  }
  /* END CLEAN-FIX-PHASE8A-REBUILD-SECTION-FILL */
  /* END CLEAN-FIX-PHASE8A-REBUILD-CTA-AUTO */

  /* START CLEAN-FIX-PHASE8A-CUBE-MINWIDTH-SM */
  /* SM expanded: Override base min-width: 120px + explicit width for text fit
     CLEAN-FIX-PHASE8A-CTA-WIDTH-SM: Was inheriting 50px from MD — 15×6n, same as MD, fits text at 10.4px
     To revert: Remove width line, keep min-width: 0 */
  .brutalist-footer.expanded .cube-wrapper {
      width: 90px;
      min-width: 0;
  }
  /* END CLEAN-FIX-PHASE8A-CUBE-MINWIDTH-SM */

  /* CLEAN-FIX-PHASE8-SM-6N-END */

  /* START CLEAN-FIX-PHASE8A-1C-CTA-COMPACT */
  /* SM/MD CTA internal gap compression (exploratory — not a design lock stopper)
     Intermediate tier between base (8px/10px/8px) and XS (2px/4px/4px)
     Uses 6n-compliant values: 6px gap, 6px margin, 6px padding
     Total savings: ~18px across both CTAs — reduces internal cramping
     To revert: Delete everything between START and END markers (inherits base values) */
  .brutalist-footer.expanded .cta-link {
    gap: 6px;  /* 1×6n — down from base 8px, saves 2px per CTA */
  }

  .brutalist-footer.expanded .cta-module {
    transform: scale(0.92);    /* Subtle size reduction (XS uses 0.85) */
    margin-right: 6px;         /* 1×6n — down from var(--cta-module-gap)=10px, saves 4px */
  }

  .brutalist-footer.expanded .cta-box.right .cta-module {
    margin-left: 6px;          /* Mirror left CTA spacing */
    margin-right: 0;           /* Override inherited margin-right */
  }

  .brutalist-footer.expanded .cube-face {
    padding-left: 6px;         /* 1×6n — down from var(--cta-text-padding-left)=8px, saves 2px */
    padding-right: 6px;        /* 1×6n — down from var(--cta-text-padding-right)=8px, saves 2px */
  }
  /* END CLEAN-FIX-PHASE8A-1C-CTA-COMPACT */

  .brutalist-footer .cta-box.left {
    padding-left: 5%;
  }

  .brutalist-footer .cta-box.right {
    padding-right: 5%;
  }

  .brutalist-footer .section-content {
    max-width: 350px;
  }

  .brutalist-footer .marquee-content span {
    font-size: var(--font-size-small);
  }

  .brutalist-footer .wave-grid,
  .brutalist-footer .copyright-marquee {
    width: 90%;
    /* START CLEAN-FIX-PHASE8A-GATE-MARQUEE-CLIP */
    /* Constrain marquee to prevent bottom cutoff at SM expanded
       To revert: Delete everything between START and END markers */
    max-height: 54px; /* 9×6n — fits two lines of specialized-size text within 88px expanded envelope */
    overflow: hidden;
    /* END CLEAN-FIX-PHASE8A-GATE-MARQUEE-CLIP */
  }

  /* CLEAN-FIX-8A-B8-C4C5-COLLAPSED-ELEMENT-ALIGN: Removed SM font-size reduction */
  /* Footer coord-value now inherits base --font-size-small (12.8px) at SM to match header */
}

/* XS Breakpoint - Mobile Phones */
@media (max-width: 599px) {
  /* CLEAN-FIX-PHASE8-FOOTER-CLIPPATH-XS-START */
  /* Restore clip-path with proportional angles for 70% width (was clip-path: none) */
  .brutalist-footer:not(.expanded) .footer-wrapper {
    width: 70%;  /* CLEAN-FIX-PHASE8-XS-WIDTH: Changed from 100% for proportional design */
    clip-path: polygon(6% 0, 94% 0, 100% 100%, 0% 100%);  /* Proportional collapsed shape */
  }

  .brutalist-footer.expanded .footer-wrapper {
    clip-path: polygon(3% 0, 97% 0, 100% 100%, 0% 100%);  /* Proportional expanded shape */
  }
  /* CLEAN-FIX-PHASE8-FOOTER-CLIPPATH-XS-END */

  /* CLEAN-FIX-PHASE8-XS-CTA-START */
  /* Expanded state at XS - both CTAs visible side-by-side */
  /* To revert: Delete these .expanded rules, restore original XS rules */
  .brutalist-footer.expanded {
    height: 60px;
    max-height: 70px;  /* CLEAN-FIX-PHASE8-BOTTOM-ALIGN-XS: Constrain height */
    overflow: hidden;
  }

  /* CLEAN-FIX-PHASE8-XS-6N-START */
  /* XS Expanded: 6n layout with compact CTA spacing */
  /* To revert E.1: Restore padding: 0 12px, remove margin-right/padding from module/face, delete cta-link gap rule */

  .brutalist-footer.expanded .container {
    flex-direction: row;  /* Override column for expanded - both CTAs visible */
    justify-content: space-between;
    align-items: center;
    gap: 12px;        /* 6×2 = 12px */
    padding: 0 18px;  /* 6×3 = 18px - increased from 12px for hover buffer */
  }

  .brutalist-footer.expanded .cta-box {
    flex: 0 0 auto;   /* Content-based sizing (was 42%) */
    max-width: 45%;   /* Safety cap */
    padding: 0;       /* Remove padding (was 0 4px) */
  }

  .brutalist-footer.expanded .cta-box.left {
    padding-left: 0;  /* Ensure no inherited padding */
  }

  .brutalist-footer.expanded .cta-box.right {
    padding-right: 0; /* Ensure no inherited padding */
  }
  .brutalist-footer.expanded .section-content {
    display: none;  /* Hide center marquee to make room for CTAs */
  }

  .brutalist-footer.expanded .cube-wrapper {
    width: 84px;  /* CLEAN-FIX-PHASE8A-CTA-WIDTH-XS: Was 38px — 14×6n, fits text at 10.4px with 4px padding. To revert: Change to 38px */
    min-width: 0; /* CLEAN-FIX-PHASE8A-CUBE-MINWIDTH-XS: Override base 120px so responsive width takes effect */
  }

  .brutalist-footer.expanded .cta-module {
    transform: scale(0.85);  /* Slightly smaller module indicator */
    margin-right: 4px;       /* Override var(--cta-module-gap)=10px - saves 6px */
  }

  .brutalist-footer.expanded .cube-face {
    /* CLEAN-FIX-PHASE8-TYPO-CTA-XS-START - Original: 10px */
    font-size: var(--font-size-specialized);  /* 10.4px - v3 design system token */
    /* CLEAN-FIX-PHASE8-TYPO-CTA-XS-END */
    padding-left: 4px;       /* Override var(--cta-text-padding-left)=8px - saves 4px */
    padding-right: 4px;      /* Override var(--cta-text-padding-right)=8px - saves 4px */
  }

  /* E.1 additions: cta-link gap reduction and right module mirroring */
  .brutalist-footer.expanded .cta-link {
    gap: 2px;  /* Override base 8px gap - saves 6px per CTA */
  }

  .brutalist-footer.expanded .cta-box.right .cta-module {
    margin-left: 4px;   /* Mirror left CTA spacing */
    margin-right: 0;    /* Override inherited margin-right */
  }

  /* E.1: Lock hover scale at XS to prevent edge overflow */
  .brutalist-footer.expanded .cta-link:hover .cta-module,
  .brutalist-footer.expanded .cta-module.hovered {
    transform: scale(0.85);  /* Same as base XS scale - no increase */
  }
  /* CLEAN-FIX-PHASE8-XS-6N-END */

  /* Collapsed state at XS - keep existing behavior */
  .brutalist-footer:not(.expanded) .container {
    flex-direction: column;
    gap: 8px;
    padding: 8px 16px;
  }

  .brutalist-footer:not(.expanded) .cta-box {
    flex: none;
  }
  /* CLEAN-FIX-PHASE8-XS-CTA-END */

  .brutalist-footer .cta-box.left,
  .brutalist-footer .cta-box.right {
    padding: 0;
  }

  /* START CLEAN-FIX-PHASE8A-GATE-MARQUEE-CLIP */
  /* Constrain marquee to prevent bottom cutoff at XS collapsed
     To revert: Delete everything between START and END markers */
  .brutalist-footer .copyright-marquee {
    max-height: 42px; /* 7×6n — one visible line within 60px collapsed constraint */
    overflow: hidden;
  }
  /* END CLEAN-FIX-PHASE8A-GATE-MARQUEE-CLIP */

  /* CLEAN-FIX-8A-B8-C4C5-COLLAPSED-ELEMENT-ALIGN: Removed XS font-size reduction */
  /* Footer coord-value now inherits base --font-size-small (12.8px) at XS to match header */
}
/* END CLEAN-FIX-PHASE8-BREAKPOINT-FOOTER */

/* R4 REVERTED: CLEAN-FIX-PHASE8-HINT-TYPO removed for clean Round 3 slate
   This was SUCCESSFUL but bundled with failures - will re-apply in separate commit */

/* REPLACED: CLEAN-FIX-8A-B8-C4C5-FOOTER-FLUID-WIDTH moved to in-block static widths */
/* vw-based clamp() formulas failed in iframe contexts (vw resolved against parent viewport) */
/* Static % values now live inside each LG/MD/SM media query block above */
/* Original fluid formulas preserved here as reference: */
/*   SM: clamp(48%, calc(-16.67vw + 496px), 66%) → replaced with 56% */
/*   MD: clamp(36%, calc(-5.33vw + 409.57px), 48%) → replaced with 44% */
/*   LG: clamp(30%, calc(1.25vw + 344.72px), 36%) → replaced with 34% */