/* Dust & Stardust site v21 (2026-11-12): fourth round of Acrobat comments (site\_review\user-comments-4-2026-11-12.json).
   Loaded after css/v20.css on every page. */

/* ---------------- motion the user can actually see (p7 #06 "only the tassel tags move") ----------------
   Cause: this PC has Windows "animation effects" off, so the browser reports prefers-reduced-motion: reduce.
   v20 then used a ±0.45° sway (invisible) and its !important loop also blocked the hover burst.
   v21: one visible, calm loop for everyone (the user asked for it explicitly), and the hover burst wins again. */
@keyframes v21-sway { 0% { transform: rotate(-2.2deg); } 100% { transform: rotate(2.2deg); } }
@keyframes v21-sway-card { 0% { transform: rotate(-1.8deg); } 100% { transform: rotate(1.8deg); } }
@keyframes v21-float { 0% { transform: translateY(-7px) rotate(-.6deg); } 100% { transform: translateY(7px) rotate(.5deg); } }
@keyframes v21-bulb { 0% { opacity: .12; transform: translate(-50%, -50%) scale(.85); } 100% { opacity: .95; transform: translate(-50%, -50%) scale(1.12); } }
@keyframes v21-burst { 0% { transform: rotate(0); } 14% { transform: rotate(4.5deg); } 34% { transform: rotate(-3.4deg); } 54% { transform: rotate(2deg); } 74% { transform: rotate(-.9deg); } 100% { transform: rotate(0); } }
:root .hm-sign { animation: v21-sway 4.6s ease-in-out infinite alternate !important; }
:root .hm-card { animation: v21-sway-card 5.2s ease-in-out infinite alternate !important; }
:root .hm-card:nth-child(3n+1) { animation-duration: 5.8s !important; animation-delay: -1.7s !important; }
:root .hm-card:nth-child(3n+2) { animation-duration: 6.4s !important; animation-delay: -3.9s !important; }
:root .hm-card:nth-child(3n) { animation-duration: 5.4s !important; animation-delay: -2.6s !important; }
:root .hm-sign.is-sway, :root .hm-card.is-sway, :root .hm-card.is-sway:nth-child(n) { animation: v21-burst 1.7s cubic-bezier(.36, .07, .19, .97) !important; }
:root .hm-bulb { animation: v21-bulb 2.6s ease-in-out infinite alternate !important; }
:root .scene[data-sec="3"]:hover .hm-bulb, :root .hm.is-lit .hm-bulb { animation-duration: 1.2s !important; }
:root .hm-glint i { animation: v20-glint 5.5s ease-out infinite !important; }
:root .hm-glint i:nth-child(2) { animation-delay: 1.9s !important; }
:root .hm-glint i:nth-child(3) { animation-delay: 3.7s !important; }
/* v21: the three bags on the new stage float a little, and hop on hover */
@keyframes v21-bag { 0% { transform: translateY(0); } 100% { transform: translateY(-1.1%); } }
@keyframes v21-hop { 0% { transform: translateY(0); } 30% { transform: translateY(-2.6%) rotate(-1.2deg); } 60% { transform: translateY(-.6%) rotate(.8deg); } 100% { transform: translateY(0); } }
.scene .hm > .hm-bag { display: block; will-change: transform; }
:root .hm-bag { animation: v21-bag 3.4s ease-in-out infinite alternate !important; }
:root .hm-bag:nth-of-type(3) { animation-duration: 3.9s !important; animation-delay: -1.3s !important; }
:root .hm-bag:nth-of-type(4) { animation-duration: 3.1s !important; animation-delay: -2.4s !important; }
:root .hm-bag.is-sway { animation: v21-hop 1.2s cubic-bezier(.36, .07, .19, .97) !important; }
:root .hf-gilt { animation: v21-float 5.5s ease-in-out infinite alternate !important; }
:root .hf-theatre .hf-gilt { animation-duration: 6.3s !important; animation-delay: -2.2s !important; }

