/* ============================================================
   CybertechInfinity — Main Stylesheet
   ============================================================ */

/* ── CSS Custom Properties ──────────────────────────── */
:root {
  --color-void: #080c14;
  --color-abyss: #0b1120;
  --color-surface: #111b2e;
  --glass-fill: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.06);
  --glass-border-hover: rgba(255,255,255,0.14);
  --text-primary: #e8ecf1;
  --text-secondary: #8899b4;
  --text-muted: #546282;
  --accent-sf: #00a1e0;
  --accent-teal: #00f0c8;
  --accent-purple: #8b5cf6;
  --accent-coral: #ff6b6b;
  --accent-gold: #f59e0b;
}

/* ── Typography ─────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--color-void);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Glass utility ──────────────────────────────────── */
.glass {
  background: var(--glass-fill);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
}

/* ── CTA Buttons ────────────────────────────────────── */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  border-radius: 0.75rem;
  transition: all 0.2s ease;
  cursor: pointer;
}
.cta-btn:hover { transform: scale(1.03); }
.cta-btn:active { transform: scale(0.97); }

.cta-primary {
  background: var(--accent-sf);
  color: #fff;
  box-shadow: 0 0 20px rgba(0,161,224,0.15), 0 0 60px rgba(0,161,224,0.05);
}
.cta-primary:hover {
  box-shadow: 0 0 25px rgba(0,161,224,0.25), 0 0 80px rgba(0,161,224,0.1);
  filter: brightness(1.1);
}

.cta-secondary {
  border: 1px solid var(--glass-border);
  background: var(--glass-fill);
  backdrop-filter: blur(16px);
  color: var(--text-primary);
}
.cta-secondary:hover {
  border-color: var(--glass-border-hover);
  background: rgba(255,255,255,0.06);
}

/* ── Custom Logo ────────────────────────────────────── */
.custom-logo-img {
  height: auto;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

/* ── Hero Background Layers ─────────────────────────── */
.hero-bg-image,
.hero-bg-gradient {
  will-change: transform;
}

/* ── Scroll Reveal ──────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Text Reveal (character spans) ──────────────────── */
.text-reveal .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(4px);
  animation: char-reveal 0.35s ease forwards;
}

@keyframes char-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ── Floating animations ────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(2deg); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Tilt Cards ─────────────────────────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  transition: box-shadow 0.3s;
}

/* ── Portfolio Items (full-card background) ─────────── */
.portfolio-item .glass {
  position: relative;
}

.portfolio-item .glass img {
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Ensure text overlays sit above the background image */
.portfolio-item .glass > .relative.z-20 {
  position: relative;
  z-index: 20;
}

/* ── Portfolio category badges ──────────────────────── */
.bg-accent-sf\/20 { background: rgba(0,161,224,0.2); }
.text-accent-sf { color: var(--accent-sf); }
.border-accent-sf\/30 { border-color: rgba(0,161,224,0.3); }

.bg-accent-teal\/20 { background: rgba(0,240,200,0.2); }
.text-accent-teal { color: var(--accent-teal); }
.border-accent-teal\/30 { border-color: rgba(0,240,200,0.3); }

.bg-accent-purple\/20 { background: rgba(139,92,246,0.2); }
.text-accent-purple { color: var(--accent-purple); }
.border-accent-purple\/30 { border-color: rgba(139,92,246,0.3); }

.bg-accent-sf\/10 { background: rgba(0,161,224,0.1); }
.bg-accent-purple\/8 { background: rgba(139,92,246,0.08); }
.bg-accent-teal\/5 { background: rgba(0,240,200,0.05); }
.bg-void\/80 { background: rgba(8,12,20,0.8); }
.bg-void\/90 { background: rgba(8,12,20,0.9); }
.bg-void\/95 { background: rgba(8,12,20,0.95); }
.bg-void\/85 { background: rgba(8,12,20,0.85); }
.bg-accent-sf\/3 { background: rgba(0,161,224,0.03); }

/* from-void */ .from-void\/95 { --tw-gradient-from: rgba(8,12,20,0.95); }
/* via-void */ .via-void\/50 { --tw-gradient-stops: rgba(8,12,20,0.5); }
/* to-void */ .to-void\/20 { --tw-gradient-to: rgba(8,12,20,0.2); }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Form feedback ──────────────────────────────────── */
#cti-form-feedback.success {
  background: rgba(0,240,200,0.1);
  color: var(--accent-teal);
  border: 1px solid rgba(0,240,200,0.2);
}
#cti-form-feedback.error {
  background: rgba(255,107,107,0.1);
  color: var(--accent-coral);
  border: 1px solid rgba(255,107,107,0.2);
}

/* ── Accessibility ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  .text-reveal .char { animation: none; opacity: 1; transform: none; filter: none; }
  .animate-float, .animate-float-slow { animation: none; }
  .portfolio-item .glass img { transition: none; }
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1023px) {
  .glass { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}