/*
VISUAL REBELLION SYSTEM
=======================
Rupturas intencionales de reglas de diseño para demostrar maestría
Un senior UX/UI sabe cuándo romper reglas para crear impacto, recordación y diferenciación
*/

/* 
FILOSOFÍA DE RUPTURAS VISUALES
==============================
"Las reglas están para romperse, pero solo cuando sabes por qué existen"
- Crear tensión visual que genere recordación
- Romper expectativas para destacar elementos importantes
- Usar asimetrías estratégicas para guiar la atención
- Aplicar contrastes inesperados para crear jerarquía emocional
*/

:root {
  /* Variables para rupturas controladas */
  --rebellion-offset-sm: 3px;    /* Micro desalineaciones */
  --rebellion-offset-md: 8px;    /* Desalineaciones notables */
  --rebellion-offset-lg: 15px;   /* Rupturas dramáticas */
  --rebellion-skew: 1deg;        /* Inclinación sutil */
  --rebellion-skew-bold: 3deg;   /* Inclinación dramática */
  --rebellion-scale: 1.03;       /* Escala ligeramente fuera de proporción */
}

/* 
RUPTURAS TIPOGRÁFICAS AVANZADAS
===============================
Más allá del sistema tipográfico estándar
*/

/* Títulos que rompen la alineación */
.rebel-title {
  position: relative;
  transform: translateX(var(--rebellion-offset-md));
}

.rebel-title::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--rebellion-offset-lg));
  top: 50%;
  width: var(--rebellion-offset-sm);
  height: 60%;
  background: linear-gradient(135deg, #ff6b9d, #4ecdc4);
  transform: translateY(-50%) skew(var(--rebellion-skew-bold));
}

/* Texto que se sale del contenedor intencionalmente */
.rebel-breakout {
  margin-left: calc(-1 * var(--space-lg));
  margin-right: calc(-1 * var(--space-lg));
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  background: linear-gradient(90deg, transparent, rgba(255, 107, 157, 0.05), transparent);
  position: relative;
}

.rebel-breakout::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ff6b9d;
  transform: skew(var(--rebellion-skew));
}

/* 
RUPTURAS DE GRID Y LAYOUT
=========================
Elementos que rompen la estructura esperada
*/

/* Cards que se salen del grid */
.rebel-card {
  transform: rotate(var(--rebellion-skew)) scale(var(--rebellion-scale));
  margin: var(--space-lg) 0;
  position: relative;
  z-index: 2;
}

.rebel-card:nth-child(even) {
  transform: rotate(calc(-1 * var(--rebellion-skew))) scale(var(--rebellion-scale));
  margin-left: var(--rebellion-offset-lg);
}

.rebel-card:nth-child(odd) {
  margin-right: var(--rebellion-offset-lg);
}

/* Elementos que se superponen intencionalmente */
.rebel-overlap {
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * var(--space-md));
  margin-left: var(--rebellion-offset-md);
}

.rebel-overlap::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--rebellion-offset-sm));
  left: calc(-1 * var(--rebellion-offset-sm));
  right: var(--rebellion-offset-sm);
  bottom: var(--rebellion-offset-sm);
  background: rgba(78, 205, 196, 0.1);
  border: 1px solid rgba(78, 205, 196, 0.3);
  z-index: -1;
  transform: skew(var(--rebellion-skew));
}

/* 
RUPTURAS DE COLOR Y CONTRASTE
=============================
Colores que rompen la paleta para crear énfasis
*/

