/* 06 My creations: a boutique window. Her Labubu figures roll past in columns on both sides (each
   column the whole set in its own rotation, moving with the scroll), one stands in the arched
   window under a spotlight with its swing tag, crystals spilled on the glass shelf, shopping bags. */
.cr { --wh: clamp(600px, 82vh, 820px); --fh: calc(var(--wh) - 150px); --fw: calc(var(--fh) * 0.7336);
  padding: clamp(44px, 6vh, 84px) 0 0; overflow: hidden; background:
  linear-gradient(180deg, transparent 82%, var(--bg)),
  radial-gradient(90% 55% at 50% 58%, rgba(255, 46, 136, 0.2), transparent 70%),
  linear-gradient(180deg, var(--bg) 0%, #1d0813 34%, #250a18 70%, var(--bg) 100%); }

/* backdrop: two spotlights on the window, the giant outlined word, the glossy floor */
.cr-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cr-spot { position: absolute; left: 50%; top: 4%; width: 70vw; height: 120%; margin-left: -35vw; transform-origin: 50% 0; mix-blend-mode: screen; filter: blur(8px);
  background: conic-gradient(from 180deg at 50% 0, transparent 0 165deg, rgba(255, 214, 228, 0.1) 172deg, rgba(255, 255, 255, 0.17) 180deg, rgba(255, 214, 228, 0.1) 188deg, transparent 195deg);
  animation: cr-sway 10s ease-in-out infinite alternate; --a: -9deg; --b: 7deg; }
.cr-spot.s2 { margin-left: -20vw; --a: 16deg; --b: 4deg; animation-duration: 13s; opacity: 0.6; }
@keyframes cr-sway { from { transform: rotate(var(--a)); } to { transform: rotate(var(--b)); } }
.cr-word { position: absolute; left: 0; top: calc(50% - 0.5em); white-space: nowrap; font: 400 clamp(220px, 34vw, 560px) / 1 var(--display); letter-spacing: -0.01em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 46, 136, 0.2); will-change: transform; }
.cr-floor { position: absolute; left: 50%; bottom: 300px; width: 120vw; height: 340px; margin-left: -60vw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 46, 136, 0.28), rgba(255, 46, 136, 0.06) 60%, transparent); }

/* header: title left, words and the button right */
.cr-head { position: relative; z-index: 40; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px 64px; padding: 0 var(--pad); margin-bottom: clamp(18px, 3vh, 34px); }
.cr-title { margin: 14px 0 0 -0.03em; font: 400 clamp(64px, 8.6vw, 148px) / 0.86 var(--display); letter-spacing: -0.01em; }
.cr-title em { font: italic 400 0.8em/1 var(--serif); color: var(--hot); margin-left: 0.04em; text-shadow: 0 0 60px rgba(255, 46, 136, 0.45); }
.cr-head-r { max-width: 34rem; padding-bottom: 8px; }
.cr-head-r .lede { max-width: 40ch; }
.cr-cta { display: flex; align-items: center; gap: 18px 22px; flex-wrap: wrap; margin-top: 22px; }
.cr-hint { font: 500 10.5px/1.3 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }

