/* ===== Float Animation ===== */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.floating-icon {
  animation: float 3s ease-in-out infinite;
}

.float-slow {
  animation-duration: 5s;
}

/* ===== Root Variables & Base ===== */
:root{
  --gold:#003f6c;
  --accent:#1a6bb5;
  --muted:#6b7280;
  --bg-ink: #ffffff;
}
html,body{height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;margin:0;direction:ltr}
.smooth-scroll{scroll-behavior:smooth}
body{
  background:
    radial-gradient(800px 400px at 12% 10%, rgba(255,255,255,0.04), transparent),
    linear-gradient(180deg,#003f6c 0%, #002a4a 100%);
  color:#ffffff;
  -webkit-font-smoothing:antialiased;
}

/* HERO / CANVAS */
.card-glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  backdrop-filter: blur(6px);
}
.hero-overlay{background: linear-gradient(180deg, rgba(0,63,108,0.2), rgba(0,42,74,0.55));}

/* floating */
@keyframes floatUpDown {0%{transform:translateY(0) rotate(0);}50%{transform:translateY(-14px) rotate(4deg);}100%{transform:translateY(0) rotate(0);}}
.float-slow{animation:floatUpDown 7.2s ease-in-out infinite}
.float-med{animation:floatUpDown 5.2s ease-in-out infinite}
.float-fast{animation:floatUpDown 4.2s ease-in-out infinite}

/* buttons */
.btn-3d{position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .18s ease}
.btn-3d:active{transform:translateY(1px) scale(.995)}
.btn-shine::before{
  content:'';position:absolute;top:-140%;left:-40%;width:70%;height:280%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.6),transparent);
  transform:skewX(-22deg);transition:all .6s;pointer-events:none;mix-blend-mode:overlay;
}
.btn-shine:hover::before{left:140%}

/* card hover */
.project-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;transform-style:preserve-3d}
.project-card:hover{transform:translateY(-10px) rotateX(3deg) scale(1.03);box-shadow:0 38px 80px rgba(0,63,108,0.15)}

/* text effects */
.glow-title{color:var(--bg-ink);text-shadow:0 10px 40px rgba(255,255,255,0.12),0 2px 8px rgba(255,255,255,0.05)}
.neon{color:#ffffff;text-shadow:0 0 12px rgba(255,255,255,0.12),0 6px 40px rgba(255,255,255,0.06)}

/* gallery */
.research-img{height:160px;object-fit:cover;width:100%;display:block;border-radius:.75rem}

/* intro cinematic */
.intro-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:80;background:radial-gradient(circle at 30% 30%, rgba(0,63,108,0.95), rgba(0,40,80,0.99));backdrop-filter:blur(3px)}
.intro-text{font-size:clamp(20px,3vw,46px);font-weight:800;color:#ffffff;letter-spacing:0.6px;text-align:center}
.intro-sub{color:#b8d4ea;margin-top:10px;font-weight:500}

/* parallax helper */
.parallax{position:relative;transform-style:preserve-3d}

/* sticky subtle header */
header{backdrop-filter: blur(6px);background:linear-gradient(180deg, rgba(0,63,108,0.85), rgba(0,42,74,0.75));border-bottom:1px solid rgba(255,255,255,0.08)}

/* accessibility focus */
a:focus, button:focus, input:focus {outline: 3px solid rgba(0,63,108,0.18);outline-offset:3px}

/* responsive tweaks */
@media (max-width:880px){
  .research-img{height:120px}
}

/* ===== Spin Gradient (Nav Logo) ===== */
@keyframes spin-gradient {
  0% {
    transform: rotate(0deg);
    background-position: 0% 50%;
  }
  50% {
    transform: rotate(180deg);
    background-position: 100% 50%;
  }
  100% {
    transform: rotate(360deg);
    background-position: 0% 50%;
  }
}

.animate-spin-gradient {
  background-size: 200% 200%;
  animation: spin-gradient 6s linear infinite;
}

/* ===== Gradient Text + Shine + Glow ===== */
.gradient-text {
  background: linear-gradient(90deg, #003f6c, #1a6bb5, #003f6c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.gradient-text::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shine 3s infinite;
}

@keyframes shine {
  0% { left: -75%; }
  100% { left: 125%; }
}

.glow-text {
  text-shadow:
    0 0 10px rgba(0, 63, 108, 0.3),
    0 0 20px rgba(26, 107, 181, 0.2),
    0 0 30px rgba(0, 63, 108, 0.15);
}

/* ===== Card Glass Effects ===== */
.card-glass::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 63, 108, 0.15),
    transparent,
    rgba(0, 63, 108, 0.15),
    transparent
  );
  animation: rotateBorder 6s linear infinite;
  z-index: 0;
}

.card-glass::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: rgba(0, 63, 108, 0.6);
  border-radius: inherit;
  z-index: 1;
}

