/* Original effect layers inspired by the visual interaction of poke-holo.simey.me.
   No upstream source code or effect textures are included. */
.holo-face {
  --shine-x: 50%; --shine-y: 50%; --shine-angle: 125deg;
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 4.6% / 3.4%; background: #171a24;
}
.holo-face img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; }
.holo-shine, .holo-glare, .holo-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity 240ms ease;
}
.holo-shine {
  background: repeating-linear-gradient(var(--shine-angle), #ed84dc 0%, #729cec 12%, #80ebd7 23%, #f3e48b 34%, #f39cbc 44%, #9486ef 55%);
  background-size: 260% 260%; background-position: var(--shine-x) var(--shine-y);
  mix-blend-mode: color-dodge; filter: contrast(1.35) saturate(1.2);
}
.holo-glare {
  z-index: 4; mix-blend-mode: screen;
  background: radial-gradient(ellipse at var(--shine-x) var(--shine-y), #fff9 0%, #dcdfff38 19%, #fff0 62%);
}
.holo-grain {
  z-index: 3; mix-blend-mode: screen;
  background: repeating-linear-gradient(24deg, #fff0 0 3px, #ffffff20 3px 4px, #fff0 4px 6px);
}
.holo-face[data-holo="cosmos"] .holo-shine {
  background-image: radial-gradient(circle at 20% 30%, #dbfaff 0 1px, #ffffff00 2px), radial-gradient(circle at 76% 64%, #edbcff 0 1.5px, #ffffff00 3px), linear-gradient(var(--shine-angle), #4a8ee5, #dc93eb 35%, #8ce4d7 65%, #ffc77b);
  background-size: 23px 31px, 47px 59px, 250% 250%;
}
.holo-face[data-holo="etched"] .holo-grain {
  background-image: repeating-radial-gradient(ellipse at var(--shine-x) var(--shine-y), #fff0 0 2px, #dffbff50 3px, #fff0 4px 6px);
}
.holo-face[data-holo="full-art"] .holo-shine {
  background-image: repeating-linear-gradient(var(--shine-angle), #85e0ef 0 9%, #9c91f4 12% 20%, #eca9de 24% 31%, #fcda95 35% 42%, #85e0ef 46% 55%);
}
.holo-face[data-holo="gold"] .holo-shine {
  background-image: repeating-linear-gradient(var(--shine-angle), #714100 0%, #c79616 12%, #fff8ce 24%, #bd933a 36%, #e9ba38 48%, #714100 60%);
  mix-blend-mode: screen; filter: contrast(1.4);
}
.holo-face[data-holo="gold"] .holo-grain {
  background-image: radial-gradient(#fff4a690 1px, #fff0 1.8px); background-size: 5px 5px;
}
.holo-face[data-active="true"] .holo-shine { opacity: .38; }
.holo-face[data-active="true"] .holo-grain { opacity: .23; }
.holo-face[data-active="true"] .holo-glare { opacity: .62; }
.holo-face[data-holo="none"] .holo-shine, .holo-face[data-holo="none"] .holo-grain { display: none; }
.holo-face[data-holo="none"][data-active="true"] .holo-glare { opacity: .22; }
.holo-face[data-holo="gold"][data-active="true"] .holo-shine { opacity: .28; }
html[data-motion="off"] .holo-shine, html[data-motion="off"] .holo-glare, html[data-motion="off"] .holo-grain { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .holo-shine, .holo-glare, .holo-grain { transition: none; }
}

html[data-motion='off'] .holo-face .holo-shine, html[data-motion='off'] .holo-face .holo-grain, html[data-motion='off'] .holo-face .holo-glare { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .holo-face[data-active='true'] .holo-shine, .holo-face[data-active='true'] .holo-grain, .holo-face[data-active='true'] .holo-glare { opacity: 0; } }