/* A single translucent memory travels beyond the cover and across the page. */
.cover-stage.has-memories { padding: 30px 48px 82px; isolation: isolate; }
.cover-stage.has-memories > img { width: 100%; }
.has-memories::before { content: ''; position: absolute; inset: 8% 0 15%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse,rgba(245,223,166,.6),rgba(220,189,127,.12) 52%,transparent 70%); }
.memory-bubbles { position: fixed; inset: 0; z-index: 25; overflow: hidden; pointer-events: none; }
.memory-bubble { --size: 136px; position: absolute; left: 0; top: 0; width: var(--size); height: var(--size); padding: 3px; border: 1px solid rgba(255,249,219,.65); border-radius: 50%; background: linear-gradient(140deg,rgba(255,254,236,.2),rgba(228,208,169,.03) 48%,rgba(137,178,169,.14)); box-shadow: inset 1px 1px 8px rgba(255,255,255,.65),inset -3px -3px 12px rgba(129,163,164,.2),0 7px 30px rgba(98,69,35,.08),0 0 24px rgba(255,244,210,.4); cursor: pointer; pointer-events: auto; transform-origin: center; touch-action: manipulation; will-change: transform,opacity; }
.memory-bubble[hidden] { display: none; }
.memory-bubble img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; clip-path: circle(50%); overflow: hidden; }
.memory-bubble::before { content: ''; position: absolute; z-index: 1; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 29% 19%,rgba(255,255,255,.75),transparent 27%),linear-gradient(130deg,rgba(255,247,201,.18),transparent 47%,rgba(172,213,215,.2)); pointer-events: none; }
.memory-bubble::after { content: ''; position: absolute; inset: -8px; border-radius: inherit; border: 1px solid transparent; pointer-events: none; }
.memory-bubble:hover { box-shadow: 0 0 0 3px rgba(255,248,222,.35),0 0 40px rgba(214,160,74,.3); }
.memory-bubble:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
.memory-bubble.is-popping::after { animation: memory-pop .7s ease-out; }
.memory-invitation { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.memory-invitation p { margin: 0 auto 5px; color: var(--green); font: italic 1.3rem/1.4 'Cormorant Garamond',serif; }
.memory-pause { padding: 7px 12px; border: 0; background: transparent; color: #725944; font: .7rem/1.4 Inter,sans-serif; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.memory-pause:focus-visible, .memory-close:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.memory-bubbles-static { position: absolute; inset: auto 0 70px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; overflow: visible; }
.memory-bubbles-static .memory-bubble { position: relative; width: 58px; height: 58px; flex: 0 0 58px; will-change: auto; }
.cover-stage .memory-bubble img { width: 100%; height: 100%; object-fit: cover; clip-path: circle(50%); filter: none; }
@keyframes memory-pop { from { transform: scale(.9); border-color: rgba(255,242,198,.9); opacity: 1; } to { transform: scale(2); border-color: rgba(214,160,74,.1); opacity: 0; } }
.memory-open { overflow: hidden; }
.memory-dialog { width: min(580px,calc(100% - 28px)); max-height: calc(100dvh - 28px); padding: 0; border: 1px solid #d6bc87; border-radius: 14px; background: #fffaf0; color: var(--ink); overflow: auto; box-shadow: 0 25px 100px rgba(13,22,17,.45),0 0 50px rgba(255,229,175,.22); }
.memory-dialog[open] { animation: memory-unfold .55s ease-out; }
.memory-dialog::backdrop { background: rgba(17,30,25,.76); backdrop-filter: blur(8px); }
.memory-window { padding: 28px 32px 22px; text-align: center; position: relative; background: radial-gradient(ellipse at 50% 0,#fff0ca,transparent 60%); }
.memory-close { position: absolute; right: 10px; top: 8px; width: 42px; height: 42px; padding: 0; border: 0; background: transparent; color: var(--brown); font-size: 30px; cursor: pointer; }
.memory-kicker { margin: 0 auto 8px; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--copper); }
.memory-dialog h2 { max-width: 20ch; margin: 0 auto 18px; font-size: clamp(1.8rem,4vw,2.65rem); line-height: 1.06; font-weight: 500; }
.memory-scene { display: block; margin: 0 auto; width: auto; height: auto; max-height: 49dvh; max-width: 100%; object-fit: contain; border-radius: 3px; box-shadow: 0 10px 30px rgba(84,32,11,.17); }
#memory-caption { margin: 14px auto; font-size: .68rem; color: #735e4d; }
.memory-order { padding: .85rem 1.5rem; }
.memory-retailer { margin: 9px auto 0; font-size: .65rem; color: #735e4d; }
@keyframes memory-unfold { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media(max-width:760px) { .cover-stage.has-memories { width: min(440px,100%); justify-self: center; padding: 35px 52px 82px; } .hero-grid:has(.has-memories) { padding-top: 30px; gap: 28px; } .memory-window { padding: 30px 16px 20px; } .memory-dialog h2 { font-size: 1.9rem; } }
@media(prefers-reduced-motion:reduce) { .cover-stage.has-memories { padding-bottom: 210px; } .memory-dialog[open], .memory-bubble.is-popping::after { animation: none; } .memory-dialog::backdrop { backdrop-filter: none; } }