/* ========== HARPYIA — Advanced Animations ========== */

/* ---- Glitch text ---- */
@keyframes glitch {
  0%   { clip-path: inset(0 0 98% 0); transform: translate(-2px,0); }
  10%  { clip-path: inset(40% 0 50% 0); transform: translate(2px,0); }
  20%  { clip-path: inset(80% 0 5% 0);  transform: translate(-2px,0); }
  30%  { clip-path: inset(20% 0 70% 0); transform: translate(0,0); }
  40%  { clip-path: inset(60% 0 30% 0); transform: translate(2px,0); }
  50%  { clip-path: inset(10% 0 85% 0); transform: translate(-1px,0); }
  100% { clip-path: inset(0 0 98% 0);   transform: translate(0,0); }
}
.glitch { position:relative; }
.glitch::before,.glitch::after {
  content: attr(data-text);
  position:absolute; top:0; left:0; width:100%;
  background: inherit; overflow:hidden;
}
.glitch::before {
  color: #c9a227; animation: glitch 4s infinite linear; opacity:0.6;
  left: 2px; text-shadow: -2px 0 #1e90ff;
}
.glitch::after {
  color: #1e90ff; animation: glitch 4s infinite linear 0.3s; opacity:0.4;
  left: -2px; text-shadow: 2px 0 #c9a227;
}

/* ---- Typewriter ---- */
@keyframes typing { from{width:0} to{width:100%} }
@keyframes blink-cursor { 0%,100%{border-color:var(--gold)} 50%{border-color:transparent} }
.typewriter {
  overflow:hidden; white-space:nowrap; border-right:2px solid var(--gold);
  animation: typing 2.5s steps(40) forwards, blink-cursor 0.75s step-end infinite;
  max-width: max-content;
}

/* ---- Floating cards ---- */
@keyframes float-card {
  0%,100% { transform: translateY(0px) rotate(0deg); }
  33%     { transform: translateY(-8px) rotate(0.5deg); }
  66%     { transform: translateY(-4px) rotate(-0.3deg); }
}
.float-anim { animation: float-card 6s ease-in-out infinite; }
.float-anim-delay { animation: float-card 6s ease-in-out infinite 2s; }

/* ---- Scan line ---- */
@keyframes scan {
  0%   { top: -10%; }
  100% { top: 110%; }
}
.scan-container { position:relative; overflow:hidden; }
.scan-container::after {
  content:'';
  position:absolute; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,0.4), transparent);
  animation: scan 3s linear infinite;
  pointer-events:none;
}

/* ---- Glow pulse ---- */
@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 10px rgba(201,162,39,0.2), 0 0 30px rgba(201,162,39,0.1); }
  50%      { box-shadow: 0 0 20px rgba(201,162,39,0.5), 0 0 60px rgba(201,162,39,0.2); }
}
.glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }

/* ---- Neon border ---- */
@keyframes neon-border {
  0%,100% { border-color: rgba(201,162,39,0.3); }
  50%      { border-color: rgba(201,162,39,0.9); }
}
.neon-border { animation: neon-border 2.5s ease-in-out infinite; }

/* ---- Rotating hex bg ---- */
@keyframes hex-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.hex-bg-spin {
  position:absolute; width:600px; height:600px;
  border:1px solid rgba(201,162,39,0.05);
  border-radius:30% 70% 70% 30%/30% 30% 70% 70%;
  animation: hex-spin 30s linear infinite;
  pointer-events:none;
}

