/* ===== Phase 4: UI Polish & Visual Enhancements ===== */

/* --- A4: Hero Glow Effect --- */
.section__slider .text-slide::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(121, 74, 255, 0.15) 0%,
    rgba(121, 74, 255, 0.05) 40%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  animation: hero-glow-pulse 4s ease-in-out infinite;
}

@keyframes hero-glow-pulse {
  0%,
  100% {
    opacity: 0.6;
    transform: translateX(-50%) scale(1);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.1);
  }
}

/* --- A2: Hero Top Badges Container --- */
.top-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

/* --- B1: Section Fade-In on Scroll --- */
.phase4-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.phase4-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.phase4-reveal.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.phase4-reveal.stagger-children.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.phase4-reveal.stagger-children.is-visible > *:nth-child(1) {
  transition-delay: 0.05s;
}

.phase4-reveal.stagger-children.is-visible > *:nth-child(2) {
  transition-delay: 0.1s;
}

.phase4-reveal.stagger-children.is-visible > *:nth-child(3) {
  transition-delay: 0.15s;
}

.phase4-reveal.stagger-children.is-visible > *:nth-child(4) {
  transition-delay: 0.2s;
}

.phase4-reveal.stagger-children.is-visible > *:nth-child(5) {
  transition-delay: 0.25s;
}

/* --- B3: Demo Thumbnail Hover effect reverted to original (zoom) --- */

/* Fix for Trust Badge counter layout shift */
.trust-badge__number span {
  display: inline-block;
  min-width: 50px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- B4: Bento Card Hover Glow --- */
.features-demo,
.box-update,
.box-speed,
.help-center {
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.3s ease;
}

.features-demo:hover,
.box-update:hover {
  border-color: rgba(121, 74, 255, 0.4) !important;
  box-shadow:
    0 0 25px rgba(121, 74, 255, 0.15),
    0 0 50px rgba(121, 74, 255, 0.05);
  transform: translateY(-2px);
}

.box-speed:hover {
  border-color: rgba(55, 221, 158, 0.4) !important;
  box-shadow:
    0 0 25px rgba(55, 221, 158, 0.15),
    0 0 50px rgba(55, 221, 158, 0.05);
  transform: translateY(-2px);
}

.help-center:hover {
  border-color: rgba(121, 74, 255, 0.4) !important;
  box-shadow: 0 0 20px rgba(121, 74, 255, 0.12);
  transform: translateY(-3px);
}

/* --- B5: Hero Parallax Layer --- */
.banner-slider picture {
  transition: transform 0.1s linear;
  will-change: transform;
}

/* --- C2: Mini CTA Bar #2 (after Features Section) --- */
.mini-cta-bar--features {
  margin-top: -1px;
}

/* --- D1: Contrast Fixes — WCAG AA (4.5:1 minimum) --- */
/* Secondary text on dark backgrounds: increase from ~0.5 to ~0.7 opacity */
.section-description {
  color: rgba(255, 255, 255, 0.75) !important;
}

.visitor-box__description {
  color: rgba(255, 255, 255, 0.7);
}

/* Body text color enhancement */
.footer-trust__item,
.trust-badge__label,
.mini-cta-bar__meta {
  color: rgba(255, 255, 255, 0.7);
}

/* --- D2: Touch Targets — Minimum 44px (Fitts' Law) --- */
.btn-primary,
.btn-outline,
.btn-demo,
.mini-cta-bar__btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu-content a,
.template-tab li {
  display: inline-flex;
  align-items: center;
}

/* Mobile touch targets */
@media (max-width: 767px) {
  .menu-bottom-mobile li a {
    min-height: 44px;
    min-width: 44px;
  }

  .filter-tab {
    min-height: 40px;
    padding: 0.6rem 1.2rem;
  }
}

/* --- D3: Marquee Speed Reduction (30% slower) --- */
.section__scroll-button .flex {
  animation-duration: 35s !important;
}

/* --- D5: Focus States — Keyboard Navigation --- */
*:focus-visible {
  outline: 2px solid rgba(121, 74, 255, 0.8);
  outline-offset: 3px;
  border-radius: 4px;
}

.btn-primary:focus-visible {
  outline-color: rgba(121, 74, 255, 1);
  box-shadow: 0 0 0 4px rgba(121, 74, 255, 0.25);
}

.btn-outline:focus-visible {
  outline-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}

/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* --- Smooth scrolling for entire page --- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* --- Trust badge glassmorphism enhancement --- */
.trust-badge {
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
}

/* --- Progress circle glow for speed section --- */
.progress-circle {
  filter: drop-shadow(0 0 15px rgba(55, 221, 158, 0.3));
  transition: filter 0.3s ease;
}

.box-speed:hover .progress-circle {
  filter: drop-shadow(0 0 25px rgba(55, 221, 158, 0.5));
}

/* --- Enhanced Demo Card hover effects --- */
.theme-demo {
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.theme-demo:hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(121, 74, 255, 0.1);
  border-color: rgba(121, 74, 255, 0.3) !important;
}

/* --- Visitor box (Savings section) hover effect --- */
.visitor-box__wrapper {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease;
}

.visitor-box__wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* --- Mobile-specific refinements --- */
@media (max-width: 767px) {
  /* Reduce glow effect on mobile for performance */
  .section__slider .text-slide::before {
    width: 300px;
    height: 300px;
  }

  /* Disable demo auto-scroll on mobile (touch devices) */
  .theme-demo:hover .theme-image img,
  .theme-demo:hover .theme-image picture {
    transform: none;
  }

  /* Reduce hover effects for touch */
  .features-demo:hover,
  .box-update:hover,
  .box-speed:hover,
  .help-center:hover,
  .theme-demo:hover {
    transform: none;
  }

  /* Mini CTA bar stack vertically */
  .mini-cta-bar .container {
    flex-direction: column;
    gap: 1rem;
  }
}

/* --- Reduced motion accessibility --- */
@media (prefers-reduced-motion: reduce) {
  .section__slider .text-slide::before {
    animation: none;
  }

  .phase4-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .theme-image img,
  .theme-image picture {
    transition: none;
  }

  .visitor-box__wrapper,
  .features-demo,
  .box-update,
  .box-speed,
  .help-center,
  .theme-demo {
    transition: none;
  }
}

/* ================================================================
   PHASE 5: UI/UX POLISH — T1~T7
   Nguyên tắc: Chỉ polish visual/animation, KHÔNG thay đổi cấu trúc
   ================================================================ */

/* === T1: Hero Premium — CTA spotlight, trust badge depth ========= */

/* Hero glow tăng cường — thêm layer thứ 2 màu accent xanh */
.section__slider .text-slide::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 30%;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(55, 221, 158, 0.07) 0%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  animation: hero-glow-pulse 6s ease-in-out infinite reverse;
}

