/**
 * Đồng Thuận — Living Book motion system (TASK-1011)
 * Additive motion only. Prefer transform + opacity.
 */

:root {
  --motion-micro: 180ms;
  --motion-feedback: 220ms;
  --motion-component: 260ms;
  --motion-sheet: 360ms;
  --motion-section: 420ms;
  --motion-page: 360ms;
  --motion-hero: 650ms;
  --ease-book: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* —— 01 Hero: mở bìa sách —— */
.sf-campaign-hero.is-book-cover .sf-campaign-hero__viewport {
  clip-path: inset(0 100% 0 0);
}

.sf-campaign-hero.is-book-cover .sf-campaign-slide__copy,
.sf-campaign-hero.is-book-cover .sf-hero__copy {
  opacity: 0;
  transform: translateY(12px);
}

.sf-campaign-hero.is-book-opening .sf-campaign-hero__viewport,
.sf-campaign-hero.is-book-ready .sf-campaign-hero__viewport {
  clip-path: inset(0 0 0 0);
}

.sf-campaign-hero.is-book-opening .sf-campaign-hero__viewport {
  transition: clip-path var(--motion-hero) var(--ease-book);
}

.sf-campaign-hero.is-book-opening .sf-campaign-slide__copy,
.sf-campaign-hero.is-book-opening .sf-hero__copy,
.sf-campaign-hero.is-book-ready .sf-campaign-slide__copy,
.sf-campaign-hero.is-book-ready .sf-hero__copy {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--motion-hero) var(--ease-book),
    transform var(--motion-hero) var(--ease-book);
}

/* —— 02 Scroll progress —— */
.sf-scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 2px;
  width: 100%;
  pointer-events: none;
  background: transparent;
  overflow: hidden;
}

