/* ============================================================
   Shooglis motion: "Linen" base + two "Unboxing" moments
   (shooglis-motion-handoff.md, approved by Jonas, Oct 2026)

   Loads after buttons.css. Only transform, opacity, clip-path and filter animate.
   Selectors are the real rebuild ones; where the brief named a guess, the mapping is noted.
   The tokens live here, not in qs-tokens.css: that file is generated from the kit and never edited.
   ============================================================ */

:root {
	/* durations */
	--m-fast: 120ms;   /* press feedback */
	--m-base: 220ms;   /* routine state change, hover reveals */
	--m-slow: 420ms;   /* layout change: accordion, drawer, menu */
	--m-enter: 600ms;  /* first-load entrance */
	--m-unbox: 900ms;  /* the two reveal moments */

	/* easings */
	--m-out: cubic-bezier(0.16, 1, 0.3, 1);       /* arrivals, hover, most things */
	--m-inout: cubic-bezier(0.77, 0, 0.175, 1);   /* moving while already visible */
	--m-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* drawer and sheet, iOS curve */
	--m-soft: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
	--m-pop: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
}

/* ---------- fixes to existing motion ---------- */
/* Hover zooms answered late on --ease-circ; ease-out responds at once. */
.qs-mtile__m img, .qs-tile img, .shg-pc__img { transition: transform 900ms var(--m-out); }
.qs-hdr__nav a, .qs-tlink, .qs-rail__arrow, .qs-mega li a { transition: opacity var(--m-base) var(--m-out); }

/* ---------- press feedback, everywhere ---------- */
/* (.qs-btn--commit, .shg-btn-2 and the card quick-add carry their own press in buttons.css) */
.qs-btn, .qs-add, .qs-icon-btn, .qs-rtab, .qs-chip, .shg-wl, .shg-qty-s button, .shg-dd, .shg-ask__chip {
	transition-property: transform, background-color, color, box-shadow, opacity;
	transition-duration: var(--m-fast), var(--m-base), var(--m-base), var(--m-base), var(--m-base);
	transition-timing-function: var(--m-out);
}
.qs-btn:active, .qs-add:active, .qs-icon-btn:active, .qs-rtab:active, .qs-chip:active,
.shg-wl:active, .shg-qty-s button:active, .shg-dd:active, .shg-ask__chip:active { transform: scale(.97); }

/* ---------- product cards ----------
   brief .qs-tile = the rail image tile; brief .shg-pc__img = our .shg-pc__t (the collection image box) */
.qs-tile, .shg-pc__t { transition: transform var(--m-slow) var(--m-soft), box-shadow var(--m-slow) var(--m-out); }
.qs-tile__add, .shg-pc__add {
	transform: translateY(8px);
	transition: opacity var(--m-base) var(--m-out), transform var(--m-slow) var(--m-soft), color .3s ease;
}
@media (hover: hover) and (pointer: fine) {
	.qs-card:hover .qs-tile, .shg-pc:hover .shg-pc__t { transform: translateY(-4px); box-shadow: 0 18px 30px -20px rgb(56 27 32 / .45); }
	.qs-card:hover .qs-tile img, .shg-pc:hover .shg-pc__img { transform: scale(1.04); }
	.qs-card:hover .qs-tile__add, .qs-card:focus-within .qs-tile__add,
	.shg-pc:hover .shg-pc__add, .shg-pc:focus-within .shg-pc__add { opacity: 1; transform: none; }
}
/* Touch: the quick add is always there, no hover needed, and a tap never leaves a card "hovered"
   (the kit and collection.css hovers are not gated to mice, so they are cancelled here). */
@media (hover: none) {
	.qs-tile__add { opacity: 1; transform: none; }
	.qs-card:hover .qs-tile img, .shg-pc:hover .shg-pc__img, .qs-mtile:hover .qs-mtile__m img, .qs-rc__item:hover .qs-rc__media img { transform: none; }
	.qs-rc__item:hover .qs-rc__media { box-shadow: none; }
	.shg-pc:hover .shg-pc__n { text-decoration: none; }
}

/* ---------- wishlist heart (picked: "ציור בקו"): the outline draws itself, then the fill comes in ---------- */
.shg-wl.is-draw path { stroke-dasharray: 1; animation: m-wl-draw 520ms var(--m-inout) both, m-wl-fill 260ms linear 420ms both; }
@keyframes m-wl-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes m-wl-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }

/* ---------- add to cart (picked: "מעוף לסל"): the photo copy motion.js flies to the bag ---------- */
.m-fly { position: fixed; z-index: 90; inline-size: 52px; block-size: 64px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 24px -10px rgb(56 27 32 / .5); pointer-events: none; will-change: transform; }
.m-fly img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ---------- rolling numbers (picked: "גלגל ספרות") ---------- */
.m-roll { overflow: hidden; }
.m-roll > span { display: inline-block; }
.shg-qty-s b { display: inline-block; }
.shg-qty { position: relative; }
.m-qov { position: absolute; display: grid; place-items: center; overflow: hidden; color: var(--ink); font-size: 16px; pointer-events: none; }
.m-qov > span { inline-size: 100%; text-align: center; }

