/* Interactive mock-ups (interactive.js): print studio, order journey, tilt + glare. */
/* ---- Print studio ---- */
.ps { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; margin-top: 28px; align-items: stretch; }
.ps-stage { position: relative; border-radius: 28px; overflow: hidden; min-height: 440px; display: grid; place-items: center;
    background: radial-gradient(420px 320px at 30% 20%, color-mix(in srgb, var(--pa) 14%, #fff), transparent 70%), linear-gradient(160deg, #f7f8fa, #eef0f4);
    border: 1px solid #e7e9ee; box-shadow: 0 30px 60px -40px rgba(20,24,33,.4); }
.ps-art { position: absolute; width: min(78%, 380px); height: auto; opacity: 0; transform: translateY(18px) scale(.94) rotate(-3deg);
    transition: opacity .45s ease, transform .6s cubic-bezier(.22, 1, .36, 1); filter: drop-shadow(0 30px 30px rgba(20,24,33,.22)); }
.ps-art.is-on { opacity: 1; transform: none; animation: psFloat 6s ease-in-out infinite; }
.ps-art [data-fill] { transition: fill .35s ease; }
.ps-tag { position: absolute; left: 18px; bottom: 18px; padding: 8px 14px; border-radius: 99px; background: #fff; border: 1px solid #e7e9ee; font: 600 13px/1 system-ui, sans-serif; color: #141821; box-shadow: 0 10px 20px -12px rgba(0,0,0,.3); }
.ps-tag::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px #16a34a33; vertical-align: 1px; }
@keyframes psFloat { 50% { transform: translateY(-8px); } }
.ps-panel { display: grid; gap: 18px; align-content: start; padding: 26px; border-radius: 28px; background: #fff; border: 1px solid #e7e9ee; }
.ps-panel fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ps-panel legend, .ps-field > span { display: flex; justify-content: space-between; margin-bottom: 10px; font: 700 13px/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #5b6170; }
.ps-field { display: block; }
.ps-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 5px; border-radius: 16px; background: #f3f4f7; }
.ps-seg label, .ps-swatches label { position: relative; cursor: pointer; }
.ps-seg input, .ps-swatches input { position: absolute; opacity: 0; pointer-events: none; }
.ps-seg span { display: grid; place-items: center; min-height: 44px; padding: 0 10px; border-radius: 12px; font: 600 14px/1.2 system-ui, sans-serif; color: #4b5160; text-align: center; transition: background .2s, color .2s, box-shadow .2s; }
.ps-seg input:checked + span { background: #fff; color: #141821; box-shadow: 0 4px 12px -6px rgba(0,0,0,.3); }
.ps-seg input:focus-visible + span, .ps-swatches input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--pa) 70%, #000); outline-offset: 2px; }
.ps-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.ps-swatches span { display: block; width: 44px; height: 44px; border-radius: 50%; background: var(--c); border: 1px solid rgba(0,0,0,.12); transition: transform .2s, box-shadow .2s; }
.ps-swatches input:checked + span { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--pa); transform: scale(1.06); }
.ps-field input[type="text"] { width: 100%; min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid #dfe2e8; font: 600 16px system-ui, sans-serif; color: #141821; }
.ps-field input[type="text"]:focus { outline: 3px solid color-mix(in srgb, var(--pa) 35%, transparent); border-color: var(--pa); }
.ps-field input[type="range"] { width: 100%; accent-color: var(--pa); min-height: 32px; }
.ps-field output { color: #141821; letter-spacing: 0; }
.ps-price { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 12px; padding: 18px 20px; border-radius: 18px; background: color-mix(in srgb, var(--pa) 8%, #fff); border: 1px solid color-mix(in srgb, var(--pa) 25%, #e7e9ee); }
.ps-price span { font: 600 13px/1 system-ui, sans-serif; color: #5b6170; }
.ps-price strong { grid-row: span 2; font: 800 34px/1 system-ui, sans-serif; letter-spacing: -.03em; color: #141821; font-variant-numeric: tabular-nums; }
.ps-price small { font-size: 13px; color: #15803d; font-weight: 600; }
.ps.bump .ps-price strong { animation: psBump .35s ease; }
@keyframes psBump { 40% { transform: scale(1.06); } }
.ps-note { margin: 0; font-size: 13px; color: #5b6170; }
@media (max-width: 900px) { .ps { grid-template-columns: minmax(0, 1fr); } .ps-stage { min-height: 320px; } }

/* ---- Order journey ---- */
.oj { --p: 0; margin-top: 28px; padding: 26px; border-radius: 28px; background: #fff; border: 1px solid #e7e9ee; box-shadow: 0 30px 60px -45px rgba(20,24,33,.45); }
.oj-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.oj-head small { display: block; font: 600 13px/1 system-ui, sans-serif; color: #5b6170; margin-bottom: 6px; }
.oj-head b { font-size: 1.25rem; color: #141821; }
.oj-replay { min-height: 44px; padding: 0 18px; border-radius: 99px; border: 1px solid #dfe2e8; background: #fff; font: 600 14px system-ui, sans-serif; color: #141821; cursor: pointer; transition: background .2s, color .2s; }
.oj-replay:hover { background: var(--pa); color: var(--pi); border-color: transparent; }
.oj-track { position: relative; height: 8px; margin: 0 22px 38px; border-radius: 8px; background: #eef0f4; }
.oj-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--pa), color-mix(in srgb, var(--pa) 55%, var(--pb))); transition: width 1.1s cubic-bezier(.22, 1, .36, 1); }
.oj-parcel { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 44px; height: 44px; translate: -50% -50%; display: grid; place-items: center; border-radius: 14px; background: var(--pa); color: var(--pi);
    box-shadow: 0 12px 24px -10px var(--pa); transition: left 1.1s cubic-bezier(.22, 1, .36, 1); animation: ojBob 1.4s ease-in-out infinite; }
@keyframes ojBob { 50% { translate: -50% -62%; } }
.oj-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; }
.oj-steps li { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 16px; border: 1px solid #eef0f4; transition: background .3s, border-color .3s, transform .3s; }
.oj-steps .oj-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #eef0f4; color: #5b6170; font: 700 13px system-ui, sans-serif; transition: background .3s, color .3s; }
.oj-steps b { font-size: 15px; color: #141821; }
.oj-steps small { font-size: 13px; line-height: 1.45; color: #5b6170; }
.oj-steps li.done .oj-dot { background: #16a34a; color: #fff; }
.oj-steps li.now { border-color: color-mix(in srgb, var(--pa) 45%, transparent); background: color-mix(in srgb, var(--pa) 6%, #fff); transform: translateY(-3px); }
.oj-steps li.now .oj-dot { background: var(--pa); color: var(--pi); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pa) 20%, transparent); }
@media (max-width: 760px) { .oj-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Tilt + glare on mock-ups ---- */
.tilt-on { transform-style: preserve-3d; transition: transform .25s ease-out; }
.tilt-on:not(.pp-hero-grid > *) { position: relative; }
.ps-stage.tilt-on:hover, .pp-show-img.tilt-on:hover { transform: perspective(1000px) rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg)); }
.tilt-glare, .ps-glare { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s;
    background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.45), transparent 60%); mix-blend-mode: soft-light; }
.tilt-on:hover > .tilt-glare, .tilt-on:hover > .ps-glare { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ps-art.is-on, .oj-parcel { animation: none; } .oj-fill, .oj-parcel { transition: none; } }

/* ---- App simulator ---- */
.sim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 40px; margin-top: 28px; align-items: center; max-width: 980px; margin-inline: auto; }
.sim-seg { grid-template-columns: repeat(min(var(--k), 4), minmax(0, 1fr)) !important; }
.sim-phone { position: relative; justify-self: center; width: 300px; aspect-ratio: 9 / 18.5; padding: 12px; border-radius: 44px; background: #111318; box-shadow: 0 50px 80px -40px rgba(20,24,33,.6), inset 0 0 0 2px #2a2d35; }
.sim-phone::before { content: ""; position: absolute; top: 20px; left: 50%; width: 84px; height: 22px; translate: -50% 0; border-radius: 14px; background: #111318; z-index: 2; }
.sim-screen { height: 100%; border-radius: 34px; overflow: hidden; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; padding: 52px 16px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--pa) 10%, #fff), #f6f7f9 40%); color: #141821; }
.sim-bar { display: flex; justify-content: space-between; align-items: center; }
.sim-bar b { font-size: 17px; }
.sim-live { font: 700 11px/1 system-ui, sans-serif; padding: 5px 9px; border-radius: 99px; background: #e7f6ec; color: #15803d; }
.sim-card { padding: 14px; border-radius: 16px; background: #fff; border: 1px solid #e9ebf0; display: grid; gap: 4px; }
.sim-card small, .sim-total small { font: 600 12px/1.2 system-ui, sans-serif; color: #5b6170; text-transform: uppercase; letter-spacing: .06em; }
.sim-card b { font-size: 18px; }
.sim-card span { font-size: 13px; color: #5b6170; }
.sim-pick { border-color: color-mix(in srgb, var(--pa) 40%, #e9ebf0); box-shadow: 0 10px 20px -16px var(--pa); }
.sim-meter { display: block; height: 6px; border-radius: 6px; background: #eef0f4; overflow: hidden; margin-top: 6px; }
.sim-meter > i { display: block; height: 100%; width: 4%; border-radius: inherit; background: var(--pa); transition: width .35s ease; }
.sim-total { align-self: end; padding: 16px; border-radius: 18px; background: #141821; color: #fff; display: grid; gap: 4px; }
.sim-total small { color: rgba(255,255,255,.7); }
.sim-total b { font: 800 28px/1.1 system-ui, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sim-btn { display: grid; place-items: center; min-height: 46px; border-radius: 14px; background: var(--pa); color: var(--pi); font-weight: 700; font-size: 15px; }
.sim.bump .sim-total b, .sim.bump .ps-price strong { animation: psBump .35s ease; }
.sim-phone.tilt-on:hover { transform: perspective(1000px) rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg)); }
@media (max-width: 900px) { .sim { grid-template-columns: minmax(0, 1fr); } .sim-phone { width: min(280px, 80vw); } }

/* ---- Studio stage: tabletop, soft key light, real shadows (print studio v2) ---- */
.ps-stage { background:
    radial-gradient(520px 300px at 50% 18%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(380px 260px at 18% 0%, color-mix(in srgb, var(--pa) 16%, transparent), transparent 70%),
    linear-gradient(180deg, #eceef2 0%, #e4e6eb 62%, #d9dce2 62.2%, #e6e8ec 100%) !important; perspective: 1200px; }
.ps-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.55), transparent 40%), repeating-linear-gradient(90deg, rgba(0,0,0,.015) 0 2px, transparent 2px 6px); }
.ps-art { width: min(82%, 400px) !important; filter: drop-shadow(0 18px 18px rgba(20,24,33,.18)) drop-shadow(0 4px 4px rgba(20,24,33,.12)) !important; transform-origin: 50% 85%; }
.ps-art.is-on { animation: psTurn 7s ease-in-out infinite !important; }
@keyframes psTurn { 0%, 100% { transform: rotateY(-6deg) translateY(0); } 50% { transform: rotateY(6deg) translateY(-6px); } }
.ps-art.is-on text[data-text] { animation: psInk .5s ease; }
@keyframes psInk { from { opacity: 0; } to { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .ps-art.is-on { animation: none !important; } }