/* ============ UNBIFY Discover — the companion ============
   A character layer above the Discover UI. The layer itself ignores the
   pointer; only the character's body (tap, drag), a small choice in its bubble
   and the occasional star can be touched. It lives in its own absolutely
   positioned plane, so it can never shift layout, and it moves by transform
   alone. No card, no container, no permanent bubble. */

.cx-layer {
  position: absolute; inset: 0; z-index: 9; overflow: hidden;
  pointer-events: none; opacity: 0; transition: opacity 1.4s ease;
}
.cx-layer.cx-in { opacity: 1; }

/* size comes from the position manager (--cx-h), responsive per device and
   smaller only when the page is crowded; width follows the artwork's ratio */
.cx {
  --cx-h: 160px;
  position: absolute; top: 0; left: 0;
  height: var(--cx-h); width: calc(var(--cx-h) * .8);
  will-change: transform;
  transition: transform 2.8s cubic-bezier(.45, .05, .25, 1), opacity 1.2s ease,
              height .9s cubic-bezier(.3, .6, .3, 1), width .9s cubic-bezier(.3, .6, .3, 1);
}
.cx.cx-slow { transition-duration: 5.2s, 1.2s, .9s, .9s; }
.cx.cx-quick { transition-duration: .7s, 1.2s, .9s, .9s; transition-timing-function: cubic-bezier(.2, .8, .3, 1.05), ease, ease, ease; }
.cx.cx-dragging { transition: none; }

.cx-float { width: 100%; height: 100%; animation: cx-float 7.5s ease-in-out infinite; }
@keyframes cx-float {
  0%, 100% { transform: translateY(0) rotate(-1.6deg); }
  50%      { transform: translateY(-9px) rotate(1.6deg); }
}
.cx-pose {
  position: relative; width: 100%; height: 100%;
  transition: transform .8s cubic-bezier(.3, .6, .3, 1), opacity .8s ease, filter .8s ease;
  transform-origin: 50% 70%;
}
.cx-figure { position: absolute; inset: 0; animation: cx-breathe 5.4s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes cx-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.022, 1.03); } }
.cx-art {
  width: 100%; height: 100%; display: block; overflow: visible;
  object-fit: contain;                    /* illustrated art is never cropped or stretched */
  filter: drop-shadow(0 10px 14px rgba(96, 112, 170, .22)) drop-shadow(0 2px 3px rgba(60, 55, 51, .10));
  user-select: none; -webkit-user-drag: none;
}
/* depth against the cream page: a soft aura behind, a soft shadow beneath */
.cx-aura {
  position: absolute; inset: -22% -30% -8% -30%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .85) 0%, rgba(214, 226, 255, .55) 38%,
                              rgba(246, 201, 138, .16) 66%, rgba(246, 201, 138, 0) 100%);
  transition: opacity .8s ease, transform .8s ease;
  animation: cx-aura 5.4s ease-in-out infinite;
}
@keyframes cx-aura { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
.cx-shadow {
  position: absolute; left: 22%; right: 22%; bottom: -7%; height: 7%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(116, 86, 31, .20), rgba(116, 86, 31, 0));
  animation: cx-shadow 7.5s ease-in-out infinite;
}
@keyframes cx-shadow { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.84); opacity: .55; } }

/* the body is what you touch — not the transparent corners of the artwork */
.cx-hit {
  position: absolute; inset: 6% 8% 16% 8%; border-radius: 46% 46% 50% 50%;
  pointer-events: auto; cursor: grab; touch-action: none;
  background: transparent; border: 0; padding: 0; margin: 0; -webkit-tap-highlight-color: transparent;
}
.cx-hit:focus-visible { outline: 2px solid rgba(201, 167, 110, .85); outline-offset: 4px; }
.cx-dragging .cx-hit { cursor: grabbing; }
.cx-travelling .cx-hit { pointer-events: none; }
.cx-dragging .cx-pose { transform: scale(1.06) rotate(-4deg); }
.cx-dragging .cx-shadow { opacity: .3; transform: scale(.7) translateY(8px); }
.cx-dragging .cx-float { animation-play-state: paused; }

