/* Original layered holographic material, informed by the public GSAP Vault overview.
   No commercial source is reused. Globe placement stays on the outer plane. */
.gallery-plane .card-orientation {
  width: 100%;
  height: 100%;
  aspect-ratio: inherit;
  transform-style: preserve-3d;
}

.gallery-plane .card-face {
  --foil-x: 46%;
  --foil-y: 38%;
  --foil-angle: 118deg;
  --foil-strength: .30;
  --foil-hue: 0deg;
  --foil-glare: .22;
  --foil-bloom: 0;
  --foil-spark: .32;
  --foil-grain-x: 0px;
  --foil-grain-y: 0px;
  --foil-twinkle: 52%;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: inherit;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(238, 245, 255, .8);
  border-radius: 12px;
  background: var(--cover-color, #182435);
  box-shadow:
    0 1px 1px rgba(255, 255, 255, .7) inset,
    0 -2px 2px rgba(0, 0, 0, .5) inset,
    0 17px 34px -18px rgba(10, 15, 22, .65),
    0 3px 7px -3px rgba(10, 15, 22, .35);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.gallery-plane .card-face > .project-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.card-art { position: absolute; inset: 0; }
.gallery-plane .card-art { inset: -3%; background: var(--cover-color); }

/* A low coloured substrate makes black artwork respond to light too.
   Main diffraction is a separate, brighter moving layer. */
.gallery-plane .card-face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(var(--foil-angle),
    #18274d 0%, #076e9b 18%, #209e78 34%, #b39f31 48%,
    #a13675 63%, #483197 79%, #162a51 100%);
  background-size: 180% 180%;
  background-position: var(--foil-x) var(--foil-y);
  mix-blend-mode: screen;
  opacity: calc((.11 + var(--foil-strength) * .22) * var(--foil-opacity, .28));
  filter: hue-rotate(var(--foil-hue));
}

.gallery-plane .card-face > .foil-prism,
.gallery-plane .card-face > .foil-sparkles,
.gallery-plane .card-face > .foil-glare,
.gallery-plane .card-face > .foil-bloom {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  pointer-events: none;
}

/* Several full-spectrum passes, not a hue filter on the project image. */
.gallery-plane .card-face > .foil-prism {
  z-index: 2;
  background-image:
    repeating-linear-gradient(var(--foil-angle),
      #fae882 0%, #92f5ad 7%, #42e8e7 14%, #438fff 21%,
      #a56aff 28%, #f57bd2 35%, #ff9995 42%, #fae882 49%),
    repeating-linear-gradient(calc(var(--foil-angle) + 90deg),
      rgba(255, 255, 255, .18) 0 1px,
      rgba(12, 16, 31, .12) 1px 2px, transparent 2px 4px);
  background-size: 260% 260%, 100% 100%;
  background-position: var(--foil-x) var(--foil-y), center;
  background-blend-mode: soft-light;
  mix-blend-mode: color-dodge;
  filter: saturate(1.65) contrast(1.2) hue-rotate(var(--foil-hue));
  opacity: calc((.32 + var(--foil-strength) * .56) * var(--foil-opacity, .28));
  -webkit-mask-image: radial-gradient(ellipse at var(--foil-x) var(--foil-y),
    #000 5%, rgba(0, 0, 0, .92) 35%, rgba(0, 0, 0, .38) 72%, transparent 100%);
  mask-image: radial-gradient(ellipse at var(--foil-x) var(--foil-y),
    #000 5%, rgba(0, 0, 0, .92) 35%, rgba(0, 0, 0, .38) 72%, transparent 100%);
}

/* Crisp pinpoints from incommensurate pattern sizes. */
.gallery-plane .card-face > .foil-sparkles {
  z-index: 3;
  background-image:
    radial-gradient(circle at 11px 17px, #fff 0 .55px, transparent 1.05px),
    radial-gradient(circle at 27px 9px, #adf9ff 0 .65px, transparent 1.15px),
    radial-gradient(circle at 7px 37px, #ffe3ac 0 .45px, transparent .9px),
    radial-gradient(circle at 51px 23px, #f9baff 0 .8px, transparent 1.35px),
    radial-gradient(circle at 9px 6px, #fff 0 .35px, transparent .7px);
  background-size: 31px 43px, 47px 37px, 61px 67px, 79px 89px, 17px 23px;
  background-position:
    var(--foil-grain-x) var(--foil-grain-y),
    calc(var(--foil-grain-x) * 1.4) calc(var(--foil-grain-y) * .8),
    calc(var(--foil-grain-x) * -.65) calc(var(--foil-grain-y) * 1.25),
    calc(var(--foil-grain-x) * 1.15) calc(var(--foil-grain-y) * -1.3),
    calc(var(--foil-grain-x) * -.8) calc(var(--foil-grain-y) * -.7);
  mix-blend-mode: color-dodge;
  opacity: calc((.16 + var(--foil-spark) * .74) * var(--foil-opacity, .28));
  -webkit-mask-image: linear-gradient(112deg,
    rgba(0, 0, 0, .12) calc(var(--foil-twinkle) - 38%),
    rgba(0, 0, 0, .45) calc(var(--foil-twinkle) - 18%),
    #000 var(--foil-twinkle),
    rgba(0, 0, 0, .5) calc(var(--foil-twinkle) + 16%),
    rgba(0, 0, 0, .12) calc(var(--foil-twinkle) + 38%));
  mask-image: linear-gradient(112deg,
    rgba(0, 0, 0, .12) calc(var(--foil-twinkle) - 38%),
    rgba(0, 0, 0, .45) calc(var(--foil-twinkle) - 18%),
    #000 var(--foil-twinkle),
    rgba(0, 0, 0, .5) calc(var(--foil-twinkle) + 16%),
    rgba(0, 0, 0, .12) calc(var(--foil-twinkle) + 38%));
}

.gallery-plane .card-face > .foil-glare {
  z-index: 4;
  background-image:
    radial-gradient(ellipse at var(--foil-x) var(--foil-y),
      #fff 0%, rgba(231, 244, 255, .75) 9%,
      rgba(228, 239, 255, .18) 30%, rgba(0, 0, 0, .4) 77%),
    linear-gradient(var(--foil-angle),
      transparent 28%, rgba(255, 255, 255, .08) 38%,
      rgba(255, 255, 255, .86) 46%, rgba(255, 255, 255, .12) 51%, transparent 61%);
  background-size: 100% 100%, 180% 180%;
  background-position: center, var(--foil-x) var(--foil-y);
  mix-blend-mode: overlay;
  opacity: calc(var(--foil-glare) * var(--foil-opacity, .28));
}

.gallery-plane .card-face > .foil-bloom {
  z-index: 6;
  background: radial-gradient(ellipse at var(--foil-x) var(--foil-y),
    #fff 0%, rgba(229, 243, 255, .86) 5%,
    rgba(159, 205, 255, .3) 17%, transparent 42%);
  mix-blend-mode: screen;
  opacity: calc(var(--foil-bloom) * var(--foil-opacity, .28));
}

/* Laminate catches a thin reflection and a darker inner bevel. */
.gallery-plane .card-face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .55), transparent 22%,
    transparent 72%, rgba(255, 255, 255, .3));
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .16) inset,
    0 0 0 3px rgba(11, 19, 32, .45) inset,
    1px 1px 1px 4px rgba(255, 255, 255, .12) inset;
  mix-blend-mode: soft-light;
}

.gallery-plane .card-face > .fan-number,
.gallery-plane .card-face > .project-caption {
  z-index: 5;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .12);
}

/* Light artwork needs absorption instead of white-on-white dodge. */
.gallery-plane .card-face[data-foil-tone="light"]::before {
  mix-blend-mode: multiply;
  opacity: calc((.16 + var(--foil-strength) * .2) * var(--foil-opacity, .28));
}

.gallery-plane .card-face[data-foil-tone="light"] > .foil-prism {
  mix-blend-mode: overlay;
  opacity: calc((.44 + var(--foil-strength) * .5) * var(--foil-opacity, .28));
}

.gallery-plane .card-face[data-foil-tone="light"] > .foil-sparkles {
  mix-blend-mode: soft-light;
}

/* Index keeps its editorial image-and-caption arrangement. */
.index-collection .card-orientation {
  width: 100%;
  height: auto;
  transform: none;
}

.index-collection .card-face {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  overflow: visible;
  isolation: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none !important;
}

.index-collection .card-face::before,
.index-collection .card-face::after {
  content: none;
}

.index-collection .foil-prism,
.index-collection .foil-sparkles,
.index-collection .foil-glare,
.index-collection .foil-bloom {
  display: none;
}

@media (hover: none), (pointer: coarse) {
  .gallery-plane .card-face {
    --foil-x: 46% !important;
    --foil-y: 38% !important;
    --foil-angle: 118deg !important;
    --foil-strength: .3 !important;
    --foil-hue: 0deg !important;
    --foil-glare: .22 !important;
    --foil-bloom: 0 !important;
    --foil-spark: .32 !important;
    --foil-grain-x: 0px !important;
    --foil-grain-y: 0px !important;
    --foil-twinkle: 52% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-plane .card-face {
    --foil-x: 46% !important;
    --foil-y: 38% !important;
    --foil-angle: 118deg !important;
    --foil-strength: .3 !important;
    --foil-hue: 0deg !important;
    --foil-glare: .22 !important;
    --foil-bloom: 0 !important;
    --foil-spark: .32 !important;
    --foil-grain-x: 0px !important;
    --foil-grain-y: 0px !important;
    --foil-twinkle: 52% !important;
    transform: none !important;
    transition: none !important;
  }
}