/* Interactive features: receipt printer, blooming orchid, retro pop-up (home),
   wax-seal envelope (contact) and magazine flipbook (How It Works).
   All motion is transform/opacity/clip-path and fades only for reduced motion. */

/* ---------- 1. Receipt printer ---------- */
.order { border-top: 1px solid var(--line); background: linear-gradient(180deg, #fff, var(--blush) 160%); }
.order__head { margin-bottom: clamp(28px, 4vw, 52px); }
.order__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.order-card { position: relative; padding: clamp(24px, 3vw, 40px); background: var(--ivory); border: 1px solid #e3d6cf; border-radius: 6px; box-shadow: 0 2px 0 #efe6df, 0 22px 40px rgba(105, 42, 66, .1); outline: 1px solid #eadfd8; outline-offset: -10px; }
.order-card__title { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px dashed #d8c8c0; font: 700 .8rem/1 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--burgundy); }
.order-card__script { font: 400 1.9rem/1 var(--font-script); letter-spacing: 0; text-transform: none; color: var(--orchid); }
.order-group { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.order-group legend { padding: 0; margin-bottom: 6px; font: italic 400 1.35rem/1.2 "Bodoni Moda", Georgia, serif; color: var(--burgundy); }
.order-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; transition: background-color .2s; }
.order-item:hover { background: rgba(248, 229, 236, .6); }
.order-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.order-item__box { flex: none; position: relative; width: 22px; height: 22px; border: 1.5px solid var(--burgundy); border-radius: 5px; background: #fff; transition: background-color .2s; }
.order-item input:checked + .order-item__box { background: var(--burgundy); }
.order-item input:checked + .order-item__box::after { content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.order-item input:focus-visible + .order-item__box { outline: 2px solid var(--orchid); outline-offset: 3px; }
.order-card__note { min-height: 1.5em; margin: 6px 0 12px; color: var(--orchid); font-weight: 600; }
.order-card__print { width: 100%; justify-content: center; }

.printer-wrap { display: flex; flex-direction: column; align-items: center; }
.printer { position: relative; z-index: 2; width: min(100%, 340px); height: 150px; border-radius: 26px 26px 18px 18px; background: linear-gradient(180deg, #fffdf8, #f3ece2 60%, #e7ddd1); box-shadow: inset 0 2px 0 #fff, inset 0 -6px 12px rgba(105, 42, 66, .08), 0 22px 30px rgba(105, 42, 66, .16), 0 3px 4px rgba(105, 42, 66, .1); }
.printer__light { position: absolute; top: 24px; right: 26px; width: 10px; height: 10px; border-radius: 50%; background: #e6d5dc; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); transition: background-color .3s, box-shadow .3s; }
.printer.is-printing .printer__light, .printer__light.is-on { background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.printer__logo { position: absolute; top: 46px; left: 50%; width: 46%; transform: translateX(-50%); opacity: .85; }
.printer__slot { position: absolute; left: 12%; right: 12%; bottom: 22px; height: 10px; border-radius: 10px; background: linear-gradient(#3a2f33, #6b5a60); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5), 0 1px 0 #fff; }
.receipt-feed { position: relative; z-index: 1; width: min(88%, 290px); margin-top: -27px; overflow: hidden; height: 0; }
.receipt { --paper: #fbf9f3; position: relative; padding: 26px 20px 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(90deg, rgba(0, 0, 0, .03), transparent 8%, transparent 92%, rgba(0, 0, 0, .03)), var(--paper); color: #3a3236; font: 500 .82rem/1.65 ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace; box-shadow: 0 10px 18px rgba(105, 42, 66, .1); -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x; mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x; }
.receipt:focus { outline: none; }
.receipt__line { margin: 0; overflow-wrap: anywhere; }
.receipt__brand { text-align: center; font: 700 1.05rem/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .28em; }
.receipt__tag { text-align: center; margin-bottom: 10px; }
.receipt__meta { text-align: center; font-size: .74rem; }
.receipt__rule { margin: 10px 0; border: 0; border-top: 1.5px dashed #b9aeb2; }
.receipt__total { display: flex; gap: 6px; font-weight: 700; }
.receipt__total span:nth-child(2) { flex: 1; min-width: 12px; overflow: hidden; white-space: nowrap; }
.receipt__total span:nth-child(2)::before { content: "........................................................................"; }
.receipt__thanks { margin-top: 14px; text-align: center; font-size: .74rem; }
.receipt-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; }
.receipt-actions[hidden] { display: none; }
.receipt-again { min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--burgundy); font: 600 .9rem var(--font-body); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
html:not(.js) .printer-wrap { display: none; }
@media (max-width: 860px) {
  .order__grid { grid-template-columns: minmax(0, 1fr); }
  .order-item { min-height: 48px; font-size: 1.02rem; }
  .receipt-feed { width: min(92%, 360px); }
  .receipt { font-size: .88rem; }
}

/* ---------- 4. Blooming orchid ---------- */
.bloom { position: relative; width: clamp(110px, 11vw, 160px); aspect-ratio: 452 / 412; flex: none; }
.bloom__img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(105, 42, 66, .2)); will-change: transform, clip-path; }
.bloom__spark { position: absolute; width: 12px; height: auto; opacity: 0; transform: scale(.2) rotate(-45deg); transition: opacity .5s, transform .7s var(--ease); }
.bloom__spark:nth-of-type(2) { top: -4%; right: 2%; width: 15px; }
.bloom__spark:nth-of-type(3) { bottom: 4%; left: -8%; width: 10px; transition-delay: .15s; }
.bloom__spark:nth-of-type(4) { top: 30%; left: -12%; width: 12px; transition-delay: .3s; }
.bloom.is-bloomed .bloom__spark { opacity: 1; transform: none; animation: bloom-twinkle 2.6s ease-in-out .8s infinite; }
@keyframes bloom-twinkle { 50% { opacity: .35; transform: scale(.7) rotate(20deg); } }
@media (max-width: 900px) { .bloom { width: 74px; } }

/* ---------- 5. Retro pop-up ---------- */
.retro-pop { position: fixed; z-index: 90; right: 28px; bottom: 96px; width: min(340px, calc(100vw - 24px)); border-radius: 10px; overflow: hidden; background: var(--ivory); border: 1px solid #c9c2c6; box-shadow: 0 24px 50px rgba(48, 37, 42, .26), 0 2px 6px rgba(48, 37, 42, .16); font-family: var(--font-body); animation: pop-in .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.retro-pop[hidden] { display: none; }
@keyframes pop-in { from { opacity: 0; transform: scale(.7) translateY(16px); } }
.retro-pop__bar { position: relative; display: flex; align-items: center; height: 26px; padding: 0 9px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px 2px), linear-gradient(#fbfbfc, #d4d5d9 48%, #c3c5ca 52%, #e2e3e6); border-bottom: 1px solid #a9abb1; }
.retro-pop__lights { position: relative; z-index: 1; display: flex; gap: 7px; align-items: center; }
.retro-pop__lights i, .retro-pop__close { width: 13px; height: 13px; border-radius: 50%; padding: 0; border: 1px solid rgba(0, 0, 0, .25); background: radial-gradient(circle at 50% 30%, #fff 0 18%, transparent 40%), linear-gradient(#ececef, #a9abb1); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .8); }
.retro-pop__close { position: relative; cursor: pointer; background: radial-gradient(circle at 50% 30%, #ffe3ef 0 18%, transparent 40%), linear-gradient(#e78fb6, #A54379); }
.retro-pop__close::before { content: ""; position: absolute; inset: -14px; }
.retro-pop__title { position: absolute; inset: 0; display: grid; place-items: center; font: 600 12px/1 -apple-system, "Lucida Grande", var(--font-body); color: #4a4448; text-shadow: 0 1px 0 #fff; }
.retro-pop__body { display: flex; gap: 14px; align-items: center; padding: 20px 20px 10px; }
.retro-pop__icon { width: 40px; height: 40px; flex: none; }
.retro-pop__body p { margin: 0; font: 600 1rem/1.45 var(--font-body); color: var(--ink); }
.retro-pop__btns { display: flex; justify-content: flex-end; gap: 10px; padding: 8px 18px 18px; }
.retro-pop__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 84px; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid #a9a3a7; background: linear-gradient(#ffffff, #ebe7ea 50%, #dcd6da 51%, #f4f1f3); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, .12); color: var(--ink); font: 600 .9rem/1 var(--font-body); text-decoration: none; cursor: pointer; }
.retro-pop__btn--go { border-color: #7d2f52; color: #fff; background: linear-gradient(#f0a5c6, #d96a9e 48%, #b94f84 52%, #e58bb5); text-shadow: 0 -1px 0 rgba(105, 42, 66, .4); }
.retro-pop__btn:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }
@media (max-width: 600px) { .retro-pop { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; } .retro-pop__body { padding: 14px 16px 6px; } .retro-pop__btns { padding: 6px 14px 14px; } }

/* ---------- 2. Wax-seal envelope ---------- */
.wax { position: relative; }
.wax__note { margin: 0 0 6px; text-align: center; font: 400 1.9rem/1.1 var(--font-script); color: var(--orchid); transform: rotate(-3deg); }
.wax__env { position: relative; display: block; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 16 / 10.5; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1400px; }
.wax__env:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 8px; border-radius: 8px; }
.wax__back, .wax__pocket, .wax__flap, .wax__paper { position: absolute; left: 0; right: 0; }
.wax__back { inset: 0; border-radius: 8px; background: #efe5d6; box-shadow: 0 26px 44px rgba(105, 42, 66, .18), 0 3px 6px rgba(105, 42, 66, .1); }
.wax__paper { left: 7%; right: 7%; top: 8%; height: 80%; border-radius: 4px; background: var(--ivory); box-shadow: 0 2px 6px rgba(105, 42, 66, .12); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 7%; gap: 6px; font: italic 400 1.1rem/1.2 "Bodoni Moda", Georgia, serif; color: var(--burgundy); }
.wax__paper img { width: 44%; height: auto; }
.wax__pocket { inset: 0; border-radius: 8px; overflow: hidden; z-index: 2; pointer-events: none; }
.wax__pocket::before, .wax__pocket::after { content: ""; position: absolute; inset: 0; }
.wax__pocket::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(to top right, #f6efe3 49.6%, transparent 50%) left / 50.5% 100% no-repeat, linear-gradient(to top left, #f3eadc 49.6%, transparent 50%) right / 50.5% 100% no-repeat; }
.wax__pocket::after { background: linear-gradient(to top, #f8f2e8, #f1e8da); clip-path: polygon(0 100%, 50% 46%, 100% 100%); filter: drop-shadow(0 -2px 2px rgba(105, 42, 66, .08)); }
.wax__flap { top: 0; height: 58%; z-index: 3; transform-origin: 50% 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.4, .1, .2, 1) .45s; }
.wax__flap::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #f7f0e5, #ece1d0); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 3px 3px rgba(105, 42, 66, .14)); backface-visibility: hidden; border-radius: 8px 8px 0 0; }
.wax__seal { position: absolute; z-index: 4; left: 50%; top: 58%; width: clamp(70px, 17%, 96px); aspect-ratio: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 4px 5px rgba(105, 42, 66, .35)); }
.wax__half { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #f3b4d0, #d96a9e 45%, #a54379 80%, #8a3462); border-radius: 47% 53% 50% 50% / 52% 47% 53% 48%; box-shadow: inset 0 -3px 6px rgba(105, 42, 66, .45), inset 0 3px 4px rgba(255, 255, 255, .45), inset 0 0 0 4px rgba(165, 67, 121, .55), inset 0 0 0 5px rgba(255, 255, 255, .2); display: grid; place-items: center; transition: transform .6s cubic-bezier(.4, 0, .6, 1), opacity .6s .2s; }
.wax__half img { width: 54%; height: auto; opacity: .55; mix-blend-mode: multiply; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5)); }
.wax__half--l { clip-path: polygon(0 0, 52% 0, 46% 22%, 55% 40%, 45% 58%, 54% 78%, 48% 100%, 0 100%); }
.wax__half--r { clip-path: polygon(52% 0, 100% 0, 100% 100%, 48% 100%, 54% 78%, 45% 58%, 55% 40%, 46% 22%); }
.wax.is-opening .wax__half--l { transform: translate(-16px, 22px) rotate(-18deg); opacity: 0; }
.wax.is-opening .wax__half--r { transform: translate(16px, 26px) rotate(16deg); opacity: 0; }
.wax.is-opening .wax__flap { transform: rotateX(180deg); }
.wax.is-opening .wax__flap { z-index: 1; transition-property: transform, z-index; }
.wax.is-opening .wax__paper { animation: wax-rise .9s cubic-bezier(.3, .1, .2, 1) 1.15s both; }
@keyframes wax-rise { to { transform: translateY(-62%); } }
.wax__skip { display: block; margin: 14px auto 0; min-height: 40px; padding: 0 10px; border: 0; background: none; color: var(--burgundy); font: 600 .875rem var(--font-body); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.wax__letter { animation: wax-letter .7s cubic-bezier(.2, .7, .1, 1) both; }
@keyframes wax-letter { from { opacity: 0; transform: translateY(40px); } }
.wax__lede { margin: 0 0 20px; }
.js .wax:not(.is-open) .wax__letter { display: none; }
.wax.is-open .wax__closed { display: none; }
html:not(.js) .wax__closed { display: none; }
@media (max-width: 600px) { .wax__note { font-size: 1.6rem; } .wax__paper { font-size: .95rem; } }

/* ---------- 3. Flipbook ---------- */
.guide-book[hidden] { display: none; }
.guide-book { text-align: center; }
.guide-book__head { margin: 0 auto clamp(24px, 3vw, 40px); max-width: 36em; }
.guide-book__head p:not(.eyebrow) { color: var(--ink-soft); margin: 14px 0 0; }
.guide-book__head .eyebrow { justify-content: center; }
.flipbook { position: relative; margin: 0 auto; max-width: 1100px; }
.flipbook::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -26px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(48, 37, 42, .28), transparent); filter: blur(8px); z-index: -1; }
.flipbook__page { background: var(--ivory); overflow: hidden; }
.flipbook__page img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.flipbook__controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 34px; }
.flipbook__arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--burgundy); background: #fff; color: var(--burgundy); font-size: 1.2rem; cursor: pointer; }
.flipbook__arrow:disabled { opacity: .35; cursor: default; }
.flipbook__count { min-width: 8em; font-size: .9rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.guide-book__dl { margin-top: 26px; display: flex; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .bloom__spark, .wax__half, .wax__flap { transition: opacity .4s !important; }
  .bloom.is-bloomed .bloom__spark { animation: none; }
  .retro-pop { animation: pop-fade .3s both; }
  .wax__letter { animation: pop-fade .4s both; }
  .wax.is-opening .wax__paper { animation: none; }
  .wax.is-opening .wax__flap { transform: none; opacity: 0; }
  .wax.is-opening .wax__half--l, .wax.is-opening .wax__half--r { transform: none; }
}
@keyframes pop-fade { from { opacity: 0; } }
@media (max-width: 900px) { .contact > .wax { order: -1; } }
.wax__letter:focus { outline: none; }
.flipbook--static { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }