/* ============================================================
   FLEXYPRO AI — interactions layer (extends microinteractions.css)
   This file STRENGTHENS:
     - :active scale on chips/pills/cards/rail-cards (not in micro)
     - :hover lift+glow on flat elements (chip, pill, suggest, etc.)
     - input[type=range] custom thumb (ember + glow on press)
     - input/textarea focus → ember border + light bg
     - drop-zone is-dragover shimmer
     - chat-fab / consultant-fab pulse-ring on hover
     - before/after handle dot sizing + grow on hover
     - tab underline + crossfade
     - modal-close rotate-90 on hover

   It does NOT touch:
     - ripple animation (lives in microinteractions.css)
     - :focus-visible global rule (lives in microinteractions.css)
     - .btn/.cta-primary etc :active scale (lives in microinteractions.css)
     - magnetic transform (microinteractions.js owns it)

   Brand ember: #FD6143 — uses same var as microinteractions.css.
   ============================================================ */

:root {
  --fp-ember: #FD6143;
  --fp-ember-soft-12: rgba(253, 97, 67, .12);
  --fp-ember-soft-20: rgba(253, 97, 67, .20);
  --fp-ember-soft-35: rgba(253, 97, 67, .35);
  --fp-ember-soft-50: rgba(253, 97, 67, .50);
  --fp-ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ------------------------------------------------------------
   1. CHIPS / PILLS / RAIL-CARDS / SUGGEST — were flat
   These elements are NOT in microinteractions.css RIPPLE_SEL,
   so we add transition + :active here.
   ------------------------------------------------------------ */
.pill,
.chip,
.rail-card,
.consultant-suggest,
.load-more-btn,
.modal-cta,
.lb-cta,
.modal-3d,
.viewer3d-ar-btn {
  transition:
    transform 0.18s var(--fp-ease-out),
    box-shadow 0.28s var(--fp-ease-out),
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Press feedback — haptic feel */
.pill:not([disabled]):active,
.rail-card:not([disabled]):active,
.consultant-suggest:not([disabled]):active,
.load-more-btn:not([disabled]):active,
.modal-cta:active,
.lb-cta:active,
.modal-3d:not([disabled]):active,
.viewer3d-ar-btn:not([disabled]):active {
  transform: scale(0.97);
  transition-duration: 80ms;
}
.chip:not([disabled]):active,
.icp-chip:not([disabled]):active,
.calc-chip:not([disabled]):active {
  transform: scale(0.94);
  transition-duration: 80ms;
}

/* Card press — keeps hover lift, just compresses */
.card:not(.is-active):active,
.case:active,
.case-mini:active,
.sku-card:active,
.lead-card:active {
  transform: translateY(-1px) scale(0.992);
  transition-duration: 100ms;
}

/* ------------------------------------------------------------
   2. HOVER LIFT on flat elements (chips / pills / suggest / load-more)
   ------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .pill:not(.is-active):hover,
  .consultant-suggest:hover {
    background-color: rgba(253, 97, 67, 0.08);
    border-color: var(--fp-ember-soft-50);
    color: var(--fp-ember);
    transform: translateY(-1px);
  }
  .chip:not(.is-active):hover {
    background-color: rgba(253, 97, 67, 0.10);
    border-color: var(--fp-ember-soft-50);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -10px var(--fp-ember-soft-50);
  }
  .pill.is-active:hover,
  .chip.is-active:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -10px var(--fp-ember-soft-50);
  }
  .rail-card:not(.is-active):hover {
    transform: translateY(-2px);
    border-color: var(--fp-ember-soft-50);
    background-color: rgba(253, 97, 67, 0.04);
    box-shadow: 0 12px 30px -16px var(--fp-ember-soft-35);
  }
  .rail-card.is-active {
    box-shadow: 0 0 0 1px var(--fp-ember-soft-50),
                0 14px 36px -18px var(--fp-ember-soft-50);
  }
  .load-more-btn:hover {
    background-color: rgba(253, 97, 67, 0.08);
    border-color: var(--fp-ember-soft-50);
    color: var(--fp-ember);
    transform: translateY(-1px);
  }
  .modal-cta:hover,
  .lb-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 32px -8px var(--fp-ember-soft-50);
  }
}

/* ------------------------------------------------------------
   3. CTA-PRIMARY / CTA-SECONDARY — depth shadow + inset highlight
   microinteractions.css already gives them :active and translateY(-1px)
   on hover; we add the box-shadow so they don't look "flat".
   ------------------------------------------------------------ */
.cta-primary {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 2px 8px -2px rgba(0, 0, 0, 0.30),
    0 8px 32px -8px var(--fp-ember-soft-20);
}
@media (hover: hover) and (pointer: fine) {
  .cta-primary:hover {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.24) inset,
      0 4px 16px -2px rgba(0, 0, 0, 0.40),
      0 16px 48px -8px var(--fp-ember-soft-50);
  }
}
.cta-secondary {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 2px 8px -4px rgba(0, 0, 0, 0.40);
}
@media (hover: hover) and (pointer: fine) {
  .cta-secondary:hover {
    background-color: rgba(245, 241, 237, 0.06);
    border-color: rgba(245, 241, 237, 0.50);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.12) inset,
      0 6px 24px -8px var(--fp-ember-soft-35);
  }
}

