/* ═══════════════════════════════════════════════════════════════
   MOTION — logo "nhãn giá treo", hệ 3D, reveal khi cuộn
   Đi cùng js/motion.js. Chỉ transform/opacity; không thư viện.

   Ngôn ngữ chung: vật thể treo — nhãn giá đung đưa quanh lỗ dây,
   tấm bảng giá lật xuống từ móc, card nghiêng theo tay.
   3D chỉ bật với chuột (pointer: fine). Tắt hết khi reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────── LOGO ───────────────────────── */

.logo { gap: 10px; }
.logo-mark { flex: none; overflow: visible; }
.logo-string {
    fill: none;
    stroke: var(--accent-line);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: logo-draw 500ms var(--ease) 100ms forwards;
}
.logo-tag {
    transform-box: view-box;
    transform-origin: 20px 14px; /* tâm lỗ dây — nhãn xoay quanh điểm treo */
    animation: logo-swing 1600ms cubic-bezier(.36, .07, .19, .97) 1100ms both; /* treo lên xong thì đung đưa 1 lần */
}
.logo-body { fill: var(--ink); stroke: var(--accent-line); stroke-width: 1; }
.logo-rule {
    fill: none;
    stroke: var(--accent-line);
    stroke-width: 0.9;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: logo-draw 900ms var(--ease) 350ms forwards;
}
.logo-t { fill: var(--accent-line); animation: logo-rise 500ms var(--ease) 750ms both; }
.logo:hover .logo-tag, .logo:focus-visible .logo-tag { animation: logo-swing 1400ms cubic-bezier(.36, .07, .19, .97) both; }

.logo-words { display: grid; line-height: 1; }
.logo-words .logo-text { line-height: 1.05; }
.logo-sub {
    margin-top: 3px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}
@media (max-width: 640px) { .logo-sub { display: none; } }

@keyframes logo-draw  { to { stroke-dashoffset: 0; } }
@keyframes logo-rise  { from { opacity: 0; transform: translateY(3px); } }
@keyframes logo-swing {
    0%   { transform: rotate(0); }
    18%  { transform: rotate(10deg); }
    38%  { transform: rotate(-7deg); }
    56%  { transform: rotate(4deg); }
    74%  { transform: rotate(-2deg); }
    88%  { transform: rotate(.8deg); }
    100% { transform: rotate(0); }
}

/* ───────────────────────── HERO ───────────────────────── */

/* Đèn rọi ấm theo con trỏ trên nền mực */
.hp-hero { position: relative; isolation: isolate; }
.hp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(520px circle at var(--mx, 72%) var(--my, 38%),
        color-mix(in srgb, var(--accent-line) 16%, transparent), transparent 70%);
    opacity: .9;
    transition: opacity var(--dur-slow) var(--ease);
    pointer-events: none;
}

/* Chữ vàng "rõ ràng": vệt sáng quét qua một lần sau khi chữ hiện */
.hp-hero-title .tbq-em {
    background: linear-gradient(100deg, var(--accent-text) 38%, #f3dcae 50%, var(--accent-text) 62%) 0 0 / 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: hp-shimmer 1800ms var(--ease) 1150ms both;
}
@keyframes hp-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Tấm bảng giá 3D: lật xuống từ "móc" rồi nghiêng theo tay */
.hp-hero-grid { perspective: 1400px; }
.hp-excerpt.hp-rise {
    position: relative;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
    /* Vào cảnh bằng thuộc tính `rotate`/`translate` riêng → không đè `transform` của hiệu ứng nghiêng */
    animation: hp-board-in 1100ms cubic-bezier(.2, .9, .25, 1.15) 380ms both;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 500ms var(--ease), box-shadow 500ms var(--ease);
    box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6);
}
.hp-excerpt.is-tilting { transition: transform 120ms linear, box-shadow 300ms var(--ease); box-shadow: 0 40px 80px -30px rgb(0 0 0 / .7); }
/* Các lớp nổi ở độ sâu khác nhau */
.hp-excerpt > .tbq-kicker   { transform: translateZ(34px); }
.hp-excerpt-list            { transform: translateZ(22px); transform-style: preserve-3d; }
.hp-excerpt-note            { transform: translateZ(12px); }
/* Vệt sáng lướt theo góc nghiêng */
.hp-excerpt::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 0%), rgb(255 240 210 / .10), transparent 60%);
    opacity: 0;
    transition: opacity 300ms var(--ease);
    pointer-events: none;
}
.hp-excerpt.is-tilting::after { opacity: 1; }
@keyframes hp-board-in {
    0%   { opacity: 0; rotate: x -38deg; translate: 0 -18px; }
    60%  { opacity: 1; }
    100% { opacity: 1; rotate: x 0deg; translate: 0 0; }
}

