/* ================================================================
   LIVE SECURITY COMMAND SHIELD
   Hero Enhancement Layer — additive to styles.css animations
   ================================================================ */

/* ──────────────────────────────────────────────
   Shield / radar positioning anchor
   ────────────────────────────────────────────── */
:root {
  --shield-cx: 62%;
  --shield-cy: 48%;
  --ha-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ──────────────────────────────────────────────
   Hero title line spans — always block
   ────────────────────────────────────────────── */
.hero-line {
  display: block;
}

.hero-title.has-title-loop {
  min-height: calc(2 * 1.22em);
  overflow: hidden;
  animation: none !important;
}

.hero-title.has-title-loop .hero-line {
  animation: none !important;
  transition:
    transform 0.56s var(--ha-ease),
    opacity 0.32s ease;
  will-change: transform, opacity;
  opacity: 1;
  transform: translateY(0);
}

.hero-title.has-title-loop .hero-trust-word {
  animation: none !important;
}

.hero-title.is-title-prep .hero-line {
  opacity: 0;
}

.hero-title.is-title-entering .hero-line {
  opacity: 0;
  transform: translateY(100%);
}

.hero-title.is-title-exiting .hero-line {
  opacity: 0;
  transform: translateY(-100%);
}

/* ──────────────────────────────────────────────
   Trust pill — overflow clip for shine
   ────────────────────────────────────────────── */
.trust-pill {
  position: relative;
  overflow: hidden;
}

.trust-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────
   Shield glow — ambient radial light behind guard
   ────────────────────────────────────────────── */
.shield-glow {
  position: absolute;
  width: 360px;
  height: 420px;
  left: var(--shield-cx);
  top: var(--shield-cy);
  transform: translate(-50%, -50%);
  border-radius: 50% / 55%;
  z-index: 1;
  pointer-events: none;
}

.shield-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--accent-rgb), 0.17) 0%,
    rgba(59, 114, 255, 0.09) 45%,
    transparent 70%
  );
  opacity: 0.75;
}

/* Radar ring 1 */
.shield-glow::after {
  content: '';
  position: absolute;
  width: 270px;
  height: 270px;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--accent-rgb), 0.38);
  opacity: 0;
}

/* Radar ring 2 — separate element, offset timing */
.shield-radar {
  position: absolute;
  width: 270px;
  height: 270px;
  left: var(--shield-cx);
  top: var(--shield-cy);
  transform: translate(-50%, -50%) scale(0.5);
  border-radius: 50%;
  border: 1px solid rgba(100, 160, 255, 0.32);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

/* ──────────────────────────────────────────────
   Background scan sweep (hero::after — free slot)
   ────────────────────────────────────────────── */
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: -30%;
  width: 20%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--accent-rgb), 0.022) 40%,
    rgba(var(--accent-rgb), 0.042) 50%,
    rgba(var(--accent-rgb), 0.022) 60%,
    transparent
  );
  z-index: 1;
  pointer-events: none;
}

/* ──────────────────────────────────────────────
   Security particles container + spans
   ────────────────────────────────────────────── */
.security-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.security-particles span {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
}

/* Lime particles */
.security-particles span:nth-child(1)  { width: 3px; height: 3px; left: 52%; top:  8%; background: rgba(var(--accent-rgb), 0.68); }
.security-particles span:nth-child(3)  { width: 4px; height: 4px; left: 75%; top:  6%; background: rgba(var(--accent-rgb), 0.58); }
.security-particles span:nth-child(5)  { width: 3px; height: 3px; left: 58%; top: 38%; background: rgba(var(--accent-rgb), 0.62); }
.security-particles span:nth-child(7)  { width: 4px; height: 4px; left: 80%; top: 56%; background: rgba(var(--accent-rgb), 0.52); }
.security-particles span:nth-child(9)  { width: 3px; height: 3px; left: 88%; top: 76%; background: rgba(var(--accent-rgb), 0.55); }
.security-particles span:nth-child(11) { width: 3px; height: 3px; left: 50%; top: 58%; background: rgba(var(--accent-rgb), 0.50); }
.security-particles span:nth-child(13) { width: 3px; height: 3px; left: 76%; top: 42%; background: rgba(var(--accent-rgb), 0.62); }