/* the window */
.cr-window { position: relative; height: var(--wh); }
.cr-cols { position: absolute; inset: 0; z-index: 5; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 80%, transparent 100%); }
.cr-col { position: absolute; top: 0; height: 100%; will-change: transform; }
.cr-list, .cr-track { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--g, 16px); will-change: transform; }
.cr-card { position: relative; flex: none; border-radius: 14px; cursor: pointer; transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), filter 0.6s var(--ease); }
.cr-card figure { position: relative; margin: 0; border-radius: inherit; overflow: hidden; background: #1a0d13; box-shadow: 0 22px 40px -22px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.cr-card img { width: 100%; aspect-ratio: 352 / 480; height: auto; object-fit: cover; }
.cr-card figcaption { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.cr-no { display: inline-block; padding: 5px 8px 4px; border-radius: 999px; background: rgba(11, 6, 8, 0.66); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); font: 700 9.5px/1 var(--sans); letter-spacing: 0.2em; color: #fff; }
.cr-t { max-width: 100%; font: italic 400 15px/1.15 var(--serif); color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.5s var(--ease); }
.cr-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.5s; box-shadow: 0 0 0 2px var(--hot), 0 0 40px -6px rgba(255, 46, 136, 0.8); }
.cr-card:hover { transform: translateY(-4px) scale(1.04); z-index: 2; }
.cr-card:hover::after, .cr-card.is-cur::after { opacity: 1; }
.cr-card.is-cur::after { box-shadow: 0 0 0 1.5px rgba(255, 46, 136, 0.9); }
.cr-card:hover .cr-t { opacity: 1; transform: none; }
.cr-card .spark { z-index: 3; }

/* the arched window and its stand-in */
.cr-feat { position: absolute; z-index: 10; left: 50%; top: 0; width: var(--fw); height: var(--fh); margin: 0 0 0 calc(var(--fw) / -2); will-change: transform; }
.cr-arch { position: absolute; inset: 0; border-radius: 999px 999px 26px 26px; overflow: hidden; background: #1a0d13;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 70px 120px -40px rgba(0, 0, 0, 0.95), 0 0 140px -24px rgba(255, 46, 136, 0.6);
  -webkit-box-reflect: below 10px linear-gradient(transparent 72%, rgba(255, 255, 255, 0.2)); }
.cr-feat-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.cr-feat-img.is-on { opacity: 1; z-index: 1; }
.cr-feat-img.is-in { opacity: 1; z-index: 2; }
.cr-sheen { position: absolute; inset: -10% -60%; z-index: 3; pointer-events: none; mix-blend-mode: screen; will-change: transform;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.05) 44%, rgba(255, 255, 255, 0.24) 49%, rgba(255, 240, 246, 0.06) 54%, transparent 60%); }
.cr-arch::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 18%, transparent 78%, rgba(11, 6, 8, 0.35)); }
.cr-hair { position: absolute; inset: -14px; border-radius: 999px 999px 34px 34px; border: 1px solid rgba(233, 195, 138, 0.55); pointer-events: none; }
.cr-hair::before, .cr-hair::after { content: ""; position: absolute; width: 7px; height: 7px; top: 50%; margin-top: -3.5px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 10px rgba(233, 195, 138, 0.8); }
.cr-hair::before { left: -4px; } .cr-hair::after { right: -4px; }

