/* ==========================================================================
   LỌ MƠ — EDITORIAL × GALLERY × CINEMATIC MOTION SYSTEM (STAGE D)
   Uses GPU-friendly transform/opacity and honors prefers-reduced-motion
   ========================================================================== */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* 1. Micro-interactions on Buttons & Cards */
.btn-lomo, .btn-header-icon, .mobile-nav-dot, .depth-nav-btn, .depth-dot-btn, .editorial-chapter-pill {
  transition: translate 200ms var(--motion-ease), scale 150ms var(--motion-ease), background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .btn-lomo:not(:disabled):hover,
  .btn-header-icon:hover,
  .depth-nav-btn:hover {
    translate: 0 -2px;
  }
  .lomo-product-card:hover,
  .pub-showcase-card:hover,
  .pending-pub-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
  .lomo-product-card:hover .card-image-wrap img {
    transform: scale(1.03);
  }
}

.btn-lomo:not(:disabled):active,
.btn-header-icon:active,
.depth-nav-btn:active,
. mobile-nav-dot:active {
  scale: 0.97;
  translate: 0 0;
}

.btn-lomo[aria-busy="true"] {
  cursor: progress;
  opacity: 0.82;
}
.btn-lomo[aria-busy="true"]::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: lomo-spin 700ms linear infinite;
}

.lomo-product-card,
.pub-showcase-card,
.pending-pub-card {
  transition: transform 280ms var(--motion-ease), box-shadow 280ms var(--motion-ease);
}
.card-image-wrap img {
  transition: transform 360ms var(--motion-ease);
}

/* 2. Progressive Reveal Animation (Content is 100% visible by default; only below-fold items get .reveal-pending) */
[data-reveal-item] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 600ms var(--motion-ease), transform 600ms var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

html.motion-ready [data-reveal-item].reveal-pending {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}

/* 3. 2.5D Depth Gallery Drag & Transition States */
.depth-stage-viewport[data-dragging="true"] .depth-slide.is-active {
  transition: none !important;
}

/* 4. Toast Notification & Filter Popovers */
.motion-pop {
  animation: lomo-pop 260ms var(--motion-ease);
}
.mobile-navigation:not([hidden]),
.motion-filter[open] > .motion-filter-content {
  animation: lomo-enter 240ms var(--motion-ease);
}
.motion-filter {
  margin-bottom: 24px;
}
.motion-filter > summary {
  cursor: pointer;
  padding: 14px 18px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  color: var(--color-green);
  font-weight: 600;
}
.motion-filter-content {
  margin-top: 12px;
}
.motion-status {
  position: fixed;
  bottom: 24px;
  left: 50%;
  translate: -50% 0;
  z-index: 500;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 14px 22px;
  border-radius: 14px;
  background: var(--color-green-dark);
  color: var(--color-cream);
  box-shadow: var(--shadow-md);
  font-size: 14px;
}
.motion-status:empty {
  display: none;
}

/* Legacy FloralShowcase fallback rules for /tiem-hoa */
.lomo-floral-showcase[data-mode="gallery"] .floral-card {
  touch-action: pan-y;
  user-select: none;
  translate: var(--drag-x, 0px) 0;
  rotate: var(--drag-tilt, 0deg);
  transition: translate 280ms var(--motion-ease), rotate 280ms var(--motion-ease), left 500ms var(--motion-ease), top 500ms var(--motion-ease), width 500ms var(--motion-ease), transform 320ms var(--motion-ease), opacity 300ms;
}
.lomo-floral-showcase[data-dragging="true"] .floral-card {
  cursor: grabbing;
  transition: none;
}
.floral-card img {
  -webkit-user-drag: none;
}
@media (min-width: 641px) {
  .lomo-floral-showcase[data-mode="gallery"] .floral-card {
    --x: calc(50% + var(--slot, 0) * 27%);
    --r: calc(var(--slot, 0) * 4deg);
  }
}

@keyframes lomo-spin {
  to { transform: rotate(360deg); }
}
@keyframes lomo-pop {
  50% { scale: 1.13; }
}
@keyframes lomo-enter {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 769px) {
  .motion-filter > summary { display: none; }
  .motion-filter-content { margin-top: 0; }
}