/* Blue particles */
.security-particles span:nth-child(2)  { width: 2px; height: 2px; left: 68%; top: 18%; background: rgba(100, 160, 255, 0.55); }
.security-particles span:nth-child(4)  { width: 2px; height: 2px; left: 85%; top: 25%; background: rgba(100, 160, 255, 0.48); }
.security-particles span:nth-child(6)  { width: 2px; height: 2px; left: 91%; top: 12%; background: rgba(100, 160, 255, 0.52); }
.security-particles span:nth-child(8)  { width: 2px; height: 2px; left: 62%; top: 73%; background: rgba(100, 160, 255, 0.42); }
.security-particles span:nth-child(10) { width: 2px; height: 2px; left: 70%; top: 85%; background: rgba(100, 160, 255, 0.46); }
.security-particles span:nth-child(12) { width: 2px; height: 2px; left: 95%; top: 46%; background: rgba(100, 160, 255, 0.36); }
.security-particles span:nth-child(14) { width: 2px; height: 2px; left: 54%; top: 22%; background: rgba(100, 160, 255, 0.48); }

/* ──────────────────────────────────────────────
   Feature card hover — no motion query needed
   ────────────────────────────────────────────── */
.feature-card {
  transition: box-shadow 0.28s ease;
}

.feature-card:hover {
  box-shadow: 0 12px 32px rgba(8, 18, 70, 0.2);
}

.feat-icon {
  transition: transform 0.28s var(--ha-ease), box-shadow 0.28s ease;
}

.feature-card:hover .feat-icon {
  transform: scale(1.08);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.48);
}

/* ──────────────────────────────────────────────
   Book button border glow on hover
   ────────────────────────────────────────────── */
.btn-book {
  transition: box-shadow 0.28s ease, background 0.2s, color 0.2s;
}

.btn-book:hover {
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.3), 0 4px 14px rgba(8, 18, 70, 0.18);
}

/* ================================================================
   KEYFRAMES — new, prefixed hc* to avoid collisions
   ================================================================ */

/* Glass card entrance */
@keyframes hcCardIn {
  from {
    opacity: 0;
    transform: translateX(-35px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0px);
  }
}

/* Title line reveal */
@keyframes hcLineIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Trust word entrance + warm glow */
@keyframes hcTrustWordIn {
  from { opacity: 0; transform: translateY(18px); text-shadow: none; }
  60%  { text-shadow: 0 0 34px rgba(var(--accent-rgb), 0.78); }
  to   { opacity: 1; transform: translateY(0);   text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.44); }
}

/* Shield ambient glow pulse */
@keyframes hcShieldAmbient {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1.0;  }
}

/* Radar ring expand & fade */
@keyframes hcRadarExpand {
  0%   { opacity: 0.52; transform: translate(-50%, -50%) scale(0.48); }
  72%  { opacity: 0; }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.58); }
}

/* Radar ring 2 expand & fade */
@keyframes hcRadarExpand2 {
  0%   { opacity: 0.38; transform: translate(-50%, -50%) scale(0.52); }
  68%  { opacity: 0; }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.65); }
}

/* Background horizontal scan */
@keyframes hcBgScan {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(620%); }
}

/* Particle float directions */
@keyframes hcFloatA {
  0%, 100% { transform: translate(0, 0);         opacity: 0.65; }
  33%       { transform: translate(12px, -18px);  opacity: 0.88; }
  66%       { transform: translate(-8px, -10px);  opacity: 0.50; }
}

@keyframes hcFloatB {
  0%, 100% { transform: translate(0, 0);          opacity: 0.52; }
  40%       { transform: translate(-14px, -22px);  opacity: 0.78; }
  70%       { transform: translate(6px,   -8px);   opacity: 0.40; }
}