/* the swing tag (hangs from the window's shoulder on a gold thread) */
.cr-tag { position: absolute; z-index: 12; right: calc(var(--fw) * -0.24); top: 22%; width: 138px; transform-origin: 50% -64px; animation: cr-swing 4.6s ease-in-out infinite; filter: drop-shadow(0 20px 18px rgba(0, 0, 0, 0.6)); }
.cr-tag::before { content: ""; position: absolute; left: 50%; top: -64px; width: 1px; height: 76px; background: linear-gradient(rgba(233, 195, 138, 0), var(--gold) 40%); }
.cr-tag-card { position: relative; display: block; padding: 24px 14px 14px; border-radius: 4px 4px 10px 10px; background: linear-gradient(160deg, #fffaf6, #f3e4dc);
  color: var(--ink-dark); clip-path: polygon(24% 0, 76% 0, 100% 15%, 100% 100%, 0 100%, 0 15%); }
@keyframes cr-swing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(3deg); } }
.cr-tag-hole { position: absolute; left: 50%; top: 8px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #3a1626; box-shadow: 0 0 0 2px var(--gold); }
.cr-tag-k { display: block; font: 600 8.5px/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: #a0526f; }
.cr-tag-n { display: block; margin: 8px 0 5px; font: 500 38px/0.9 var(--serif); letter-spacing: -0.02em; color: var(--ink-dark); }
.cr-tag-t { display: block; font: italic 400 15.5px/1.15 var(--serif); color: #6b2141; min-height: 2.3em; }

/* crystals spilled on the shelf, glinting */
.cr-gems { position: absolute; z-index: 12; left: 50%; top: calc(var(--fh) - 18px); width: calc(var(--fw) + 340px); height: 70px; margin-left: calc((var(--fw) + 340px) / -2); pointer-events: none; }
.cr-gem { position: absolute; width: var(--s, 10px); height: var(--s, 10px); border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0 18%, transparent 30%),
    conic-gradient(from 22deg, #f4f7ff 0 12.5%, #7d88b0 0 25%, #e9dcff 0 37.5%, #5b6690 0 50%, #ffffff 0 62.5%, #8a7fb3 0 75%, #d8f0ff 0 87.5%, #6c779f 0);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.6), 0 0 7px rgba(214, 226, 255, 0.55), 0 2px 3px rgba(0, 0, 0, 0.7); animation: cr-gem 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
.cr-gem.pk { background: radial-gradient(circle at 50% 50%, rgba(255, 240, 246, 0.95) 0 18%, transparent 30%),
    conic-gradient(from 22deg, #ffd0e4 0 12.5%, #b3125a 0 25%, #ff7fb6 0 37.5%, #8c0d46 0 50%, #ffe3ef 0 62.5%, #c41a66 0 75%, #ff9cc6 0 87.5%, #9e0f50 0); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.5), 0 0 8px rgba(255, 46, 136, 0.6), 0 2px 3px rgba(0, 0, 0, 0.7); }
@keyframes cr-gem { 0%, 100% { filter: brightness(0.9); } 50% { filter: brightness(1.15); } }
.g1 { left: 2%; top: 46%; --s: 10px; } .g2 { left: 7%; top: 70%; --s: 6px; --d: -1s; } .g3 { left: 12%; top: 40%; --s: 12px; --d: -2s; }
.g4 { left: 18%; top: 78%; --s: 7px; --d: -0.4s; } .g5 { left: 23%; top: 56%; --s: 5px; --d: -1.6s; } .g6 { left: 30%; top: 82%; --s: 10px; --d: -2.4s; }
.g7 { left: 41%; top: 88%; --s: 6px; --d: -0.8s; } .g8 { left: 57%; top: 90%; --s: 8px; --d: -1.2s; } .g9 { left: 68%; top: 80%; --s: 11px; --d: -2.8s; }
.g10 { left: 75%; top: 58%; --s: 6px; --d: -0.2s; } .g11 { left: 81%; top: 74%; --s: 9px; --d: -1.9s; } .g12 { left: 88%; top: 44%; --s: 13px; --d: -2.2s; }
.g13 { left: 93%; top: 68%; --s: 7px; --d: -0.6s; } .g14 { left: 97%; top: 50%; --s: 5px; --d: -1.4s; }

/* glints (JS) */
.cr-glint { position: absolute; z-index: 14; width: var(--gs, 34px); height: var(--gs, 34px); margin: calc(var(--gs, 34px) / -2) 0 0 calc(var(--gs, 34px) / -2); pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0 7%, rgba(255, 220, 238, 0.7) 14%, transparent 34%); animation: cr-glint 0.9s ease-out forwards; }
.cr-glint::before, .cr-glint::after { content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: 100%; margin-left: -0.75px; background: linear-gradient(transparent, #fff 45%, #fff 55%, transparent); }
.cr-glint::after { transform: rotate(90deg); }
@keyframes cr-glint { 0% { transform: scale(0) rotate(0deg); opacity: 0; } 30% { transform: scale(1) rotate(30deg); opacity: 1; } 100% { transform: scale(0.2) rotate(70deg); opacity: 0; } }

/* the index under the shelf */
.cr-index { position: absolute; z-index: 40; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 2px; margin: 0; padding: 6px; list-style: none; border-radius: 999px;
  background: rgba(11, 6, 8, 0.72); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -18px #000; }
.cr-index button { position: relative; display: block; min-width: 34px; padding: 9px 6px; border: 0; border-radius: 999px; background: none; color: var(--faint); font: 600 11px/1 var(--sans); letter-spacing: 0.08em; cursor: pointer; transition: color 0.3s, background 0.4s; }
.cr-index button:hover { color: #fff; }
.cr-index button[aria-pressed="true"] { color: #fff; background: linear-gradient(120deg, #ff2e88, #ff6aa8); box-shadow: 0 6px 18px -6px rgba(255, 46, 136, 0.9); }

/* props (anchors; props.js draws them) */

/* phone rows (JS) */
.cr-rows { display: none; }

/* the drying line: polaroids of all seventeen pegged on a sagging string, drifting along it */
.cr-line { position: relative; z-index: 20; height: 262px; margin-top: -18px; pointer-events: none; }
.cr-string { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.cr-string path { fill: none; stroke: rgba(246, 238, 232, 0.55); stroke-width: 1.2; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.6)); }
.cr-pol { position: absolute; left: 0; top: 0; width: var(--pw, 108px); margin: 0; padding: 7px 7px 26px; background: #fbf8f5; border-radius: 3px; transform-origin: 50% 0; will-change: transform;
  box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.85), 0 2px 4px rgba(0, 0, 0, 0.3); }
.cr-pol img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.5px; }
.cr-pol span { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: italic 400 14px/1 var(--serif); color: #4a1a2e; }
.cr-pin { position: absolute; left: 50%; top: -13px; width: 9px; height: 26px; margin-left: -4.5px; border-radius: 2px; background: linear-gradient(90deg, #ff6aa8, #ff2e88 55%, #c81566); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.cr-pin::after { content: ""; position: absolute; left: 1px; right: 1px; top: 11px; height: 3px; border-radius: 2px; background: #e9c38a; }
.cr-pol:nth-child(3n) .cr-pin { background: linear-gradient(90deg, #f3d6a8, #e9c38a 55%, #b8925a); }
.cr-pol:nth-child(3n) .cr-pin::after { background: #fff4f7; }

/* without JS: a plain grid of all seventeen */
html:not(.js) .cr-window { height: auto; }
html:not(.js) .cr-cols { position: relative; -webkit-mask-image: none; mask-image: none; overflow: visible; padding: calc(var(--fh) + 60px) var(--pad) 40px; }
html:not(.js) .cr-list { flex-flow: row wrap; justify-content: center; }
html:not(.js) .cr-card { width: 150px; }
html:not(.js) .cr-index, html:not(.js) .cr-hint { display: none; }

@media (max-width: 1100px) {
  .cr-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 820px), (max-aspect-ratio: 85/100) {
  .cr { --wh: min(132vw, 560px); --fh: calc(var(--wh) - 120px); padding-top: 64px; }
  .cr-head { gap: 18px; margin-bottom: 18px; }
  .cr-title { font-size: clamp(64px, 19vw, 96px); line-height: 0.84; }
  .cr-title em { display: block; margin-left: 0.35em; }
  .cr-cta { margin-top: 18px; gap: 12px 18px; }
  .cr-tag { width: 100px; right: -18px; top: auto; bottom: 14%; animation-duration: 5s; transform-origin: 50% -40px; }
  .cr-tag-card { padding: 20px 10px 10px; }
  .cr-tag-n { font-size: 30px; margin: 6px 0 2px; }
  .cr-tag-t { font-size: 13px; }
  .cr-tag-k { font-size: 7.5px; }
  .cr-tag::before { height: 50px; top: -40px; }
  .cr-hair { inset: -9px; }
  .cr-gems { width: calc(var(--fw) + 120px); margin-left: calc((var(--fw) + 120px) / -2); }
  .cr-index { left: 0; right: 0; bottom: 16px; transform: none; margin: 0 var(--pad); overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); padding: 6px 14px; }
  .cr-index::-webkit-scrollbar { display: none; }
  .cr-index button { min-width: 38px; padding: 10px 6px; }
  .cr-tag { top: 9%; bottom: auto; }
  .cr-rows { position: relative; z-index: 5; display: flex; flex-direction: column; gap: 10px; padding: 6px 0 0; overflow: hidden; }
  .cr-row { position: relative; height: var(--rh, 150px); }
  .cr-row .cr-track { position: absolute; left: 0; top: 0; flex-direction: row; }
  .cr-line { height: 214px; margin-top: 0; }
  .cr-pol { padding: 6px 6px 22px; }
  .cr-pol span { font-size: 12.5px; bottom: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-spot, .cr-tag, .cr-gem { animation: none; }
  .cr-card, .cr-t { transition: none; }
}