/* ══════════════════════════════════════════════════════════════
   PROJECTS PAGE — SUBTLE HOLOGRAPHIC HEADER
   Same recipe as the home hero (.holo-layer): iridescent conic field +
   scanlines/prismatic sheen + pointer glare, faded out on all four sides.
   Toned down: ~half the opacity, slower motion, and a short band
   (~190px) instead of the full hero height.
   Load AFTER projects.html's inline <style>.
   ══════════════════════════════════════════════════════════════ */
.page-header{position:relative;isolation:isolate;--mx:50%;--my:50%;
  /* extend up to 18vw past the header, but never beyond the viewport edge (no horizontal scroll on phones) */
  --holo-x:max(-18vw,min(0px,calc((100% - 100vw)/2 + 16px)));}

.works-holo{position:absolute;z-index:-1;pointer-events:none;overflow:hidden;
  left:var(--holo-x);right:var(--holo-x);top:34px;height:190px;
  -webkit-mask-image:
    linear-gradient(to bottom,transparent 0%,#000 35%,#000 60%,transparent 100%),
    linear-gradient(to right,transparent 0%,#000 25%,#000 75%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(to bottom,transparent 0%,#000 35%,#000 60%,transparent 100%),
    linear-gradient(to right,transparent 0%,#000 25%,#000 75%,transparent 100%);
          mask-composite:intersect;}

/* 1. iridescent colour field — lower opacity, slower spin than home (.22 / 22s) */
.works-holo::before{content:"";position:absolute;inset:-60% -10%;
  background:conic-gradient(from 0deg at 50% 50%,#5b8dee,#7bffe0,#e05b9b,#ffe27b,#9b7bff,#5bd2ee,#5b8dee);
  filter:blur(70px) saturate(1.25);opacity:.12;
  animation:worksHoloSpin 34s linear infinite,worksHoloHue 18s linear infinite;}

/* 2. fine scanlines + slow diagonal prismatic sheen */
.works-holo::after{content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 4px),
    linear-gradient(115deg,transparent 30%,rgba(123,255,224,.08) 42%,rgba(224,91,155,.09) 50%,rgba(155,123,255,.08) 58%,transparent 70%);
  background-size:100% 100%,250% 250%;
  mix-blend-mode:screen;
  animation:worksHoloSheen 11s ease-in-out infinite;}

/* 3. pointer glare (driven by --mx / --my from the small script) */
.page-header::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:var(--holo-x);right:var(--holo-x);top:34px;height:190px;
  background:radial-gradient(circle 200px at var(--mx) var(--my),rgba(255,255,255,.08),rgba(123,255,224,.04) 40%,transparent 70%);
  mix-blend-mode:screen;}

@keyframes worksHoloSpin{to{transform:rotate(360deg);}}
@keyframes worksHoloHue{to{filter:blur(70px) saturate(1.25) hue-rotate(360deg);}}
@keyframes worksHoloSheen{0%,100%{background-position:0 0,0% 50%;}50%{background-position:0 0,100% 50%;}}

/* light theme (mirrors the home page treatment) */
[data-theme="light"] .works-holo::before{opacity:.18;}
[data-theme="light"] .works-holo::after,
[data-theme="light"] .page-header::after{mix-blend-mode:multiply;opacity:.5;}

@media (max-width:600px){
  .works-holo,.page-header::after{top:20px;height:150px;}
}
@media (prefers-reduced-motion:reduce){
  .works-holo::before,.works-holo::after{animation:none;}
}