@keyframes hcFloatC {
  0%, 100% { transform: translate(0, 0);          opacity: 0.65; }
  25%       { transform: translate(18px, -10px);  opacity: 0.90; }
  75%       { transform: translate(-6px, -20px);  opacity: 0.45; }
}

@keyframes hcFloatD {
  0%, 100% { transform: translate(0, 0);          opacity: 0.50; }
  50%       { transform: translate(-10px, -15px); opacity: 0.72; }
}

/* ================================================================
   MOTION BLOCK — respects prefers-reduced-motion
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* ── Glass card entrance (additive to cardBreath) ── */
  .glass-card {
    animation:
      hcCardIn   0.9s var(--ha-ease) 0.05s both,
      cardBreath  6s  ease-in-out    1.3s  infinite;
  }

  /* ── Title: override whole-element fadeLeft, animate line by line ── */
  .hero-title {
    animation: none;
  }

  .hero-line-1 {
    animation: hcLineIn 0.72s var(--ha-ease) 0.30s both;
  }

  .hero-line-2 {
    animation: hcLineIn 0.72s var(--ha-ease) 0.50s both;
  }

  /* Trust word: enhanced entrance then inherit textGlow loop */
  .hero-trust-word {
    animation:
      hcTrustWordIn 0.88s var(--ha-ease) 0.66s both,
      textGlow      3.6s  ease-in-out    1.7s  infinite;
  }

  /* ── Shield ambient glow ── */
  .shield-glow::before {
    animation: hcShieldAmbient 4.6s ease-in-out 1.2s infinite;
  }

  /* ── Radar ring 1 ── */
  .shield-glow::after {
    animation: hcRadarExpand 4.6s ease-out 1.8s infinite;
  }

  /* ── Radar ring 2 — phase-offset by half period ── */
  .shield-radar {
    animation: hcRadarExpand2 4.6s ease-out 4.1s infinite;
  }

  /* ── Background scan sweep ── */
  .hero::after {
    animation: hcBgScan 10s linear 2.6s infinite;
  }

  /* ── Security particles ── */
  .security-particles span:nth-child(1)  { animation: hcFloatA 12s ease-in-out 0.0s  infinite; }
  .security-particles span:nth-child(2)  { animation: hcFloatB 14s ease-in-out 1.5s  infinite; }
  .security-particles span:nth-child(3)  { animation: hcFloatC 11s ease-in-out 0.7s  infinite; }
  .security-particles span:nth-child(4)  { animation: hcFloatD 16s ease-in-out 2.2s  infinite; }
  .security-particles span:nth-child(5)  { animation: hcFloatA 13s ease-in-out 3.1s  infinite; }
  .security-particles span:nth-child(6)  { animation: hcFloatB 15s ease-in-out 1.0s  infinite; }
  .security-particles span:nth-child(7)  { animation: hcFloatC 12s ease-in-out 2.8s  infinite; }
  .security-particles span:nth-child(8)  { animation: hcFloatD 18s ease-in-out 0.4s  infinite; }
  .security-particles span:nth-child(9)  { animation: hcFloatA 14s ease-in-out 1.9s  infinite; }
  .security-particles span:nth-child(10) { animation: hcFloatB 11s ease-in-out 3.5s  infinite; }
  .security-particles span:nth-child(11) { animation: hcFloatC 17s ease-in-out 2.0s  infinite; }
  .security-particles span:nth-child(12) { animation: hcFloatD 13s ease-in-out 0.8s  infinite; }
  .security-particles span:nth-child(13) { animation: hcFloatA 15s ease-in-out 4.2s  infinite; }
  .security-particles span:nth-child(14) { animation: hcFloatB 12s ease-in-out 1.3s  infinite; }

}

/* ================================================================
   MOBILE — reduce intensity
   ================================================================ */
@media (max-width: 768px) {
  .shield-glow,
  .shield-radar,
  .security-particles {
    display: none;
  }

  .hero::after {
    display: none;
  }
}