/* Octodus animations — scroll reveals, stagger-in, hover micro-interactions.
   Import after base.css. All animations respect prefers-reduced-motion. */

/* ───────────── Initial-load reveal ─────────────
   Mark an element with `data-reveal` and it fades + slides in once mounted.
   For groups, wrap with `data-stagger` and give children `style={{'--i': N}}`. */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 720ms var(--ease-out),
    transform 720ms var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal].revealed,
.revealed [data-reveal] {
  opacity: 1;
  transform: translateY(0);
}

/* Initial-load reveal — fires on mount (no scroll wait) */
[data-reveal][data-reveal-eager] {
  animation-name: revealEager;
  animation-duration: 720ms;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: forwards;
}
@keyframes revealEager {
  to { opacity: 1; transform: translateY(0); }
}

/* Stagger group — children get sequenced delay via --i */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  animation-name: staggerIn;
  animation-duration: 800ms;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: forwards;
  animation-delay: calc(120ms + var(--i, 0) * 90ms);
}
@keyframes staggerIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ───────────── Pulse / live dot ─────────────
   Already used in hero ticker. Keep canonical here so other surfaces match. */
@keyframes oct-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.7); }
}

/* ───────────── Hover micro-interactions ─────────────
   Lifts, glows, arrow shifts. Each component opts in via its existing class. */

/* Buttons — arrow icon nudges right on hover; primary glows warmer */
.btn { position: relative; }
.btn svg { transition: transform 220ms var(--ease-out); }
.btn-primary:hover svg:last-of-type {
  transform: translateX(3px);
}
.btn-ghost:hover svg:last-of-type {
  transform: translateX(2px);
}

/* Card lifts — universal, opt-in via .lift-on-hover */
.lift-on-hover {
  transition:
    transform 280ms var(--ease-out),
    box-shadow 280ms var(--ease-out),
    border-color 220ms var(--ease-out);
}
.lift-on-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -22px rgba(58, 49, 32, 0.20);
  border-color: var(--accent-tint-25);
}

/* Skill card icon — gently rotate + accent fill on card hover */
.skill-card .skill-card-icon,
.st-card .st-card-icon {
  transition:
    transform 320ms var(--ease-spring),
    background 240ms var(--ease-out),
    border-color 240ms var(--ease-out),
    color 240ms var(--ease-out);
}
.skill-card:hover .skill-card-icon,
.st-card:hover .st-card-icon {
  transform: rotate(-6deg) scale(1.06);
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* Story metric — subtle nudge */
.story:hover .story-metric-val,
.stt:hover .stt-metric-val {
  transform: translateX(2px);
}
.story-metric-val,
.stt-metric-val {
  transition: transform 320ms var(--ease-spring);
  display: inline-block;
}

/* Integration logo — gentle lift on card hover */
.int-card .int-logo,
.featured-cell .int-logo {
  transition:
    transform 320ms var(--ease-spring),
    box-shadow 280ms var(--ease-out);
}
.int-card:hover .int-logo,
.featured-cell:hover .int-logo {
  transform: translateY(-2px) scale(1.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
              0 8px 22px rgba(58, 49, 32, 0.18);
}

/* Tentacle category chip — soft glow on active filter */
.dir-chip.on {
  box-shadow: 0 6px 22px -8px var(--accent-tint-50);
}

/* Spotlight (home featured story) — subtle lift on hover */
.spotlight {
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.spotlight:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -28px rgba(58, 49, 32, 0.20);
}

/* Blog post-card — title shifts terracotta on hover */
.post .post-title {
  transition: color 200ms var(--ease-out);
}
.post:hover .post-title { color: var(--accent); }

/* Plan card — terracotta border on hover, faster lift */
.plan:hover {
  box-shadow: 0 24px 48px -28px var(--accent-tint-30);
}

/* FAQ chevron — already rotates in pricing-page; keep that. */

/* Telegram / arrow icons inside CTAs — subtle glow on hover */
.btn-primary:hover svg:first-of-type {
  filter: drop-shadow(0 1px 4px rgba(255,255,255,0.35));
}

/* ───────────── Nav active underline shimmer ───────────── */
.site-nav-link {
  transition:
    color 180ms var(--ease-out),
    background 200ms var(--ease-out);
}
.site-nav-link::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 260ms var(--ease-out);
  transform-origin: left center;
}
.site-nav-link:hover::after { transform: scaleX(1); }
.site-nav-link.on::after { transform: scaleX(1); opacity: 0.5; }

/* ───────────── Footer link slide ───────────── */
.site-foot-col a {
  position: relative;
  display: inline-block;
  transition: transform 220ms var(--ease-out), color 180ms var(--ease-out);
}
.site-foot-col a:hover {
  transform: translateX(3px);
  color: var(--accent);
}

/* ───────────── Reduced motion guard ───────────── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .lift-on-hover:hover { transform: none; }
  .skill-card:hover .skill-card-icon,
  .st-card:hover .st-card-icon {
    transform: none;
  }
  .btn svg, .btn-primary:hover svg:last-of-type {
    transform: none !important;
  }
}