/* Homepage walkthrough media. Frames and motion match the Claude handoff.
   The existing .project__stage stays the light stage; this file only draws the device. */
:root {
  --pw-ease: cubic-bezier(.4, 0, .2, 1);
  --pw-dur: 260ms;
  --pw-lift: translateY(-4px) scale(1.02);
  --pw-device-shadow: 0 14px 30px -16px rgba(27, 37, 64, .34), 0 2px 5px rgba(27, 37, 64, .06);
  --pw-device-shadow-hover: 0 22px 40px -18px rgba(27, 37, 64, .42), 0 3px 8px rgba(27, 37, 64, .08);
}

.project__stage > .pw-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.pw-desk {
  position: relative;
  width: 80%;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(27, 37, 64, .14), var(--pw-device-shadow);
  transition: transform var(--pw-dur) var(--pw-ease), box-shadow var(--pw-dur) var(--pw-ease);
}

.pw-chrome {
  height: 20px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  background: #fff;
  box-shadow: inset 0 -1px 0 rgba(27, 37, 64, .10);
}

.pw-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #c2c8d2;
  flex: none;
}

.pw-url-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.pw-url {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 8.5px;
  line-height: 12px;
  color: #6b7386;
  background: #f1f3f6;
  border-radius: 4px;
  padding: 0 18px;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pw-chrome-spacer { width: 28px; flex: none; }

.pw-screen {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
}

.pw-phone {
  position: relative;
  box-sizing: border-box;
  height: 92%;
  aspect-ratio: 402 / 856;
  padding: 5px;
  border-radius: 27px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(27, 37, 64, .16), var(--pw-device-shadow), inset 0 0 0 4px #fff, inset 0 0 0 5px rgba(27, 37, 64, .10);
  transition: transform var(--pw-dur) var(--pw-ease), box-shadow var(--pw-dur) var(--pw-ease);
}

.pw-phone .pw-screen {
  height: 100%;
  border-radius: 22px;
}

.pw-home-indicator {
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 34%;
  height: 4px;
  margin-left: -17%;
  border-radius: 999px;
  background: rgba(20, 24, 36, .85);
  z-index: 3;
}

.pw-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: block;
  will-change: transform, opacity;
}

.pw-layer--fill { inset: 0; height: 100%; }

.pw-layer--top { background: #fff; }

.pw-layer--height {
  inset: 0;
  background: #fff;
  overflow: hidden;
}

.pw-layer--height > img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
}

.pw-dim {
  position: absolute;
  inset: 0;
  background: #141824;
  opacity: 0;
  pointer-events: none;
}

.pw-press {
  position: absolute;
  border-radius: 4px;
  background: rgba(20, 24, 36, .12);
  opacity: 0;
  pointer-events: none;
}

.pw-phone .pw-press {
  border-radius: 6px;
  background: rgba(27, 37, 64, .07);
}

.pw-tap {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 999px;
  background: rgba(27, 37, 64, .10);
  box-shadow: inset 0 0 0 1.25px rgba(27, 37, 64, .25);
  opacity: 0;
  pointer-events: none;
}

.pw-phone .pw-tap {
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  background: rgba(27, 37, 64, .12);
  box-shadow: inset 0 0 0 1.5px rgba(27, 37, 64, .28);
}

.pw-cursor {
  position: absolute;
  width: 12px;
  height: 16px;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: left, top, transform;
}

.pw-cursor svg { display: block; overflow: visible; }

@media (hover: hover) and (pointer: fine) {
  .project:hover .pw-desk,
  .project:focus-visible .pw-desk {
    transform: var(--pw-lift);
    box-shadow: 0 0 0 1px rgba(27, 37, 64, .14), var(--pw-device-shadow-hover);
  }

  .project:hover .pw-phone,
  .project:focus-visible .pw-phone {
    transform: var(--pw-lift);
    box-shadow: 0 0 0 1px rgba(27, 37, 64, .16), var(--pw-device-shadow-hover), inset 0 0 0 4px #fff, inset 0 0 0 5px rgba(27, 37, 64, .10);
  }
}

/* Featured Terraform stays the wide stage, but the browser matches the
   two-up cards' visual density instead of stretching across the card. */
@media (min-width: 1101px) {
  .project--feature .pw-desk {
    width: 76%;
  }

  /* Same top and bottom inset as the MacBooks in the two-up cards. */
  [data-walkthrough="brilliant-cities"] .pw-phone {
    height: calc(100% - 124px);
    width: auto;
  }
}

/* Operation Safe Escape is a wide screen in a shorter card than Anda.
   Fill the card on whichever side runs out first, and keep a little inset. */
[data-walkthrough="ose"] .project__stage {
  container-type: size;
}

[data-walkthrough="ose"] .pw-desk {
  width: min(94%, calc((100cqh - 48px) * 1868 / 982));
}

/* Match the pixel side inset of the 7fr cards. Those frames are 80% of a
   column 7/5 as wide, so this frame is 72% of the 5fr column. */
@media (min-width: 1101px) {
  [data-walkthrough="ose"] .pw-desk {
    width: 72%;
  }
}

@media (max-width: 640px) {
  [data-walkthrough="ose"] .pw-desk {
    width: 80%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pw-desk,
  .pw-phone,
  .pw-layer {
    transition: none;
  }
}