/* Active press — btn-primary */
.btn-primary:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 8px rgba(121, 74, 255, 0.2);
  animation: none;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

/* btn-outline — border glow + lift */
.btn-outline {
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease !important;
}

.btn-outline:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 16px rgba(121, 74, 255, 0.2),
    0 0 0 1px rgba(121, 74, 255, 0.3);
}

.btn-outline:active {
  transform: translateY(0) scale(0.98);
  transition: transform 0.1s ease;
}

/* btn-demo (gradient border button) — pulse glow */
.btn-demo {
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease !important;
}

.btn-demo:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 24px rgba(121, 74, 255, 0.3);
}

/* Trust badges hero — nổi bật hơn */
.trust-badge {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.trust-badge:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 20px rgba(121, 74, 255, 0.2);
}

/* badge v3.0 pulse glow mạnh hơn */
.version-badge {
  animation: v3-glow 1.5s ease-in-out infinite;
}

@keyframes v3-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(55, 221, 158, 0);
  }
  50% {
    box-shadow: 0 0 12px 4px rgba(55, 221, 158, 0.35);
  }
}

/* === T3: Demo Card Polish — hover glow + label nổi bật =========== */

/* Demo card hover nâng cấp — thêm inner glow */
.theme-demo:hover {
  transform: translateY(-6px);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(121, 74, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border-color: rgba(121, 74, 255, 0.35) !important;
}

/* === T4: Scroll Animation xịn hơn — cinematic reveal ============ */

/* Thay thế slide đơn giản bằng slide + scale cinematic */
.phase4-reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.phase4-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Direction variants — từ trái/phải */
.phase4-reveal--left {
  opacity: 0;
  transform: translateX(-30px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.phase4-reveal--right {
  opacity: 0;
  transform: translateX(30px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.phase4-reveal--left.is-visible,
.phase4-reveal--right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger children — delay dài hơn cho cảm giác rõ hơn */
.phase4-reveal.stagger-children.is-visible > *:nth-child(1) {
  transition-delay: 0.08s;
}
.phase4-reveal.stagger-children.is-visible > *:nth-child(2) {
  transition-delay: 0.16s;
}
.phase4-reveal.stagger-children.is-visible > *:nth-child(3) {
  transition-delay: 0.24s;
}
.phase4-reveal.stagger-children.is-visible > *:nth-child(4) {
  transition-delay: 0.32s;
}
.phase4-reveal.stagger-children.is-visible > *:nth-child(5) {
  transition-delay: 0.4s;
}
.phase4-reveal.stagger-children.is-visible > *:nth-child(6) {
  transition-delay: 0.48s;
}

/* === T5: Feature Card Visual — hover glow + icon animation ======= */

/* Feature highlight card hover */
.features-demo {
  position: relative;
  overflow: hidden;
}

.features-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(121, 74, 255, 0.08) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.features-demo:hover::before {
  opacity: 1;
}

/* Icon animate khi card vào viewport */
.features-demo.is-visible .bls-icon,
.features-demo.is-visible img[class*="icon"],
.features-demo.is-visible .icon {
  animation: icon-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes icon-pop-in {
  from {
    opacity: 0;
    transform: scale(0.7) rotate(-8deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Help center card tăng depth */
.help-center {
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.3s ease;
}

.help-center:hover {
  border-color: rgba(55, 221, 158, 0.35) !important;
  box-shadow:
    0 0 30px rgba(55, 221, 158, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.25);
  transform: translateY(-3px);
}

/* === T6: Floating Buttons Fix — sticky CTA + back-to-top ========= */

/* Đảm bảo không chồng nhau */
.btn-back-to-top,
[class*="back-to-top"],
#back-to-top {
  bottom: 90px !important; /* đẩy lên trên sticky CTA */
  right: 20px !important;
  z-index: 998;
}

/* Sticky CTA ở dưới cùng */
.sticky-cta-btn,
[class*="sticky-cta"],
#sticky-cta {
  bottom: 20px !important;
  right: 20px !important;
  z-index: 999;
}

/* Polish hiệu ứng hai nút */
.btn-back-to-top:hover,
[class*="back-to-top"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* Mobile — thu gọn sticky CTA hơn */
@media (max-width: 767px) {
  .btn-back-to-top,
  [class*="back-to-top"],
  #back-to-top {
    bottom: 80px !important;
    right: 16px !important;
  }

  .sticky-cta-btn,
  [class*="sticky-cta"],
  #sticky-cta {
    bottom: 16px !important;
    right: 16px !important;
  }
}

/* === T7: Contrast + Mobile — text readability + spacing ========== */

/* Tăng contrast text phụ trên nền tối */
.features-demo p,
.box-update p,
.help-center p,
.section-description,
.feature-card__desc {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Heading nhỏ trong feature section */
.features-demo h3,
.features-demo h4,
.box-update h3,
.help-center h3 {
  color: rgba(255, 255, 255, 0.95);
}

/* Section headings tăng readable */
.section__title,
.section-heading {
  letter-spacing: -0.02em;
}

/* Mobile — tăng spacing + readability */
@media (max-width: 767px) {
  /* Tăng line-height cho dễ đọc trên màn nhỏ */
  p,
  li {
    line-height: 1.7;
  }

  /* Padding section tăng nhẹ trên mobile */
  .section__template-libraries,
  .section__store,
  .section__speed {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* Demo grid — khoảng cách card */
  .theme-demo {
    margin-bottom: 12px;
  }

  /* Giảm font size h2 trên mobile nhỏ */
  @media (max-width: 480px) {
    .section__title {
      font-size: clamp(1.6rem, 6vw, 2.2rem);
    }
  }
}

/* Header button — ẩn giá trên mobile/tablet */
@media (max-width: 991px) {
  .site-header .btn-price {
    display: none;
  }
}

/* Reduced motion — tắt hết animation T1-T7 */
@media (prefers-reduced-motion: reduce) {
  .banner-slider .btn-primary::after,
  .theme-demo .theme-image::after,
  .section__slider .text-slide::after {
    display: none;
  }

  .version-badge {
    animation: none;
    box-shadow: none;
  }

  .trust-badge:hover {
    transform: none;
  }

  .phase4-reveal--left,
  .phase4-reveal--right {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .features-demo.is-visible .bls-icon,
  .features-demo.is-visible img[class*="icon"],
  .features-demo.is-visible .icon {
    animation: none;
  }
}