/* ====================================================
   C2C STUDIO — AESTHETIC ENHANCEMENT LAYER v1.0
   Additive only. Does not modify existing styles.
   ==================================================== */

/* ── GLOBAL VARIABLES ── */
:root {
  --c2c-purple: #7c3aed;
  --c2c-purple-light: #a855f7;
  --c2c-teal: #06b6d4;
  --c2c-green: #10b981;
  --c2c-glow-purple: 0 0 20px rgba(124,58,237,0.4);
  --c2c-glow-teal: 0 0 20px rgba(6,182,212,0.35);
  --c2c-card-border: rgba(124,58,237,0.15);
  --c2c-card-hover: rgba(124,58,237,0.25);
  --transition-smooth: all 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ── ANIMATED AURORA BACKGROUND (hero areas) ── */
.c2c-aurora {
  position: relative;
  overflow: hidden;
}
.c2c-aurora::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 20% 40%, rgba(124,58,237,0.12) 0%, transparent 60%),
              radial-gradient(ellipse 60% 40% at 80% 60%, rgba(6,182,212,0.10) 0%, transparent 60%);
  animation: auroraShift 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes auroraShift {
  0%   { opacity: 0.6; transform: scale(1) rotate(0deg); }
  100% { opacity: 1;   transform: scale(1.05) rotate(1deg); }
}

/* ── ENHANCED CARD HOVER STATES ── */
.app-card, [class*="card"], .studio-card, .tool-card {
  transition: var(--transition-smooth) !important;
  border: 1px solid var(--c2c-card-border) !important;
  position: relative;
}
.app-card:hover, [class*="card"]:hover, .studio-card:hover, .tool-card:hover {
  border-color: var(--c2c-purple-light) !important;
  box-shadow: var(--c2c-glow-purple), 0 8px 32px rgba(0,0,0,0.3) !important;
  transform: translateY(-2px) !important;
}

/* ── FREEMIUM TIER BADGE ── */
.c2c-freemium-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(6,182,212,0.15));
  border: 1px solid rgba(124,58,237,0.4);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #a855f7;
}
.c2c-premium-badge {
  background: linear-gradient(135deg, rgba(245,158,11,0.25), rgba(239,68,68,0.15));
  border-color: rgba(245,158,11,0.5);
  color: #f59e0b;
}

/* ── USAGE METER BAR ── */
#c2c-usage-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  cursor: default;
}
#c2c-usage-meter .meter-bar {
  width: 80px;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
}
#c2c-usage-meter .meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c2c-purple), var(--c2c-teal));
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* ── PREMIUM LOCK OVERLAY ── */
.c2c-locked {
  position: relative;
  overflow: hidden;
}
.c2c-locked::after {
  content: '⭐ Pro';
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 10px;
  z-index: 10;
  pointer-events: none;
}
.c2c-locked .lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  z-index: 5;
  transition: var(--transition-smooth);
}
.c2c-locked:hover .lock-overlay {
  background: rgba(0,0,0,0.35);
}
.c2c-locked .lock-cta {
  text-align: center;
  color: white;
}
.c2c-locked .lock-cta span {
  display: block;
  font-size: 22px;
  margin-bottom: 4px;
}
.c2c-locked .lock-cta p {
  font-size: 12px;
  opacity: 0.85;
  font-weight: 600;
  background: linear-gradient(135deg, #f59e0b, var(--c2c-purple-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── PULSE CTA BUTTON ── */
.c2c-cta-pulse {
  animation: ctaPulse 2.5s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0.5); }
  50%       { box-shadow: 0 0 0 8px rgba(124,58,237,0); }
}

/* ── STAT COUNTER GLOW ── */
.c2c-stat-num {
  background: linear-gradient(135deg, var(--c2c-purple-light), var(--c2c-teal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(124,58,237,0.4));
}

/* ── SCROLLBAR STYLING ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.4); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(124,58,237,0.7); }

/* ── SMOOTH PAGE TRANSITIONS ── */
body { animation: fadeInPage 0.3s ease; }
@keyframes fadeInPage {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── NOTIFICATION TOAST ── */
#c2c-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.c2c-toast {
  padding: 12px 18px;
  background: rgba(15,15,20,0.95);
  border: 1px solid rgba(124,58,237,0.4);
  border-radius: 10px;
  color: white;
  font-size: 13px;
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), var(--c2c-glow-purple);
  animation: toastIn 0.3s ease, toastOut 0.3s ease 3s forwards;
  max-width: 300px;
}
@keyframes toastIn  { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; } }

/* ── HOMEPAGE DEAD SPACE FIX — Aurora gradient fill ── */
.hero-stats-gap, section + section:empty {
  min-height: unset !important;
  padding: 0 !important;
}

/* ── INPUT / FORM GLOW ON FOCUS ── */
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--c2c-purple) !important;
  box-shadow: 0 0 0 2px rgba(124,58,237,0.2) !important;
}

/* ===== C2C Pro Polish Layer v2 (additive) ===== */
* { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html { scroll-behavior:smooth; }
body { text-rendering:optimizeLegibility; }
/* Smoother universal transitions for interactive elements */
button, a, .card, input, select, textarea, [role=button] {
  transition: background-color .18s ease, border-color .18s ease, box-shadow .22s ease, transform .18s ease, opacity .18s ease;
}
/* Refined button press feedback */
button:active, [role=button]:active { transform: translateY(1px) scale(.99); }
/* Pro focus ring (accessibility + polish) */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(139,92,246,.7); outline-offset: 2px; border-radius: 8px;
}
/* Loading shimmer utility */
.c2c-shimmer { background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(139,92,246,.12) 50%, rgba(255,255,255,.04) 75%); background-size: 200% 100%; animation: c2cShimmer 1.4s ease-in-out infinite; border-radius: 10px; }
@keyframes c2cShimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
/* Copilot FAB gentle attention pulse */
@keyframes c2cFabPulse { 0%,100%{ box-shadow:0 8px 30px rgba(139,92,246,.5);} 50%{ box-shadow:0 8px 42px rgba(139,92,246,.85);} }
button[title*="Copilot"] { animation: c2cFabPulse 3.2s ease-in-out infinite; }
button[title*="Copilot"]:hover { animation: none; }
/* Card image / media subtle zoom on hover */
.card img, [class*=card] img { transition: transform .35s ease; }
.card:hover img, [class*=card]:hover img { transform: scale(1.04); }
/* Refined scrollbars everywhere */
*::-webkit-scrollbar { width:9px; height:9px; }
*::-webkit-scrollbar-thumb { background:linear-gradient(#8b5cf6,#3b82f6); border-radius:8px; }
*::-webkit-scrollbar-track { background:rgba(255,255,255,.03); }
/* Selection color on-brand */
::selection { background: rgba(139,92,246,.4); color:#fff; }
/* Empty-state helper text styling */
.c2c-empty { text-align:center; padding:40px 20px; color:rgba(255,255,255,.55); font-size:14px; }
.c2c-empty .c2c-empty-icon { font-size:34px; opacity:.5; display:block; margin-bottom:10px; }
/* Toast refinement */
.c2c-toast { backdrop-filter: blur(8px); }
/* Page content fade-in on load for polish */
@keyframes c2cFadeUp { from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
main, .content, .container, [class*=grid] { animation: c2cFadeUp .45s ease both; }
/* Mobile: ensure Copilot + meters don't overlap content */
@media (max-width:640px){
  button[title*="Copilot"]{ width:52px; height:52px; right:16px; bottom:16px; }
}