/* ---- Counter odometer ---- */
@keyframes count-up { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.count-anim { animation: count-up 0.4s ease forwards; }

/* ---- Shimmer loading ---- */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.shimmer {
  background: linear-gradient(90deg, transparent 25%, rgba(201,162,39,0.1) 50%, transparent 75%);
  background-size: 200% auto;
  animation: shimmer 2s linear infinite;
}

/* ---- Tag cloud spin ---- */
@keyframes orbit {
  from { transform: rotate(0deg) translateX(120px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}

/* ---- Fade slide variants ---- */
.fade-left  { opacity:0; transform:translateX(-30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-right { opacity:0; transform:translateX(30px);  transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-scale { opacity:0; transform:scale(0.93);        transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-left.visible,.fade-right.visible,.fade-scale.visible { opacity:1; transform:none; }

/* ---- Tech grid lines animated ---- */
@keyframes grid-move {
  from { background-position: 0 0; }
  to   { background-position: 60px 60px; }
}
.grid-bg-anim {
  background-image:
    linear-gradient(rgba(201,162,39,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,39,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: grid-move 8s linear infinite;
}

/* ---- Tab system ---- */
.tabs { display:flex; gap:0; border-bottom:1px solid var(--border-light); margin-bottom:2rem; }
.tab-btn {
  padding:0.7rem 1.4rem; background:none; border:none;
  font-family:'Orbitron',sans-serif; font-size:0.7rem; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--text-muted); cursor:pointer;
  border-bottom:2px solid transparent; transition:all 0.3s; margin-bottom:-1px;
}
.tab-btn.active { color:var(--gold); border-bottom-color:var(--gold); }
.tab-btn:hover { color:var(--white-dim); }
.tab-pane { display:none; }
.tab-pane.active { display:block; animation:fade-up-anim 0.4s ease; }
@keyframes fade-up-anim { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ---- Accordion ---- */
.accordion-item { border:1px solid var(--border-light); border-radius:8px; margin-bottom:0.8rem; overflow:hidden; }
.accordion-header {
  width:100%; background:var(--navy); border:none; padding:1.1rem 1.4rem;
  display:flex; justify-content:space-between; align-items:center;
  color:var(--white); cursor:pointer; font-family:'Space Grotesk',sans-serif;
  font-size:0.92rem; font-weight:500; transition:background 0.3s;
}
.accordion-header:hover { background:var(--navy-mid); }
.accordion-icon { color:var(--gold); font-size:1.2rem; transition:transform 0.3s; }
.accordion-item.open .accordion-icon { transform:rotate(45deg); }
.accordion-body { max-height:0; overflow:hidden; transition:max-height 0.4s ease; background:var(--navy-mid); }
.accordion-body-inner { padding:1.2rem 1.4rem; color:var(--white-dim); font-size:0.9rem; line-height:1.8; }

/* ---- Brand logos grid ---- */
.partners-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
.partner-card {
  background:var(--navy); border:1px solid var(--border-light);
  border-radius:10px; padding:1.8rem 1.2rem;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  text-decoration:none; transition:all 0.4s;
}
.partner-card:hover {
  border-color:var(--border); transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,0.4);
}
.partner-logo { width:70px; height:70px; object-fit:contain; border-radius:8px; filter:grayscale(30%); transition:filter 0.3s; }
.partner-card:hover .partner-logo { filter:grayscale(0%); }
.partner-name { font-family:'Orbitron',sans-serif; font-size:0.68rem; letter-spacing:0.15em; color:var(--white-dim); text-transform:uppercase; text-align:center; }
.partner-type { font-size:0.75rem; color:var(--text-muted); text-align:center; }

@media(max-width:768px){
  .partners-grid { grid-template-columns:repeat(2,1fr); }
}

/* ---- Spec table ---- */
.spec-table { width:100%; border-collapse:collapse; font-size:0.88rem; }
.spec-table th {
  background:var(--navy-mid); padding:0.8rem 1rem;
  font-family:'Orbitron',sans-serif; font-size:0.7rem; letter-spacing:0.15em;
  color:var(--gold); text-transform:uppercase; text-align:left; border-bottom:1px solid var(--border);
}
.spec-table td { padding:0.8rem 1rem; border-bottom:1px solid var(--border-light); color:var(--white-dim); }
.spec-table tr:hover td { background:rgba(201,162,39,0.03); }
.spec-table .badge {
  display:inline-block; padding:0.2rem 0.6rem; border-radius:4px;
  font-size:0.72rem; font-weight:600; background:rgba(201,162,39,0.15); color:var(--gold);
}

/* ---- Timeline ---- */
.timeline { position:relative; padding-left:2rem; }
.timeline::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:1px; background:linear-gradient(to bottom, var(--gold), transparent);
}
.timeline-item { position:relative; margin-bottom:2.5rem; }
.timeline-item::before {
  content:''; position:absolute; left:-2rem; top:6px;
  width:9px; height:9px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 10px rgba(201,162,39,0.5);
  transform:translateX(-4px);
}
.timeline-year { font-family:'Orbitron',sans-serif; font-size:0.7rem; color:var(--gold); letter-spacing:0.2em; margin-bottom:0.3rem; }
.timeline-title { font-size:0.95rem; color:var(--white); margin-bottom:0.3rem; }
.timeline-desc { font-size:0.85rem; color:var(--text-muted); line-height:1.7; }