/* ============================================
   timeogler — Animation Stylesheet
   ============================================ */

/* ============================================ ANIMATION TOKENS ============================================ */
:root {
  /* Durations */
  --dur-fast:   200ms;
  --dur-base:   350ms;
  --dur-slow:   500ms;
  --dur-xslow:  700ms;

  /* Easings */
  --ease-out:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-decel:      cubic-bezier(0.0, 0.0, 0.2, 1);

  /* Animation accent colours (aligned with style.css tokens) */
  --anim-accent:     #4A90E2;
  --anim-accent-lt:  #6FB1FF;
  --anim-dark:       #1a1a1a;
  --anim-grey-mid:   #666;
  --anim-grey-lt:    #e5e5e5;

  /* Stagger base delay */
  --stagger-step: 60ms;
}

/* ============================================ KEYFRAMES ============================================ */

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

@keyframes slideUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.72); }
  65%  { opacity: 1; transform: scale(1.06); }
  100% {             transform: scale(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

@keyframes underlineSlideIn {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes badgePop {
  0%   { opacity: 0; transform: scale(0.5) rotate(-6deg); }
  60%  { transform: scale(1.12) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes priceHighlight {
  from { color: inherit; }
  to   { color: var(--anim-accent-lt); }
}

/* ============================================ UTILITY ANIMATION CLASSES ============================================ */

.anim-fade-in {
  animation: fadeIn var(--dur-base) var(--ease-out) both;
}

.anim-slide-up {
  animation: slideUp var(--dur-base) var(--ease-out) both;
}

.anim-slide-in-left {
  animation: slideInLeft var(--dur-base) var(--ease-out) both;
}

.anim-pop-in {
  animation: popIn var(--dur-slow) var(--ease-spring) both;
}

/* ============================================ LOADING SPINNER ============================================ */

.spinner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 60px 0;
}

.spinner {
  width: 38px;
  height: 38px;
  border: 2.5px solid rgba(74, 144, 226, 0.15);
  border-top-color: var(--anim-accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

.spinner-sm {
  width: 22px;
  height: 22px;
  border-width: 2px;
}

.spinner-lg {
  width: 54px;
  height: 54px;
  border-width: 3px;
}

.spinner-text {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--anim-grey-mid);
  animation: pulse 1.6s ease-in-out infinite;
}

/* ============================================ FILTER BUTTON ANIMATIONS ============================================ */

.filter-btn {
  position: relative;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--anim-grey-mid);
  background: transparent;
  border: none;
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
  outline: none;
}

.filter-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--anim-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.filter-btn:hover {
  color: var(--anim-dark);
}

.filter-btn:hover::after {
  transform: scaleX(1);
}

.filter-btn.active {
  color: var(--anim-accent);
  font-weight: 600;
}

.filter-btn.active::after {
  transform: scaleX(1);
}

/* ============================================ WATCH CARD ENTRANCE ============================================ */

.watch-card {
  animation: cardEntrance var(--dur-slow) var(--ease-out) both;
}

/* Staggered delays for the first 12 cards */
.watch-card:nth-child(1)  { animation-delay: calc(var(--stagger-step) * 0); }
.watch-card:nth-child(2)  { animation-delay: calc(var(--stagger-step) * 1); }
.watch-card:nth-child(3)  { animation-delay: calc(var(--stagger-step) * 2); }
.watch-card:nth-child(4)  { animation-delay: calc(var(--stagger-step) * 3); }
.watch-card:nth-child(5)  { animation-delay: calc(var(--stagger-step) * 4); }
.watch-card:nth-child(6)  { animation-delay: calc(var(--stagger-step) * 5); }
.watch-card:nth-child(7)  { animation-delay: calc(var(--stagger-step) * 6); }
.watch-card:nth-child(8)  { animation-delay: calc(var(--stagger-step) * 7); }
.watch-card:nth-child(9)  { animation-delay: calc(var(--stagger-step) * 8); }
.watch-card:nth-child(10) { animation-delay: calc(var(--stagger-step) * 9); }
.watch-card:nth-child(11) { animation-delay: calc(var(--stagger-step) * 10); }
.watch-card:nth-child(12) { animation-delay: calc(var(--stagger-step) * 11); }

/* ============================================ WATCH CARD HOVER STATES ============================================ */

.watch-card {
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    transform   var(--dur-base) var(--ease-out);
}

.watch-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 4px  12px rgba(0, 0, 0, 0.06),
    0 14px 36px rgba(0, 0, 0, 0.10),
    0  1px  3px rgba(74, 144, 226, 0.08);
}

/* Image zoom on card hover — supplements style.css */
.watch-card .watch-card-image img {
  transition: transform var(--dur-slow) var(--ease-out);
}

.watch-card:hover .watch-card-image img {
  transform: scale(1.05);
}

/* Price highlight on hover */
.watch-card .watch-card-price {
  transition: color var(--dur-base) var(--ease-out);
}

.watch-card:hover .watch-card-price {
  color: var(--anim-accent-lt);
}

/* ============================================ SOLD BADGE ============================================ */

.sold-badge {
  animation: badgePop var(--dur-slow) var(--ease-spring) both;
  animation-delay: 120ms;
}

/* Greyscale on sold cards — applied to the image only, not the card body */
.watch-card.is-sold .watch-card-image img {
  filter: grayscale(0.4);
  transition:
    filter    var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.watch-card.is-sold:hover .watch-card-image img {
  filter: grayscale(0.2);
}

/* Blue tint overlay on sold images via ::after */
.watch-card.is-sold .watch-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(74, 144, 226, 0.07);
  pointer-events: none;
  transition: background var(--dur-base) var(--ease-out);
}

.watch-card.is-sold:hover .watch-card-image::after {
  background: rgba(74, 144, 226, 0.12);
}

/* Sold card hover — subtler lift than available cards */
.watch-card.is-sold {
  transition:
    transform  var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.watch-card.is-sold:hover {
  transform: translateY(-3px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.05),
    0 10px 28px rgba(0, 0, 0, 0.08);
}

/* Mute the price highlight for sold cards */
.watch-card.is-sold:hover .watch-card-price {
  color: var(--anim-grey-mid);
}

/* ============================================ GALLERY IMAGE TRANSITIONS ============================================ */

.gallery-main img,
.g-thumb img {
  transition:
    opacity   var(--dur-base) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

/* Utility states toggled by JS when swapping images */
.fade-out {
  opacity: 0 !important;
  transform: scale(0.97) !important;
  pointer-events: none;
}

.fade-in {
  animation: galleryFadeIn var(--dur-base) var(--ease-out) both;
}

@keyframes galleryFadeIn {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

/* Thumbnail active ring transition */
.g-thumb {
  transition:
    border-color var(--dur-fast) var(--ease-out),
    opacity      var(--dur-fast) var(--ease-out);
}

.g-thumb:not(.active) {
  opacity: 0.62;
}

.g-thumb:hover:not(.active) {
  opacity: 0.85;
}

/* ============================================ GALLERY ARROW BUTTONS ============================================ */

.lb-btn,
.gallery-arrow {
  opacity: 0.55;
  background: rgba(26, 26, 26, 0.55);
  transition:
    opacity    var(--dur-fast) var(--ease-out),
    transform  var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    color      var(--dur-fast) var(--ease-out);
}

.lb-btn:hover,
.gallery-arrow:hover {
  opacity: 1;
  transform: scale(1.1);
  background: var(--anim-dark);
  color: var(--anim-accent-lt);
}

.lb-btn:active,
.gallery-arrow:active {
  transform: scale(0.96);
}

/* ============================================ BREADCRUMB HOVER ============================================ */

.breadcrumb a {
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}

.breadcrumb a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--anim-accent-lt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.breadcrumb a:hover {
  color: var(--anim-accent-lt);
}

.breadcrumb a:hover::after {
  transform: scaleX(1);
}

/* ============================================ LISTING DETAILS — PAGE LOAD ============================================ */

.listing-grid .listing-info,
.listing-name,
.listing-ref,
.listing-price,
.accent-rule,
.listing-description,
.listing-actions {
  animation: slideUp var(--dur-slow) var(--ease-out) both;
  animation-delay: 100ms;
}

.listing-name        { animation-delay: 80ms; }
.listing-ref         { animation-delay: 130ms; }
.listing-price       { animation-delay: 180ms; }
.accent-rule         { animation-delay: 200ms; }
.listing-description { animation-delay: 240ms; }
.listing-actions     { animation-delay: 300ms; }

/* ============================================ SPEC ITEMS — STAGGERED SLIDE IN ============================================ */

.spec-item {
  animation: slideInLeft var(--dur-base) var(--ease-out) both;
}

.spec-item:nth-child(1) { animation-delay: 0.10s; }
.spec-item:nth-child(2) { animation-delay: 0.20s; }
.spec-item:nth-child(3) { animation-delay: 0.30s; }
.spec-item:nth-child(4) { animation-delay: 0.40s; }

/* ============================================ LIGHTBOX / MODAL ============================================ */

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

@keyframes modalZoomIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes modalZoomOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.92); }
}

.lightbox.open .lightbox-img {
  animation: modalZoomIn var(--dur-slow) var(--ease-spring) both;
}

/* Close button — rotate + colour shift on hover */
.lb-close {
  transition:
    transform  var(--dur-base) var(--ease-spring),
    color      var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.lb-close:hover {
  transform: rotate(90deg);
  color: var(--anim-accent-lt);
  background: rgba(111, 177, 255, 0.12);
}

/* ============================================ CTA BUTTON — RIPPLE & HOVER LIFT ============================================ */

.btn-accent {
  position: relative;
  overflow: hidden;
  transition:
    background  var(--dur-base) var(--ease-out),
    box-shadow  var(--dur-base) var(--ease-out),
    transform   var(--dur-fast) var(--ease-out);
}

.btn-accent:hover {
  background: linear-gradient(135deg, var(--anim-accent) 0%, var(--anim-accent-lt) 100%);
  box-shadow:
    0 4px 14px rgba(74, 144, 226, 0.35),
    0 1px  4px rgba(74, 144, 226, 0.20);
  transform: translateY(-2px);
}

.btn-accent:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(74, 144, 226, 0.20);
}

/* Ripple element injected by JS: btn.insertAdjacentHTML('beforeend', '<span class="ripple"></span>') */
.btn-accent .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transform: scale(0);
  animation: rippleExpand 500ms var(--ease-out) forwards;
  pointer-events: none;
}

@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}

/* ============================================ CONVEYOR BELT ============================================ */

.conveyor-outer {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image:         linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  padding: 8px 0 32px;
}

.conveyor-track {
  display: flex;
  gap: 22px;
  width: max-content;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
  padding: 16px 0;
}

.conveyor-track.is-dragging {
  cursor: grabbing;
}

/* Disable card entrance animation inside belts; lock to uniform dimensions */
.conveyor-track .watch-card {
  width: 300px;
  flex-shrink: 0;
  animation: none !important;
  opacity: 1 !important;
  display: flex;
  flex-direction: column;
}

.conveyor-track .watch-card-image {
  width: 300px;
  height: 300px;
  flex-shrink: 0;
}

.conveyor-track .watch-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Belt auto-scroll toggle button */
.belt-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border, #e2e2de);
  background: transparent;
  color: var(--muted, #6b6b65);
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 6px;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}

.belt-toggle:hover {
  border-color: var(--accent, #4A90E2);
  color: var(--accent, #4A90E2);
}

.belt-toggle.paused {
  background: var(--accent, #4A90E2);
  border-color: var(--accent, #4A90E2);
  color: #fff;
}

/* ============================================ CONVEYOR BELT — MOBILE ============================================ */

@media (max-width: 768px) {
  /* Switch to native horizontal scroll — buttery smooth with hardware acceleration */
  .conveyor-outer {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
    /* Remove the fade mask — it clips content and causes repaint on mobile */
    -webkit-mask-image: none;
    mask-image: none;
    padding: 8px 16px 20px;
    scrollbar-width: none; /* Firefox */
  }

  .conveyor-outer::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .conveyor-track {
    /* Native scroll handles movement — disable JS-drag cursor */
    cursor: default;
    gap: 14px;
    padding: 8px 0;
  }

  .conveyor-track.is-dragging {
    cursor: default;
  }

  /* Snap each card to the left edge */
  .conveyor-link {
    scroll-snap-align: start;
  }

  /* Smaller cards: 260px shows one full card + peek of next on most phones */
  .conveyor-track .watch-card {
    width: 260px;
  }

  .conveyor-track .watch-card-image {
    width: 260px;
    height: 260px;
  }

  /* Auto-scroll toggle is irrelevant on mobile */
  .belt-toggle {
    display: none;
  }
}

/* ============================================ REDUCED MOTION ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}