/* ==========================================
   CypherOne — Custom Styles & Animations
   ========================================== */

/* ---- Smooth Scroll ---- */
html {
  scroll-behavior: smooth;
}

/* ---- Selection Color ---- */
::selection {
  background: rgba(0, 213, 230, 0.3);
  color: #fff;
}

/* ---- Glassmorphism Card ---- */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---- Logo Treatment ---- */
.site-logo {
  display: block;
  object-fit: contain;
  object-position: center;
  background: transparent;
  filter: drop-shadow(0 10px 24px rgba(0, 213, 230, 0.08));
}

.site-logo-nav {
  width: 260px;
  height: 52px;
}

.site-logo-footer {
  width: 220px;
  height: 46px;
}

/* ---- Service Card Hover ---- */
.service-card {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px -15px rgba(0, 213, 230, 0.2);
  border-color: rgba(0, 213, 230, 0.2);
}

/* ---- Research Card Hover ---- */
.research-card {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.4s ease;
}

.research-card:hover {
  transform: translateY(-4px);
  border-color: rgba(94, 232, 243, 0.25);
}

/* ---- Scroll Reveal Animations ---- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays */
.reveal-delay-1 {
  transition-delay: 0.15s;
}

.reveal-delay-2 {
  transition-delay: 0.3s;
}

.reveal-delay-3 {
  transition-delay: 0.45s;
}

/* ---- Hero Parallax ---- */
.hero-parallax {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ---- Navbar States ---- */
#navbar {
  background: transparent;
}

#navbar.scrolled {
  background: rgba(18, 26, 71, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* ---- Hamburger Animation ---- */
#menu-toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

#menu-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}

#menu-toggle.active span:nth-child(3) {
  transform: translateY(-4px) rotate(-45deg);
  width: 1.5rem;
}

/* ---- Form Input Focus Glow ---- */
input:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(0, 213, 230, 0.15);
}

/* ---- Form Validation States ---- */
input.error,
textarea.error {
  border-color: rgba(248, 113, 113, 0.5) !important;
}

input.error:focus,
textarea.error:focus {
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1);
}

/* ---- CTA Button Pulse ---- */
@keyframes subtle-pulse {
  0%, 100% {
    box-shadow: 0 10px 30px -10px rgba(0, 213, 230, 0.35);
  }
  50% {
    box-shadow: 0 10px 40px -10px rgba(0, 213, 230, 0.55);
  }
}

/* ---- Lower Section Gradient Backgrounds ---- */
#vision {
  background: linear-gradient(180deg, #121a47 0%, #1a2d5c 100%);
}

#partners {
  background: linear-gradient(180deg, #152051 0%, #2a3d6f 100%);
}

footer {
  background: linear-gradient(180deg, #2a3d6f 0%, #244172 55%, #1e3f6d 100%);
}

.dea-logo-clean {
  mix-blend-mode: screen;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #121a47;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 213, 230, 0.35);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 213, 230, 0.55);
}

/* ---- Loading State for Images ---- */
img {
  background: linear-gradient(135deg, rgba(0, 213, 230, 0.06), rgba(94, 232, 243, 0.06));
}

.site-logo {
  background: transparent;
}

/* ---- Responsive Adjustments ---- */
@media (max-width: 768px) {
  .reveal {
    transform: translateY(20px);
  }

  #hero h1 {
    font-size: 2.5rem;
  }

  .site-logo-nav {
    width: 210px;
    height: 44px;
  }

  .site-logo-footer {
    width: 190px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  #hero h1 {
    font-size: 2rem;
  }
}