/*
  global.css
  ------------------
  Paleta: Morados Oscuros, Magenta Joya y Cristales Biselados
  Propósito: Variables, estilos globales, layout principal, tipografía y fondos estelares.
*/

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Marcellus&family=Montserrat:wght@300;400;500&display=swap');

:root {
  --bg-purple-light: #3D0C5A; 
  --bg-purple-mid: #250036;   
  --bg-purple-deep: #0D0014;  
  --accent-purple: #D62288;  
  --accent-deep: #12001A;    
  --accent-light: #FAD4E6;   
  
  --text-light: #FFFFFF;     
  --text-shadow-elegant: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 12px rgba(214, 34, 136, 0.6);
  --icon-shadow-elegant: drop-shadow(0 2px 4px rgba(0,0,0,0.8)) drop-shadow(0 0 10px rgba(214,34,136,0.6));
  --muted: #E2B6D6; 

  --glass-grad-1: rgba(61, 12, 90, 0.35); 
  --glass-grad-2: rgba(37, 0, 54, 0.45);  
  --glass-grad-3: rgba(26, 0, 38, 0.35);  

  --btn-grad-1: rgba(85, 17, 110, 0.75);
  --btn-grad-2: rgba(49, 0, 71, 0.85);
  --btn-grad-3: rgba(34, 0, 51, 0.80);
}

/* ===========================
   ESTILOS GLOBALES Y FONDOS
=========================== */
html { overflow-x: hidden; }

body {
  user-select: none;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300; 
  font-size: 1.1rem; 
  background: linear-gradient(to bottom, var(--bg-purple-light) 0%, var(--bg-purple-mid) 50%, var(--bg-purple-deep) 100%);
  color: var(--text-light); 
  text-shadow: var(--text-shadow-elegant);
  min-height: 100vh;
  position: relative;
  cursor: url('../cursors/cursor.cur'), auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; 
}

body.commissions-page, .commissions-page {
  display: block !important; 
  overflow-y: auto !important; 
  height: 100vh;
  overscroll-behavior-x: none;
}