/* ---------- free-shipping bar (picked: "מילוי רציף"): grows from the right, the RTL start ---------- */
.shg-prog i b { transform-origin: 100% 50%; transition: none; }

/* ---------- round 2 picks (20 Oct 2026) ---------- */
/* Add-ons price in the buy button rolls (shgRoll); the roll box sits on the text line. */
[data-shg-total] { display: inline-block; vertical-align: top; }
/* Switches ("קפיץ רך"): the knob moves by transform on a soft spring, not by its inset. */
.shg-sw::after { transition: transform 520ms var(--m-pop); }
.shg-sw.is-on::after { inset-inline-end: 2px; transform: translateX(16px); }
/* Accordions ("פלוס למינוס"): the plus's upright stroke turns flat and becomes a minus. */
svg.shg-pm { transform: none !important; }
.shg-pm__v { transform-box: fill-box; transform-origin: center; transition: transform 320ms var(--m-out); }
[aria-expanded="true"] > .shg-pm .shg-pm__v { transform: rotate(90deg); }
/* Drawer extras ("הכפתור מאשר"): the button turns Pale Sky and says it is in. */
.shg-chip-btn.m-added, .shg-chip-btn.m-added:hover { background: var(--pale-sky); color: var(--ink); box-shadow: none; }
.shg-hcard.m-added .shg-mini__add { background: var(--pale-sky); color: var(--ink); }
/* Thank you ("הסרט נפרם"): wrapping paper with a Pale Sky ribbon opens to both sides, then the mascot pops. */
.shg-ty__h.m-wrap { position: relative; }
.m-rbn { position: absolute; z-index: 2; inset: -20px -24px; overflow: hidden; border-radius: var(--r-mid, 18px); pointer-events: none; }
.m-rbn i { position: absolute; inset-block: 0; inline-size: 50%; background: var(--tile); animation: m-rbn-r 760ms var(--m-inout) 350ms forwards; }
.m-rbn i::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: calc(50% - 9px); block-size: 18px; background: var(--pale-sky); }
.m-rbn i::after { content: ""; position: absolute; inset-block: 0; inline-size: 9px; background: var(--pale-sky); }
.m-rbn i:first-child { right: 0; }
.m-rbn i:first-child::after { left: 0; }
.m-rbn i:last-child { left: 0; animation-name: m-rbn-l; }
.m-rbn i:last-child::after { right: 0; }
@keyframes m-rbn-r { to { transform: translateX(105%); visibility: hidden; } }
@keyframes m-rbn-l { to { transform: translateX(-105%); visibility: hidden; } }
.m-wrap .shg-ty__m { animation: m-ty-pop 560ms var(--m-pop) 700ms both; }
@keyframes m-ty-pop { from { opacity: 0; transform: scale(.6); } }

/* ---------- cart count ---------- */
.qs-cart-count { transition: transform var(--m-slow) var(--m-pop); }
.qs-cart-count.is-pop { transform: scale(1.25); }

/* ---------- toasts: created once (newsletter, contact), so they spring in once ---------- */
.shg-toast { animation: m-toast-in var(--m-slow) var(--m-pop) both; }
@keyframes m-toast-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } }

/* ---------- rail tabs: one sliding underline (motion.js adds .m-has-ul and the indicator) ---------- */
.qs-rtabs.m-has-ul { position: relative; }
.qs-rtabs.m-has-ul .qs-rtab[aria-selected="true"] { box-shadow: none; }
.m-tabs-ul {
	position: absolute; left: 0; top: 0; block-size: 1.5px; inline-size: 0;
	background: var(--ink); pointer-events: none;
	transition: transform var(--m-slow) var(--m-soft), inline-size var(--m-slow) var(--m-soft);
}

/* ---------- accordions (FAQ, product accordions) ----------
   The panels open with the hidden attribute and can hold several paragraphs, so the brief's grid trick
   would mean new markup. The opening content rises a few pixels instead; no height is animated. */
.shg-faq__a:not([hidden]), .shg-fq__a:not([hidden]), .shg-pacc__b:not([hidden]) { animation: m-acc-in var(--m-slow) var(--m-soft); }
@keyframes m-acc-in { from { opacity: 0; transform: translateY(-6px); } }
.shg-faq__q svg, .shg-fq__q svg, .shg-pacc__h svg { transition: transform var(--m-slow) var(--m-out); }

