/* ==========================================================================
   KRVE Motion — animasi ringan (transform/opacity saja, tanpa library)
   Aktif hanya bila JS menambahkan .krve-motion di <html>; tanpa JS / dengan
   prefers-reduced-motion semua konten tampil normal tanpa animasi.
   ========================================================================== */

:root {
	--krve-spring: cubic-bezier(.2, .9, .25, 1.15);
	--krve-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Scroll reveal umum ---------- */
.krve-motion [data-krve-reveal] {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition: opacity .7s var(--krve-out), transform .8s var(--krve-out);
	transition-delay: calc(var(--krve-i, 0) * 80ms);
}
.krve-motion [data-krve-reveal].is-in { opacity: 1; transform: none; }
.krve-motion [data-krve-reveal="scale"] { transform: scale(.94); }
.krve-motion [data-krve-reveal="scale"].is-in { transform: none; }

/* ---------- HERO ---------- */
/* Judul: kata demi kata naik dari balik "masker". */
.krve-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.krve-w > span { display: inline-block; }
.krve-motion .krve-hero .krve-w > span {
	transform: translate3d(0, 105%, 0);
	animation: krve-word-up .9s var(--krve-out) forwards;
	animation-delay: calc(120ms + var(--krve-i, 0) * 70ms);
}
@keyframes krve-word-up { to { transform: none; } }

/* Coretan tangan di bawah kata italic ("shelf."). */
.krve-scribble-wrap { position: relative; display: inline-block; }
.krve-scribble {
	position: absolute; left: -4%; right: -6%; bottom: -.12em; width: 110%; height: .32em;
	overflow: visible; pointer-events: none;
}
.krve-scribble path {
	fill: none; stroke: var(--krve-leaf); stroke-width: 7; stroke-linecap: round;
	stroke-dasharray: 1; stroke-dashoffset: 1;
}
.krve-motion .krve-scribble path { animation: krve-draw 1s var(--krve-out) forwards; animation-delay: 1.05s; }
html:not(.krve-motion) .krve-scribble path { stroke-dashoffset: 0; }
@keyframes krve-draw { to { stroke-dashoffset: 0; } }

/* Teks pendukung, tombol & chip hero muncul berurutan. */
.krve-motion .krve-hero .krve-lead,
.krve-motion .krve-hero .krve-buttons,
.krve-motion .krve-hero .krve-chips-list li {
	opacity: 0; transform: translate3d(0, 14px, 0);
	animation: krve-fade-up .7s var(--krve-out) forwards;
}
.krve-motion .krve-hero .krve-lead { animation-delay: .55s; }
.krve-motion .krve-hero .krve-buttons { animation-delay: .7s; }
.krve-motion .krve-hero .krve-chips-list li { animation-delay: calc(.85s + var(--krve-i, 0) * 90ms); }
@keyframes krve-fade-up { to { opacity: 1; transform: none; } }

/* Foto hero: terbuka dari bawah (clip-path) + zoom pelan ke posisi. */
.krve-motion .krve-hero .krve-hero__img {
	clip-path: inset(100% 0 0 0 round var(--krve-radius));
	animation: krve-clip-up 1.1s var(--krve-out) .15s forwards;
}
.krve-motion .krve-hero .krve-hero__img img,
.krve-motion .krve-hero .krve-hero__video { transform: scale(1.12); animation: krve-settle 1.6s var(--krve-out) .15s forwards; }
@keyframes krve-clip-up { to { clip-path: inset(0 0 0 0 round var(--krve-radius)); } }
@keyframes krve-settle { to { transform: scale(1); } }
.krve-hero__img { will-change: transform; }

/* Stempel "Dibuat per batch" yang berputar pelan di sudut foto hero. */
.krve-hero__media { position: relative; }
.krve-stamp {
	position: absolute; right: 14px; top: 14px; width: 92px; height: 92px; border-radius: 50%;
	background: var(--krve-leaf); color: var(--krve-forest); display: grid; place-items: center;
	box-shadow: 0 8px 24px rgba(31, 58, 44, .18); z-index: 2; pointer-events: none;
}
.krve-stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: krve-spin 18s linear infinite; }
.krve-stamp text { font: 700 8px/1 var(--krve-sans); letter-spacing: .12em; fill: var(--krve-forest); text-transform: uppercase; }
.krve-stamp b { font-family: var(--krve-serif); font-size: 26px; line-height: 1; }
.krve-motion .krve-stamp { opacity: 0; transform: scale(.4) rotate(-40deg); animation: krve-pop .8s var(--krve-spring) 1.2s forwards; }
@keyframes krve-spin { to { transform: rotate(360deg); } }
@keyframes krve-pop { to { opacity: 1; transform: none; } }
@media (min-width: 900px) { .krve-stamp { width: 118px; height: 118px; right: -18px; top: 28px; } .krve-stamp b { font-size: 32px; } }