/* nowhere fully safe: it makes itself small and faint, and says nothing */
.cx.cx-docked .cx-pose { transform: scale(.62); opacity: .55; }

/* ---- the drawn figure ---- */
.cx-head, .cx-face, .cx-eyes, .cx-mouth, .cx-arm, .cx-orb, .cx-cloud, .cx-sparks, .cx-glint, .cx-earglow {
  transition: transform .7s cubic-bezier(.3, .6, .3, 1), opacity .45s ease;
}
.cx-head { transform-origin: 80px 118px; transform: rotate(-5deg); }
.cx-arm-r { transform-origin: 124px 132px; }
.cx-arm-l { transform-origin: 46px 130px; }
.cx-eyes, .cx-mouth, .cx-glint { filter: drop-shadow(0 0 3px rgba(124, 192, 255, .75)); }
.cx-eyes { opacity: 0; transform-box: fill-box; transform-origin: center; }
.cx-eyes-open { opacity: 1; }
.cx-eyes-open rect { transform-box: fill-box; transform-origin: center; animation: cx-blink 6.2s infinite; }
@keyframes cx-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.cx-sparks { opacity: 0; transform-box: fill-box; transform-origin: center; }
.cx-orb { transform-box: fill-box; transform-origin: center; animation: cx-orb 6s ease-in-out infinite; }
@keyframes cx-orb { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.cx-cloud circle { transform-box: fill-box; transform-origin: center; animation: cx-puff 6.4s ease-in-out infinite; }
.cx-cloud circle:nth-child(2n) { animation-delay: -2.1s; }
.cx-cloud circle:nth-child(3n) { animation-delay: -4s; }
@keyframes cx-puff { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.cx-swirl { transform-box: fill-box; transform-origin: 50% 0; animation: cx-swirl 7s ease-in-out infinite; }
@keyframes cx-swirl { 0%, 100% { transform: skewX(-4deg); } 50% { transform: skewX(5deg); } }
.cx-earglow { animation: cx-ear 4.2s ease-in-out infinite; }
@keyframes cx-ear { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* which eyes are lit */
[data-cx-expr="happy"] .cx-eyes-open, [data-cx-expr="celebrating"] .cx-eyes-open, [data-cx-expr="goodbye"] .cx-eyes-open,
[data-cx-expr="surprised"] .cx-eyes-open, [data-cx-expr="processing"] .cx-eyes-open, [data-cx-expr="dormant"] .cx-eyes-open { opacity: 0; }
[data-cx-expr="happy"] .cx-eyes-smile, [data-cx-expr="celebrating"] .cx-eyes-smile, [data-cx-expr="goodbye"] .cx-eyes-smile { opacity: 1; }
[data-cx-expr="surprised"] .cx-eyes-round { opacity: 1; }
[data-cx-expr="processing"] .cx-eyes-scan { opacity: 1; }
[data-cx-expr="dormant"] .cx-eyes-flat { opacity: .55; }
[data-cx-expr="processing"] .cx-eyes-scan circle { animation: cx-scan 1.5s ease-in-out infinite; }
[data-cx-expr="processing"] .cx-eyes-scan circle:nth-child(2) { animation-delay: .2s; }
[data-cx-expr="processing"] .cx-eyes-scan circle:nth-child(3) { animation-delay: .4s; }
@keyframes cx-scan { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
[data-cx-expr="processing"] .cx-mouth, [data-cx-expr="dormant"] .cx-mouth, [data-cx-expr="dormant"] .cx-glint { opacity: 0; }
[data-cx-expr="surprised"] .cx-mouth { transform: scale(.55, 1.5); transform-box: fill-box; transform-origin: center; }
[data-cx-expr="curious"] .cx-eyes-open { transform: scale(1.12); }
[data-cx-expr="listening"] .cx-eyes-open { transform: scale(1.06, 1.14); }
[data-cx-expr="thoughtful"] .cx-eyes-open { transform: translate(-4px, -4px) scaleY(.8); }

/* poses — head and arms for the drawn figure */
[data-cx-expr="curious"] .cx-head { transform: rotate(7deg); }
[data-cx-expr="listening"] .cx-head { transform: rotate(-10deg); }
[data-cx-expr="thoughtful"] .cx-head, [data-cx-expr="processing"] .cx-head { transform: rotate(5deg); }
[data-cx-expr="surprised"] .cx-head { transform: rotate(-2deg) translateY(-5px); }
[data-cx-expr="dormant"] .cx-head { transform: rotate(-9deg) translateY(4px); }
[data-cx-expr="dormant"] .cx-arm-r { transform: rotate(38deg) translateY(10px); }
[data-cx-expr="dormant"] .cx-orb { opacity: 0; }
[data-cx-expr="dormant"] .cx-earglow { animation: none; opacity: .25; }
[data-cx-expr="thoughtful"] .cx-arm-r, [data-cx-expr="processing"] .cx-arm-r { transform: rotate(-16deg) translate(-10px, -8px); }
[data-cx-expr="happy"] .cx-arm-r { transform: rotate(-10deg) translateY(-6px); }
[data-cx-expr="celebrating"] .cx-arm-r { transform: rotate(-16deg) translateY(-10px); }
[data-cx-expr="celebrating"] .cx-arm-l { transform: rotate(24deg) translate(-4px, -12px); }
[data-cx-expr="celebrating"] .cx-sparks { animation: cx-spark 1.5s ease-out 2; }
@keyframes cx-spark { 0% { opacity: 0; transform: scale(.7); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2); } }
[data-cx-expr="goodbye"] .cx-arm-r { animation: cx-wave 1.4s ease-in-out infinite; }
@keyframes cx-wave { 0%, 100% { transform: rotate(-4deg) translateY(-8px); } 50% { transform: rotate(-24deg) translateY(-10px); } }

/* poses — the whole character: what any artwork, drawn or illustrated, can do */
[data-cx-expr="curious"] .cx-pose { transform: rotate(4deg) scale(1.02); }
[data-cx-expr="listening"] .cx-pose { transform: rotate(-3deg); }
[data-cx-expr="thoughtful"] .cx-pose { transform: rotate(-4deg) translateY(2px); }
[data-cx-expr="surprised"] .cx-pose { transform: scale(1.07) translateY(-6px); }
[data-cx-expr="happy"] .cx-pose { animation: cx-hop .9s cubic-bezier(.3, .6, .3, 1) 1; }
[data-cx-expr="celebrating"] .cx-pose { animation: cx-hop .8s cubic-bezier(.3, .6, .3, 1) 2; }
[data-cx-expr="processing"] .cx-pose { animation: cx-ponder 3.2s ease-in-out infinite; }
[data-cx-expr="goodbye"] .cx-pose { animation: cx-ponder 3.6s ease-in-out infinite; }
@keyframes cx-hop { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-12px) scale(1.04); } 70% { transform: translateY(2px) scale(.99); } }
@keyframes cx-ponder { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
[data-cx-expr="happy"] .cx-aura, [data-cx-expr="celebrating"] .cx-aura { transform: scale(1.14); opacity: 1; animation: none; }
[data-cx-expr="processing"] .cx-aura { animation: cx-think 2.6s ease-in-out infinite; }
@keyframes cx-think { 0%, 100% { opacity: .5; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.1); } }

/* not yet met: smaller, dimmer, half asleep at the edge */
.cx:not(.cx-awake) .cx-pose { opacity: .78; filter: saturate(.7); }
.cx:not(.cx-awake) .cx-aura { opacity: .35; animation: none; }
.cx:not(.cx-awake) .cx-float { animation-duration: 11s; }

/* one-shot reactions */
.cx-pulse-tap .cx-figure { animation: cx-squish .5s cubic-bezier(.3, .6, .3, 1) 1; }
@keyframes cx-squish { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.08, .93); } 60% { transform: scale(.97, 1.05); } }
.cx-pulse-spin .cx-figure { animation: cx-spin .8s cubic-bezier(.3, .6, .3, 1) 1; }
@keyframes cx-spin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.06); } 100% { transform: rotate(360deg) scale(1); } }
.cx-pulse-wake .cx-figure { animation: cx-wake .85s cubic-bezier(.3, .6, .3, 1) 1; }
@keyframes cx-wake { 0% { transform: scale(.9); } 45% { transform: scale(1.14) translateY(-8px); } 100% { transform: scale(1); } }
.cx-pulse-peek .cx-figure { animation: cx-peek .9s ease-in-out 1; }
@keyframes cx-peek { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-8deg); } 65% { transform: rotate(6deg); } }

