/* ============================================================
   ToolsBase — Homepage Specific Styles
   Enhanced hover & card shadow system + emboss/relief effects
   ============================================================ */

/* === CARD SHADOW SYSTEM ===
   Default: subtle lift from background
   Hover: deeper shadow + translateY
   Transition: 200ms cubic-bezier(0.16, 1, 0.3, 1)
   ============================================================ */

/* --- Tool Card: Default subtle shadow --- */
.tool-card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 200ms ease;
}

.tool-card:hover {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.10),
    0 3px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateY(-3px);
  border-color: #111827 !important;
}

/* --- Hero Card (hc): Default subtle shadow + emboss top highlight --- */
.hc {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 200ms ease;
}

.hc:hover {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.10),
    0 3px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateY(-3px);
  border-color: #111827 !important;
}

/* --- Blog Card: Default subtle shadow + emboss highlight --- */
.blog-card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 200ms ease;
}

.blog-card:hover {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.10),
    0 3px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
  border-color: #111827 !important;
}

/* --- History Item: Default subtle shadow + emboss --- */
.history-item {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 200ms ease;
}

.history-item:hover {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: translateX(4px);
  border-color: var(--color-primary) !important;
}

/* === DARK MODE CARD SHADOWS + EMBOSS ===
   Dark backgrounds: lighter inner highlight, deeper outer shadow
   ============================================================ */
[data-theme="dark"] .tool-card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .tool-card:hover {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .hc {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .hc:hover {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .blog-card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .blog-card:hover {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .history-item {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .history-item:hover {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* === NAVIGATION LINK HOVER: Underline slide-in === */
.nav-btn,
.recent-btn {
  position: relative;
}

.nav-btn::after,
.recent-btn::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #111827;
  border-radius: 2px;
  transition: width 200ms cubic-bezier(0.16, 1, 0.3, 1),
              left 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-btn:hover::after,
.nav-btn.active::after,
.recent-btn:hover::after {
  width: calc(100% - 24px);
  left: 12px;
}

[data-theme="dark"] .nav-btn::after,
[data-theme="dark"] .recent-btn::after {
  background: var(--color-text);
}

/* === BUTTON HOVER: Scale + Color === */
.btn {
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 200ms ease,
              border-color 200ms ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn--secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn--outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* === INPUT FOCUS: Inner shadow + outer glow === */
.hero-search-input,
.blog-search-input,
.tool-input {
  border-color: #E5E7EB;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.04),
    inset 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color 200ms ease,
              box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-search-input:focus,
.blog-search-input:focus,
.tool-input:focus {
  border-color: #111827;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.06),
    inset 0 1px 2px rgba(0, 0, 0, 0.04),
    0 0 0 3px rgba(17, 24, 39, 0.10),
    0 0 12px rgba(17, 24, 39, 0.06);
}

[data-theme="dark"] .hero-search-input,
[data-theme="dark"] .blog-search-input,
[data-theme="dark"] .tool-input {
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.3),
    inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .hero-search-input:focus,
[data-theme="dark"] .blog-search-input:focus,
[data-theme="dark"] .tool-input:focus {
  border-color: var(--color-primary);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.4),
    inset 0 1px 2px rgba(0, 0, 0, 0.3),
    0 0 0 3px rgba(14, 165, 233, 0.15),
    0 0 12px rgba(14, 165, 233, 0.08);
}

/* === ICON: Hover scale/rotate on tool cards === */
.tool-card-icon {
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              color 200ms ease;
}

.tool-card:hover .tool-card-icon {
  transform: scale(1.1);
}

.hc-icon {
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hc:hover .hc-icon {
  transform: scale(1.08);
}

/* === CATEGORY DOT: Pulse on hover === */
.category-dot {
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              background 200ms ease;
}

.category-section:hover .category-dot {
  transform: scale(1.3);
}

/* === VIEW ALL LINK: Arrow animation === */
.view-all-link {
  position: relative;
  padding-right: 1.2em;
}

.view-all-link::after {
  content: '→';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.view-all-link:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* === SEARCH DROPDOWN ITEM: Subtle lift === */
.search-dropdown-item {
  transition: background 150ms ease, transform 150ms ease;
}

.search-dropdown-item:hover {
  background: #F3F4F6;
  transform: translateX(2px);
}

[data-theme="dark"] .search-dropdown-item:hover {
  background: var(--color-bg-alt);
}

/* === FAVORITES / SECTION HEADER: Icon bounce === */
.section-title-icon {
  display: inline-block;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-title:hover .section-title-icon {
  transform: rotate(-10deg) scale(1.2);
}

/* === COPY BUTTON: Press effect === */
.copy-btn {
  transition: border-color 150ms ease,
              color 150ms ease,
              transform 100ms ease,
              box-shadow 150ms ease;
}

.copy-btn:hover {
  border-color: #111827;
  color: #111827;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.copy-btn:active {
  transform: scale(0.96);
}

/* === HERO GRID: Staggered entrance animation === */
.hero-grid {
  animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}

.hc:nth-child(1) { animation: scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
.hc:nth-child(2) { animation: scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.20s both; }
.hc:nth-child(3) { animation: scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; }
.hc:nth-child(4) { animation: scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.30s both; }
.hc:nth-child(5) { animation: scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
.hc:nth-child(6) { animation: scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.40s both; }

/* === CATEGORY SECTION: Stagger fade in --- */
.category-section:nth-child(1) { animation-delay: 0.05s; }
.category-section:nth-child(2) { animation-delay: 0.10s; }
.category-section:nth-child(3) { animation-delay: 0.15s; }
.category-section:nth-child(4) { animation-delay: 0.20s; }
.category-section:nth-child(5) { animation-delay: 0.25s; }
.category-section:nth-child(6) { animation-delay: 0.30s; }
.category-section:nth-child(7) { animation-delay: 0.35s; }
.category-section:nth-child(8) { animation-delay: 0.40s; }

/* === INTRO BANNER: Subtle fade --- */
.intro-banner {
  animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.intro-banner .container {
  transition: border-color 200ms ease;
}

.intro-banner:hover .container {
  border-color: #D1D5DB;
}

/* === TOOLS HOME: Page entrance --- */
.tools-home {
  animation: fadeIn 0.4s ease-out 0.2s both;
}

/* === TOOL CARD LINK ARROW: Enhanced animation --- */
.tool-card-link {
  transition: color 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}

.tool-card-link::after {
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 200ms ease;
}

.tool-card:hover .tool-card-link {
  color: #111827;
}

.tool-card:hover .tool-card-link::after {
  transform: translateX(4px);
}

/* === FAV BUTTON: Pulse on hover --- */
.fav-btn {
  transition: color 150ms ease,
              background 150ms ease,
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fav-btn:hover {
  transform: scale(1.15);
}

/* === FAVORITES GRID: Same shadow + emboss system --- */
.tools-favorites .tool-card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.tools-favorites .tool-card:hover {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.10),
    0 3px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .tools-favorites .tool-card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .tools-favorites .tool-card:hover {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* === EXTERNAL CARD: Slightly different indicator --- */
.tool-card[target="_blank"] .tool-card-link {
  color: #9CA3AF;
  transition: color 200ms ease;
}

.tool-card[target="_blank"]:hover .tool-card-link {
  color: #059669;
}

/* === ANIMATION KEYFRAMES (if not in main stylesheet) --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}