/* Keep the shared art container a 3D scene. Only the background leaf clips;
   filters, opacity, blending and overflow:hidden here would flatten it. */
.card-art.card-art-layered {
  --subject-depth: 29px;
  position: relative;
  overflow: visible;
  transform-style: preserve-3d;
  isolation: auto;
  background: transparent;
}
.card-art.card-art-layered::after { display: none; }
.card-art-layered > .art-background-plane,
.card-art-layered > .art-subject-plane {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card-art-layered > .art-background-plane {
  overflow: hidden;
  background: #e5e9da;
  transform: translateZ(0);
  box-shadow: inset 0 0 0 1px #d9c38b88;
}
.card-art-layered > .art-subject-plane {
  overflow: visible;
  transform: translateZ(var(--subject-depth))
    translate(calc(var(--parallax-x, 0px) * -1.3), calc(var(--parallax-y, 0px) * -1.3));
  transition: transform .42s cubic-bezier(.2,.8,.2,1);
}
.card-art.card-art-layered .art-background-plane img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate(calc(var(--parallax-x, 0px) * .45), calc(var(--parallax-y, 0px) * .45)) scale(1.035);
}
.card-art.card-art-layered .art-subject-plane img {
  position: absolute;
  left: var(--subject-padding, 5%);
  top: calc(var(--subject-padding, 5%) + var(--subject-offset-y, 0%));
  width: calc(100% - var(--subject-padding, 5%) * 2);
  height: calc(100% - var(--subject-padding, 5%) * 2);
  object-fit: contain;
  object-position: center;
  transform: none;
}
.card-art-layered img {
  user-select: none;
  -webkit-user-drag: none;
}

/* Foil is composed inside each individual image plane. These two planes may
   isolate their flat textures, but their common 3D parent must remain ungrouped. */
.card-art-layered:not(.art-static) > .art-background-plane,
.card-art-layered:not(.art-static) > .art-subject-plane { isolation: isolate; }

/* The selected cards own their reflections; suppress the old flat gold stripe. */
.word-card:has(.card-art-layered[data-foil-finish]) > .card-volume > .card-foil { display: none; }

.card-art-layered[data-foil-finish] {
  --foil-rest: .18;
  --foil-active: .52;
  --foil-subject-rest: .22;
  --foil-subject-active: .65;
  --foil-glare-rest: .07;
  --foil-glare-active: .3;
  --foil-sweep-color: #e5eaff;
  --foil-sweep-edge: #8fdde8;
}