/* ---------------- lenticular: twice as fast (p10 #09) ---------------- */
:root .hf-lenti img.b { animation: v20-lenti 2.6s ease-in-out infinite !important; }

/* ---------------- How it works: three items, centred (p3 #02, p5 #04) ---------------- */
.how4 { grid-template-columns: repeat(var(--how-n, 3), minmax(0, 260px)) !important; justify-content: center; }
.how4 > li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.how4 .how-ic { margin-left: auto; margin-right: auto; }
@media (max-width: 760px) { .how4 { grid-template-columns: repeat(var(--how-n, 3), minmax(0, 1fr)) !important; gap: 22px 10px !important; } }
@media (max-width: 420px) { .how4 { grid-template-columns: 1fr !important; max-width: 280px; margin-left: auto !important; margin-right: auto !important; } }

/* ---------------- three versions on the bag pages (p2 #01, p6 #05) ---------------- */
.vcards.v3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 30px); }
.vcards.v3 .vcard h3 { font-size: clamp(30px, 2.7vw, 38px); }
.vcards.v3 .vcard .sub { font-size: 21px; }
.vcards.v3 .vcard li { font-size: 17px; }
.vcards.v3 .vbody { padding: clamp(20px, 2.4vw, 30px); }
.vcards.v3 .vcard.is-custom { border-color: rgba(196, 165, 107, .7); box-shadow: 0 0 0 4px rgba(236, 229, 243, .55); }
/* the version number: handwriting for the word, a classic serif for the digit (the script digits read oddly) */
.vnum { font-family: var(--serif); font-style: normal; font-weight: 600; font-size: 1.12em; letter-spacing: .02em; margin-left: .18em; color: var(--hand-ink, #5a4466); }
@media (max-width: 1080px) { .vcards.v3 { grid-template-columns: 1fr 1fr; } .vcards.v3 .vcard:last-child { grid-column: 1 / -1; max-width: 640px; justify-self: center; width: 100%; } }
@media (max-width: 760px) { .vcards.v3 { grid-template-columns: 1fr; } .vcards.v3 .vcard:last-child { max-width: none; } }

/* Custom (version 2) request on the bag pages: a short letter, same paper as the Custom Order page */
.bag-custom-sec .fp-head { margin-bottom: clamp(18px, 3vw, 30px); }
.bag-custom-sec .letter-wrap { max-width: 760px; margin: 0 auto; }

/* ---------------- Shop: "Made to order" sits in the middle like "One of a kind" (p8 #07) ---------------- */
/* every label is the same box: name block on top, the meta row (price · One of a kind, or Made to order) on the same bottom line */
:root .sh-grid .sh-label { display: flex !important; flex-direction: column; justify-content: flex-start; }
:root .sh-grid .sh-label .lb-meta { margin-top: auto !important; min-height: 30px; display: flex; align-items: center; }
:root .sh-grid .sh-feature .sh-label .lb-meta .lb-ooak { line-height: 1; }

/* ---------------- Korean pages: short English stays English, in Princess Sofia (p10 #09) ---------------- */
html[data-lang="ko"] [lang="en"]:is(.hand-eyebrow, .hand, .eyebrow) { font-family: var(--hand, "Princess Sofia"), cursive; text-transform: none; letter-spacing: 0; }
html[data-v17][data-lang="ko"] .eyebrow[lang="en"], html[data-v17][data-lang="ko"] .fp-head > .eyebrow { font-size: 26px; }

/* ---------------- Theatre -> fairground seam (p11 #10) ----------------
   the Theatre section ends in the fairground's own top colour and the fairground picture fades in over it */
.home-sections .hf-theatre { padding-bottom: clamp(70px, 9vw, 150px); background: linear-gradient(180deg, #F6E1DA 0%, #EED7DB 45%, var(--s3-top) 100%) !important; }
.home-sections .hf-theatre + .scene[data-sec="3"] { margin-top: calc(-1 * clamp(70px, 9vw, 150px)); position: relative; z-index: 1; background: transparent !important; }
.home-sections .hf-theatre + .scene[data-sec="3"] picture img, .home-sections .hf-theatre + .scene[data-sec="3"] .hm {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 4vw, #000 12vw, #000 calc(100% - 4vw), transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 4vw, #000 12vw, #000 calc(100% - 4vw), transparent 100%) !important; }
.home-sections .hf-theatre + .scene[data-sec="3"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4vw; background: linear-gradient(180deg, transparent, #F3DFD3); pointer-events: none; z-index: 0; }
@media (max-width: 760px) {
  .home-sections .hf-theatre + .scene[data-sec="3"] picture img, .home-sections .hf-theatre + .scene[data-sec="3"] .hm {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 8vw, #000 20vw, #000 calc(100% - 6vw), transparent 100%) !important;
    mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 8vw, #000 20vw, #000 calc(100% - 6vw), transparent 100%) !important; }
}

/* ---------------- Custom Order letter: a vintage sheet (p7 #06) ----------------
   No gold, no glint. An old ruled letter sheet: warm ivory, faint foxing, fibre grain, a slightly darker aged rim,
   a soft deckle edge (the torn outline from v20 kept), sepia rules. The lines still sit exactly between the rules. */
html[data-v17] :is(#wish-form-wrap, .letter-wrap) {
  --torn: polygon(0% 1.9px, 4% 1.7px, 8% 3.4px, 12% 3.8px, 16% 3.3px, 20% 3px, 24% 5.8px, 28% 4.3px, 32% 2.4px, 36% 5.4px, 40% 4.9px, 44% 4.6px, 48% 1px, 52% 4.8px, 56% 5.1px, 60% 2.9px, 64% 4px, 68% 2.1px, 72% 2.2px, 76% 3px, 80% 2.5px, 84% 2.8px, 88% 1.2px, 92% 3.2px, 96% 4.2px, 100% 1.7px, calc(100% - 3.5px) 3%, calc(100% - 5px) 6%, calc(100% - 4.1px) 9%, calc(100% - 4.5px) 12%, calc(100% - 5px) 15%, calc(100% - 2.2px) 18%, calc(100% - 4.2px) 21%, calc(100% - 3.6px) 24%, calc(100% - 5.2px) 27%, calc(100% - 4.3px) 30%, calc(100% - 5.4px) 33%, calc(100% - 4.9px) 36%, calc(100% - 3.6px) 39%, calc(100% - 2.1px) 42%, calc(100% - 2.9px) 45%, calc(100% - 5.3px) 48%, calc(100% - 3.5px) 51%, calc(100% - 2.9px) 54%, calc(100% - 3.4px) 57%, calc(100% - 4.9px) 60%, calc(100% - 3.8px) 63%, calc(100% - 5.4px) 66%, calc(100% - 5.2px) 69%, calc(100% - 4.6px) 72%, calc(100% - 4px) 75%, calc(100% - 5px) 78%, calc(100% - 5.2px) 81%, calc(100% - 1.9px) 84%, calc(100% - 5.1px) 87%, calc(100% - 5px) 90%, calc(100% - 1.4px) 93%, calc(100% - 1.2px) 96%, 100% calc(100% - 6.5px), 96% calc(100% - 2.8px), 92% calc(100% - 6px), 88% calc(100% - 2px), 84% calc(100% - 6.6px), 80% calc(100% - 5px), 76% calc(100% - 1.6px), 72% calc(100% - 3.9px), 68% calc(100% - 6.9px), 64% calc(100% - 5.5px), 60% calc(100% - 6.2px), 56% calc(100% - 1.3px), 52% calc(100% - 3.6px), 48% calc(100% - 6.2px), 44% calc(100% - 5.8px), 40% calc(100% - 6.9px), 36% calc(100% - 6.7px), 32% calc(100% - 4.9px), 28% calc(100% - 6.8px), 24% calc(100% - 5.8px), 20% calc(100% - 6.4px), 16% calc(100% - 5.5px), 12% calc(100% - 6.1px), 8% calc(100% - 5.4px), 4% calc(100% - 6.5px), 0% calc(100% - 6.3px), 1.5px 97%, 1px 94%, 4px 91%, 3.3px 88%, 4.8px 85%, 1.4px 82%, 3.9px 79%, 5.5px 76%, 5.3px 73%, 2.2px 70%, 2.8px 67%, 2.2px 64%, 5.6px 61%, 5.7px 58%, 2.4px 55%, 1.2px 52%, 5px 49%, 5.4px 46%, 5px 43%, 5.2px 40%, 2.6px 37%, 5.3px 34%, 1.6px 31%, 5.3px 28%, 2.2px 25%, 2.8px 22%, 1.1px 19%, 3px 16%, 1.6px 13%, 1.7px 10%, 4.5px 7%, 2.3px 4%);
  position: relative; padding: 0 !important;
  filter: drop-shadow(0 14px 22px rgba(96, 70, 40, .13)) drop-shadow(0 2px 2px rgba(96, 70, 40, .10));
}
html[data-v17] :is(#wish-form-wrap, .letter-wrap)::before { display: none !important; content: none !important; animation: none !important; }
html[data-v17] :is(#wish-form-wrap, .letter-wrap) > .letter { position: relative; z-index: 1; clip-path: var(--torn); }
html[data-v17] .letter {
  background-color: #F6EEDF;
  background-image:
    /* sepia rules */
    linear-gradient(180deg, transparent calc(var(--ln) - 1px), rgba(132, 98, 62, .24) calc(var(--ln) - 1px)),
    /* fibre grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.4  0 0 0 0 0.28  0 0 0 0.075 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E"),
    /* foxing: a few soft age spots */
    radial-gradient(16px 13px at 12% 18%, rgba(176, 128, 72, .16), transparent 70%),
    radial-gradient(9px 9px at 15% 22%, rgba(176, 128, 72, .12), transparent 70%),
    radial-gradient(22px 18px at 88% 64%, rgba(170, 120, 66, .12), transparent 70%),
    radial-gradient(11px 10px at 71% 90%, rgba(170, 120, 66, .13), transparent 70%),
    radial-gradient(14px 12px at 33% 81%, rgba(176, 128, 72, .09), transparent 70%),
    /* aged rim: the edges a shade warmer than the middle */
    radial-gradient(130% 115% at 50% 46%, rgba(255, 251, 242, .65) 0 58%, rgba(214, 186, 146, .32) 100%);
  background-size: 100% var(--ln), 260px 260px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
/* the deckle edge: a thin darker fibre line hugging the torn outline */
html[data-v17] :is(#wish-form-wrap, .letter-wrap)::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; clip-path: var(--torn);
  box-shadow: inset 0 0 0 1.4px rgba(150, 112, 70, .28), inset 0 0 14px rgba(150, 112, 70, .16);
}
html[data-edge] :is(#wish-form-wrap, .letter-wrap)::before { display: none !important; }

/* v21 art: edge colours sampled from img/home/v21 , used by the v20 seam rules */
.home-sections { --s1-bottom: #FDECDA; --s2-top: #F3E7DF; --s2-bottom: #FCEBD9; --s3-top: #D6BDD4; --s3-bottom: #F9DAC7; }
@media (max-width: 768px) { .home-sections { --s1-bottom: #FEEED9; --s2-top: #F1E0D1; --s2-bottom: #FDE8D3; --s3-top: #D9BCD6; --s3-bottom: #FCDCC9; } }

/* full-canvas layers rotate a little; keep them inside their scene so the page never scrolls sideways */
.scene[data-sec] .hm { overflow: hidden; }
.home-sections { overflow-x: clip; }