.sf-scroll-progress__fill {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(
    90deg,
    var(--palette-gold, #c99538),
    var(--palette-red, #9e2f24)
  );
  will-change: transform;
}

.sf-scroll-progress.is-hidden {
  opacity: 0;
}

@media (min-width: 1024px) {
  .sf-scroll-progress {
    display: none;
  }
}

.sf-chapter-rail {
  display: none;
}

@media (min-width: 1024px) {
  .sf-chapter-rail {
    display: block;
    position: fixed;
    top: 50%;
    right: max(0.35rem, env(safe-area-inset-right, 0px));
    transform: translateY(-50%);
    z-index: calc(var(--z-sticky, 10) + 2);
    width: 1.35rem;
    padding: 0.35rem 0;
    pointer-events: none;
  }

  .sf-chapter-rail.is-hidden {
    opacity: 0;
    visibility: hidden;
  }

  .sf-chapter-rail__track {
    position: absolute;
    left: 50%;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    transform: translateX(-50%);
    background: color-mix(in srgb, var(--palette-brown, #2a1b14) 18%, transparent);
  }

  .sf-chapter-rail__bookmark {
    position: absolute;
    left: 50%;
    top: 0.5rem;
    width: 8px;
    height: 14px;
    margin-left: -4px;
    border-radius: 1px 2px 2px 1px;
    background: var(--palette-red, #9e2f24);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--palette-gold, #c99538) 55%, transparent);
    transform: translateY(0);
    transition: transform var(--motion-component) var(--ease-book);
    opacity: 0;
  }

  .sf-chapter-rail__bookmark.is-ready {
    opacity: 1;
  }

  .sf-chapter-rail__list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: min(42vh, 280px);
    position: relative;
    z-index: 1;
  }

  .sf-chapter-rail__dot {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    position: relative;
    color: inherit;
    text-decoration: none;
  }

  .sf-chapter-rail__dot::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--palette-brown, #2a1b14) 35%, #fff);
    border: 1px solid color-mix(in srgb, var(--palette-gold, #c99538) 40%, transparent);
    transition: transform var(--motion-micro) var(--ease-book), background var(--motion-micro) ease;
  }

  .sf-chapter-rail__dot.is-current::before,
  .sf-chapter-rail__dot:hover::before,
  .sf-chapter-rail__dot:focus-visible::before {
    background: var(--palette-red, #9e2f24);
    transform: scale(1.25);
  }

  .sf-chapter-rail__tip {
    position: absolute;
    right: calc(100% + 0.45rem);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    white-space: nowrap;
    font-size: 0.72rem;
    font-family: var(--font-body, system-ui, sans-serif);
    color: var(--palette-brown, #2a1b14);
    background: color-mix(in srgb, #fff 92%, var(--palette-cream, #fbf7ef));
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-micro) ease, transform var(--motion-micro) var(--ease-book);
  }

  .sf-chapter-rail__dot:hover .sf-chapter-rail__tip,
  .sf-chapter-rail__dot:focus-visible .sf-chapter-rail__tip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* —— 03 Section reveal —— */
[data-reveal-section] .sf-section-head {
  position: relative;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--motion-section) var(--ease-book),
    transform var(--motion-section) var(--ease-book);
}

[data-reveal-section].is-revealed .sf-section-head {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-section] .sf-section-head::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 4.5rem;
  height: 2px;
  margin-top: 0.55rem;
  background: linear-gradient(
    90deg,
    var(--palette-gold, #c99538),
    color-mix(in srgb, var(--palette-gold, #c99538) 20%, transparent)
  );
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-section) var(--ease-book);
}

[data-reveal-section].is-revealed .sf-section-head::after {
  transform: scaleX(1);
}

[data-reveal-item] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--motion-section) var(--ease-book),
    transform var(--motion-section) var(--ease-book);
}

[data-reveal-item].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* —— 04 Product card lift (pointer devices only) —— */
@media (hover: hover) and (pointer: fine) {
  .product-card--split {
    transition:
      transform var(--motion-micro) var(--ease-book),
      box-shadow var(--motion-micro) var(--ease-book),
      border-color var(--motion-micro) ease;
  }

  .product-card--split:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--palette-brown, #2a1b14) 12%, transparent);
  }

  .product-card--split .product-card-media img,
  .product-card--split .product-card-hit img {
    transition: transform var(--motion-component) var(--ease-book);
  }

  .product-card--split:hover .product-card-media img,
  .product-card--split:hover .product-card-hit img {
    transform: scale(1.025);
  }

  .sf-combo-card {
    transition:
      transform var(--motion-micro) var(--ease-book),
      box-shadow var(--motion-micro) var(--ease-book);
  }

  .sf-combo-card:hover {
    transform: translateY(-4px);
  }
}

.product-quick-add,
.btn,
.sf-cv__nav,
.sf-cart-btn {
  transition: transform var(--motion-micro) var(--ease-book);
}

.product-quick-add:active,
.btn:active:not(:disabled),
.sf-cv__nav:active,
.sf-cart-btn:active {
  transform: scale(0.98);
}

.product-quick-add.is-added {
  background: color-mix(in srgb, var(--palette-jade, #173f30) 18%, #fff);
  border-color: var(--palette-jade, #173f30);
  color: var(--palette-jade, #173f30);
  font-size: 1rem;
}

.product-quick-add.is-added::before {
  content: "✓";
}

.product-quick-add.is-added {
  font-size: 0;
}

.product-quick-add.is-added::before {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.sf-cart-badge.is-bump,
[data-cart-count].is-bump {
  animation: sf-lb-badge-bump var(--motion-feedback) var(--ease-book);
}

@keyframes sf-lb-badge-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* —— 05 Catalog page turn (tokens) —— */
.sf-cv__img {
  transition:
    opacity var(--motion-page) var(--ease-book),
    transform var(--motion-page) var(--ease-book);
  filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--palette-brown, #2a1b14) 10%, transparent));
}

.sf-cv__img.is-out-next {
  opacity: 0;
  transform: translateX(-20px);
}

.sf-cv__img.is-out-prev {
  opacity: 0;
  transform: translateX(20px);
}

.sf-cv__img.is-in-next {
  opacity: 0;
  transform: translateX(20px);
  animation: sf-lb-cv-in-next var(--motion-page) var(--ease-book) forwards;
}

.sf-cv__img.is-in-prev {
  opacity: 0;
  transform: translateX(-20px);
  animation: sf-lb-cv-in-prev var(--motion-page) var(--ease-book) forwards;
}

.sf-cv__img.is-crossfade-out {
  opacity: 0;
  transform: none;
  transition: opacity 120ms ease;
}

.sf-cv__img.is-crossfade-in {
  opacity: 0;
  transform: none;
  animation: sf-lb-cv-fade-in 120ms ease forwards;
}

@keyframes sf-lb-cv-in-next {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes sf-lb-cv-in-prev {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes sf-lb-cv-fade-in {
  to { opacity: 1; }
}

.sf-cv__sheet {
  box-shadow: inset -10px 0 18px -14px color-mix(in srgb, var(--palette-brown, #2a1b14) 22%, transparent);
}

/* —— 06 Product picker: open from right —— */
.sf-picker {
  opacity: 0;
  transition: opacity 160ms var(--ease-book);
}

.sf-picker.is-open {
  opacity: 1;
}

.sf-picker__panel {
  transition:
    transform var(--motion-sheet) var(--ease-book),
    opacity var(--motion-sheet) var(--ease-book);
  box-shadow: -12px 0 28px color-mix(in srgb, var(--palette-brown, #2a1b14) 18%, transparent);
}

@media (min-width: 720px) {
  .sf-picker:not(.is-open) .sf-picker__panel {
    transform: translateX(32px);
    opacity: 0.92;
  }

  .sf-picker.is-open .sf-picker__panel {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (max-width: 719.98px) {
  .sf-picker:not(.is-open) .sf-picker__panel {
    transform: translateX(18px);
    opacity: 0.96;
  }

  .sf-picker.is-open .sf-picker__panel {
    transform: translateX(0);
    opacity: 1;
  }
}

/* —— 07 Price viewer: open appendix —— */
.sf-price-sheet {
  opacity: 0;
  transition: opacity var(--motion-component) var(--ease-book);
}

.sf-price-sheet.is-open {
  opacity: 1;
}

.sf-price-sheet__panel {
  transform: translateY(8px) scale(0.985);
  opacity: 0.96;
  transition:
    transform var(--motion-component) var(--ease-book),
    opacity var(--motion-component) var(--ease-book);
}

.sf-price-sheet.is-open .sf-price-sheet__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.sf-price-sheet.is-open .sf-price-sheet__head::after {
  content: none;
}

@keyframes sf-lb-rule-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* —— Brand story teaser reveal (TASK-1023, Living Book tokens) —— */
[data-story-teaser] .sf-story-teaser__rule {
  transform: scaleX(0);
  transition: transform var(--motion-section) var(--ease-book);
}

[data-story-teaser].is-revealed .sf-story-teaser__rule {
  transform: scaleX(1);
}

[data-story-teaser] .sf-story-teaser__frame {
  clip-path: inset(0 0 100% 0);
  transition: clip-path calc(var(--motion-section) + 80ms) var(--ease-book);
}

[data-story-teaser].is-revealed .sf-story-teaser__frame {
  clip-path: inset(0 0 0 0);
}

[data-story-teaser] [data-reveal-item] {
  transition-delay: 0ms;
}

[data-story-teaser].is-revealed [data-reveal-item]:nth-child(1) { transition-delay: 60ms; }
[data-story-teaser].is-revealed [data-reveal-item]:nth-child(2) { transition-delay: 120ms; }
[data-story-teaser].is-revealed [data-reveal-item]:nth-child(3) { transition-delay: 180ms; }
[data-story-teaser].is-revealed [data-reveal-item]:nth-child(4) { transition-delay: 240ms; }
[data-story-teaser].is-revealed [data-reveal-item]:nth-child(5) { transition-delay: 300ms; }
[data-story-teaser].is-revealed [data-reveal-item]:nth-child(6) { transition-delay: 360ms; }

/* —— 08 Checkout success bookmark —— */
.sf-checkout__success {
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  animation: sf-lb-success-in 480ms var(--ease-book) forwards;
}

.sf-checkout__success::before {
  content: "";
  position: absolute;
  top: -0.15rem;
  right: 0.75rem;
  width: 14px;
  height: 28px;
  background: var(--palette-red, #9e2f24);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  opacity: 0.92;
}

@keyframes sf-lb-success-in {
  to { opacity: 1; transform: translateY(0); }
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
  .sf-campaign-hero.is-book-cover .sf-campaign-hero__viewport,
  .sf-campaign-hero.is-book-opening .sf-campaign-hero__viewport,
  .sf-campaign-hero.is-book-ready .sf-campaign-hero__viewport {
    clip-path: none !important;
    transition: none !important;
  }

  .sf-campaign-hero.is-book-cover .sf-campaign-slide__copy,
  .sf-campaign-hero.is-book-cover .sf-hero__copy,
  .sf-campaign-hero.is-book-opening .sf-campaign-slide__copy,
  .sf-campaign-hero.is-book-opening .sf-hero__copy {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  [data-reveal-section] .sf-section-head,
  [data-reveal-section] .sf-section-head::after,
  [data-reveal-item],
  [data-story-teaser] .sf-story-teaser__rule,
  [data-story-teaser] .sf-story-teaser__frame {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .product-card--split,
  .product-card--split:hover,
  .product-card--split .product-card-media img,
  .sf-combo-card,
  .product-quick-add:active,
  .btn:active:not(:disabled) {
    transform: none !important;
    transition: none !important;
  }

  .sf-cart-badge.is-bump,
  [data-cart-count].is-bump {
    animation: none !important;
  }

  .sf-cv__img,
  .sf-cv__img.is-in-next,
  .sf-cv__img.is-in-prev {
    transform: none !important;
    animation: none !important;
    transition: opacity 120ms ease !important;
    filter: none;
  }

  .sf-picker,
  .sf-picker__panel,
  .sf-price-sheet,
  .sf-price-sheet__panel {
    transition: opacity 120ms ease !important;
    transform: none !important;
  }

  .sf-checkout__success {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .sf-checkout__success::before {
    display: none;
  }

  .sf-chapter-rail__bookmark,
  .sf-scroll-progress__fill {
    transition: none !important;
  }
}