/* iPhone ⇄ Android switch for the Work-Flow phone demos.
   Tap "Google Play" or "App Store": the phone swings in 3D while the old body is eaten away from
   both diagonal corners toward a glossy liquid seam in the middle, revealing the other phone. */

.wf-page .wp-platform-badge[data-wp-platform] { cursor: pointer; transition: border-color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease; }
.wf-page .wp-platform-badge[data-wp-platform][aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--wp-glow, #8b9cff) 70%, transparent);
  background: color-mix(in srgb, var(--wp-glow, #8b9cff) 14%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp-glow, #8b9cff) 14%, transparent);
}
.wf-page .wp-platform-badge[data-wp-platform]:focus-visible { outline: 2px solid var(--wp-glow, #8b9cff); outline-offset: 3px; }

.wp-device { perspective: 1400px; }
.wp-device .wp-phone { transform-style: preserve-3d; will-change: transform; }

/* The swing: rotate on Y (direction depends on target) with a little drop and tilt. */
.wp-device.is-flipping .wp-phone { animation: wp-swing-left 1.15s cubic-bezier(.55, .05, .25, 1) both; }
.wp-device.is-flipping.to-ios .wp-phone { animation-name: wp-swing-right; }
@keyframes wp-swing-left {
  0% { transform: none; }
  45% { transform: translateY(16px) rotateX(16deg) rotateY(-42deg) scale(.9); }
  100% { transform: none; }
}
@keyframes wp-swing-right {
  0% { transform: none; }
  45% { transform: translateY(16px) rotateX(16deg) rotateY(42deg) scale(.9); }
  100% { transform: none; }
}

/* Snapshot of the outgoing phone, laid exactly on top and masked away diagonally by JS. */
.wp-phone-ghost {
  position: absolute !important;
  inset: 0;
  margin: 0 !important;
  pointer-events: none;
  z-index: 3;
  animation: none !important;
  transform: none !important;
}
.wp-phone-seam {
  position: absolute;
  inset: -2%;
  pointer-events: none;
  z-index: 4;
  border-radius: inherit;
  background:
    linear-gradient(var(--seam-a, 135deg), rgba(255,255,255,0) 0%, rgba(190,220,255,.0) 30%, rgba(225,240,255,.95) 50%, rgba(190,220,255,0) 70%, rgba(255,255,255,0) 100%),
    linear-gradient(calc(var(--seam-a, 135deg) + 90deg), rgba(140,170,255,.35), rgba(255,140,230,.35), rgba(120,240,220,.35));
  background-size: 100% 100%, 200% 200%;
  opacity: .9;

  animation: wp-seam-shimmer 1.15s linear both;
}
@keyframes wp-seam-shimmer { from { background-position: 0 0, 0% 0%; } to { background-position: 0 0, 100% 100%; } }

/* ---------- Android look ---------- */
:is(.wp-device, .wp-ghost-wrap).is-android .wp-phone {
  padding: 2cqw;
  border-radius: 10.5cqw;
  background: linear-gradient(160deg, #2c2f36 0%, #15171c 40%, #24272e 70%, #0f1013 100%);
  box-shadow: 0 0 0 .35cqw #050506, 0 0 0 .7cqw rgba(255, 255, 255, .05), 0 50px 90px -20px rgba(0, 0, 0, .55), 0 0 90px -30px var(--wp-glow, #8b9cff);
}
/* Android: power + volume on the right edge, nothing on the left. */
:is(.wp-device, .wp-ghost-wrap).is-android .wp-phone::before {
  left: auto;
  right: -.9cqw;
  top: 26cqw;
  height: 16cqw;
  border-radius: 0 .5cqw .5cqw 0;
  background: #24262c;
  box-shadow: none;
}
:is(.wp-device, .wp-ghost-wrap).is-android .wp-phone::after { top: 48cqw; height: 9cqw; background: #24262c; }
:is(.wp-device, .wp-ghost-wrap).is-android .wp-screen {
  border-radius: 8.6cqw;
  font-family: Roboto, "Google Sans", "Segoe UI", system-ui, sans-serif;
}
/* Punch-hole camera instead of the Dynamic Island. */
:is(.wp-device, .wp-ghost-wrap).is-android .wp-island {
  top: 3.4cqw;
  width: 4.6cqw;
  height: 4.6cqw;
  margin-left: -2.3cqw;
  border-radius: 50%;
  box-shadow: inset 0 0 0 .5cqw #111, inset .8cqw -.8cqw 0 .9cqw #0a0a10;
}
:is(.wp-device, .wp-ghost-wrap).is-android .wp-status { padding: 2.4cqw 6cqw 0; height: 11cqw; font-weight: 500; font-size: 3.6cqw; }
:is(.wp-device, .wp-ghost-wrap).is-android .wp-bat { width: 3.2cqw; height: 5.2cqw; border-radius: .7cqw; border-width: .3cqw; padding: .25cqw; display: flex; align-items: flex-end; }
:is(.wp-device, .wp-ghost-wrap).is-android .wp-bat::after { height: 80%; width: 100%; }
/* Three-button navigation bar instead of the iOS home indicator. */
:is(.wp-device, .wp-ghost-wrap).is-android .wp-tabs { padding-bottom: 9.5cqw; }
:is(.wp-device, .wp-ghost-wrap).is-android .wp-tabs::after {
  content: "◁　○　▢";
  bottom: 1.6cqw;
  width: 60cqw;
  height: auto;
  margin-left: -30cqw;
  background: none;
  color: #c9cbd3;
  font: 400 4.2cqw/1 Roboto, system-ui, sans-serif;
  text-align: center;
  letter-spacing: 3cqw;
}

@media (prefers-reduced-motion: reduce) {
  .wp-device.is-flipping .wp-phone { animation: none; }
}
.wp-ghost-wrap { container-type: inline-size; }

/* ---------- Real 3D device body (pure CSS, a few hundred bytes) ----------
   The phone is a thin box: the screen is the front face, plus two side rails, top/bottom edges and
   a back plate with the camera module. Only visible while it swings; costs nothing at rest. */
.wp-device .wp-phone { --t: 3.4cqw; }
.wp-device .wp-screen { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.wp-shell { position: absolute; pointer-events: none; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.wp-device:not(.is-flipping) .wp-shell { visibility: hidden; }
.wp-shell-back {
  inset: 0;
  border-radius: inherit;
  transform: translateZ(calc(var(--t) * -1)) rotateY(180deg);
  background:
    radial-gradient(120% 70% at 30% 10%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(160deg, #3a3c44, #1b1c21 55%, #2b2d33);
  box-shadow: inset 0 0 0 .5cqw #55575f, inset 0 0 0 1cqw #1e1f24;
}
/* iPhone camera block: rounded square, three lenses + flash */
.wp-shell-back::before {
  content: "";
  position: absolute;
  top: 5cqw; left: 5cqw;
  width: 38cqw; height: 38cqw;
  border-radius: 10cqw;
  background:
    radial-gradient(circle at 28% 28%, #0b0c10 0 7cqw, #2a2c33 7cqw 8.6cqw, transparent 8.7cqw),
    radial-gradient(circle at 28% 72%, #0b0c10 0 7cqw, #2a2c33 7cqw 8.6cqw, transparent 8.7cqw),
    radial-gradient(circle at 72% 50%, #0b0c10 0 7cqw, #2a2c33 7cqw 8.6cqw, transparent 8.7cqw),
    radial-gradient(circle at 76% 18%, #f5e9c8 0 1.8cqw, transparent 2cqw),
    linear-gradient(150deg, rgba(255,255,255,.18), rgba(255,255,255,.04)), #23252b;
  box-shadow: 0 .6cqw 1.6cqw rgba(0,0,0,.5), inset 0 0 0 .4cqw rgba(255,255,255,.08);
}
.wp-shell-side { top: 9cqw; bottom: 9cqw; width: var(--t); background: linear-gradient(90deg, #2c2d33, #6b6d75 45%, #2c2d33); }
.wp-shell-l { left: 0; transform-origin: left center; transform: rotateY(90deg); }
.wp-shell-r { right: 0; transform-origin: right center; transform: rotateY(-90deg); }
.wp-shell-edge { left: 9cqw; right: 9cqw; height: var(--t); background: linear-gradient(180deg, #2c2d33, #6b6d75 45%, #2c2d33); }
.wp-shell-t { top: 0; transform-origin: center top; transform: rotateX(-90deg); }
.wp-shell-b { bottom: 0; transform-origin: center bottom; transform: rotateX(90deg); }

/* Android body: matte graphite, horizontal-pill camera cluster on the left */
:is(.wp-device, .wp-ghost-wrap).is-android .wp-shell-back {
  background: radial-gradient(120% 70% at 30% 10%, rgba(255,255,255,.08), transparent 55%), linear-gradient(160deg, #23262d, #121318 60%, #1c1e24);
  box-shadow: inset 0 0 0 .5cqw #2e3138, inset 0 0 0 1cqw #15161a;
}
:is(.wp-device, .wp-ghost-wrap).is-android .wp-shell-back::before {
  top: 6cqw; left: 6cqw;
  width: 16cqw; height: 46cqw;
  border-radius: 8cqw;
  background:
    radial-gradient(circle at 50% 18%, #0b0c10 0 5.4cqw, #30333a 5.4cqw 6.6cqw, transparent 6.7cqw),
    radial-gradient(circle at 50% 50%, #0b0c10 0 5.4cqw, #30333a 5.4cqw 6.6cqw, transparent 6.7cqw),
    radial-gradient(circle at 50% 82%, #0b0c10 0 5.4cqw, #30333a 5.4cqw 6.6cqw, transparent 6.7cqw),
    #1a1c21;
}
:is(.wp-device, .wp-ghost-wrap).is-android .wp-shell-side,
:is(.wp-device, .wp-ghost-wrap).is-android .wp-shell-edge { background: linear-gradient(90deg, #15171b, #3b3e46 45%, #15171b); }

/* Deeper swing so the side and the back of the device actually show. */
@keyframes wp-swing-left {
  0% { transform: none; }
  38% { transform: translateY(14px) rotateX(10deg) rotateY(-80deg) scale(.88); }
  52% { transform: translateY(18px) rotateX(8deg) rotateY(-150deg) scale(.86); }
  66% { transform: translateY(14px) rotateX(6deg) rotateY(-80deg) scale(.88); }
  100% { transform: none; }
}
@keyframes wp-swing-right {
  0% { transform: none; }
  38% { transform: translateY(14px) rotateX(10deg) rotateY(80deg) scale(.88); }
  52% { transform: translateY(18px) rotateX(8deg) rotateY(150deg) scale(.86); }
  66% { transform: translateY(14px) rotateX(6deg) rotateY(80deg) scale(.88); }
  100% { transform: none; }
}
.wp-device.is-flipping .wp-phone { animation-duration: 1.5s; }
.wp-phone-seam { animation-duration: 1.5s; }
.wp-ghost-wrap, .wp-phone-ghost, .wp-phone-ghost .wp-screen, .wp-phone-seam { backface-visibility: hidden; -webkit-backface-visibility: hidden; }