/* decor — page-level decorative overlays from tools/imagegen.
 * All restrained, low-opacity, pointer-events: none, behind interactive UI.
 * Dark skins invert the black ink so it shows as light on dark. */

.iblis-decor-frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.iblis-decor-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 360ms ease;
}

html[data-skin="dark-3d"]     .iblis-decor-bg { background-image: url("/assets/img/decor/bg-dark-3d.webp");     opacity: .18; }
html[data-skin="light-paper"] .iblis-decor-bg { background-image: url("/assets/img/decor/bg-light-paper.webp"); opacity: .32; }
html[data-skin="infernal"]    .iblis-decor-bg { background-image: url("/assets/img/decor/bg-infernal.webp");    opacity: .26; }
html[data-skin="cathedral"]   .iblis-decor-bg { background-image: url("/assets/img/decor/bg-cathedral.webp");   opacity: .22; }

/* Top-corner grimoire ornaments. Small, low-opacity, hidden on phones. */
.iblis-decor-corner {
  position: absolute;
  top: 0;
  width: 140px;
  height: 140px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .14;
  filter: none;
}
.iblis-decor-corner-tl { left:  0; background-image: url("/assets/img/decor/ornament-corner-tl.webp"); background-position: top left; }
.iblis-decor-corner-tr { right: 0; background-image: url("/assets/img/decor/ornament-corner-tr.webp"); background-position: top right; }

/* On dark skins the black ink ornament needs to invert to read on dark bg. */
html[data-skin="dark-3d"]   .iblis-decor-corner,
html[data-skin="infernal"]  .iblis-decor-corner,
html[data-skin="cathedral"] .iblis-decor-corner {
  filter: invert(1) brightness(.85);
}

@media (max-width: 720px) {
  .iblis-decor-corner { width: 84px; height: 84px; opacity: .10; }
}

/* Hero baphomet figure — desktop-only accent on the right of the hero. */
.iblis-hero { position: relative; isolation: isolate; }
.iblis-hero > * { position: relative; z-index: 1; }

@media (min-width: 1100px) {
  .iblis-hero::after {
    content: "";
    position: absolute;
    right: 3vw;
    top: 50%;
    width: 260px;
    height: 380px;
    transform: translateY(-50%);
    background-image: url("/assets/img/decor/hero-baphomet-figure.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .12;
    z-index: 0;
    pointer-events: none;
  }
  html[data-skin="dark-3d"]   .iblis-hero::after,
  html[data-skin="infernal"]  .iblis-hero::after,
  html[data-skin="cathedral"] .iblis-hero::after { filter: invert(1) brightness(.88); }
}

/* Footer ornament above the text, centered. */
.iblis-footer { position: relative; }
.iblis-footer::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 720px;
  height: 68px;
  margin: 0 auto var(--space-3);
  background-image: url("/assets/img/decor/footer-ornament.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .26;
}
html[data-skin="dark-3d"]   .iblis-footer::before,
html[data-skin="infernal"]  .iblis-footer::before,
html[data-skin="cathedral"] .iblis-footer::before { filter: invert(1) brightness(.85); }

/* Optional: an `.iblis-decor-divider` utility a page can drop between sections. */
.iblis-decor-divider {
  display: block;
  width: 100%;
  max-width: 640px;
  height: 56px;
  margin: var(--space-5) auto;
  background-image: url("/assets/img/decor/divider-sigil.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .28;
}
html[data-skin="dark-3d"]   .iblis-decor-divider,
html[data-skin="infernal"]  .iblis-decor-divider,
html[data-skin="cathedral"] .iblis-decor-divider { filter: invert(1) brightness(.85); }

/* Optional: an `.iblis-decor-seal` utility — circular wax-seal style emblem. */
.iblis-decor-seal {
  width: 96px;
  height: 96px;
  background-image: url("/assets/img/decor/card-seal-baphomet.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .32;
  flex-shrink: 0;
}
html[data-skin="dark-3d"]   .iblis-decor-seal,
html[data-skin="infernal"]  .iblis-decor-seal,
html[data-skin="cathedral"] .iblis-decor-seal { filter: invert(1) brightness(.85); }

/* Inverted-triangle and pentagram glyphs — small inline icon variants. */
.iblis-decor-glyph {
  display: inline-block;
  width: 48px;
  height: 48px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .55;
  vertical-align: middle;
}
.iblis-decor-glyph.is-triangle { background-image: url("/assets/img/decor/glyph-inverted-triangle.webp"); }
.iblis-decor-glyph.is-pentagram { background-image: url("/assets/img/decor/glyph-pentagram.webp"); }
html[data-skin="dark-3d"]   .iblis-decor-glyph,
html[data-skin="infernal"]  .iblis-decor-glyph,
html[data-skin="cathedral"] .iblis-decor-glyph { filter: invert(1) brightness(.85); }

/* Soul-callout banner — landing page only. Subtle full-width strip. */
.iblis-banner-landing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.iblis-banner-landing::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/decor/banner-landing.webp");
  background-size: cover;
  background-position: center;
  opacity: .35;
  z-index: -1;
}