/* ───────────────────── BẢNG GIÁ / SỐ LIỆU / QUY TRÌNH ───────────────────── */

/* Dòng bảng giá chờ lộ diện khi cuộn tới (motion.js thêm/bỏ class) */
.hp-price-list.hp-await li { opacity: 0; }

/* Nút bước bật ra khi cuộn tới, nối nhịp với nét vàng */
@supports (animation-timeline: view()) {
    .hp-step::before {
        animation: hp-node linear both;
        animation-timeline: view();
        animation-range: entry 10% entry 90%;
    }
}
@keyframes hp-node { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

/* ───────────────────── CARD DỊCH VỤ: nghiêng 3D + vệt sáng ───────────────────── */

.product-card { position: relative; }
.product-card.is-tilting {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
    transition: transform 120ms linear, box-shadow 300ms var(--ease), border-color var(--dur-fast) var(--ease);
    box-shadow: 0 24px 44px -24px rgb(32 31 29 / .45);
    will-change: transform;
}
.product-card.is-settling { transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.product-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgb(255 255 255 / .38), transparent 55%);
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity 300ms var(--ease);
    pointer-events: none;
}
.product-card.is-tilting::after { opacity: 1; }
.product-card .product-image img {
    transition: transform 500ms var(--ease);
    /* Logo thẻ tự lật 1 vòng mỗi 8s, lệch nhịp theo vị trí thẻ để không lật cùng lúc */
    animation: pd-logo-flip 8s cubic-bezier(.45, 0, .2, 1) var(--flip-delay, 1s) infinite;
}
.product-card:nth-child(4n+2) .product-image img { --flip-delay: 3s; }
.product-card:nth-child(4n+3) .product-image img { --flip-delay: 5s; }
.product-card:nth-child(4n+4) .product-image img { --flip-delay: 7s; }
.product-card.is-tilting .product-image img { animation-play-state: paused; }
.product-card.is-tilting .product-image img {
    /* Logo trôi ngược hướng nghiêng → cảm giác nổi khỏi mặt card */
    transform: translate(calc(var(--ry, 0deg) / 1deg * -0.8px), calc(var(--rx, 0deg) / 1deg * 0.8px)) scale(1.06);
    transition: transform 120ms linear;
}

/* ───────────────────── TRANG CHI TIẾT ───────────────────── */

.pd-ico { flex: none; vertical-align: -3px; }
.delivery-line { display: inline-flex; align-items: center; gap: 8px; }

/* ① Khung ảnh 3D: nghiêng theo tay, logo nổi ra phía trước (preserve-3d thật —
   .main-image không có overflow:hidden nên chiều sâu không bị ép phẳng) */