/* ------------------------------------------------------------
   4. CASE-MINI premium tilt — rotate(0.3deg) on top of motion.css
   motion.css already gives rotateY(1.5deg) translateY(-2px).
   We bump to translateY(-3px) and add 0.3deg roll.
   ------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) and (min-width: 881px) {
  .case-mini:hover {
    transform: perspective(1000px) rotateY(1.5deg) translateY(-3px) rotate(0.3deg) translateZ(0);
  }
}

/* ------------------------------------------------------------
   5. CHAT FAB / CONSULTANT FAB — pulse-ring on hover
   Adds a 1px ember ring that expands every 1.6s.
   ------------------------------------------------------------ */
.chat-fab,
.consultant-fab {
  position: relative;
  isolation: isolate;
  transition:
    transform 0.22s var(--fp-ease-out),
    box-shadow 0.32s var(--fp-ease-out);
}
.chat-fab::after,
.consultant-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 var(--fp-ember-soft-50);
  z-index: -1;
}
@media (hover: hover) and (pointer: fine) {
  .chat-fab:hover,
  .consultant-fab:hover { transform: scale(1.05); }
  .chat-fab:hover::after,
  .consultant-fab:hover::after {
    animation: fp-fab-ring 1.6s var(--fp-ease-out) infinite;
  }
}
.chat-fab:active,
.consultant-fab:active { transform: scale(0.94); }
@keyframes fp-fab-ring {
  0%   { box-shadow: 0 0 0 0 var(--fp-ember-soft-50); }
  70%  { box-shadow: 0 0 0 14px rgba(253, 97, 67, 0); }
  100% { box-shadow: 0 0 0 0 rgba(253, 97, 67, 0); }
}

/* ------------------------------------------------------------
   6. RANGE INPUTS — custom ember thumb with grow + glow on press
   ------------------------------------------------------------ */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(245, 241, 237, 0.10);
}
input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(245, 241, 237, 0.10);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--fp-ember);
  box-shadow:
    0 0 0 0 var(--fp-ember-soft-50),
    0 2px 8px -2px rgba(0, 0, 0, 0.40);
  transition:
    transform 0.18s var(--fp-ease-out),
    box-shadow 0.28s var(--fp-ease-out);
  cursor: grab;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.10); }
input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.18);
  cursor: grabbing;
  box-shadow:
    0 0 0 8px rgba(253, 97, 67, 0.15),
    0 4px 12px -2px rgba(0, 0, 0, 0.45);
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 6px rgba(253, 97, 67, 0.22),
    0 2px 8px -2px rgba(0, 0, 0, 0.40);
}
input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--fp-ember);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.40);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb:active {
  transform: scale(1.18);
  cursor: grabbing;
}

/* ------------------------------------------------------------
   7. TEXT INPUTS / TEXTAREA — ember focus border + soft bg
   microinteractions.css gives global *:focus-visible glow,
   but our text-fields need a visible border-color shift on
   plain :focus (e.g. typing) too.
   ------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea {
  transition:
    border-color 0.22s ease,
    background-color 0.22s ease,
    box-shadow 0.28s var(--fp-ease-out);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
textarea:focus {
  border-color: var(--fp-ember) !important;
  background-color: rgba(253, 97, 67, 0.04);
}

/* ------------------------------------------------------------
   8. DROP-ZONE — dragover dashed ember + glow shimmer
   Pairs with JS in microinteractions.js? Not yet — we ship the
   class toggle here too so dropzone reacts even without JS hook.
   ------------------------------------------------------------ */
