/**
 * interactions.css — the CSS half of JS-driven interactions: Lab pointer
 * border reveal, Signature Venn ambient state, deferred-mount transition
 * states. The JS layer (lab-pointer.js, signature-venn.js,
 * homepage-entry.js) only ever toggles classes and CSS custom properties;
 * every visual effect itself is expressed here so it stays inspectable and
 * themeable independent of behavior.
 */

/* ======================================================================
   Lab card — local pointer-reveal border (brief §19 / docs/10 §10)
   ====================================================================== */

@media (hover: hover) and (pointer: fine) {
  .lab-card {
    --pointer-x: 50%;
    --pointer-y: 50%;
  }

  .lab-card__border::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(
      220px circle at var(--pointer-x) var(--pointer-y),
      var(--color-yellow),
      var(--color-purple) 60%,
      transparent 75%
    );
    opacity: 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: opacity var(--motion-normal) var(--ease-out);
  }

  .lab-card.is-pointer-active .lab-card__border::before {
    opacity: 1;
  }

  /* A few px of internal drift toward the pointer — never the whole card. */
  .lab-card.is-pointer-active .lab-card__title {
    transform: translate(
      calc((var(--pointer-x) - 50%) * .02),
      calc((var(--pointer-y) - 50%) * .02)
    );
    transition: transform var(--motion-fast) var(--ease-out);
  }
}

/* Touch / coarse pointer: complete static state, no hover dependency. */
@media (hover: none), (pointer: coarse) {
  .lab-card__border::before {
    display: none;
  }
}

/* ======================================================================
   Signature Venn — idle ambient state (brief §36)
   Barely-there breathing on the three base circles so the diagram reads as
   alive before any chip is activated, without competing with the text.
   Overlap-zone active/hover states are static (no animation) — defined
   alongside their base styles in components.css.
   ====================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .signature-venn:not(:hover):not(:focus-within) .signature-venn__circle {
    animation: sayid-signature-breathe 7s ease-in-out infinite;
  }
  .signature-venn:not(:hover):not(:focus-within) .signature-venn__circle--code { animation-delay: -2s; }
  .signature-venn:not(:hover):not(:focus-within) .signature-venn__circle--ai { animation-delay: -4.5s; }
}

@keyframes sayid-signature-breathe {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}

/* ======================================================================
   Deferred homepage reveal — transition states (brief §16)

   #homepage-deferred-root is normal server-rendered DOM; homepage-entry.js
   toggles the native `hidden` attribute (not a CSS class) to lock/reveal
   it, so the JS-off state needs zero CSS here — the browser's own [hidden]
   default (`display:none`) already does the right thing.
   ====================================================================== */

#homepage-deferred-root.is-revealing {
  animation: sayid-deferred-reveal var(--motion-slow) var(--ease-out);
}

@keyframes sayid-deferred-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

html[data-home-entry="transitioning"] .scroll-cue {
  transition: opacity var(--motion-fast) var(--ease-out);
  opacity: 0;
}

/* ======================================================================
   Reduced motion overrides specific to these interactions
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  .lab-card__border::before {
    transition: none;
  }
  .lab-card.is-pointer-active .lab-card__title {
    transform: none;
  }
  .signature-venn__circle {
    animation: none !important;
  }
}