/* ---------- mega menu (desktop): transitions on .is-open, so a fast close reverses smoothly ---------- */
@media (min-width: 750px) {
	.qs-mega {
		display: grid; visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; animation: none;
		transition: opacity 180ms var(--m-out), transform 180ms var(--m-out), visibility 0s 180ms;
	}
	.qs-mega.is-open {
		visibility: visible; opacity: 1; transform: none; pointer-events: auto;
		transition: opacity var(--m-base) var(--m-out), transform var(--m-slow) var(--m-soft), visibility 0s;
	}
	/* columns settle a beat after the panel */
	.qs-mega > * { transition: opacity var(--m-base) var(--m-out) 60ms, transform var(--m-slow) var(--m-soft) 60ms; }
	.qs-mega:not(.is-open) > * { opacity: 0; transform: translateY(-4px); transition-delay: 0s; }
	.qs-mega-scrim { display: block; visibility: hidden; opacity: 0; transition: opacity 180ms var(--m-out), visibility 0s 180ms; }
	.qs-mega-scrim.is-open { visibility: visible; opacity: 1; transition: opacity var(--m-base) var(--m-out), visibility 0s; }
}

/* ---------- cart drawer: glides in from its edge on the iOS curve; site.js keeps it in the page
   until the close has played (.is-open on, then off). Lines rise in after it, 60ms apart. ---------- */
.shg-drw__pnl { animation: none; transform: translateX(-100%); transition: transform 260ms var(--m-drawer); }
[dir="ltr"] .shg-drw__pnl { transform: translateX(100%); }
.shg-drw__scr { animation: none; opacity: 0; transition: opacity 260ms var(--m-out); }
.shg-drw.is-open .shg-drw__pnl { transform: none; transition: transform 520ms var(--m-drawer); }
.shg-drw.is-open .shg-drw__scr { opacity: 1; transition: opacity var(--m-slow) var(--m-out); }
.shg-drw .shg-ln { transition: opacity var(--m-slow) var(--m-out), transform var(--m-enter) var(--m-soft); }
.shg-drw:not(.is-open) .shg-ln { opacity: 0; transform: translateY(10px); transition: none; }
.shg-drw.is-open .shg-ln:nth-child(1) { transition-delay: 120ms; }
.shg-drw.is-open .shg-ln:nth-child(2) { transition-delay: 180ms; }
.shg-drw.is-open .shg-ln:nth-child(3) { transition-delay: 240ms; }
.shg-drw.is-open .shg-ln:nth-child(4) { transition-delay: 300ms; }
.shg-drw.is-open .shg-ln:nth-child(5) { transition-delay: 360ms; }
.shg-drw.is-open .shg-ln:nth-child(n+6) { transition-delay: 420ms; }

/* ---------- phone menu sheet: slides from its edge, closes faster than it opens ---------- */
@media (max-width: 749px) {
	.qs-sheet, .qs-sheet:not(.is-closed) { display: flex; animation: none; transform: none; transition: transform 520ms var(--m-drawer), visibility 0s; }
	.qs-sheet.is-closed { visibility: hidden; transform: translateX(100%); transition: transform 260ms var(--m-drawer), visibility 0s 260ms; }
	[dir="ltr"] .qs-sheet.is-closed { transform: translateX(-100%); }
}

/* ============================================================
   First-load entrance (above the fold only). Pure CSS from the first paint: nothing waits
   for a script, so the main text and the hero image count as painted at once (LCP; audit, 20 Oct).
   ============================================================ */
.m-rise { animation: m-rise-in var(--m-enter) var(--m-soft) both; animation-delay: calc(80ms + var(--i, 0) * 70ms); }
@keyframes m-rise-in { from { opacity: .01; transform: translateY(14px); } } /* .01, not 0: looks the same, and Chrome counts the text as painted at once (LCP) */

/* cards in rails and grids rise when first seen (motion.js adds .m-card, then .is-in) */
.m-card { opacity: 0; transform: translateY(12px); }
.m-card.is-in {
	opacity: 1; transform: none;
	transition: opacity 500ms var(--m-out) var(--m-d, 0ms), transform var(--m-enter) var(--m-soft) var(--m-d, 0ms);
}

/* ============================================================
   Unboxing: the two reveal moments
   ============================================================ */
/* 1. Hero image on first load: lifts open from the bottom, once. */
.qs-hero .m-unbox { animation: m-unbox-in var(--m-unbox) var(--m-out) 150ms both; }
@keyframes m-unbox-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
/* 2. Product gallery: motion.js shgUnbox() on the slide a thumbnail or arrow brings in. */

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0s !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
	.m-rise, .m-card, .m-unbox, .qs-hero .m-unbox { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.shg-wl.is-draw path { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
	.m-rbn { display: none; }
	.m-wrap .shg-ty__m { animation: none; }
	.shg-sw::after, .shg-pm__v { transition: none; }
}