/* ============================================================
   Curobi — Motion & hover enhancement layer
   Additive polish that layers on top of the grafty theme and the
   custom "doc-page" styles. Loaded last so it can refine hovers
   without editing vendored theme CSS or the per-page <style> blocks.
   Accent + easing match the theme (#ff6118, .3s ease-in-out).
   Everything here is disabled under prefers-reduced-motion.
   ============================================================ */

:root {
  --cro-accent: #ff6118;
  --cro-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cro-lift-shadow: 0 18px 40px -18px rgba(16, 16, 16, 0.28);
  --cro-lift-shadow-accent: 0 18px 42px -18px rgba(255, 97, 24, 0.45);
}

/* ---------- Buttons: lift + shadow on hover ---------- */
.btn-four,
.p-btn,
.doc-btn,
.discuss-btn,
.cv-btn,
.curobi-install-btn {
  transition: transform 0.35s var(--cro-ease), box-shadow 0.35s var(--cro-ease),
    background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  will-change: transform;
}
.btn-four:hover,
.p-btn:hover,
.doc-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--cro-lift-shadow);
}
.p-btn--primary:hover,
.doc-btn--primary:hover {
  box-shadow: var(--cro-lift-shadow-accent);
}
.btn-four:active,
.p-btn:active,
.doc-btn:active {
  transform: translateY(-1px) scale(0.99);
}

/* ---------- Bordered content cards: lift, shadow, accent edge ---------- */
.res-card,
.ft-card,
.gd-card,
.mig-card,
.price-card {
  transition: transform 0.4s var(--cro-ease), box-shadow 0.4s var(--cro-ease),
    border-color 0.3s ease-in-out;
  will-change: transform;
}
.res-card:hover,
.ft-card:hover,
.gd-card:hover,
.mig-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--cro-lift-shadow);
  border-color: #dcdcdc;
}
/* Featured pricing card is elevated already — deepen its shadow, no border flip */
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px -20px rgba(16, 16, 16, 0.16);
}
.price-card--featured:hover {
  box-shadow: 0 26px 64px -18px rgba(16, 16, 16, 0.22);
}

/* Row-style cards (blog / compare) use a top border, not a box — nudge instead */
.post-card__link,
.compare-card__link {
  transition: opacity 0.2s ease, transform 0.35s var(--cro-ease);
}
.post-card__link:hover,
.compare-card__link:hover {
  transform: translateX(6px);
}
.post-card__more,
.compare-card__more {
  display: inline-block;
  transition: transform 0.3s var(--cro-ease);
}
.post-card__link:hover .post-card__more,
.compare-card__link:hover .compare-card__more {
  transform: translateX(4px);
}

/* ---------- Feature check-lists: animate the tick on row hover ---------- */
.feature-list li::before,
.price-card__list li::before {
  transition: transform 0.3s var(--cro-ease);
}
.feature-list li:hover::before,
.price-card__list li:hover::before {
  transform: scale(1.35);
}

/* ---------- Social icons: lift + scale (keeps theme colour invert) ---------- */
.social-icon-one li a {
  transition: transform 0.35s var(--cro-ease), background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.social-icon-one li a:hover {
  transform: translateY(-4px) scale(1.06);
}

/* ---------- Grafty accordions: gentle indent + accent on hover ---------- */
.accordion-style-two .accordion-button:not(.collapsed),
.accordion-style-three .accordion-button:not(.collapsed) {
  transition: color 0.3s ease-in-out, padding-left 0.3s var(--cro-ease);
}
.accordion-button:not(.show):hover {
  color: var(--cro-accent);
}

/* ---------- Form inputs: focus glow ---------- */
.input-group-meta input,
.input-group-meta textarea {
  transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}
.input-group-meta input:focus,
.input-group-meta textarea:focus {
  border-color: var(--cro-accent) !important;
  box-shadow: 0 0 0 4px rgba(255, 97, 24, 0.12);
  outline: none;
}

/* ---------- Portfolio arrow-circle: pop on card hover ---------- */
.project-block-two .info li:last-child a {
  transition: transform 0.35s var(--cro-ease), background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.project-block-two:hover .info li:last-child a {
  transform: rotate(45deg) scale(1.08);
  background: var(--cro-accent);
  color: #fff;
}

/* ---------- Dark CTA band: subtle interior lift for its buttons ---------- */
.doc-cta { transition: box-shadow 0.4s var(--cro-ease); }

/* ---------- Scroll-top button: scale on hover ---------- */
.scroll-top {
  transition: opacity 0.3s ease-in-out, transform 0.3s var(--cro-ease), background 0.3s ease-in-out;
}
.scroll-top:hover { transform: translateY(-4px) scale(1.08); }

/* ---------- Hero decorative icon: gentle float ---------- */
@keyframes cro-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.slogan img {
  display: inline-block;
  animation: cro-float 4s ease-in-out infinite;
}

/* ============================================================
   Scroll reveal for pages without grafty's data-sal (doc/listing
   pages). FOUC-safe: the hidden start state applies only when JS
   has flagged support via html.cro-js, so no-JS users see content.
   ============================================================ */
.cro-js [data-cro-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--cro-ease), transform 0.7s var(--cro-ease);
  transition-delay: calc(var(--cro-i, 0) * 80ms);
  will-change: transform, opacity;
}
.cro-js [data-cro-reveal].cro-in {
  opacity: 1;
  transform: none;
}

/* ---------- Respect reduced-motion everywhere ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn-four, .p-btn, .doc-btn, .res-card, .ft-card, .gd-card, .mig-card,
  .price-card, .post-card__link, .compare-card__link, .social-icon-one li a,
  .scroll-top, .slogan img, .project-block-two .info li:last-child a {
    transition: none !important;
    animation: none !important;
  }
  .btn-four:hover, .p-btn:hover, .doc-btn:hover, .res-card:hover, .ft-card:hover,
  .gd-card:hover, .mig-card:hover, .price-card:hover, .scroll-top:hover,
  .post-card__link:hover, .compare-card__link:hover, .social-icon-one li a:hover {
    transform: none;
  }
  .cro-js [data-cro-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}