/* Looking Petty module. All positions are in the PSD's 1000×1000 canvas,
   expressed as percentages so the module scales to any width. */
.looking-petty {
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 1 / 1;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* rapid taps on the head shouldn't double-tap zoom */
  opacity: 0;
  transition: opacity .3s ease-out;
}

/* looking-petty.js adds this once every layer has loaded. */
.looking-petty.lp-ready { opacity: 1; }

/* A slow, gentle float. Uses `translate` only (no rotation) so the head's
   on-screen box stays exact for tap detection and eye tracking. */
.looking-petty.lp-ready { animation: lp-float 8s ease-in-out infinite; }
@keyframes lp-float {
  0%, 100% { translate: 0 0; }
  25%      { translate: 1.2% -3%; }
  50%      { translate: -0.8% -0.8%; }
  75%      { translate: -1.4% -3.4%; }
}
@media (prefers-reduced-motion: reduce) {
  .looking-petty.lp-ready { animation: none; }
}

.looking-petty:focus { outline: none; }
.looking-petty:focus-visible { outline: 2px dashed currentColor; outline-offset: 8px; border-radius: 50%; }

.looking-petty img {
  position: absolute;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Layer stack, bottom to top, same as the PSD: eye whites, irises, head.
   The head has holes cut at the eyes, so the eyelids clip the irises. */
.looking-petty .lp-white { z-index: 1; }
.looking-petty .lp-iris  { z-index: 2; will-change: transform; }
.looking-petty .lp-head  { z-index: 3; }

.looking-petty .lp-white.l { left: 30.5%;  top: 45%;   width: 10.3%; }
.looking-petty .lp-white.r { left: 54.3%;  top: 45%;   width: 10.3%; }
.looking-petty .lp-iris.l  { left: 32.8%;  top: 46.9%; width: 4%; }
.looking-petty .lp-iris.r  { left: 57.7%;  top: 46.9%; width: 4%; }
.looking-petty .lp-head    { left: 0.7%;   top: 0;     width: 95.6%; }