/* HOLYF animated background integration v4
   Safe rule: this file intentionally does NOT affect work.html / body.work-page.
   Works page is kept identical to the stable pre-animation version until it is handled separately. */

:root {
  --abstract-bg-opacity-light: 0.22;
  --abstract-bg-opacity-dark: 0.34;
  --abstract-bg-grain-opacity: 0.045;
}

body:not(.work-page) {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
}

body:not(.work-page) #abstract-canvas,
body:not(.work-page) .abstract-page-shade,
body:not(.work-page) .abstract-grain {
  display: block !important;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

body:not(.work-page) #abstract-canvas {
  z-index: 0;
  opacity: var(--abstract-bg-opacity-light);
  mix-blend-mode: multiply;
  background: #ffffff;
}

body:not(.work-page) .abstract-page-shade {
  z-index: 1;
  opacity: 1;
  background:
    radial-gradient(circle at 48% 25%, rgba(255,255,255,0.22), transparent 34rem),
    linear-gradient(90deg, rgba(255,255,255,0.72), rgba(255,255,255,0.20) 45%, rgba(255,255,255,0.50));
}

body:not(.work-page) .abstract-grain {
  z-index: 2;
  opacity: var(--abstract-bg-grain-opacity);
  mix-blend-mode: multiply;
  background-image: repeating-radial-gradient(circle at 0 0, rgba(0,0,0,0.48) 0 1px, transparent 1px 3px);
  background-size: 4px 4px;
}

/* Keep existing content above the non-interactive background without changing layout. */
body:not(.work-page) .site-header,
body:not(.work-page) .site-footer,
body:not(.work-page) main,
body:not(.work-page) .home-layout,
body:not(.work-page) .page-layout,
body:not(.work-page) section {
  position: relative;
  z-index: 5;
}

/* Open the old solid white/black surfaces only on non-Works pages. */
html body:not(.work-page),
html body:not(.work-page) .site-header,
html body:not(.work-page) .site-footer,
html body:not(.work-page) main,
html body:not(.work-page) .home-layout,
html body:not(.work-page) .page-layout,
html body:not(.work-page) section,
html:not([data-theme="dark"]) body:not(.work-page) .site-header,
html:not([data-theme="dark"]) body:not(.work-page) .site-footer,
html:not([data-theme="dark"]) body:not(.work-page) .home-layout,
html:not([data-theme="dark"]) body:not(.work-page) .page-layout,
body:not([data-theme="dark"]):not(.work-page) .site-header,
body:not([data-theme="dark"]):not(.work-page) .site-footer,
body:not([data-theme="dark"]):not(.work-page) .home-layout,
body:not([data-theme="dark"]):not(.work-page) .page-layout {
  background-color: transparent !important;
  background-image: none !important;
}

html[data-theme="dark"] body:not(.work-page) #abstract-canvas,
body[data-theme="dark"]:not(.work-page) #abstract-canvas,
html.theme-dark body:not(.work-page) #abstract-canvas,
body.theme-dark:not(.work-page) #abstract-canvas {
  opacity: var(--abstract-bg-opacity-dark);
  filter: invert(1);
  mix-blend-mode: normal;
}

html[data-theme="dark"] body:not(.work-page) .abstract-page-shade,
body[data-theme="dark"]:not(.work-page) .abstract-page-shade,
html.theme-dark body:not(.work-page) .abstract-page-shade,
body.theme-dark:not(.work-page) .abstract-page-shade {
  background:
    radial-gradient(circle at 48% 25%, rgba(255,255,255,0.04), transparent 34rem),
    linear-gradient(90deg, rgba(5,5,5,0.58), rgba(5,5,5,0.14) 45%, rgba(5,5,5,0.42));
}

html[data-theme="dark"] body:not(.work-page),
body[data-theme="dark"]:not(.work-page),
html.theme-dark body:not(.work-page),
body.theme-dark:not(.work-page),
html[data-theme="dark"] body:not(.work-page) .site-header,
html[data-theme="dark"] body:not(.work-page) .site-footer,
html[data-theme="dark"] body:not(.work-page) main,
html[data-theme="dark"] body:not(.work-page) .home-layout,
html[data-theme="dark"] body:not(.work-page) .page-layout,
html[data-theme="dark"] body:not(.work-page) section,
body[data-theme="dark"]:not(.work-page) .site-header,
body[data-theme="dark"]:not(.work-page) .site-footer,
body[data-theme="dark"]:not(.work-page) main,
body[data-theme="dark"]:not(.work-page) .home-layout,
body[data-theme="dark"]:not(.work-page) .page-layout,
body[data-theme="dark"]:not(.work-page) section,
html.theme-dark body:not(.work-page) .site-header,
html.theme-dark body:not(.work-page) .site-footer,
html.theme-dark body:not(.work-page) main,
html.theme-dark body:not(.work-page) .home-layout,
html.theme-dark body:not(.work-page) .page-layout,
html.theme-dark body:not(.work-page) section {
  background-color: transparent !important;
  background-image: none !important;
}