/* leaving for My UNBIFY: it drifts off through the edge and thins out */
.cx.cx-departing { opacity: 0; transition: transform 2.4s cubic-bezier(.5, .05, .4, 1), opacity 1.6s ease .7s; }
.cx.cx-departing .cx-hit { pointer-events: none; }
.cx.cx-blink-out { opacity: 0; transition: opacity .16s ease; }

/* ---- what it says: small, brief, never a chat window ---- */
.cx-bubble {
  position: absolute; width: max-content; max-width: 226px;
  padding: 10px 15px 11px; border-radius: 16px;
  background: rgba(255, 252, 245, .96);
  border: 1px solid rgba(201, 167, 110, .42);
  box-shadow: 0 10px 30px rgba(141, 106, 56, .14), 0 1px 0 rgba(255, 255, 255, .8) inset;
  opacity: 0; visibility: hidden;
  --cx-tx: 0; --cx-ty: -50%;
  transform: translate(var(--cx-tx), var(--cx-ty)) scale(.96);
  transition: opacity .45s ease, transform .45s cubic-bezier(.3, .6, .3, 1), visibility 0s linear .45s;
}
.cx-bubble[data-side="above"], .cx-bubble[data-side="below"] { --cx-tx: -50%; --cx-ty: 0; }
.cx-bubble.cx-on {
  opacity: 1; visibility: visible;
  transform: translate(var(--cx-tx), var(--cx-ty)) scale(1);
  transition: opacity .45s ease, transform .45s cubic-bezier(.3, .6, .3, 1);
}
.cx-line {
  margin: 0; font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-style: italic; font-weight: 500; font-size: 17px; line-height: 1.3; color: #6d5326; text-align: left;
}
.cx-extra { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.cx-extra[hidden] { display: none; }
.cx-extra-q { margin: 0 0 2px; font-family: var(--sans, "Jost", sans-serif); font-size: 12.5px; color: #6e655b; line-height: 1.4; }
.cx-choice {
  pointer-events: auto; cursor: pointer; text-align: left;
  font-family: var(--sans, "Jost", sans-serif); font-size: 12.5px; letter-spacing: .03em;
  color: #74561f; background: rgba(250, 243, 230, .9);
  border: 1px solid rgba(201, 167, 110, .55); border-radius: 999px; padding: 7px 14px;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.cx-choice:hover, .cx-choice:focus-visible { background: #f6e6c6; border-color: #c9a76e; outline: none; }
.cx-choice-cta {
  text-align: center; text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; font-weight: 500;
  color: #fffaf0; background: linear-gradient(180deg, #d9b877, #b98c42); border-color: #b98c42; padding: 9px 14px;
}
.cx-choice-cta:hover, .cx-choice-cta:focus-visible { background: linear-gradient(180deg, #e2c286, #c0944a); transform: translateY(-1px); }
.cx-bubble.cx-asking { min-width: 190px; }

/* the star: a tiny optional catch */
.cx-star {
  position: absolute; width: 36px; height: 36px; padding: 6px; border: 0; background: transparent;
  pointer-events: auto; cursor: pointer; opacity: 0; transform: scale(.4) rotate(-30deg);
  transition: opacity .6s ease, transform .6s cubic-bezier(.3, .6, .3, 1);
  filter: drop-shadow(0 0 8px rgba(230, 194, 122, .8));
}
.cx-star svg { width: 100%; height: 100%; animation: cx-twinkle 1.8s ease-in-out infinite; }
.cx-star.cx-in { opacity: 1; transform: scale(1) rotate(0); }
.cx-star.cx-caught { opacity: 0; transform: scale(1.9) rotate(60deg); }
@keyframes cx-twinkle { 0%, 100% { transform: scale(.86); } 50% { transform: scale(1.1); } }

@media (max-width: 719px) {
  .cx-bubble { max-width: 186px; padding: 8px 12px 9px; }
  .cx-line { font-size: 15px; }
  .cx-hit { inset: 0 2% 8% 2%; }          /* a comfortable thumb target */
}

/* ---- reduced motion: no drifting, no loops, no travel. It still looks,
   changes expression, answers a tap and can be moved. ---- */
.cx-reduced .cx { transition: opacity .16s ease; }
.cx-reduced .cx-float, .cx-reduced .cx-figure, .cx-reduced .cx-aura, .cx-reduced .cx-shadow, .cx-reduced .cx-orb,
.cx-reduced .cx-cloud circle, .cx-reduced .cx-swirl, .cx-reduced .cx-earglow, .cx-reduced .cx-eyes-open rect,
.cx-reduced [data-cx-expr] .cx-pose, .cx-reduced [data-cx-expr] .cx-aura, .cx-reduced [data-cx-expr] .cx-sparks,
.cx-reduced [data-cx-expr] .cx-arm-r, .cx-reduced .cx-eyes-scan circle, .cx-reduced .cx-star svg { animation: none !important; }
.cx-reduced .cx-pose, .cx-reduced .cx-head, .cx-reduced .cx-arm, .cx-reduced .cx-eyes { transition-duration: .01s; }
.cx-reduced .cx-bubble, .cx-reduced .cx-bubble.cx-on { transition: opacity .2s ease; transform: translate(var(--cx-tx), var(--cx-ty)); }
.cx-reduced .cx.cx-departing { transition: opacity .4s ease; }
.cx-reduced [data-cx-expr="processing"] .cx-eyes-scan circle { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cx-float, .cx-figure, .cx-aura, .cx-shadow, .cx-orb, .cx-cloud circle, .cx-swirl, .cx-eyes-open rect { animation: none; }
  .cx { transition: opacity .16s ease; }
}

/* ============ the first encounter: a gift on the warm page ============
   Centered, quiet, a little alive. The veil is the page's own cream, so it
   reads as the same world, not a modal. */
.cx-gift { position: absolute; inset: 0; z-index: 1; pointer-events: auto; display: flex; align-items: center; justify-content: center; }
.cx { z-index: 2; }
.cx.cx-unborn { opacity: 0; visibility: hidden; }
.cx.cx-unborn .cx-hit { pointer-events: none; }
.cx-gift-veil {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease;
  background: radial-gradient(95% 95% at 50% 44%, #fcf6ea 0%, #f8eed9 58%, #f2e2c6 100%);
}
.cx-gift-in .cx-gift-veil { opacity: 1; }
.cx-gift-inner {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 24px; max-width: 560px; transform: translateY(-2vh);
}
.cx-gift-eyebrow, .cx-gift-h, .cx-gift-sub, .cx-gift-open, .cx-gift-skip, .cx-gift-box {
  opacity: 0; transform: translateY(8px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.3, .6, .3, 1);
}
.cx-gift-in .cx-gift-eyebrow { opacity: 1; transform: none; transition-delay: .5s; }
.cx-gift-in .cx-gift-h { opacity: 1; transform: none; transition-delay: 1.1s; }
.cx-gift-in .cx-gift-sub { opacity: 1; transform: none; transition-delay: 2.2s; }
.cx-gift-in .cx-gift-box { opacity: 1; transform: none; transition-delay: .15s; }
.cx-gift-in .cx-gift-open { opacity: 1; transform: none; transition-delay: 3.3s; }
.cx-gift-in .cx-gift-skip { opacity: .7; transform: none; transition-delay: 4.4s; }
.cx-gift-eyebrow {
  margin: 0 0 14px; font-family: var(--sans, "Jost", sans-serif); font-size: 10.5px; letter-spacing: .42em;
  text-transform: uppercase; color: #ab9668;
}
.cx-gift-h {
  margin: 0; font-family: var(--serif, "Cormorant Garamond", Georgia, serif); font-weight: 500;
  font-size: clamp(34px, 5.2vh, 56px); line-height: 1.12; color: #86642e;
}
.cx-gift-sub {
  margin: 10px 0 0; font-family: var(--body-serif, "EB Garamond", Georgia, serif); font-style: italic;
  font-size: clamp(17px, 2.5vh, 22px); color: #6e655b;
}
.cx-gift-box {
  position: relative; margin: clamp(18px, 4vh, 40px) 0 6px; padding: 0; border: 0; background: transparent; cursor: pointer;
  width: clamp(150px, 24vh, 230px); aspect-ratio: 220 / 240; -webkit-tap-highlight-color: transparent;
  order: 0;
}
.cx-gift:focus { outline: none; }
.cx-gift-box:focus-visible { outline: 2px solid rgba(201, 167, 110, .9); outline-offset: 6px; border-radius: 18px; }
.cx-gift-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cx-gift-open {
  margin: 4px 0 0; font-family: var(--sans, "Jost", sans-serif); font-size: 11px; letter-spacing: .38em;
  text-transform: uppercase; color: #a3762f;
}
.cx-gift-skip {
  margin-top: 26px; background: none; border: 0; cursor: pointer; padding: 6px 10px;
  font-family: var(--sans, "Jost", sans-serif); font-size: 12px; letter-spacing: .06em; color: #8d7d63;
  text-decoration: underline; text-decoration-color: rgba(141, 125, 99, .35); text-underline-offset: 4px;
}
.cx-gift-skip:hover, .cx-gift-skip:focus-visible { opacity: 1 !important; color: #74561f; outline: none; }
.cx-gift-tease {
  position: absolute; right: -6%; top: 22%; opacity: 0; transform: translateY(4px);
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif); font-style: italic; font-size: 17px; color: #a3762f;
  transition: opacity .5s ease, transform .5s ease; pointer-events: none;
}
.cx-gift-box:hover .cx-gift-tease, .cx-gift-box:focus-visible .cx-gift-tease { opacity: 1; transform: none; }

/* alive, quietly: it hovers, shivers now and then, and the lid stirs */
.cx-gift-body, .cx-gift-lid, .cx-gift-glow, .cx-gift-beam, .cx-gift-shadow { transform-box: fill-box; transform-origin: center; }
.cx-gift-svg { animation: cxg-hover 5.2s ease-in-out infinite; }
@keyframes cxg-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.cx-gift-body { transform-origin: 50% 100%; animation: cxg-shiver 4.6s ease-in-out infinite; }
@keyframes cxg-shiver {
  0%, 78%, 100% { transform: rotate(0); }
  81% { transform: rotate(-2.2deg); } 84% { transform: rotate(2deg); } 87% { transform: rotate(-1.4deg); }
  90% { transform: rotate(1deg); } 93% { transform: rotate(0); }
}
.cx-gift-lid { transform-origin: 12% 100%; animation: cxg-lid 6.4s ease-in-out infinite; }
@keyframes cxg-lid { 0%, 60%, 74%, 100% { transform: none; } 64% { transform: translateY(-3.5px) rotate(-2.2deg); } 69% { transform: translateY(-1px) rotate(-.6deg); } }
.cx-gift-glow { animation: cxg-glow 4.2s ease-in-out infinite; transition: opacity .6s ease, transform .6s ease; }
@keyframes cxg-glow { 0%, 100% { opacity: .55; } 50% { opacity: .85; } }
.cx-gift-shadow { animation: cxg-shadow 5.2s ease-in-out infinite; }
@keyframes cxg-shadow { 0%, 100% { transform: scaleX(1); opacity: .16; } 50% { transform: scaleX(.86); opacity: .1; } }
.cx-gift-beam { opacity: 0; transform-origin: 50% 100%; transform: scaleY(.2); transition: opacity .5s ease, transform .7s cubic-bezier(.3, .6, .3, 1); }
.cx-mote { opacity: 0; transform-box: fill-box; transform-origin: center; animation: cxg-mote 5.6s ease-in-out infinite; }
.cx-mote:nth-child(2) { animation-delay: -1.2s; } .cx-mote:nth-child(3) { animation-delay: -2.6s; }
.cx-mote:nth-child(4) { animation-delay: -3.7s; } .cx-mote:nth-child(5) { animation-delay: -4.4s; } .cx-mote:nth-child(6) { animation-delay: -.6s; }
@keyframes cxg-mote { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 35% { opacity: .75; } 100% { opacity: 0; transform: translateY(-26px) scale(1); } }
.cx-mote-burst { animation: none; }

/* it notices you */
.cx-gift-box:hover .cx-gift-body, .cx-gift-box:focus-visible .cx-gift-body { animation: cxg-eager .55s ease-in-out infinite; }
@keyframes cxg-eager { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.cx-gift-box:hover .cx-gift-glow, .cx-gift-box:focus-visible .cx-gift-glow { animation: none; opacity: 1; transform: scale(1.08); }
.cx-gift-box:hover .cx-mote { animation-duration: 2.6s; }

/* opening: shake → glow → lid → light → motes → (the companion) → the box goes */
.cx-gift-opening .cx-gift-body { animation: cxg-shake .46s ease-in-out 1; }
@keyframes cxg-shake { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-4deg); } 30% { transform: rotate(4deg); } 45% { transform: rotate(-3.4deg); } 60% { transform: rotate(3deg); } 80% { transform: rotate(-1.5deg); } }
.cx-gift-opening .cx-gift-glow { animation: none; opacity: 1; transform: scale(1.16); }
.cx-gift-opening .cx-gift-svg { animation-play-state: paused; }
.cx-gift-opening .cx-gift-lid { animation: none; transition: transform .75s cubic-bezier(.3, .7, .3, 1), opacity .7s ease .25s; }
.cx-gift-opened .cx-gift-lid { transform: translate(-46px, -74px) rotate(-34deg); opacity: 0; }
.cx-gift-opened .cx-gift-beam { opacity: 1; transform: scaleY(1); }
.cx-gift-opened .cx-mote-burst { animation: cxg-burst 1.3s ease-out 1 forwards; }
.cx-gift-opened .cx-mote-burst:nth-child(8) { animation-delay: .08s; } .cx-gift-opened .cx-mote-burst:nth-child(9) { animation-delay: .16s; }
.cx-gift-opened .cx-mote-burst:nth-child(10) { animation-delay: .22s; } .cx-gift-opened .cx-mote-burst:nth-child(11) { animation-delay: .3s; }
@keyframes cxg-burst { 0% { opacity: 0; transform: translateY(0) scale(.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-120px) scale(1.2); } }
.cx-gift-opening .cx-gift-eyebrow, .cx-gift-opening .cx-gift-h, .cx-gift-opening .cx-gift-sub,
.cx-gift-opening .cx-gift-open, .cx-gift-opening .cx-gift-skip, .cx-gift-opening .cx-gift-tease {
  opacity: 0 !important; transition: opacity .5s ease !important; transition-delay: 0s !important; pointer-events: none;
}
.cx-gift-opening .cx-gift-box { cursor: default; pointer-events: none; }
.cx-gift-spent .cx-gift-box { opacity: 0 !important; transform: translateY(14px) scale(.94) !important; transition: opacity .8s ease, transform .8s ease !important; transition-delay: 0s !important; }
.cx-gift-out { pointer-events: none; }
.cx-gift-out .cx-gift-veil, .cx-gift-out .cx-gift-inner { opacity: 0; transition: opacity .8s ease; }

/* the companion comes up out of the light */
.cx.cx-emerging { transition: opacity .5s ease; }
.cx.cx-emerging .cx-pose { animation: cx-emerge .78s cubic-bezier(.3, .7, .3, 1) 1 both !important; }
@keyframes cx-emerge {
  0% { transform: translateY(62%) scale(.14); opacity: 0; } 30% { opacity: 1; }
  58% { transform: translateY(-24%) scale(1.13); }                /* it shoots up, too pleased to stop */
  78% { transform: translateY(5%) scale(.96); } 100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* the agreement, line by line */
.cx-deal-line, .cx-deal-q, .cx-deal-cta { opacity: 0; animation: cx-line-in .5s ease forwards; }
.cx-deal-line { margin: 0; font-family: var(--serif, "Cormorant Garamond", Georgia, serif); font-style: italic; font-weight: 500; font-size: 17px; line-height: 1.3; color: #6d5326; }
.cx-extra:has(.cx-deal-line) { margin-top: 2px; gap: 2px; }
.cx-deal-q { margin: 10px 0 4px !important; font-family: var(--serif, "Cormorant Garamond", Georgia, serif) !important; font-size: 19px !important; font-style: italic; color: #a3762f !important; }
@keyframes cx-line-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 719px) {
  .cx-gift-inner { transform: translateY(-5vh); }
  .cx-gift-skip { margin-top: 18px; }
  .cx-deal-line { font-size: 15px; }
  .cx-deal-q { font-size: 17px !important; }
}
/* reduced motion: fades and a gentle scale — no shake, no hover, no motes */
.cx-reduced .cx-gift-svg, .cx-reduced .cx-gift-body, .cx-reduced .cx-gift-lid, .cx-reduced .cx-gift-glow,
.cx-reduced .cx-gift-shadow, .cx-reduced .cx-mote, .cx-reduced .cx-gift-box:hover .cx-gift-body,
.cx-reduced .cx-gift-opening .cx-gift-body, .cx-reduced .cx-gift-opened .cx-mote-burst { animation: none !important; }
.cx-reduced .cx-gift-eyebrow, .cx-reduced .cx-gift-h, .cx-reduced .cx-gift-sub, .cx-reduced .cx-gift-open,
.cx-reduced .cx-gift-skip, .cx-reduced .cx-gift-box { transform: none !important; }
.cx-reduced .cx-gift-opened .cx-gift-lid { transform: none; opacity: 0; transition: opacity .3s ease; }
.cx-reduced .cx-gift-beam { transform: none; transition: opacity .3s ease; }
.cx-reduced .cx.cx-emerging .cx-pose { animation: cx-fade-in .4s ease 1 both !important; }
.cx-reduced .cx-deal-line, .cx-reduced .cx-deal-q, .cx-reduced .cx-deal-cta { animation-name: cx-fade-in; }
@keyframes cx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cx-gift-svg, .cx-gift-body, .cx-gift-lid, .cx-gift-glow, .cx-gift-shadow, .cx-mote { animation: none !important; }
}

/* the empty box drops away under its own weight */
.cx-gift-fall .cx-gift-box {
  opacity: 0 !important; transform: translateY(110vh) rotate(26deg) !important;
  transition: transform 1s cubic-bezier(.55, 0, .85, .4), opacity .35s ease .7s !important; transition-delay: 0s !important;
}
.cx-gift-fall .cx-gift-beam { opacity: 0; transition: opacity .3s ease; }
.cx-gift-fall .cx-gift-svg, .cx-gift-fall .cx-gift-body { animation: none !important; }

/* one excited lap: no easing between frames, a lean into the turn, motes behind */
.cx.cx-lapping { transition: none; }
.cx.cx-lapping .cx-float { animation: none; transform: rotate(var(--cx-lean, 0deg)); transition: transform .18s linear; }
.cx-trail {
  position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #fff6dc, rgba(230, 194, 122, .9) 55%, rgba(230, 194, 122, 0));
  animation: cx-trail .9s ease-out forwards;
}
@keyframes cx-trail { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(.2) translateY(14px); } }
.cx-reduced .cx-gift-fall .cx-gift-box { transform: none !important; transition: opacity .3s ease !important; }