.drop-zone,
.dropzone,
[data-drop] {
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.35s var(--fp-ease-out);
}
.drop-zone.is-dragover,
.dropzone.is-dragover,
[data-drop].is-dragover {
  border-style: dashed !important;
  border-color: var(--fp-ember) !important;
  background-color: rgba(253, 97, 67, 0.06);
  box-shadow:
    0 0 0 1px var(--fp-ember-soft-50) inset,
    0 0 32px -8px var(--fp-ember-soft-50);
}

/* ------------------------------------------------------------
   9. BEFORE/AFTER handle — bigger touch target + grow on hover
   Spec-ready (no slider on prod homepage yet).
   ------------------------------------------------------------ */
.ba__handle,
.ba__divider { cursor: ew-resize; }
.ba__handle-dot {
  width: 60px;
  height: 60px;
  transition:
    transform 0.22s var(--fp-ease-out),
    box-shadow 0.32s var(--fp-ease-out);
  box-shadow:
    0 0 0 0 var(--fp-ember-soft-50),
    0 6px 18px -4px rgba(0, 0, 0, 0.55);
}
@media (hover: hover) and (pointer: fine) {
  .ba__handle-dot { width: 80px; height: 80px; }
  .ba__handle-dot:hover,
  .ba__handle:hover .ba__handle-dot {
    transform: scale(1.08);
    box-shadow:
      0 0 0 6px rgba(253, 97, 67, 0.18),
      0 8px 24px -4px rgba(0, 0, 0, 0.60);
  }
}
.ba__handle-dot:active,
.ba__handle:active .ba__handle-dot { transform: scale(0.95); }

/* ------------------------------------------------------------
   10. TABS — active underline + smooth crossfade (admin)
   Doesn't fire if .tab/.tab-btn never exists — safe.
   ------------------------------------------------------------ */
.tab,
.tab-btn,
[role="tab"] {
  position: relative;
  transition:
    color 0.22s ease,
    background-color 0.22s ease;
}
.tab::after,
.tab-btn::after,
[role="tab"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: var(--fp-ember);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 0.28s var(--fp-ease-out);
  pointer-events: none;
}
.tab.is-active::after,
.tab-btn.is-active::after,
[role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
.tab:active,
.tab-btn:active,
[role="tab"]:active { transform: scale(0.98); }

/* ------------------------------------------------------------
   11. MODAL-CLOSE — rotate-90 on hover, ember tint
   ------------------------------------------------------------ */
.modal-close,
[data-modal-close],
.lb-close {
  transition:
    transform 0.22s var(--fp-ease-out),
    color 0.22s ease,
    background-color 0.22s ease;
}
@media (hover: hover) and (pointer: fine) {
  .modal-close:hover,
  [data-modal-close]:hover,
  .lb-close:hover {
    transform: rotate(90deg);
    color: var(--fp-ember);
  }
}
.modal-close:active,
[data-modal-close]:active,
.lb-close:active { transform: rotate(90deg) scale(0.92); }

/* ------------------------------------------------------------
   12. DISABLED — universal
   ------------------------------------------------------------ */
button:disabled,
button[aria-disabled="true"],
[role="button"][aria-disabled="true"],
.btn:disabled,
.btn.is-disabled,
.cta-primary:disabled,
.cta-secondary:disabled,
.btn-primary:disabled,
.btn-ghost:disabled,
.pill[disabled],
.chip[disabled],
input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ------------------------------------------------------------
   13. REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pill,
  .chip,
  .rail-card,
  .consultant-suggest,
  .load-more-btn,
  .modal-cta,
  .lb-cta,
  .modal-3d,
  .viewer3d-ar-btn,
  .chat-fab,
  .consultant-fab,
  .case-mini {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
    transform: none !important;
    animation: none !important;
  }
  .chat-fab:hover::after,
  .consultant-fab:hover::after { animation: none !important; }
  input[type="range"]::-webkit-slider-thumb { transition: none !important; }
}

/* ------------------------------------------------------------
   14. TOUCH POINTER — keep handle visible
   ------------------------------------------------------------ */
@media (hover: none), (pointer: coarse) {
  .ba__handle-dot { width: 60px; height: 60px; }
}