@keyframes rotateBorder {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.card-glass {
  position: relative;
  z-index: 0;
  border: 2px solid transparent;
  background: linear-gradient(#003f6c, #002a4a) padding-box,
              linear-gradient(270deg, #ffffff, #1a6bb5, #ffffff) border-box;
  background-size: 200% 200%;
  animation: borderMove 10s linear infinite;
  border-radius: 8px;
}

@keyframes borderMove {
  0% {
    background-position: 0% 50%, 0% 50%;
  }
  100% {
    background-position: 200% 50%, 200% 50%;
  }
}

.card-glass > * {
  position: relative;
  z-index: 2;
}

/* ===== Moving Gradient (Team Card) ===== */
.moving-gradient {
  background: linear-gradient(270deg, #003f6c, #1a6bb5, #4a9ad4, #1a6bb5, #003f6c);
  background-size: 400% 400%;
  animation: gradientMove 10s ease infinite;
}

@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== Falling Particles ===== */
@keyframes fall {
  0% { transform: translateY(-10px) scale(1); opacity: 0.8; }
  100% { transform: translateY(150px) scale(0.5); opacity: 0; }
}

.particle {
  position: absolute;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: fall 4s linear infinite;
}

.particle:nth-child(1) { left: 25%; animation-delay: 0s; }
.particle:nth-child(2) { left: 55%; animation-delay: 1s; }
.particle:nth-child(3) { left: 75%; animation-delay: 2s; }
.particle:nth-child(4) { left: 25%; animation-delay: 0.5s; }
.particle:nth-child(5) { left: 55%; animation-delay: 1.5s; }
.particle:nth-child(6) { left: 75%; animation-delay: 2.5s; }

/* ===== Animated Border (Form Inputs) ===== */
.animated-border {
  position: relative;
  z-index: 0;
  border: 2px solid transparent;
  background: linear-gradient(#003f6c, #003f6c) padding-box,
              linear-gradient(270deg, #ffffff, #1a6bb5, #ffffff) border-box;
  background-size: 200% 200%;
  animation: borderMove 3s linear infinite;
  border-radius: 8px;
}

/* ===== Card Glass (Support Section) ===== */
.card-glass {
  background: rgba(0, 63, 108, 0.85);
  backdrop-filter: blur(14px);
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.card-glass:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 0 20px rgba(0, 63, 108, 0.15);
}

.card-glass::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 63, 108, 0.15),
    transparent,
    rgba(0, 63, 108, 0.15),
    transparent
  );
  animation: rotateBorder 6s linear infinite;
  z-index: 0;
}

.card-glass::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: rgba(0, 63, 108, 0.6);
  border-radius: inherit;
  z-index: 1;
}

.card-glass {
  position: relative;
  z-index: 0;
  border: 2px solid transparent;
  background: linear-gradient(#003f6c, #002a4a) padding-box,
              linear-gradient(270deg, #ffffff, #1a6bb5, #ffffff) border-box;
  background-size: 200% 200%;
  animation: borderMove 10s linear infinite;
  border-radius: 8px;
}

.card-glass > * {
  position: relative;
  z-index: 2;
}

/* ===== Join Button (Glitch Effect) ===== */
.join-btn,
.join-btn::after {
  padding: 10px 50px;
  font-size: 20px;
  border: none;
  border-radius: 5px;
  color: #ffffff;
  background-color: transparent;
  position: relative;
  cursor: pointer;
}

.join-btn::after {
  --move1: inset(50% 50% 50% 50%);
  --move2: inset(31% 0 40% 0);
  --move3: inset(39% 0 15% 0);
  --move4: inset(45% 0 40% 0);
  --move5: inset(45% 0 6% 0);
  --move6: inset(14% 0 61% 0);
  clip-path: var(--move1);
  content: 'JOIN NETWORK';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
}

.join-btn:hover::after {
  animation: glitch_4011 1s;
  animation-timing-function: steps(2, end);
  text-shadow: -3px -3px 0px #1a6bb5, 3px 3px 0px #ffffff;
  background-color: transparent;
  border: 3px solid #1a6bb5;
}

.join-btn:hover {
  text-shadow: -1px -1px 0px #1a6bb5, 1px 1px 0px #ffffff;
  background-color: transparent;
  border: 1px solid #1a6bb5;
  box-shadow: 0px 10px 10px -10px #1a6bb5;
}

@keyframes glitch_4011 {
  0% { clip-path: var(--move1); transform: translate(0px,-10px); }
  10% { clip-path: var(--move2); transform: translate(-10px,10px); }
  20% { clip-path: var(--move3); transform: translate(10px,0px); }
  30% { clip-path: var(--move4); transform: translate(-10px,10px); }
  40% { clip-path: var(--move5); transform: translate(10px,-10px); }
  50% { clip-path: var(--move6); transform: translate(-10px,10px); }
  60% { clip-path: var(--move1); transform: translate(10px,-10px); }
  70% { clip-path: var(--move3); transform: translate(-10px,10px); }
  80% { clip-path: var(--move2); transform: translate(10px,-10px); }
  90% { clip-path: var(--move4); transform: translate(-10px,10px); }
  100% { clip-path: var(--move1); transform: translate(0); }
}