/* ============================================================
   makeBIMI.com — Micro-Interactions & Motion System
   Exact Linear.app easing: cubic-bezier(0.25, 0.46, 0.45, 0.94)
   Transition timing: 0.1s (fast), 0.16s (base), 0.25s (slow)
   ============================================================ */

/* ── LINEAR EASING CONSTANTS ──────────────────────────────────
   Linear uses: cubic-bezier(0.25, 0.46, 0.45, 0.94) — "ease-out-quart"
   Fast interactions: 100ms
   Standard interactions: 160ms
   Emphasis/entrance: 250ms
   ─────────────────────────────────────────────────────────── */

:root {
  --ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:     100ms;
  --t-base:     160ms;
  --t-slow:     250ms;
  --t-enter:    220ms;

  /* Linear's exact button shadow stack */
  --shadow-btn:
    rgba(0,0,0,0) 0px 8px 2px 0px,
    rgba(0,0,0,0.01) 0px 5px 2px 0px,
    rgba(0,0,0,0.04) 0px 3px 2px 0px,
    rgba(0,0,0,0.07) 0px 1px 1px 0px,
    rgba(0,0,0,0.08) 0px 0px 1px 0px;
  --shadow-btn-hover:
    rgba(0,0,0,0) 0px 8px 2px 0px,
    rgba(0,0,0,0.02) 0px 5px 2px 0px,
    rgba(0,0,0,0.08) 0px 3px 2px 0px,
    rgba(0,0,0,0.14) 0px 1px 1px 0px,
    rgba(0,0,0,0.16) 0px 0px 1px 0px;
  --shadow-focus: 0 0 0 2px rgba(113,112,255,0.35);
  --shadow-card:  0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-float: 0 4px 16px rgba(0,0,0,0.32), 0 1px 4px rgba(0,0,0,0.16);
  --shadow-modal: 0 24px 64px rgba(0,0,0,0.64), 0 8px 24px rgba(0,0,0,0.32);
}

/* ── GLOBAL TRANSITION RESET ── */
*, *::before, *::after {
  transition-timing-function: var(--ease);
}

/* ── NAVBAR MICRO-INTERACTIONS ── */

/* Nav links — Linear style: fade opacity, no background on hover */
.navbar-links a {
  transition:
    color var(--t-base) var(--ease),
    opacity var(--t-base) var(--ease),
    background-color var(--t-fast) var(--ease);
  opacity: 0.7;
  position: relative;
}
.navbar-links a:hover {
  opacity: 1;
  color: var(--text-primary);
  background: rgba(255,255,255,0.04);
}
.navbar-links a:active {
  opacity: 0.8;
  transform: scale(0.98);
  transition-duration: 60ms;
}

/* Navbar CTA button — pill shape, Linear's exact shadow stack */
.navbar-cmd {
  transition:
    border-color var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    opacity var(--t-base) var(--ease);
  box-shadow: var(--shadow-btn);
}
.navbar-cmd:hover {
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  box-shadow: var(--shadow-btn-hover);
}
.navbar-cmd:active {
  transform: scale(0.97);
  transition-duration: 60ms;
}

/* ── BUTTON MICRO-INTERACTIONS ── */

/* All buttons — Linear's 7-property transition */
.btn {
  transition:
    border-color var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    opacity var(--t-base) var(--ease),
    filter var(--t-base) var(--ease),
    transform var(--t-base) var(--ease);
  box-shadow: var(--shadow-btn);
  will-change: transform, box-shadow;
}

/* Primary button — accent glow on hover */
.btn-primary {
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover {
  background: #6160f0;
  box-shadow:
    var(--shadow-btn-hover),
    0 0 0 1px rgba(113,112,255,0.2),
    0 4px 20px rgba(113,112,255,0.25);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-btn);
  transition-duration: 60ms;
}

/* Secondary button */
.btn-secondary {
  box-shadow: var(--shadow-btn);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
  color: var(--text-primary);
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-1px);
}
.btn-secondary:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 60ms;
}

/* Focus-visible ring — Linear style */
.btn:focus-visible,
.navbar-cmd:focus-visible,
.input-field:focus-visible,
.check-input:focus-visible,
.prompt-area:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ── DROPZONE MICRO-INTERACTIONS ── */
.dropzone {
  transition:
    border-color var(--t-slow) var(--ease),
    background-color var(--t-slow) var(--ease),
    box-shadow var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
  will-change: transform;
}
.dropzone:hover {
  border-color: rgba(113,112,255,0.5);
  background: rgba(113,112,255,0.04);
  box-shadow: 0 0 0 1px rgba(113,112,255,0.1), inset 0 0 40px rgba(113,112,255,0.03);
}
.dropzone.drag-over {
  border-color: var(--accent);
  background: rgba(113,112,255,0.06);
  box-shadow: 0 0 0 2px rgba(113,112,255,0.2), inset 0 0 60px rgba(113,112,255,0.06);
  transform: scale(1.005);
}

/* Dropzone icon pulse on drag-over */
.dropzone.drag-over .dropzone-icon {
  animation: iconPulse 0.6s var(--ease-spring);
}
@keyframes iconPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); opacity: 0.8; }
  100% { transform: scale(1); }
}

/* ── INPUT MICRO-INTERACTIONS ── */
.input-field {
  transition:
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease);
}
.input-field:hover:not(:focus) {
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.02);
}
.input-field:focus {
  border-color: rgba(113,112,255,0.6);
  box-shadow: 0 0 0 2.5px rgba(113,112,255,0.15), 0 0 0 1px rgba(113,112,255,0.4);
  background: rgba(113,112,255,0.02);
}

