/* ==========================================================================
   Vibico — motion & effects layer
   Loaded after styles.css. Adds animation, icons styling and interactivity.
   All scroll/keyframe motion is gated behind prefers-reduced-motion.
   ========================================================================== */

/* ===== scroll progress bar ===== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 60;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--t0), var(--t1), var(--t2), var(--t3));
  pointer-events: none;
}

/* ===== reveal on scroll ===== */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
                transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  /* hero headline rises word by word */
  .hero-title[data-reveal] { opacity: 1; transform: none; }
  .hero-title .w {
    display: inline-block;
    overflow: hidden;
    padding-bottom: 0.08em;
    vertical-align: bottom;
  }
  .hero-title .w > i {
    display: inline-block;
    font-style: normal;
    transform: translateY(118%);
    transition: transform 0.9s cubic-bezier(0.16, 0.84, 0.28, 1);
  }
  .hero-title.is-visible .w > i { transform: none; }
}

/* ===== hero aurora glow ===== */
.hero { overflow: hidden; }
.hero-aurora {
  position: absolute;
  left: 50%; top: -200px;
  width: 1240px; height: 720px;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(440px 300px at 20% 32%, rgba(95, 180, 126, 0.22), transparent 70%),
    radial-gradient(440px 320px at 80% 20%, rgba(110, 143, 224, 0.20), transparent 70%),
    radial-gradient(420px 300px at 56% 72%, rgba(214, 162, 78, 0.13), transparent 72%);
  filter: blur(30px);
}
.hero-grid { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-aurora { animation: aurora-drift 17s ease-in-out infinite alternate; }
}
@keyframes aurora-drift {
  0%   { transform: translateX(-50%) translateY(0) scale(1); }
  100% { transform: translateX(-50%) translateY(30px) scale(1.09); }
}

/* ===== eyebrow live ping ===== */
.eyebrow-dot { position: relative; }
.eyebrow-dot::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: no-preference) {
  .eyebrow-dot::after { animation: ping 2.6s ease-out infinite; }
}
@keyframes ping {
  0%        { box-shadow: 0 0 0 0 rgba(95, 180, 126, 0.5); }
  70%, 100% { box-shadow: 0 0 0 15px rgba(95, 180, 126, 0); }
}

/* ===== buttons: shine sweep + glow + press ===== */
.btn { position: relative; overflow: hidden; }
.btn-primary {
  transition: background 0.15s, border-color 0.15s, box-shadow 0.25s;
}
.btn-primary:hover {
  box-shadow: 0 10px 32px -12px rgba(233, 231, 225, 0.55);
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -130%;
  width: 55%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn-primary:hover::after { animation: shine 0.9s ease; }
}
@keyframes shine { to { left: 140%; } }

[data-magnetic] {
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
              background 0.15s, border-color 0.15s, box-shadow 0.25s;
}

.mini-btn { transition: background 0.15s, border-color 0.15s, transform 0.1s; }
.mini-btn:hover { border-color: #3a3a35; }
.mini-btn:active { transform: scale(0.96); }
.mini-btn.primary:hover { background: #fff; border-color: #fff; }

/* ===== nav underline grow ===== */
.nav a:not(.btn) { position: relative; }
.nav a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: -4px;
  height: 1px;
  background: var(--ink);
  transition: right 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nav a:not(.btn):hover::after { right: 0; }

/* ===== cursor spotlight on cards ===== */
[data-spotlight] {
  position: relative;
  transition: border-color 0.3s;
}
[data-spotlight]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, 0.07), transparent 65%);
  pointer-events: none;
}
[data-spotlight]:hover::before { opacity: 1; }
[data-spotlight] > * { position: relative; z-index: 1; }

/* ===== capability cards: icons + hover ===== */
.cap { transition: background 0.25s; }
.cap:hover { background: var(--surface-2); }
.cap-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.25s, box-shadow 0.25s;
}
.cap-icon svg { width: 21px; height: 21px; display: block; }
.cap:nth-child(1) .cap-icon { color: var(--t1); }
.cap:nth-child(2) .cap-icon { color: var(--t0); }
.cap:nth-child(3) .cap-icon { color: var(--t2); }
.cap:nth-child(4) .cap-icon { color: var(--t1); }
.cap:nth-child(5) .cap-icon { color: var(--t3); }
.cap:hover .cap-icon {
  transform: translateY(-3px);
  border-color: currentColor;
  box-shadow: 0 0 22px -8px currentColor;
}

/* ===== you / vibico column icons ===== */
.col-label { align-items: center; }
.col-head {
  display: flex;
  align-items: center;
  gap: 11px;
}
.col-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.col-icon svg { width: 17px; height: 17px; display: block; }
.col-you .col-icon { color: var(--ink); }
.col-vibico .col-icon { color: var(--t1); }

/* ===== matrix tier dots ===== */
.tier-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 3px;
  margin-right: 9px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.tier-dot.t0 { background: var(--t0); }
.tier-dot.t1 { background: var(--t1); }
.tier-dot.t2 { background: var(--t2); }
.tier-dot.t3 { background: var(--t3); }

/* ===== app surface: live dot + animated bar ===== */
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--t0);
  margin-left: 4px;
  box-shadow: 0 0 9px rgba(95, 180, 126, 0.75);
}
@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: breathe 2.2s ease-in-out infinite; }
}
@keyframes breathe {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
.health-fill {
  width: 0;
  transition: width 1.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* sidebar items respond to hover */
.sb-item { transition: background 0.15s, color 0.15s; }
.sb-item:not(.active):hover { background: var(--hair); color: var(--ink); }