/* Elemento que rompe la paleta de colores */
.rebel-color-break {
  background: linear-gradient(135deg, #ff6b9d, #ff8a00);
  color: #000;
  padding: var(--space-sm) var(--space-md);
  border-radius: 0 var(--space-sm) 0 var(--space-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  box-shadow: 
    0 4px 8px rgba(255, 107, 157, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Texto que usa colores inesperados */
.rebel-text-wild {
  background: linear-gradient(45deg, #ff6b9d, #4ecdc4, #7ed321, #f5a623);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rebel-color-shift 8s ease-in-out infinite;
}

@keyframes rebel-color-shift {
  0%, 100% { background-position: 0% 50%; }
  25% { background-position: 100% 50%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
}

/* 
RUPTURAS DE SPACING
===================
Espaciado que rompe el sistema para crear énfasis
*/

/* Elemento con spacing caótico pero controlado */
.rebel-spacing {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  margin-left: var(--rebellion-offset-lg);
  margin-right: var(--space-xs);
  padding: var(--space-lg) var(--space-sm) var(--space-md) var(--space-xl);
}

/* Grupo de elementos con ritmo roto */
.rebel-rhythm > *:nth-child(1) { margin-bottom: var(--space-xs); }
.rebel-rhythm > *:nth-child(2) { margin-bottom: var(--space-2xl); }
.rebel-rhythm > *:nth-child(3) { margin-bottom: var(--space-sm); }
.rebel-rhythm > *:nth-child(4) { margin-bottom: var(--space-xl); }
.rebel-rhythm > *:nth-child(5) { margin-bottom: var(--space-md); }

/* 
RUPTURAS DE FORMA Y GEOMETRÍA
=============================
Elementos que rompen las formas esperadas
*/

/* Contenedor con forma irregular */
.rebel-shape {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 
    var(--space-lg) 
    var(--space-xs) 
    var(--space-md) 
    var(--space-xl);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
}

.rebel-shape::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 100%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(78, 205, 196, 0.1), transparent);
  transform: rotate(15deg);
  pointer-events: none;
}

/* Elementos con bordes rebeldes */
.rebel-border {
  border: 2px solid transparent;
  border-image: linear-gradient(45deg, #ff6b9d, transparent, #4ecdc4, transparent) 1;
  position: relative;
}

.rebel-border::after {
  content: '';
  position: absolute;
  top: var(--rebellion-offset-sm);
  left: var(--rebellion-offset-sm);
  right: calc(-1 * var(--rebellion-offset-sm));
  bottom: calc(-1 * var(--rebellion-offset-sm));
  border: 1px solid rgba(255, 107, 157, 0.3);
  pointer-events: none;
  transform: skew(calc(-1 * var(--rebellion-skew)));
}

/* 
RUPTURAS DE INTERACCIÓN
=======================
Comportamientos que rompen expectativas
*/

/* Hover que hace lo inesperado */
.rebel-hover {
  transition: all 0.3s ease;
  cursor: pointer;
}

.rebel-hover:hover {
  transform: 
    translateX(var(--rebellion-offset-md)) 
    translateY(calc(-1 * var(--rebellion-offset-sm))) 
    rotate(var(--rebellion-skew))
    scale(0.98); /* Escala hacia abajo en lugar de hacia arriba */
  filter: hue-rotate(30deg);
}

/* Elemento que se mueve de forma inesperada */
.rebel-movement {
  animation: rebel-float 6s ease-in-out infinite;
}

@keyframes rebel-float {
  0%, 100% { 
    transform: translateY(0) rotate(0deg); 
  }
  25% { 
    transform: translateY(-5px) rotate(1deg); 
  }
  50% { 
    transform: translateY(3px) rotate(-0.5deg); 
  }
  75% { 
    transform: translateY(-2px) rotate(0.5deg); 
  }
}

/* 
APLICACIONES ESPECÍFICAS DEL PORTFOLIO
======================================
Rupturas aplicadas a elementos específicos
*/

/* Hero que rompe la centralización */
.hero-rebel {
  text-align: left;
  padding-left: var(--space-2xl);
}

.hero-rebel .hero-title {
  transform: translateX(calc(-1 * var(--rebellion-offset-md)));
  margin-bottom: var(--space-xs); /* Rompe el spacing esperado */
}

.hero-rebel .hero-subtitle {
  margin-left: var(--rebellion-offset-lg);
  margin-bottom: var(--space-2xl); /* Spacing inesperado */
}

/* Project cards con rupturas controladas */
.project-card-rebel {
  position: relative;
  overflow: visible; /* Rompe el contenimiento */
}

.project-card-rebel::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--rebellion-offset-sm));
  left: calc(-1 * var(--rebellion-offset-sm));
  width: calc(100% + var(--rebellion-offset-md));
  height: calc(100% + var(--rebellion-offset-md));
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.1), transparent);
  z-index: -1;
  transform: rotate(calc(-1 * var(--rebellion-skew)));
  border-radius: inherit;
}

/* Skills que rompen el grid */
.skills-rebel .skill-category:nth-child(2) {
  transform: translateY(calc(-1 * var(--space-md)));
}

.skills-rebel .skill-category:nth-child(4) {
  transform: translateY(var(--space-sm)) translateX(var(--rebellion-offset-md));
}

/* 
RUPTURAS RESPONSIVAS
===================
Rupturas que se adaptan pero mantienen rebeldía
*/

@media (max-width: 768px) {
  :root {
    /* Rupturas más sutiles en tablet */
    --rebellion-offset-md: 5px;
    --rebellion-offset-lg: 10px;
    --rebellion-skew: 0.5deg;
    --rebellion-skew-bold: 1.5deg;
  }
  
  /* Simplificar algunas rupturas en tablet */
  .rebel-card:nth-child(even),
  .rebel-card:nth-child(odd) {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 480px) {
  :root {
    /* Rupturas mínimas en móvil */
    --rebellion-offset-sm: 2px;
    --rebellion-offset-md: 3px;
    --rebellion-offset-lg: 5px;
    --rebellion-skew: 0.25deg;
    --rebellion-skew-bold: 0.75deg;
  }
  
  /* Desactivar rupturas complejas en móvil */
  .rebel-card {
    transform: none;
    margin: var(--space-md) 0;
  }
  
  .rebel-text-wild {
    animation: none;
    background: linear-gradient(135deg, #ff6b9d, #4ecdc4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

/* 
ACCESIBILIDAD EN RUPTURAS
=========================
Mantener accesibilidad incluso al romper reglas
*/

@media (prefers-reduced-motion: reduce) {
  .rebel-text-wild {
    animation: none;
  }
  
  .rebel-movement {
    animation: none;
  }
  
  .rebel-hover:hover {
    transform: none;
    filter: none;
  }
}

@media (prefers-contrast: high) {
  .rebel-color-break {
    background: #ffffff;
    color: #000000;
    border: 2px solid #000000;
  }
  
  .rebel-text-wild {
    background: none;
    -webkit-text-fill-color: unset;
    color: #ffffff;
    font-weight: var(--font-weight-bold);
  }
}

/* 
UTILIDADES PARA RUPTURAS ESPECÍFICAS
====================================
Clases para aplicar rupturas puntuales
*/

.break-left { transform: translateX(calc(-1 * var(--rebellion-offset-md))); }
.break-right { transform: translateX(var(--rebellion-offset-md)); }
.break-up { transform: translateY(calc(-1 * var(--rebellion-offset-md))); }
.break-down { transform: translateY(var(--rebellion-offset-md)); }

.skew-left { transform: skew(calc(-1 * var(--rebellion-skew))); }
.skew-right { transform: skew(var(--rebellion-skew)); }

.scale-rebel { transform: scale(var(--rebellion-scale)); }
.scale-rebel-down { transform: scale(0.97); }

/* Para marcar elementos como intencionalmente rebeldes */
.intentional-rebellion {
  position: relative;
}

.intentional-rebellion::after {
  content: '⚡';
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.debug-rebellion .intentional-rebellion::after {
  opacity: 1;
}