@media (max-width: 760px) {
  body:not(.work-page) #abstract-canvas {
    opacity: 0.16;
  }

  html[data-theme="dark"] body:not(.work-page) #abstract-canvas,
  body[data-theme="dark"]:not(.work-page) #abstract-canvas,
  html.theme-dark body:not(.work-page) #abstract-canvas,
  body.theme-dark:not(.work-page) #abstract-canvas {
    opacity: 0.26;
  }
}


/* V6: work.html background integration.
   This is intentionally limited to layer/visibility rules only:
   it does not alter the Work page grid, rail sizing, card layout, viewer, or gallery logic. */
body.work-page {
  --abstract-bg-work-opacity-light: 0.115;
  --abstract-bg-work-opacity-dark: 0.205;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
}

body.work-page #abstract-canvas,
body.work-page .abstract-page-shade,
body.work-page .abstract-grain {
  display: block !important;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

body.work-page #abstract-canvas {
  z-index: 0;
  opacity: var(--abstract-bg-work-opacity-light);
  mix-blend-mode: multiply;
  background: #ffffff;
}

body.work-page .abstract-page-shade {
  z-index: 1;
  opacity: 1;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.78) 0,
      rgba(255,255,255,0.72) 260px,
      rgba(255,255,255,0.24) 260px,
      rgba(255,255,255,0.10) 58%,
      rgba(255,255,255,0.26) 100%);
}

body.work-page .abstract-grain {
  z-index: 2;
  opacity: 0.026;
  mix-blend-mode: multiply;
  background-image: repeating-radial-gradient(circle at 0 0, rgba(0,0,0,0.42) 0 1px, transparent 1px 3px);
  background-size: 4px 4px;
}

body.work-page .work-rail,
body.work-page .work-layout {
  position: relative;
}

body.work-page .work-rail {
  z-index: 20;
}

body.work-page .work-layout {
  z-index: 5;
}

/* Keep only the main Work surfaces open enough for the same animated atmosphere.
   Do not touch dimensions or layout. */
body.work-page .work-layout,
body.work-page .script-block,
body.work-page .single-work-viewer,
body.work-page .series-section,
body.work-page .gallery-list {
  background-color: transparent !important;
  background-image: none !important;
}

html[data-theme="dark"] body.work-page #abstract-canvas,
body[data-theme="dark"].work-page #abstract-canvas,
html.theme-dark body.work-page #abstract-canvas,
body.theme-dark.work-page #abstract-canvas {
  opacity: var(--abstract-bg-work-opacity-dark);
  filter: invert(1);
  mix-blend-mode: normal;
}

html[data-theme="dark"] body.work-page .abstract-page-shade,
body[data-theme="dark"].work-page .abstract-page-shade,
html.theme-dark body.work-page .abstract-page-shade,
body.theme-dark.work-page .abstract-page-shade {
  background:
    linear-gradient(90deg,
      rgba(5,5,5,0.82) 0,
      rgba(5,5,5,0.78) 260px,
      rgba(5,5,5,0.30) 260px,
      rgba(5,5,5,0.16) 58%,
      rgba(5,5,5,0.34) 100%);
}

html[data-theme="dark"] body.work-page .abstract-grain,
body[data-theme="dark"].work-page .abstract-grain,
html.theme-dark body.work-page .abstract-grain,
body.theme-dark.work-page .abstract-grain {
  opacity: 0.018;
  mix-blend-mode: screen;
}

@media (max-width: 899px) {
  body.work-page #abstract-canvas {
    opacity: 0.08;
  }

  html[data-theme="dark"] body.work-page #abstract-canvas,
  body[data-theme="dark"].work-page #abstract-canvas,
  html.theme-dark body.work-page #abstract-canvas,
  body.theme-dark.work-page #abstract-canvas {
    opacity: 0.145;
  }

  body.work-page .abstract-page-shade {
    background: linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.22));
  }

  html[data-theme="dark"] body.work-page .abstract-page-shade,
  body[data-theme="dark"].work-page .abstract-page-shade,
  html.theme-dark body.work-page .abstract-page-shade,
  body.theme-dark.work-page .abstract-page-shade {
    background: linear-gradient(180deg, rgba(5,5,5,0.72), rgba(5,5,5,0.34));
  }
}

