/* The gift helper's wait (shop/_advisor-wait): a deck of real products under a golden lens, or the wizard
   (theme.advisor_animation = wizard). For every layout: the colours come from the store's own tokens. */
.gift-wait { --gw-ink: var(--plum, var(--night-2, #241b5e)); --gw-accent: var(--rose, var(--primary, #6a4bd8)); --gw-muted: var(--muted, #6e6a8a);
  --gw-bg: var(--paper, var(--bg, #faf5ee)); --gw-head: var(--font-head, Georgia, serif); }
/* ---------- Gift helper: a little Magica magic (gold dust, stars, a golden lens) while the answer is on its way ---------- */
.gift-wait { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; overflow: hidden;
  background: radial-gradient(60% 45% at 50% 38%, #fff8ec, transparent 70%), radial-gradient(50% 40% at 18% 80%, color-mix(in srgb, var(--gw-accent) 7%, transparent), transparent 70%),
    radial-gradient(50% 40% at 85% 15%, rgba(226, 182, 92, .14), transparent 70%), var(--gw-bg);
  animation: gw-in .35s ease-out; }
.gift-wait[hidden] { display: none; }
@keyframes gw-in { from { opacity: 0; } }
/* stars: a fixed field that twinkles as a whole */
.gw-sky { position: absolute; inset: -10%; pointer-events: none; opacity: .9; animation: gw-twinkle 3s ease-in-out infinite alternate;
  background-image: radial-gradient(1.5px 1.5px at 12% 18%, #d9a647 50%, transparent 51%), radial-gradient(1px 1px at 28% 72%, #d9a647 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 12%, var(--gw-accent) 50%, transparent 51%), radial-gradient(1px 1px at 63% 32%, #d9a647 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 64%, #d9a647 50%, transparent 51%), radial-gradient(2px 2px at 88% 22%, var(--gw-accent) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 86%, #d9a647 50%, transparent 51%), radial-gradient(1.5px 1.5px at 52% 88%, #d9a647 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 82%, #d9a647 50%, transparent 51%), radial-gradient(1px 1px at 36% 40%, #d9a647 50%, transparent 51%);
  background-size: 420px 420px; }
@keyframes gw-twinkle { from { opacity: .35; } to { opacity: .8; } }
/* gold dust rising slowly */
.gw-dust { position: absolute; inset: 0; pointer-events: none; }
.gw-dust i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #e2b65c; box-shadow: 0 0 8px 2px rgba(226, 182, 92, .55);
  opacity: 0; animation: gw-rise 6s linear infinite; }
.gw-dust i:nth-child(1) { left: 8%; animation-delay: 0s; } .gw-dust i:nth-child(2) { left: 18%; animation-delay: 2.4s; width: 3px; height: 3px; }
.gw-dust i:nth-child(3) { left: 27%; animation-delay: 1.1s; } .gw-dust i:nth-child(4) { left: 36%; animation-delay: 3.6s; width: 2px; height: 2px; }
.gw-dust i:nth-child(5) { left: 46%; animation-delay: .6s; } .gw-dust i:nth-child(6) { left: 55%; animation-delay: 4.2s; width: 3px; height: 3px; }
.gw-dust i:nth-child(7) { left: 63%; animation-delay: 1.8s; } .gw-dust i:nth-child(8) { left: 71%; animation-delay: 5s; width: 2px; height: 2px; }
.gw-dust i:nth-child(9) { left: 79%; animation-delay: 3s; } .gw-dust i:nth-child(10) { left: 87%; animation-delay: .3s; width: 3px; height: 3px; }
.gw-dust i:nth-child(11) { left: 93%; animation-delay: 2s; } .gw-dust i:nth-child(12) { left: 3%; animation-delay: 4.6s; width: 2px; height: 2px; }
@keyframes gw-rise { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 85% { opacity: .8; } 100% { opacity: 0; transform: translate(30px, -70vh); } }
.gift-wait-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; animation: gw-up .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes gw-up { from { opacity: 0; transform: translateY(18px); } }
.gw-logo { display: grid; place-items: center; height: 54px; padding: 0 22px; margin-bottom: 26px; background: #fff; border-radius: 999px; box-shadow: 0 8px 24px rgba(59, 23, 54, .12); }
.gw-logo img { display: block; height: 32px; width: auto; }
.gw-logo-text { display: inline-flex; align-items: center; gap: 6px; font-family: var(--gw-head); font-weight: 700; font-size: 1.25rem; color: var(--gw-ink); }
.gw-logo-text span { color: var(--accent, #f6c453); }
/* the deck of real products, flicked through under the lens */
.gw-deck { position: relative; width: 190px; height: 230px; margin-bottom: 34px; perspective: 900px; }
.gw-halo { position: absolute; inset: -60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(243, 207, 122, .45), color-mix(in srgb, var(--gw-accent) 10%, transparent) 55%, transparent 75%);
  animation: gw-halo 2.4s ease-in-out infinite; }
@keyframes gw-halo { 0%, 100% { transform: scale(.92); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } }
.gw-card { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; background: #fff; border-radius: 22px;
  box-shadow: 0 0 0 1.5px rgba(226, 182, 92, .9), 0 0 0 6px rgba(226, 182, 92, .14), 0 20px 40px rgba(59, 23, 54, .16);
  animation: gw-deck 3.6s cubic-bezier(.45, 0, .2, 1) infinite; animation-delay: calc(var(--i) * -0.6s); }
.gw-card img { width: 100%; height: 100%; object-fit: contain; }
/* each flicked card leaves a burst of gold dust */
.gw-card::after { content: ""; position: absolute; inset: -30px; pointer-events: none; opacity: 0;
  background-image: radial-gradient(3px 3px at 20% 30%, #f3cf7a 50%, transparent 51%), radial-gradient(2px 2px at 70% 20%, var(--gw-accent) 50%, transparent 51%),
    radial-gradient(3px 3px at 85% 60%, #f3cf7a 50%, transparent 51%), radial-gradient(2px 2px at 30% 80%, #ffe9b0 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 55% 50%, #d9a647 50%, transparent 51%), radial-gradient(2px 2px at 10% 60%, #f3cf7a 50%, transparent 51%);
  animation: gw-burst 3.6s ease-out infinite; animation-delay: inherit; }
@keyframes gw-burst { 0%, 84% { opacity: 0; transform: scale(.6); } 90% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5) translateX(-40px); } }
@keyframes gw-deck {
  0% { transform: translate3d(0, 26px, -60px) scale(.84); opacity: 0; z-index: 1; }
  12% { opacity: .55; }
  40% { transform: translate3d(0, 14px, -30px) scale(.92); opacity: .85; z-index: 3; }
  72% { transform: translate3d(0, 0, 0) scale(1) rotate(0); opacity: 1; z-index: 6; }
  86% { transform: translate3d(0, 0, 0) scale(1) rotate(0); opacity: 1; z-index: 6; }
  100% { transform: translate3d(-150%, -14px, 0) rotate(-18deg) scale(.96); opacity: 0; z-index: 6; }
}
/* three little stars circling the deck */
.gw-orbit { position: absolute; inset: -34px; z-index: 8; border-radius: 50%; animation: gw-orbit 6s linear infinite; pointer-events: none; }
.gw-orbit i { position: absolute; font-style: normal; color: #d9a647; text-shadow: 0 0 10px rgba(243, 207, 122, .8); animation: gw-pulse 1.6s ease-in-out infinite; }
.gw-orbit i:nth-child(1) { left: 50%; top: -6px; font-size: 18px; } .gw-orbit i:nth-child(2) { right: -4px; top: 60%; font-size: 13px; animation-delay: .5s; }
.gw-orbit i:nth-child(3) { left: 4px; bottom: 8%; font-size: 15px; animation-delay: 1s; }
@keyframes gw-orbit { to { transform: rotate(360deg); } }
@keyframes gw-pulse { 0%, 100% { opacity: .4; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
/* the golden magnifying glass */
.gw-lens { position: absolute; z-index: 10; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%;
  border: 5px solid #e9bd5a; box-shadow: inset 0 0 0 1.5px #fff3cf, 0 0 0 1.5px #a8781f, 0 12px 28px rgba(59, 23, 54, .22), 0 0 22px rgba(243, 207, 122, .4);
  animation: gw-lens 4.2s ease-in-out infinite; }
.gw-lens::after { content: ""; position: absolute; right: -24px; bottom: -24px; width: 34px; height: 10px; border-radius: 5px;
  background: linear-gradient(180deg, #8a2f78, #3b1736); box-shadow: inset 0 0 0 1.5px #e9bd5a; transform: rotate(45deg); transform-origin: left center; }
.gw-lens-glass { position: absolute; inset: 0; overflow: hidden; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7), rgba(255, 255, 255, .12) 45%, rgba(255, 243, 207, .08) 70%);
  backdrop-filter: saturate(1.4) contrast(1.06); -webkit-backdrop-filter: saturate(1.4) contrast(1.06); }
.gw-lens-glass::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%); animation: gw-glint 1.8s ease-in-out infinite; }
@keyframes gw-glint { 0% { transform: translateX(-80%); } 60%, 100% { transform: translateX(80%); } }
@keyframes gw-lens { 0%, 100% { transform: translate(-46px, -40px) rotate(-6deg); } 25% { transform: translate(44px, -18px) rotate(4deg); } 50% { transform: translate(30px, 52px) rotate(8deg); } 75% { transform: translate(-40px, 30px) rotate(-4deg); } }
.gift-wait-title { margin: 0 0 8px; font-family: var(--gw-head); font-size: clamp(1.45rem, 4vw, 1.85rem); line-height: 1.2;
  background: linear-gradient(90deg, var(--gw-ink) 0%, var(--gw-ink) 38%, #c99a3e 50%, var(--gw-ink) 62%, var(--gw-ink) 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: gw-shine 2.8s linear infinite; }
@keyframes gw-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.gift-wait-lines { position: relative; width: 280px; height: 1.5em; margin: 0 0 20px; font-size: .95rem; color: var(--gw-muted); }
.gift-wait-lines span { position: absolute; inset: 0; opacity: 0; animation: gw-line 8s infinite; }
.gift-wait-lines span:nth-child(2) { animation-delay: 2s; } .gift-wait-lines span:nth-child(3) { animation-delay: 4s; } .gift-wait-lines span:nth-child(4) { animation-delay: 6s; }
@keyframes gw-line { 0% { opacity: 0; transform: translateY(6px); } 5%, 21% { opacity: 1; transform: none; } 26%, 100% { opacity: 0; transform: translateY(-6px); } }
.gift-wait-bar { position: relative; width: 170px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(59, 23, 54, .1); }
.gift-wait-bar::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: 3px; background: linear-gradient(90deg, var(--gw-accent), #f3cf7a); box-shadow: 0 0 10px rgba(243, 207, 122, .8); animation: gw-bar 1.4s ease-in-out infinite; }
@keyframes gw-bar { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@media (max-width: 400px) { .gw-deck { transform: scale(.9); margin-bottom: 24px; } .gw-logo { margin-bottom: 18px; } }
@media (prefers-reduced-motion: reduce) {
  .gw-card, .gw-card::after, .gw-lens, .gw-orbit, .gw-dust i, .gw-halo, .gift-wait-title { animation: none; }
  .gw-card:not(:first-of-type) { display: none; }
  .gw-dust { display: none; }
  .gw-lens { transform: translate(30px, 20px); }
  .gift-wait-title { color: var(--gw-ink); }
}

/* Gift helper wait, wizard variant (theme.advisor_animation = wizard) */
.gwz-stage { position: relative; width: 320px; height: 300px; margin: 18px 0 14px; }
.gwz-floor { position: absolute; left: 50%; bottom: 6px; width: 170px; height: 22px; margin-left: -85px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(59, 23, 54, .28), rgba(59, 23, 54, 0)); animation: gwz-floor 2.4s ease-in-out infinite; }
@keyframes gwz-floor { 0%, 30%, 55%, 100% { transform: scale(1); opacity: 1; } 15%, 42% { transform: scale(.78); opacity: .7; } }
/* The wizard: hops, peers around (halfway the other way), squashes a little when he lands. */
.gwz-hero { position: absolute; z-index: 2; left: 50%; bottom: 14px; width: 196px; margin-left: -98px; transform-origin: 50% 100%; animation: gwz-hero 2.4s ease-in-out infinite; }
.gwz-breathe { position: relative; display: block; transform-origin: 50% 100%; animation: gwz-breathe 2.2s ease-in-out infinite; filter: drop-shadow(0 10px 14px rgba(59, 23, 54, .18)); }
@keyframes gwz-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.022); } }
.gwz-breathe > img { display: block; width: 100%; height: auto; }
.gwz-breathe > .gwz-tip { position: absolute; inset: 0; transform-origin: 72.8% 9%; animation: gwz-tip 1.3s ease-in-out infinite alternate; }
@keyframes gwz-tip { from { transform: rotate(-7deg); } to { transform: rotate(9deg); } }
.gwz-lids { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* The eyelids sit above the eyes and come down for a blink: twice quickly, then a pause. */
.gwz-lid { transform: translateY(-74px); animation: gwz-blink 3.4s infinite; }
@keyframes gwz-blink { 0%, 40%, 47%, 53%, 60%, 100% { transform: translateY(-74px); } 43.5%, 56.5% { transform: translateY(-4px); } }
@keyframes gwz-hero {
  0% { transform: translateY(0) scale(1, 1); }
  8% { transform: translateY(0) scale(1.05, .95); }
  15% { transform: translateY(-26px) scale(.97, 1.04) rotate(-4deg); }
  24% { transform: translateY(0) scale(1.06, .94); }
  32% { transform: translateY(0) scale(1, 1) rotate(5deg); }
  40% { transform: translateY(-2px) scale(1, 1) rotate(0); }
  /* turns round in the air, at the top of a hop */
  46% { transform: translateY(-24px) scale(1, 1); }
  46.5% { transform: translateY(-24px) scale(-1, 1); }
  54% { transform: translateY(0) scale(-1.06, .94); }
  62% { transform: translateY(0) scale(-1, 1) rotate(-6deg); }
  72% { transform: translateY(-8px) scale(-1, 1) rotate(4deg); }
  80% { transform: translateY(0) scale(-1, 1); }
  88% { transform: translateY(-22px) scale(-1, 1); }
  88.5% { transform: translateY(-22px) scale(1, 1); }
  95% { transform: translateY(0) scale(1.05, .95); }
  100% { transform: translateY(0) scale(1, 1); }
}
/* A shine sweeping over the magnifying glass (it moves along with him). */
.gwz-glint { position: absolute; left: 4%; top: 39.5%; width: 16%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.gwz-glint::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .95) 48%, transparent 58%); animation: gwz-glint 1.2s ease-in-out infinite; }
@keyframes gwz-glint { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
.gwz-spark { position: absolute; z-index: 3; color: #e2b65c; font-size: 20px; opacity: 0; animation: gwz-spark 1.4s ease-in-out infinite; }
.gwz-spark-1 { left: 16%; top: 22%; } .gwz-spark-2 { left: 80%; top: 16%; animation-delay: .4s; } .gwz-spark-3 { left: 86%; top: 56%; animation-delay: .8s; } .gwz-spark-4 { left: 8%; top: 60%; animation-delay: 1.1s; }
@keyframes gwz-spark { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.15) rotate(25deg); } }
/* What he flings over his shoulder while searching: real products, from behind him. */
.gwz-fly { position: absolute; z-index: 1; left: 50%; top: 150px; width: 58px; height: 58px; margin: -29px 0 0 -29px; display: grid; place-items: center; border-radius: 16px; background: #fff;
  box-shadow: 0 10px 22px rgba(59, 23, 54, .18); opacity: 0; animation: gwz-fly 2.4s cubic-bezier(.2, .7, .3, 1) infinite; }
.gwz-fly img { width: 46px; height: 46px; object-fit: contain; }
@keyframes gwz-fly {
  0% { opacity: 0; transform: translate(0, 30px) scale(.3) rotate(0); }
  12% { opacity: 1; }
  45% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--x) * 1.5), 80px) scale(.7) rotate(calc(var(--r) * 2.2)); }
}
.gwz-fly-1 { --x: -120px; --y: -120px; --r: -30deg; animation-delay: 0s; }
.gwz-fly-2 { --x: 118px; --y: -105px; --r: 30deg; animation-delay: .4s; }
.gwz-fly-3 { --x: -130px; --y: -40px; --r: -45deg; animation-delay: .8s; }
.gwz-fly-4 { --x: 128px; --y: -150px; --r: 20deg; animation-delay: 1.2s; }
.gwz-fly-5 { --x: -100px; --y: -160px; --r: -15deg; animation-delay: 1.6s; }
.gwz-fly-6 { --x: 125px; --y: -35px; --r: 50deg; animation-delay: 2s; }
@media (max-width: 400px) { .gwz-stage { transform: scale(.92); margin: -10px 0 0; } }

@media (prefers-reduced-motion: reduce) { .gwz-hero, .gwz-floor, .gwz-fly, .gwz-spark, .gwz-breathe, .gwz-tip { animation: none; } .gwz-fly { display: none; } }
