@reference "../globals.css";

@layer components {
  .ciso-btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-full bg-ssg-red px-6 py-3 text-sm font-semibold text-white transition-all duration-300 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-ssg-red focus:ring-offset-2;
    box-shadow: 0 0 40px rgba(236, 32, 36, 0.25);
  }
  .ciso-btn-primary:hover {
    box-shadow: 0 0 50px rgba(236, 32, 36, 0.4);
  }
  .ciso-btn-secondary {
    @apply inline-flex items-center justify-center gap-2 rounded-full border border-white/20 bg-white/5 backdrop-blur-md px-6 py-3 text-sm font-semibold text-white transition-all duration-300 hover:bg-white/10 hover:border-white/30 focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2;
  }
  .ciso-form-group {
    @apply mb-5;
  }
  .ciso-form-label {
    @apply block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2;
  }
  .ciso-form-input {
    @apply w-full rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-800 transition-all focus:border-ssg-cyber focus:bg-white focus:outline-none focus:ring-2 focus:ring-ssg-cyber/20 placeholder-slate-400;
  }
  .ciso-form-radio-custom {
    @apply h-5 w-5 text-ssg-cyber border-slate-300 focus:ring-ssg-cyber transition-all;
  }
  .ciso-event-card {
    @apply rounded-3xl border border-slate-200 bg-white p-6 transition-all sm:p-10;
    box-shadow: 0 10px 35px rgba(11, 15, 25, 0.08);
  }
  .ciso-agenda-item {
    @apply relative border-l-2 border-ssg-red pl-6 pb-8 last:pb-0;
  }
  .ciso-agenda-item::before {
    content: '';
    @apply absolute left-[-9px] top-0 h-4 w-4 rounded-full border-4 border-white bg-ssg-red shadow-sm;
  }
  .ciso-agenda-time {
    @apply text-sm font-bold text-ssg-cyber mb-1 block tracking-wide;
  }
  .ciso-agenda-title {
    @apply text-lg font-bold text-slate-900;
  }
  .ciso-agenda-desc {
    @apply text-slate-600 mt-2 text-sm leading-relaxed;
  }
}

/* Hero Animations & Background */
.ciso-hero {
  position: relative;
  isolation: isolate;
  background-color: #0B0F19;
}
.ciso-hero::before,
.ciso-hero::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
.ciso-hero::before {
  width: 28rem;
  height: 28rem;
  top: -9rem;
  left: -8rem;
  background: radial-gradient(circle, rgba(208, 46, 50, 0.42) 0%, rgba(208, 46, 50, 0) 70%);
  animation: heroBlobA 12s ease-in-out infinite alternate;
}
.ciso-hero::after {
  width: 30rem;
  height: 30rem;
  right: -8rem;
  bottom: -9rem;
  background: radial-gradient(circle, rgba(63, 18, 108, 0.45) 0%, rgba(63, 18, 108, 0) 70%);
  animation: heroBlobB 14s ease-in-out infinite alternate;
}
.ciso-hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black 30%, transparent 88%);
  opacity: 0.32;
  pointer-events: none;
}
.ciso-hero-network-lines,
.ciso-hero-signal-waves,
.ciso-hero-3d-waves,
.ciso-hero-scan-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.ciso-hero-network-lines {
  opacity: 0.62;
  background-image: linear-gradient(110deg, rgba(208, 46, 50, 0.34) 1.4px, transparent 1.4px),
    linear-gradient(28deg, rgba(63, 18, 108, 0.34) 1.4px, transparent 1.4px);
  background-size: 150px 150px, 190px 190px;
  background-position: 0 0, 20px 40px;
  mask-image: radial-gradient(circle at 55% 45%, black 20%, transparent 78%);
  animation: networkDrift 18s linear infinite;
}
.ciso-hero-network-lines::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.42) 1px, transparent 1.5px);
  background-size: 34px 34px;
  opacity: 0.42;
  animation: nodeDrift 16s linear infinite;
}
.ciso-hero-signal-waves::before,
.ciso-hero-signal-waves::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  border: 1.5px solid rgba(208, 46, 50, 0.38);
  box-shadow: inset 0 0 46px rgba(63, 18, 108, 0.2);
  opacity: 0;
  transform: scale(0.55);
}
.ciso-hero-signal-waves::before {
  width: 360px;
  height: 360px;
  right: 14%;
  top: 20%;
  animation: wavePulse 4.2s ease-out infinite;
}
.ciso-hero-signal-waves::after {
  width: 470px;
  height: 470px;
  left: 8%;
  bottom: 8%;
  border-color: rgba(63, 18, 108, 0.45);
  animation: wavePulse 5s ease-out infinite 0.9s;
}
.ciso-hero-3d-waves {
  inset: auto -15% -130px -15%;
  height: 360px;
  opacity: 0.72;
  transform: perspective(800px) rotateX(66deg);
  transform-origin: center bottom;
  background-image: repeating-linear-gradient(90deg, rgba(208, 46, 50, 0.34) 0, rgba(208, 46, 50, 0.34) 2px, transparent 1px, transparent 40px),
    repeating-linear-gradient(180deg, rgba(63, 18, 108, 0.32) 0, rgba(63, 18, 108, 0.32) 2px, transparent 1px, transparent 28px);
  animation: waveGridShift 9s linear infinite;
  mask-image: linear-gradient(180deg, transparent 0, black 22%, black 76%, transparent 100%);
}
.ciso-hero-3d-waves::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(208, 46, 50, 0.4), transparent 60%);
  animation: waveGlow 3.8s ease-in-out infinite;
}
.ciso-hero-scan-sweep {
  background: linear-gradient(100deg, transparent 16%, rgba(255, 255, 255, 0.08) 34%, rgba(208, 46, 50, 0.16) 47%, rgba(63, 18, 108, 0.12) 55%, transparent 72%);
  transform: translateX(-120%);
  animation: scanSweep 4.8s ease-in-out infinite;
  opacity: 0.78;
}
.ciso-hero-glow {
  position: absolute;
  top: -8rem;
  right: -5rem;
  width: 26rem;
  height: 26rem;
  background: radial-gradient(circle, rgba(208, 46, 50, 0.24), rgba(63, 18, 108, 0.06) 45%, transparent 72%);
  filter: blur(10px);
  z-index: 0;
}

.ciso-header-shell {
  transition: background 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}

@keyframes heroBlobA {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(70px, 34px, 0) scale(1.08); }
}
@keyframes heroBlobB {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-80px, -40px, 0) scale(1.1); }
}
@keyframes networkDrift {
  0% { background-position: 0 0, 20px 40px; }
  100% { background-position: 180px 120px, -220px 170px; }
}
@keyframes nodeDrift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(34px, 24px, 0); }
}
@keyframes wavePulse {
  0% { opacity: 0; transform: scale(0.55); }
  22% { opacity: 0.36; }
  100% { opacity: 0; transform: scale(1.2); }
}
@keyframes waveGridShift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 52px 0, 0 34px; }
}
@keyframes waveGlow {
  0%, 100% { opacity: 0.38; }
  50% { opacity: 0.78; }
}
@keyframes scanSweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.ciso-animate-fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ciso-delay-100 { animation-delay: 100ms; }
.ciso-delay-200 { animation-delay: 200ms; }