/* Devices stay still under the pointer; only the copper setting follows shared depth. */
.giftme-showcase { position:relative; isolation:isolate; padding:26px 0 12px; min-width:0; }
.giftme-setting { position:absolute; z-index:-1; inset:3% 0 0; overflow:hidden; pointer-events:none; }
.giftme-setting::before,
.giftme-setting::after { content:""; position:absolute; border:1px solid #d0b18430; }
.giftme-setting::before { width:67%; height:75%; top:8%; left:8%; background:linear-gradient(135deg,#b786491c,transparent 55%); transform:translate3d(calc(var(--depth-x,0)*-23px),calc(var(--depth-y,0)*-12px + var(--depth-scroll,0)*-35px),0) rotate(-8deg); }
.giftme-setting::after { width:37%; height:71%; right:2%; top:20%; background:linear-gradient(150deg,#dec79511,#8f6a3010); transform:translate3d(calc(var(--depth-x,0)*20px),calc(var(--depth-y,0)*14px + var(--depth-scroll,0)*28px),0) rotate(9deg); }
.giftme-phone-scene { position:relative; isolation:isolate; overflow:clip; padding:28px 0 42px; }
.giftme-device { min-width:0; margin:0; }
.giftme-device figcaption { position:static; transform:none; max-width:none; grid-area:auto; padding:0 0 12px!important; border:0!important; background:none!important; display:flex; justify-content:space-between; gap:10px; align-items:baseline; color:#d7c6ad; font:14px/1.6 var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.giftme-device figcaption span { color:#a89d8c; font:14px/1.6 var(--sans); letter-spacing:0; text-transform:none; }
.giftme-device--front { position:relative; z-index:3; width:min(100%,420px); margin:0 auto; }
.giftme-phone { padding:7px; border:1px solid #85817b; border-radius:35px; background:#28292c; box-shadow:0 30px 65px #0005,inset 0 0 0 2px #090a0c; }
.giftme-phone-top { display:flex; justify-content:center; height:21px; background:#0b0d11; border-radius:27px 27px 0 0; padding-top:5px; }
.giftme-phone-top::before { content:""; width:68px; height:10px; border-radius:10px; background:#020304; }
.giftme-phone iframe { display:block; width:100%; height:740px; border:0; border-radius:0 0 27px 27px; background:#0b0d11; }
.giftme-rear { position:absolute; top:114px; width:min(29%,340px); pointer-events:none; opacity:.75; }
.giftme-rear .giftme-phone { border-color:#645b4c; box-shadow:0 20px 40px #0003; }
.giftme-rear iframe { height:650px; }
.giftme-rear--pools { left:7%; transform:translate3d(calc(var(--depth-x,0)*-21px),calc(var(--depth-y,0)*-11px + var(--depth-scroll,0)*-32px),0) rotate(-9deg); }
.giftme-rear--nft { right:7%; top:156px; transform:translate3d(calc(var(--depth-x,0)*19px),calc(var(--depth-y,0)*13px + var(--depth-scroll,0)*27px),0) rotate(9deg); }
.giftme-example-note { margin:23px 0 0; color:#c5bcad; font:14px/1.8 var(--sans); }
.giftme-example-note a { color:#f0dcc0; text-decoration:underline; text-underline-offset:4px; }
@media(max-width:980px) {
  .giftme-rear { width:300px; }
  .giftme-rear--pools { left:-5%; }
  .giftme-rear--nft { right:-5%; }
}
@media(max-width:600px) {
  .giftme-phone-scene { padding-top:90px; }
  .giftme-phone iframe { height:650px; }
  .giftme-rear { width:76%; top:66px; opacity:.6; }
  .giftme-rear--pools { left:0; }
  .giftme-rear--nft { right:0; top:75px; }
  .giftme-setting { inset:0; }
  .giftme-device figcaption { flex-wrap:wrap; gap:0; }
  .giftme-device--front figcaption { position:relative; top:-90px; }
}
@media(prefers-reduced-motion:reduce) {
  .giftme-setting::before,.giftme-setting::after { transform:none; }
  .giftme-rear--pools { transform:rotate(-9deg); }
  .giftme-rear--nft { transform:rotate(9deg); }
}