.prompt-area {
  transition:
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease);
}
.prompt-area:hover:not(:focus) {
  border-color: rgba(255,255,255,0.1);
}
.prompt-area:focus {
  border-color: rgba(113,112,255,0.6);
  box-shadow: 0 0 0 2.5px rgba(113,112,255,0.15), 0 0 0 1px rgba(113,112,255,0.4);
}

/* ── BENTO CARD MICRO-INTERACTIONS ── */
.bento-card {
  transition:
    background-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    transform var(--t-slow) var(--ease);
  will-change: transform;
  cursor: default;
}
.bento-card:hover {
  background: var(--bg-elevated);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* Bento icon subtle lift */
.bento-card:hover .bento-icon {
  background: rgba(113,112,255,0.08);
  border-color: rgba(113,112,255,0.2);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

/* ── UTILITY TABS ── */
.utility-tab {
  transition:
    color var(--t-base) var(--ease),
    background-color var(--t-fast) var(--ease),
    border-bottom-color var(--t-base) var(--ease);
  position: relative;
  overflow: hidden;
}
.utility-tab::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--t-fast) var(--ease);
}
.utility-tab:hover::after {
  background: rgba(255,255,255,0.025);
}
.utility-tab:active::after {
  background: rgba(255,255,255,0.04);
}

/* ── COMMAND PALETTE MICRO-INTERACTIONS ── */
.cmd-overlay {
  transition: opacity var(--t-fast) var(--ease);
}
.cmd-modal {
  transition:
    transform var(--t-enter) var(--ease-spring),
    opacity var(--t-enter) var(--ease);
}
.cmd-overlay.open .cmd-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.cmd-item {
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
  border-radius: 5px;
}
.cmd-item:hover, .cmd-item.selected {
  background: rgba(255,255,255,0.06);
}
.cmd-item:active {
  background: rgba(255,255,255,0.09);
  transition-duration: 40ms;
}

/* ── RESULT PANEL ENTRANCE ── */
.result-panel {
  animation: panelEnter var(--t-enter) var(--ease-spring) both;
}
.dns-panel {
  animation: panelEnter var(--t-enter) var(--ease-spring) 80ms both;
}
.terminal.visible {
  animation: panelEnter var(--t-enter) var(--ease) both;
}
@keyframes panelEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── TOAST ENTRANCE ── */
.toast {
  animation: toastEnter 0.2s var(--ease-spring) both;
}
@keyframes toastEnter {
  from { opacity: 0; transform: translateX(12px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ── SCROLL-TRIGGERED FADE-IN ── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
}
.reveal-stagger.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay: 0ms; }
.reveal-stagger.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay: 60ms; }
.reveal-stagger.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay: 120ms; }
.reveal-stagger.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay: 180ms; }
.reveal-stagger.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay: 240ms; }
.reveal-stagger.visible > *:nth-child(6) { opacity:1; transform:none; transition-delay: 300ms; }

/* ── HERO ENTRANCE ANIMATION ── */
.hero-badge {
  animation: fadeSlideUp var(--t-enter) var(--ease) 0ms both;
}
.hero h1 {
  animation: fadeSlideUp var(--t-enter) var(--ease) 60ms both;
}
.hero p {
  animation: fadeSlideUp var(--t-enter) var(--ease) 120ms both;
}
.utility-panel {
  animation: fadeSlideUp var(--t-slow) var(--ease) 180ms both;
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── NAVBAR SCROLL BEHAVIOR ── */
.navbar {
  transition:
    background-color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}
.navbar.scrolled {
  background: rgba(8,9,10,0.92);
  border-bottom-color: rgba(255,255,255,0.09);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 16px rgba(0,0,0,0.24);
}

/* ── LOGO HOVER ── */
.navbar-logo {
  transition:
    opacity var(--t-base) var(--ease),
    color var(--t-base) var(--ease);
}
.navbar-logo:hover {
  opacity: 0.85;
}
.navbar-logo .logo-dot {
  transition: color var(--t-base) var(--ease), text-shadow var(--t-base) var(--ease);
}
.navbar-logo:hover .logo-dot {
  text-shadow: 0 0 12px rgba(113,112,255,0.6);
}

/* ── FORMAT TAGS ── */
.format-tag {
  transition:
    border-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease);
}
.dropzone:hover .format-tag {
  border-color: rgba(113,112,255,0.2);
  color: rgba(113,112,255,0.7);
}

/* ── BENTO TAG HOVER ── */
.bento-tag {
  transition:
    background-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease);
}

/* ── FOOTER LINKS ── */
.footer-links a {
  transition: color var(--t-base) var(--ease);
}
.footer-links a:hover {
  color: var(--text-primary);
}

/* ── COPY BUTTON ── */
.dns-copy-btn {
  transition:
    border-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease);
}
.dns-copy-btn:hover {
  border-color: rgba(113,112,255,0.4);
  color: var(--accent);
  background: rgba(113,112,255,0.06);
}
.dns-copy-btn:active {
  transform: scale(0.96);
  transition-duration: 60ms;
}

/* ── SELECTION HIGHLIGHT (Linear uses subtle purple) ── */
::selection {
  background: rgba(113,112,255,0.2);
  color: var(--text-primary);
}

/* ── SCROLLBAR (Linear-style minimal) ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  transition: background var(--t-base) var(--ease);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }

/* ── CURSOR POINTER on interactive elements ── */
.bento-card, .format-tag, .bento-tag { cursor: default; }
.utility-tab, .btn, .navbar-cmd, .navbar-links a, .toc-item,
.cmd-item, .dns-copy-btn, .dropzone { cursor: pointer; }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .hero-badge, .hero h1, .hero p, .utility-panel {
    animation: none;
    opacity: 1;
    transform: none;
  }
}