/* ---------- Ticker bahan (marquee) ---------- */
.krve-ticker {
	--krve-ticker-speed: 38s;
	overflow: hidden; background: var(--krve-forest); color: var(--krve-cream);
	padding: 14px 0 !important; margin: 0 !important; max-width: none !important; width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.krve-ticker__track { display: flex; width: max-content; animation: krve-marquee var(--krve-ticker-speed) linear infinite; }
.krve-ticker:hover .krve-ticker__track { animation-play-state: paused; }
.krve-ticker__item {
	display: inline-flex; align-items: center; gap: 18px; padding: 0 18px; white-space: nowrap;
	font-family: var(--krve-serif); font-size: clamp(18px, 3.4vw, 26px); font-weight: 500;
}
.krve-ticker__item:nth-child(even) { font-style: italic; color: var(--krve-leaf); }
.krve-ticker__item::after { content: ""; width: 9px; height: 9px; background: var(--krve-leaf); border-radius: 2px; transform: rotate(45deg); }
@keyframes krve-marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Kartu produk ---------- */
.krve-card { transition: transform .45s var(--krve-out), box-shadow .45s var(--krve-out); }
@media (hover: hover) {
	.krve-card:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(31, 58, 44, .05), 0 22px 44px rgba(31, 58, 44, .12); }
	.krve-card__media .krve-card__img + .krve-card__img--alt { opacity: 0; }
}
/* Foto kedua (galeri) muncul saat hover — ala "wrapped → unwrapped" Perfect Bar. */
.krve-card__img--alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--krve-out), transform .6s var(--krve-out); }
@media (hover: hover) { .krve-card:hover .krve-card__img--alt { opacity: 1; } }

/* Tombol: tekan memantul, "Ditambahkan" berubah centang. */
.krve-root .krve-btn { transition: background-color .2s, transform .25s var(--krve-spring), box-shadow .25s; }
@media (hover: hover) { .krve-root .krve-btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(31, 58, 44, .18); } }
.krve-root .krve-btn.is-added { --kb-bg: var(--krve-leaf); --kb-fg: var(--krve-forest); }

/* Titik terbang ke bar Daftar Pesanan. */
.krve-fly {
	position: fixed; z-index: 100001; width: 18px; height: 18px; border-radius: 6px; background: var(--krve-leaf);
	box-shadow: 0 0 0 4px rgba(168, 198, 108, .35); pointer-events: none; left: 0; top: 0;
}
.krve-orderbar.is-bump .krve-orderbar__btn { animation: krve-bump .5s var(--krve-spring); }
.krve-orderbar.is-bump .krve-orderbar__count { animation: krve-bump .5s var(--krve-spring) .05s; }
@keyframes krve-bump { 40% { transform: scale(1.06); } 100% { transform: none; } }

/* Tombol WA melayang: denyut halus berkala. */
.krve-fab::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--krve-wa);
	animation: krve-ring 6s var(--krve-out) 3s infinite; opacity: 0;
}
@keyframes krve-ring { 0% { transform: scale(1); opacity: .7; } 25%, 100% { transform: scale(1.7); opacity: 0; } }

/* ---------- Countdown: angka bergeser saat berubah ---------- */
.krve-countdown b.is-tick { animation: krve-tick .5s var(--krve-out); }
@keyframes krve-tick { 0% { transform: translateY(-40%); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- Cara Kerja: garis jadwal tergambar ---------- */
.krve-motion .krve-timeline::before { transform: scaleY(0); transform-origin: top; transition: transform 1.4s var(--krve-out) .2s; }
.krve-motion .krve-timeline.is-in::before { transform: scaleY(1); }
.krve-motion .krve-timeline li::before { transform: scale(0); transition: transform .5s var(--krve-spring); transition-delay: calc(.3s + var(--krve-i, 0) * 280ms); }
.krve-motion .krve-timeline.is-in li::before { transform: none; }
.krve-motion .krve-timeline li { opacity: 0; transform: translateX(-10px); transition: opacity .6s var(--krve-out), transform .6s var(--krve-out); transition-delay: calc(.35s + var(--krve-i, 0) * 280ms); }
.krve-motion .krve-timeline.is-in li { opacity: 1; transform: none; }

/* Angka "<7" berhitung mundur dari 30. */
.krve-fresh__num { font-variant-numeric: tabular-nums; }

/* ---------- Cerita Kami: foto terbuka menyamping ---------- */
.krve-motion .krve-story .krve-hero__img { clip-path: inset(0 100% 0 0 round var(--krve-radius)); transition: clip-path 1.2s var(--krve-out); }
.krve-motion .krve-story .krve-hero__img.is-in { clip-path: inset(0 0 0 0 round var(--krve-radius)); }
.krve-motion .krve-quote { border-left-color: transparent !important; transition: border-color .6s .6s; }
.krve-motion .krve-quote.is-in { border-left-color: var(--krve-cocoa) !important; }

/* ---------- FAQ: buka-tutup halus ---------- */
.krve-faq .wp-block-details { interpolate-size: allow-keywords; }
.krve-faq .wp-block-details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--krve-out), content-visibility .4s allow-discrete; }
.krve-faq .wp-block-details[open]::details-content { block-size: auto; }
.krve-faq .wp-block-details summary { transition: color .2s; }
@media (hover: hover) { .krve-faq .wp-block-details summary:hover { color: var(--krve-cocoa); } }

/* ---------- Pemilih bundle: angka "pop" ---------- */
.krve-pick [data-krve-pick-qty].is-pop { animation: krve-bump .35s var(--krve-spring); }

/* ---------- Hormati preferensi pengguna ---------- */
@media (prefers-reduced-motion: reduce) {
	.krve-ticker__track, .krve-stamp svg, .krve-fab::before { animation: none !important; }
	.krve-ticker__track { flex-wrap: wrap; width: auto; justify-content: center; }
	.krve-ticker__item:nth-child(n+9) { display: none; }
}
.krve-motion .krve-hero .krve-display:not([data-krve-split]) { opacity: 0; }
/* Elemen animasi (ticker, stempel, kartu terangkat) tidak boleh memicu scroll horizontal di HP. */
html, body { overflow-x: clip; }