/* ✨ FÍSICA ESTELAR ✨ */
body::before {
  content: "";
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh; z-index: -3; pointer-events: none;
  background-image: 
    radial-gradient(2px 2px at 10% 15%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 25% 40%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(3px 3px at 45% 10%, rgba(214, 34, 136, 0.8), transparent), 
    radial-gradient(1.5px 1.5px at 60% 60%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 80% 25%, rgba(250, 212, 230, 0.9), transparent), 
    radial-gradient(1px 1px at 90% 70%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(2.5px 2.5px at 15% 85%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 35% 90%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(2px 2px at 50% 30%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 75% 85%, rgba(214, 34, 136, 0.7), transparent), 
    radial-gradient(3px 3px at 95% 45%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1.5px 1.5px at 5% 50%, rgba(255, 255, 255, 0.5), transparent);
  background-size: 130px 130px; 
  animation: twinkleStars 4s ease-in-out infinite alternate;
}

body::after {
  content: ""; position: fixed; top: -10%; left: 70%;
  width: 150px; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,1), transparent);
  box-shadow: 0 0 15px rgba(255,255,255,0.9);
  transform: rotate(-45deg); z-index: -2; pointer-events: none;
  border-radius: 50%; animation: shootingStar 6s linear infinite; opacity: 0;
}

html::before {
  content: ""; position: fixed; top: -20%; left: 120%;
  width: 120px; height: 1.5px;
  background: linear-gradient(90deg, rgba(214, 34, 136,1), transparent);
  box-shadow: 0 0 20px rgba(214, 34, 136,0.8);
  transform: rotate(-45deg); z-index: -2; pointer-events: none;
  border-radius: 50%; animation: shootingStar2 9s linear infinite 2s; opacity: 0;
}

html::after {
  content: ""; position: fixed; top: 30%; left: 110%;
  width: 80px; height: 1px;
  background: linear-gradient(90deg, rgba(250, 212, 230,0.9), transparent);
  box-shadow: 0 0 10px rgba(250, 212, 230,0.7);
  transform: rotate(-45deg); z-index: -2; pointer-events: none;
  border-radius: 50%; animation: shootingStar3 5s linear infinite 4s; opacity: 0;
}

img, a { -webkit-user-drag: none; }
.hidden { display: none !important; }

/* ===========================
   LAYOUT PRINCIPAL
=========================== */
.container, .commissions-wrapper {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 20px; backdrop-filter: blur(14px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.8), inset 0 0 25px rgba(214, 34, 136, 0.15);
}

.container {
  padding: 1rem; max-width: 860px; width: 95%;
  background: linear-gradient(135deg, var(--glass-grad-1) 0%, rgba(37,0,54,0.3) 50%, var(--glass-grad-2) 100%);
}

.commissions-wrapper {
  max-width: 1100px; margin: 2rem auto; padding: 2rem;
  background: linear-gradient(135deg, var(--glass-grad-1) 0%, var(--glass-grad-2) 70%, var(--glass-grad-3) 100%);
  animation: wrapperZoom 12s ease-in-out infinite alternate;
}

/* ===========================
   TIPOGRAFÍA FINA Y TÍTULOS
=========================== */
.section-title, .commissions-title {
  font-family: 'Marcellus', serif; font-weight: 400; letter-spacing: 1.5px;
}

.title {
  font-family: 'Great Vibes', cursive; letter-spacing: 1px;
  font-size: 2.6rem; margin: 0.5rem 0; color: var(--text-light);
  text-shadow: 0 0 15px rgba(214, 34, 136, 0.9), 0 0 30px rgba(0,0,0,0.8);
}

.commissions-title {
  font-size: 2.8rem; text-align: center; margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(214, 34, 136, 0.5); 
}

.desc { font-size: 1.25rem; font-weight: 300; color: var(--text-light); }
.commissions-desc { text-align: center; font-size: 1.4rem; margin: 0.5rem 0 0 0; font-weight: 300; }
.section-title { font-size: 1.5rem; border-bottom: 1px solid rgba(214, 34, 136, 0.5); margin: 0.5rem 0 0.5rem 0; padding-bottom: 4px; }

.profile-pic {
  width: 145px; height: 145px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 25px rgba(214, 34, 136, 0.7), inset 0 0 15px rgba(255, 255, 255, 0.5);
  background-image: linear-gradient(var(--accent-purple), var(--accent-purple)), radial-gradient(circle at top left, var(--accent-purple), var(--accent-deep));
  background-origin: border-box; background-clip: padding-box, border-box;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s ease;
}
.profile-pic:hover { transform: scale(1.06) rotate(2deg); box-shadow: 0 0 35px rgba(214, 34, 136, 1), inset 0 0 20px rgba(255, 255, 255, 0.8); }

/* ===========================
   ANIMACIONES GLOBALES
=========================== */
@keyframes twinkleStars { 0% { opacity: 0.3; } 100% { opacity: 1; transform: scale(1.05); } }
@keyframes shootingStar { 0% { transform: translate(0, 0) rotate(-45deg) scale(0); opacity: 0; } 3% { opacity: 1; transform: translate(-10vw, 10vh) rotate(-45deg) scale(1.2); } 15% { transform: translate(-120vw, 120vh) rotate(-45deg) scale(0.5); opacity: 0; } 100% { opacity: 0; } }
@keyframes shootingStar2 { 0% { transform: translate(0, 0) rotate(-45deg) scale(0); opacity: 0; } 5% { opacity: 0.8; transform: translate(-15vw, 15vh) rotate(-45deg) scale(1); } 18% { transform: translate(-100vw, 100vh) rotate(-45deg) scale(0.4); opacity: 0; } 100% { opacity: 0; } }
@keyframes shootingStar3 { 0% { transform: translate(0, 0) rotate(-45deg) scale(0); opacity: 0; } 4% { opacity: 1; transform: translate(-5vw, 5vh) rotate(-45deg) scale(0.8); } 12% { transform: translate(-80vw, 80vh) rotate(-45deg) scale(0.3); opacity: 0; } 100% { opacity: 0; } }
.appear { opacity: 0; transform: scale(0.95); animation: appearZoom 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes appearZoom { from { opacity: 0; transform: scale(0.95) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.float-zoom { animation: floatZoom 8s ease-in-out infinite; }
@keyframes floatZoom { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
@keyframes wrapperZoom { from { transform: scale(1); } to { transform: scale(1.01); } }

/* ===========================
   FOOTER & MEDIA QUERIES (LAYOUT)
=========================== */
footer { margin-top: 1rem; font-size: 1rem; font-weight: 300; color: var(--muted); text-align: center; }

@media (max-width: 600px) {
  .commissions-title { font-size: 2.2rem; }
  .commissions-desc { font-size: 1.2rem; }
  .title { font-size: 2.2rem; }
}

@media (max-width: 899px) {
  .left-column { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .left-column .title { text-align: center; width: 100%; }
  .left-column .desc { text-align: center; margin: 0.5rem auto 1rem auto; max-width: 420px; }
  .right-grid { display: block; }
  .section-title { margin-bottom: 1rem; }
}

@media (min-width: 900px) {
  .container { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; align-items: stretch; max-width: 1000px; text-align: left; }
  .left-column { display: flex; flex-direction: column; gap: 1.2rem; align-items: center; justify-content: flex-start; height: 100%; }
  .left-column .title { font-size: 2.6rem; line-height: 1.05; text-align: center; width: 100%; }
  .left-column .desc { text-align: center; max-width: 340px; margin: 0.2rem auto 0.5rem auto; line-height: 1.4rem; }
  .left-column .profile-pic { margin: 0 auto 1rem auto; width: 150px; height: 150px; }
  .right-column { display: block; }
  .right-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; row-gap: 2.5rem; }
  .right-grid .col { display: flex; flex-direction: column; gap: 0.8rem; align-items: center; justify-content: flex-start; }
  .social-col, .portfolio-col { margin-top: 1rem; }
  .section-title { font-size: 1.5rem; }
  .container > footer { grid-column: 1 / -1; margin-top: 1.5rem; text-align: center; }
}

/* =========================================
   🛡️ ESCUDO ANTI-PARPADEO DEFINITIVO (GPU)
========================================= */
.sheet-card, .sheet-board, .left-column, .col, .music-player-widget {
  -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  will-change: transform, opacity; 
  -webkit-perspective: 1000px; perspective: 1000px;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}