.product-gallery { perspective: 1100px; }
.main-image {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 600ms var(--ease), box-shadow 600ms var(--ease), border-color var(--dur-fast) var(--ease);
}
.main-image img {
    transform: translateZ(46px);
    /* Nhấp nhô liên tục + tự lật 1 vòng mỗi 7s (rotate/translate riêng, không đè transform) */
    animation: pd-float 5s ease-in-out 1.2s infinite, pd-logo-flip 7s cubic-bezier(.45, 0, .2, 1) 2.4s infinite;
}
/* Bấm/chạm vào ảnh (motion.js): xoay nhanh 1 vòng và nảy nhẹ */
.main-image { cursor: pointer; }
.main-image img.pd-spin { animation: pd-logo-spin 850ms cubic-bezier(.3, 1.3, .5, 1) 1; }
.main-image.is-tilting { transition: transform 120ms linear, box-shadow 300ms var(--ease); border-color: var(--accent-line); box-shadow: 0 30px 50px -28px rgb(32 31 29 / .45); }
.main-image.is-tilting img { animation-play-state: paused; }
.main-image.is-tilting img.pd-spin { animation-play-state: running; } /* bấm lúc đang nghiêng vẫn xoay */
.main-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 0%), rgb(255 255 255 / .55), transparent 55%);
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity 300ms var(--ease);
    pointer-events: none;
}
.main-image.is-tilting::after { opacity: 1; }
@keyframes pd-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -8px; }
}
@keyframes pd-logo-flip {
    0%, 85% { rotate: y 0deg; }
    100%    { rotate: y 360deg; }
}
@keyframes pd-logo-spin {
    0%   { rotate: y 0deg; scale: 1; }
    45%  { scale: 1.08; }
    100% { rotate: y 360deg; scale: 1; }
}

/* ② Dàn cảnh khi mở trang (motion.js thêm .pd-enter mỗi lần render) */
.pd-enter .main-image        { animation: pd-flip-in 900ms cubic-bezier(.2, .9, .25, 1.1) both; }
.pd-enter .order-info-section{ animation: pd-rise 700ms var(--ease) 250ms both; }
.pd-enter .product-details h1 { animation: pd-rise 700ms var(--ease) 80ms both; }
.pd-enter .product-description,
.pd-enter .delivery-info-box,
.pd-enter .variant-label      { animation: pd-rise 600ms var(--ease) 180ms both; }
.pd-enter .variant-option     { animation: pd-slide 600ms var(--ease) calc(260ms + var(--i, 0) * 70ms) both; }
.pd-enter .product-tabs       { animation: pd-rise 700ms var(--ease) 500ms both; }
/* Vào cảnh bằng rotate/translate riêng → không đè transform nghiêng của .main-image */
@keyframes pd-flip-in { from { opacity: 0; rotate: y -24deg; translate: -24px 0; } to { opacity: 1; rotate: y 0deg; translate: 0 0; } }
@keyframes pd-rise    { from { opacity: 0; translate: 0 16px; } }
@keyframes pd-slide   { from { opacity: 0; translate: 28px 0; } }

/* ③ Gói dịch vụ: nhấc lên + vạch vàng; chọn → viền vàng tự vẽ quanh gói */
.variant-option {
    position: relative;
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
        translate var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.variant-option::before {
    content: "";
    position: absolute;
    left: -1px; top: 12%; bottom: 12%;
    width: 3px;
    background: var(--accent-line);
    border-radius: 2px;
    transform: scaleY(0);
    transition: transform var(--dur-base) var(--ease);
}
.variant-option:not(.variant-out-of-stock):hover { translate: 0 -2px; box-shadow: 0 12px 24px -18px rgb(32 31 29 / .5); }
.variant-option:not(.variant-out-of-stock):hover::before,
.variant-option.selected::before { transform: scaleY(1); }
/* Viền vàng "vẽ" từ trái sang phải khi vừa chọn */
.variant-option::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1.5px solid var(--accent-line);
    border-radius: inherit;
    clip-path: inset(0 100% 0 0);
    pointer-events: none;
}
.variant-option.selected::after { clip-path: inset(0 0 0 0); transition: clip-path 520ms var(--ease); }
.variant-option.selected { box-shadow: none; } /* viền vẽ ở ::after thay cho vòng box-shadow cũ → không bị viền đôi */
.variant-option.just-selected { animation: pd-select 480ms var(--ease); }
@keyframes pd-select { 30% { scale: 1.015; } 100% { scale: 1; } }
.variant-option.selected .variant-price-text { display: inline-block; animation: pd-pop 420ms var(--ease); }
@keyframes pd-pop { 40% { transform: scale(1.12); } }

