/* ==========================================================================
   AI THINKING — spinning scan-line border around phone
   Original idea & technique: deepak_kharah — https://codepen.io/deepak_kharah/pen/xxobRPM
   ==========================================================================
   Applied to .codewall-phone-ai (the first picture in codewall-phones-r).
   Mobile-first — all screen sizes. Reduced-motion: glow only (no spin).

   The phone fills the image edge-to-edge with rounded corners.
   --phone-corner-x / -y tune the border-radius to match the phone shape.
   Adjust these if the border doesn't sit flush with the phone edge.

   ::before  — pulsing blue glow halo
   ::after   — spinning conic-gradient scan line (2px border via mask trick)
========================================================================== */


/* @property needed for animating --ai-angle in conic-gradient */
@property --ai-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Phone edge tuning — border-radius to match phone corners in the image.
   Width 300px, height 631px, corner ~38px → 12.7% × 6.0% */
.codewall-phone-ai {
  --phone-corner-x: 12.7%;
  --phone-corner-y:  6.0%;
}

/* ::before — pulsing glow halo behind the phone rim */
.codewall-phone-ai::before {
  border-radius:
    var(--phone-corner-x) var(--phone-corner-x) var(--phone-corner-x) var(--phone-corner-x)
    / var(--phone-corner-y) var(--phone-corner-y) var(--phone-corner-y) var(--phone-corner-y);
  bottom: 0;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-tg) 30%, transparent),
    0 0 14px 4px color-mix(in srgb, var(--color-tg) 14%, transparent);
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {

  /* Pulsing glow — slow breath cycle */
  .codewall-phone-ai::before {
    animation: ai-glow 2.8s ease-in-out infinite;
  }

  /* ::after — spinning scan-line border */
  .codewall-phone-ai::after {
    animation: ai-spin 3.5s linear infinite;
    background: conic-gradient(
      from var(--ai-angle),
      transparent                                         0deg,
      transparent                                       195deg,
      color-mix(in srgb, var(--color-tg) 55%, transparent) 255deg,
      color-mix(in srgb, var(--color-tg) 90%, white)     305deg,
      rgba(210, 235, 255, 1)                            325deg,
      color-mix(in srgb, var(--color-tg) 90%, white)     340deg,
      transparent                                       360deg
    );
    border-radius:
      var(--phone-corner-x) var(--phone-corner-x) var(--phone-corner-x) var(--phone-corner-x)
      / var(--phone-corner-y) var(--phone-corner-y) var(--phone-corner-y) var(--phone-corner-y);
    bottom: 0;
    content: '';
    left: 0;
    /* Mask trick: show only the 2px padded border, not the fill */
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: destination-out;
    padding: 2px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
  }

}

@keyframes ai-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--color-tg) 25%, transparent),
      0 0 12px 3px color-mix(in srgb, var(--color-tg) 10%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--color-tg) 60%, transparent),
      0 0 22px 8px color-mix(in srgb, var(--color-tg) 30%, transparent);
  }
}

@keyframes ai-spin {
  to { --ai-angle: 360deg; }
}