/* A diffraction grating over deep blue, violet and cyan spectral bands. */
.card-art-layered[data-foil-finish="prism"] {
  --foil-blend: color-dodge;
  --foil-relief: repeating-linear-gradient(24deg, #dff4ff3d 0 .65px, #081b3926 .9px 1.6px, transparent 2px 4px);
  --foil-spectrum: repeating-linear-gradient(116deg, #102044 0%, #254e96 9%, #7961ba 17%, #e3bce9 23%, #91e8e5 29%, #5797ca 36%, #373b82 44%, #102044 54%);
  --foil-spectrum-size: 290% 250%;
  --foil-sweep-color: #e8eeff;
  --foil-sweep-edge: #a3b3ff;
}

/* Fine curved intaglio lines catch warm light; the rainbow stays an undertone. */
.card-art-layered[data-foil-finish="gilt"] {
  --foil-rest: .32;
  --foil-active: .72;
  --foil-subject-rest: .36;
  --foil-subject-active: .8;
  --foil-glare-rest: .06;
  --foil-glare-active: .25;
  --foil-blend: soft-light;
  --foil-relief: repeating-radial-gradient(ellipse at 42% 112%, transparent 0 4px, #ffedab8c 4.3px 4.8px, #673b252b 5px 5.5px, transparent 5.8px 9px);
  --foil-spectrum: linear-gradient(116deg, #653c20 2%, #c58d2e 17%, #fff0b0 28%, #c9a551 39%, #c7b6c7 46%, #a8c5bb 51%, #edce84 57%, #fff2be 68%, #a36c29 81%, #f5dc9b 100%);
  --foil-spectrum-size: 270% 230%;
  --foil-sweep-color: #fff2c3;
  --foil-sweep-edge: #d9b76d;
}

/* Broad, low-contrast nacre bands preserve the pale petals and morning light. */
.card-art-layered[data-foil-finish="pearl"] {
  --foil-rest: .12;
  --foil-active: .38;
  --foil-subject-rest: .16;
  --foil-subject-active: .49;
  --foil-glare-rest: .04;
  --foil-glare-active: .22;
  --foil-blend: screen;
  --foil-relief: repeating-radial-gradient(ellipse at 70% -12%, transparent 0 6px, #ffe3f31c 6.5px 7px, transparent 7.5px 14px);
  --foil-spectrum: linear-gradient(122deg, #342c49 0%, #8c647f 13%, #eac0dc 25%, #b1dae1 36%, #6996a4 46%, #d8d4b7 56%, #d8a6bf 69%, #9bc7d1 83%, #382c48 100%);
  --foil-spectrum-size: 270% 250%;
  --foil-sweep-color: #fff0fa;
  --foil-sweep-edge: #a5e2e7;
}

.art-foil-surface,
.art-foil-glare {
  position: absolute;
  display: block;
  pointer-events: none;
  border-radius: inherit;
}
.art-foil-background {
  inset: 0;
  transform: translate(calc(var(--parallax-x, 0px) * .45), calc(var(--parallax-y, 0px) * .45)) scale(1.035);
}
.art-foil-subject {
  /* Identical box and contain sizing to the image above, including narrow cards. */
  left: var(--subject-padding, 5%);
  top: calc(var(--subject-padding, 5%) + var(--subject-offset-y, 0%));
  width: calc(100% - var(--subject-padding, 5%) * 2);
  height: calc(100% - var(--subject-padding, 5%) * 2);
  -webkit-mask-image: var(--foil-mask);
  mask-image: var(--foil-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
}
.art-foil-surface {
  z-index: 1;
  opacity: var(--foil-rest);
  mix-blend-mode: var(--foil-blend, soft-light);
  background-image: var(--foil-relief), var(--foil-spectrum);
  background-size: 100% 100%, var(--foil-spectrum-size, 280% 240%);
  background-position: center, calc(100% - var(--foil-x, 50%)) calc(100% - var(--foil-y, 35%));
  background-blend-mode: soft-light, normal;
  transition: opacity .2s ease;
}
.art-foil-surface.art-foil-subject { opacity: var(--foil-subject-rest); }
.art-foil-glare {
  z-index: 2;
  mix-blend-mode: screen;
}
.art-foil-glare::before,
.art-foil-glare::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.art-foil-glare::before {
  opacity: var(--foil-glare-rest);
  background-image:
    radial-gradient(ellipse at var(--foil-x, 50%) var(--foil-y, 35%), #fffbdcbd 0%, #f5efff3d 17%, transparent 53%),
    linear-gradient(116deg, transparent 35%, #fff9 49%, #fffefa33 53%, transparent 66%);
  background-size: 100% 100%, 280% 140%;
  background-position: center, var(--foil-x, 50%) var(--foil-y, 35%);
  transition: opacity .2s ease;
}
.art-foil-glare::after {
  opacity: 0;
  background-image: linear-gradient(116deg, transparent 35%, var(--foil-sweep-edge) 46%, var(--foil-sweep-color) 50%, #fffdf5 51%, var(--foil-sweep-edge) 54%, transparent 65%);
  background-size: 320% 100%;
  background-position: 135% 50%;
}

.depth-active .art-foil-surface,
.word-card:focus-visible .art-foil-surface,
.is-foil-revealing .art-foil-surface { opacity: var(--foil-active); }
.depth-active .art-foil-surface.art-foil-subject,
.word-card:focus-visible .art-foil-surface.art-foil-subject,
.is-foil-revealing .art-foil-surface.art-foil-subject { opacity: var(--foil-subject-active); }
.depth-active .art-foil-glare::before,
.word-card:focus-visible .art-foil-glare::before { opacity: var(--foil-glare-active); }

/* These warm points belong to the lake plane, behind the independent lantern. */
.art-foil-fireflies {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .17;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 18% 38%, #fffce0 0 .65px, #ecdd7e7d 1.1px, transparent 4px),
    radial-gradient(circle at 76% 22%, #fffce8 0 .7px, #eee7a18c 1.2px, transparent 4.5px),
    radial-gradient(circle at 85% 62%, #f7f4bd 0 .55px, #d6e4a46b 1.2px, transparent 3.5px),
    radial-gradient(circle at 29% 79%, #fffbdc 0 .7px, #f5db8b73 1.2px, transparent 4px),
    radial-gradient(circle at 63% 12%, #fffbe2 0 .5px, #f7e59559 1px, transparent 3px);
  transition: opacity .25s ease;
}
.depth-active .art-foil-fireflies,
.word-card:focus-visible .art-foil-fireflies { opacity: .62; }

/* The reveal owner adds/removes this class. No interval or animation loop is
   installed; these effects finish once, including a quick duplicate reveal. */
.is-foil-revealing .art-foil-surface {
  animation: ssr-foil-refraction var(--reveal-foil-duration, 620ms) cubic-bezier(.18,.65,.3,1) both;
}
.is-foil-revealing .art-foil-glare::after {
  animation: ssr-foil-sweep var(--reveal-foil-duration, 620ms) cubic-bezier(.18,.65,.3,1) both;
}
.is-foil-revealing .art-foil-fireflies {
  animation: ssr-firefly-glow var(--reveal-foil-duration, 620ms) ease-out both;
}
@keyframes ssr-foil-refraction {
  from { background-position: center, 88% 80%; }
  to { background-position: center, calc(100% - var(--foil-x, 50%)) calc(100% - var(--foil-y, 35%)); }
}
@keyframes ssr-foil-sweep {
  0% { opacity: 0; background-position: 135% 50%; }
  25% { opacity: .25; }
  48% { opacity: .58; }
  75% { opacity: .22; }
  100% { opacity: 0; background-position: -35% 50%; }
}
@keyframes ssr-firefly-glow {
  0% { opacity: .17; }
  40% { opacity: .9; }
  100% { opacity: .17; }
}

/* If masking is unavailable, keep the subject clean instead of painting a box. */
@supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
  .art-foil-subject { display: none; }
}

/* A larger gap in the collector's viewer makes the separate illustration
   planes visible without moving the subject into the word/text plane. */
.depth-stage .card-art-layered { --subject-depth: 34px; }
.depth-stage.show-depth .card-art-layered { --subject-depth: 45px; }
.depth-stage.show-depth .card-art-layered > .art-background-plane {
  box-shadow: 0 0 0 1px #b99b6266, 0 3px 10px #394d3b1a;
}

/* Intro screens use the same exact two assets at rest. They do not tilt. */
.intro-visual > .card-art.card-art-layered,
.card-art.card-art-layered.art-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  transform: none;
  transform-style: flat;
  overflow: hidden;
}
.intro-visual .card-art-layered > .art-subject-plane,
.art-static.card-art-layered > .art-subject-plane { transform: none; }
.intro-visual .card-art-layered .art-background-plane img,
.art-static.card-art-layered .art-background-plane img { transform: none; }
.intro-visual .art-foil-surface,
.intro-visual .art-foil-glare,
.intro-visual .art-foil-fireflies,
.art-static .art-foil-surface,
.art-static .art-foil-glare,
.art-static .art-foil-fireflies { display: none; }

@media (max-width: 540px) {
  .depth-stage .card-art-layered { --subject-depth: 27px; }
  .depth-stage.show-depth .card-art-layered { --subject-depth: 37px; }
}
@media (prefers-reduced-motion: reduce) {
  .card-art-layered > .art-subject-plane { transition: none; }
  .art-foil-surface,
  .art-foil-glare::before,
  .art-foil-fireflies { transition: none; }
  .is-foil-revealing .art-foil-surface,
  .is-foil-revealing .art-foil-glare::after,
  .is-foil-revealing .art-foil-fireflies { animation: none; }
  .art-foil-glare::after { display: none; }
}