/* V7: Work dark-mode surface alignment.
   Goal: keep the existing Work layout intact while matching light-mode behavior:
   the HOLYF animation should continue behind the Work content instead of being
   hidden by a flat black content rectangle. */
html[data-theme="dark"] body.work-page .work-layout,
html[data-theme="dark"] body.work-page .work-layout::before,
html[data-theme="dark"] body.work-page .script-block,
html[data-theme="dark"] body.work-page .single-work-viewer,
html[data-theme="dark"] body.work-page .series-section,
html[data-theme="dark"] body.work-page .gallery-list,
body[data-theme="dark"].work-page .work-layout,
body[data-theme="dark"].work-page .work-layout::before,
body[data-theme="dark"].work-page .script-block,
body[data-theme="dark"].work-page .single-work-viewer,
body[data-theme="dark"].work-page .series-section,
body[data-theme="dark"].work-page .gallery-list,
html.theme-dark body.work-page .work-layout,
html.theme-dark body.work-page .work-layout::before,
html.theme-dark body.work-page .script-block,
html.theme-dark body.work-page .single-work-viewer,
html.theme-dark body.work-page .series-section,
html.theme-dark body.work-page .gallery-list,
body.theme-dark.work-page .work-layout,
body.theme-dark.work-page .work-layout::before,
body.theme-dark.work-page .script-block,
body.theme-dark.work-page .single-work-viewer,
body.theme-dark.work-page .series-section,
body.theme-dark.work-page .gallery-list {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html[data-theme="dark"] body.work-page .gallery-card,
html[data-theme="dark"] body.work-page .gallery-list a,
html[data-theme="dark"] body.work-page [data-gallery-list] > *,
body[data-theme="dark"].work-page .gallery-card,
body[data-theme="dark"].work-page .gallery-list a,
body[data-theme="dark"].work-page [data-gallery-list] > *,
html.theme-dark body.work-page .gallery-card,
html.theme-dark body.work-page .gallery-list a,
html.theme-dark body.work-page [data-gallery-list] > *,
body.theme-dark.work-page .gallery-card,
body.theme-dark.work-page .gallery-list a,
body.theme-dark.work-page [data-gallery-list] > * {
  background: rgba(5, 5, 5, 0.54) !important;
  background-color: rgba(5, 5, 5, 0.54) !important;
  background-image: none !important;
  color: #f2f2f2 !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

html[data-theme="dark"] body.work-page .gallery-card:hover,
html[data-theme="dark"] body.work-page .gallery-list a:hover,
body[data-theme="dark"].work-page .gallery-card:hover,
body[data-theme="dark"].work-page .gallery-list a:hover,
html.theme-dark body.work-page .gallery-card:hover,
html.theme-dark body.work-page .gallery-list a:hover,
body.theme-dark.work-page .gallery-card:hover,
body.theme-dark.work-page .gallery-list a:hover {
  background: rgba(12, 12, 12, 0.64) !important;
  background-color: rgba(12, 12, 12, 0.64) !important;
}

/* V8: Work index panel dark-mode transparency fix.
   Safari inspector showed section.works-index-panel as the remaining flat dark surface.
   Keep the existing work.html structure untouched; only open that panel surface so
   the HOLYF animation continues behind it like in light mode. */
body.work-page .works-index-panel,
body.work-page .works-index-panel::before,
body.work-page .works-index-panel::after,
body.work-page .works-index-list {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html[data-theme="dark"] body.work-page .works-index-panel,
html[data-theme="dark"] body.work-page .works-index-panel::before,
html[data-theme="dark"] body.work-page .works-index-panel::after,
html[data-theme="dark"] body.work-page .works-index-list,
body[data-theme="dark"].work-page .works-index-panel,
body[data-theme="dark"].work-page .works-index-panel::before,
body[data-theme="dark"].work-page .works-index-panel::after,
body[data-theme="dark"].work-page .works-index-list,
html.theme-dark body.work-page .works-index-panel,
html.theme-dark body.work-page .works-index-panel::before,
html.theme-dark body.work-page .works-index-panel::after,
html.theme-dark body.work-page .works-index-list,
body.theme-dark.work-page .works-index-panel,
body.theme-dark.work-page .works-index-panel::before,
body.theme-dark.work-page .works-index-panel::after,
body.theme-dark.work-page .works-index-list {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}