/* ps-polish.css: interaction layer for petershalaby.com. Load as the last stylesheet. */

/* 1. Eyebrow labels removed (known classes on the live site) */
.eyebrow,
.delivery-label,
.evidence-kicker,
[data-ps-eyebrow]{display:none !important}

/* 2. Headline reveal, one moment per page.
   The inline head snippet adds .ps-js before paint. If the script never runs,
   the headline still appears after 1.2s. */
.ps-js main h1{opacity:0;animation:ps-show 0s linear 1.2s forwards}
.ps-js.ps-ready main h1{opacity:1;animation:none}
@keyframes ps-show{to{opacity:1}}
.ps-word{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(6px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1),filter .3s ease;
  transition-delay:calc(var(--ps-i,0) * 45ms)}
h1.ps-in .ps-word{opacity:1;transform:none;filter:none}

/* 3. Card spotlight and press feedback */
.ps-spot{position:relative;isolation:isolate;transition:transform .15s ease}
.ps-spot:active{transform:scale(.985)}
.ps-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;
  transition:opacity .2s ease;
  background:radial-gradient(280px circle at var(--ps-x,50%) var(--ps-y,50%),rgba(47,111,235,.10),rgba(47,111,235,0) 60%)}
.ps-spot:hover>.ps-glow,.ps-spot:focus-visible>.ps-glow{opacity:1}

/* 4. Dotted click spark, echoing the PS logo dots */
.ps-spark{position:fixed;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#202020;pointer-events:none;z-index:9999}

/* 5. Instant navigation feedback */
.ps-progress{position:fixed;top:0;left:0;height:2px;width:0;background:#202020;z-index:9999;opacity:0;
  transition:width 1.2s cubic-bezier(.1,.7,.2,1),opacity .15s ease;pointer-events:none}
.ps-progress.is-on{opacity:1;width:72%}

/* 6. Skeleton shimmer while images load */
main img.ps-loading{background-color:#eef1f5;
  background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 100%);
  background-size:200% 100%;background-repeat:no-repeat;animation:ps-shimmer 1.2s linear infinite}
@keyframes ps-shimmer{from{background-position:150% 0}to{background-position:-50% 0}}

/* 7. Contrast on tinted bands */
html body .nda-preview p,
html body .interview-strip p{color:#5a6372 !important}

@media (prefers-reduced-motion:reduce){
  .ps-js main h1{opacity:1;animation:none}
  .ps-word{opacity:1;transform:none;filter:none;transition:none}
  .ps-spot{transition:none}
  .ps-spot:active{transform:none}
  .ps-progress{transition:opacity .15s ease}
  main img.ps-loading{animation:none}
}