/* Nhãn "Giá/tháng tốt nhất": vệt sáng quét qua định kỳ */
.cp-best { position: relative; overflow: hidden; }
.cp-best::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .75) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: pd-sheen 4.5s var(--ease) 1.5s infinite;
}
@keyframes pd-sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ④ Tổng tiền nảy lên khi đổi; nút −/+ có phản hồi nhấn */
#detailTotal { display: inline-block; transition: transform 300ms var(--ease), color var(--dur-fast) var(--ease); }
#detailTotal.cp-ticking { transform: scale(1.08); }
.qty-btn { transition: transform 120ms var(--ease), background-color var(--dur-fast) var(--ease); }
.qty-btn:active { transform: scale(.88); }
.qty-value.pd-bump { display: inline-block; animation: pd-bump 320ms var(--ease); }
@keyframes pd-bump { from { transform: translateY(-40%); opacity: 0; } }

/* Nút Zalo: vệt sáng lướt khi rê, icon nghiêng nhẹ */
.buy-now-row .buy-now-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.buy-now-row .buy-now-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--accent-line) 22%, transparent) 50%, transparent 65%);
    transform: translateX(-110%);
    transition: transform 700ms var(--ease);
    pointer-events: none;
}
.buy-now-row .buy-now-btn:hover::after { transform: translateX(110%); }
.buy-now-row .buy-now-btn:hover .pd-ico { animation: pd-wiggle 500ms var(--ease); }
@keyframes pd-wiggle { 25% { rotate: -12deg; } 60% { rotate: 8deg; } }

/* ⑤ Tab: thanh vàng trượt tới tab đang chọn (motion.js chèn .pd-tab-ink) */
.tab-buttons { position: relative; }
.tab-buttons.has-ink .tab-button.active { border-bottom-color: transparent; }
.pd-tab-ink {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 1px;
    background: var(--accent-line);
    transform-origin: 0 50%;
    transform: translateX(var(--x, 0)) scaleX(var(--w, 0));
    transition: transform 420ms cubic-bezier(.3, .8, .3, 1);
    pointer-events: none;
}

/* ───────────────────────── Reduced motion ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .logo-string, .logo-rule { animation: none; stroke-dashoffset: 0; }
    .logo-tag, .logo-t, .logo:hover .logo-tag, .logo:focus-visible .logo-tag { animation: none; }
    .hp-hero::before { display: none; }
    .hp-hero-title .tbq-em { animation: none; background: none; color: var(--accent-text); }
    .hp-excerpt.hp-rise { animation: none; transform: none; }
    .hp-price-list.hp-await li { opacity: 1; }
    .hp-step::before { animation: none; }
    .product-card.is-tilting, .product-card.is-tilting .product-image img { transform: none; }
    .product-card .product-image img { animation: none; }
    .product-card::after { display: none; }
    .main-image, .main-image img, .main-image img.pd-spin { transform: none; animation: none; }
    .main-image { cursor: auto; }
    .main-image::after { display: none; }
    .pd-enter .main-image, .pd-enter .order-info-section, .pd-enter .product-details h1,
    .pd-enter .product-description, .pd-enter .delivery-info-box, .pd-enter .variant-label,
    .pd-enter .variant-option, .pd-enter .product-tabs { animation: none; }
    .variant-option:hover { translate: none; }
    .variant-option.selected::after { transition: none; }
    .variant-option.just-selected, .variant-option.selected .variant-price-text,
    .cp-best::after, .qty-value.pd-bump, .buy-now-row .buy-now-btn:hover .pd-ico { animation: none; }
    .pd-tab-ink { transition: none; }
}