/* ===================================================================
   foil.css — pointer-reactive foil effect, 7 rarity tiers
   Pair with foil.js. Needs Font Awesome only if you use .foil-glyphs.

     <div class="foil foil-tilt foil-legendary">
       <div class="foil-texture"></div>
       <div class="foil-glyphs" data-glyph="fa-solid fa-star"></div>
       <div class="foil-content">…</div>
     </div>

   Tiers: rare · epic · heroic · legendary · mythic · celestial · absolute
   =================================================================== */

/* content sits above the base, below the sheen */
.foil-content { position: relative; z-index: 2; }

@property --fx { syntax: '<number>'; inherits: true; initial-value: 0.5; }
@property --fy { syntax: '<number>'; inherits: true; initial-value: 0.5; }
@property --active { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --mx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --my { syntax: '<percentage>'; inherits: true; initial-value: 50%; }

@keyframes foil-hue { to { filter: hue-rotate(360deg); } }
@keyframes foil-creep { to { background-position: 200% 0, 0 0; } }

/* ---- foil system ---- */
.foil {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: --fx 90ms linear, --fy 90ms linear, --mx 90ms linear, --my 90ms linear,
    --active 260ms ease-out, transform 120ms ease-out, box-shadow 260ms ease-out;
}
/* opt-in 3D tilt: add .foil-tilt next to .foil */
.foil-tilt {
  transform: perspective(900px)
    rotateX(calc((var(--fy) - 0.5) * -9deg * var(--foil-tilt, 1)))
    rotateY(calc((var(--fx) - 0.5) * 9deg * var(--foil-tilt, 1)))
    scale(calc(1 + var(--active) * 0.012 * var(--foil-tilt, 1)));
  will-change: transform;
}
.foil::before, .foil::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
/* specular glare — shared by every tier */
.foil::after {
  background: radial-gradient(240px circle at var(--mx) var(--my),
    rgba(255,255,255,0.30), rgba(255,255,255,0.06) 45%, transparent 72%);
  mix-blend-mode: soft-light;
  opacity: calc((0.35 + var(--active) * 0.65) * var(--foil-intensity, 1));
}
/* holographic sheen — per tier */
.foil::before {
  background-size: 220% 220%, 100% 100%;
  background-position: calc(var(--fx) * 100%) calc(var(--fy) * 100%), 0 0;
  mask-image: radial-gradient(680px circle at var(--mx) var(--my),
    rgba(0,0,0,1) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.08) 100%);
  -webkit-mask-image: radial-gradient(680px circle at var(--mx) var(--my),
    rgba(0,0,0,1) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.08) 100%);
}

/* RARE — cool single sweep */
.foil-rare,
.foil-3 {
  box-shadow: 0 0 0 1px rgba(120,190,255,0.22) inset,
    0 18px 40px -24px rgba(60,150,255,calc(0.25 + var(--active) * 0.45));
}
.foil-rare::before,
.foil-3::before {
  background-image: linear-gradient(102deg, transparent 28%,
    rgba(120,200,255,0.30) 43%, rgba(255,255,255,0.62) 50%,
    rgba(120,200,255,0.30) 57%, transparent 72%);
  mix-blend-mode: screen;
  opacity: calc((0.45 + var(--active) * 0.55) * var(--foil-intensity, 1));
}

/* EPIC — twin violet/teal bands */
.foil-epic,
.foil-4 {
  box-shadow: 0 0 0 1px rgba(190,140,255,0.26) inset,
    0 18px 44px -24px rgba(150,80,255,calc(0.3 + var(--active) * 0.5));
}
.foil-epic::before,
.foil-4::before {
  background-image:
    linear-gradient(115deg, transparent 20%, rgba(170,110,255,0.45) 34%,
      rgba(255,255,255,0.55) 42%, rgba(90,230,220,0.42) 52%,
      rgba(255,255,255,0.45) 62%, rgba(170,110,255,0.40) 72%, transparent 86%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.09) 0 2px, transparent 2px 7px);
  mix-blend-mode: screen;
  opacity: calc((0.5 + var(--active) * 0.5) * var(--foil-intensity, 1));
}

/* LEGENDARY — gold prism + fine holo lines */
.foil-legendary,
.foil-6 {
  box-shadow: 0 0 0 1px rgba(255,205,110,0.34) inset,
    0 20px 48px -22px rgba(255,170,40,calc(0.3 + var(--active) * 0.55));
}
.foil-legendary::before,
.foil-6::before {
  background-image:
    linear-gradient(108deg, transparent 12%, rgba(255,196,80,0.55) 28%,
      rgba(255,255,235,0.72) 40%, rgba(255,150,60,0.45) 50%,
      rgba(255,240,190,0.70) 60%, rgba(255,196,80,0.50) 74%, transparent 90%),
    repeating-linear-gradient(72deg, rgba(255,255,255,0.14) 0 1px,
      rgba(255,190,90,0.10) 1px 2px, transparent 2px 6px);
  mix-blend-mode: color-dodge;
  opacity: calc((0.42 + var(--active) * 0.5) * var(--foil-intensity, 1));
}

/* HEROIC — silver / platinum, hard specular */
.foil-heroic,
.foil-5 {
  box-shadow: 0 0 0 1px rgba(226,236,248,0.34) inset,
    0 18px 46px -24px rgba(200,220,245,calc(0.28 + var(--active) * 0.5));
}
.foil-heroic::before,
.foil-5::before {
  background-image:
    linear-gradient(100deg, transparent 16%, rgba(214,228,244,0.42) 32%,
      rgba(255,255,255,0.85) 44%, rgba(160,180,200,0.30) 52%,
      rgba(255,255,255,0.75) 60%, rgba(214,228,244,0.38) 76%, transparent 92%),
    repeating-linear-gradient(100deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  opacity: calc((0.46 + var(--active) * 0.54) * var(--foil-intensity, 1));
}

/* MYTHIC — crimson / ember */
.foil-mythic,
.foil-7 {
  box-shadow: 0 0 0 1px rgba(255,120,110,0.30) inset,
    0 20px 52px -22px rgba(230,40,50,calc(0.32 + var(--active) * 0.55));
}
.foil-mythic::before,
.foil-7::before {
  background-image:
    linear-gradient(106deg, transparent 12%, rgba(255,70,80,0.55) 28%,
      rgba(255,190,150,0.72) 40%, rgba(190,20,40,0.50) 50%,
      rgba(255,120,90,0.70) 60%, rgba(255,60,70,0.52) 76%, transparent 92%),
    repeating-linear-gradient(106deg, rgba(255,180,150,0.12) 0 2px, transparent 2px 6px);
  mix-blend-mode: color-dodge;
  opacity: calc((0.44 + var(--active) * 0.52) * var(--foil-intensity, 1));
}

/* CELESTIAL — deep blue into violet, slowly drifting */
.foil-celestial,
.foil-8 {
  box-shadow: 0 0 0 1px rgba(150,160,255,0.32) inset,
    0 22px 54px -22px rgba(90,80,255,calc(0.34 + var(--active) * 0.55));
}
.foil-celestial::before,
.foil-8::before {
  background-image:
    repeating-linear-gradient(104deg,
      #2b6bff 0%, #6f4bff 9%, #b06bff 17%, #4fd8ff 26%, #2b6bff 34%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.12) 0 1px, transparent 1px 5px);
  background-size: 240% 240%, 100% 100%;
  mix-blend-mode: color-dodge;
  opacity: calc((0.32 + var(--active) * 0.34) * var(--foil-intensity, 1));
  animation: foil-creep 22s linear infinite alternate;
}

/* ABSOLUTE — full spectrum, always alive */
.foil-absolute,
.foil-9 {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.34) inset,
    0 24px 60px -20px rgba(255,80,160,calc(0.36 + var(--active) * 0.55));
}
.foil-absolute::before,
.foil-9::before {
  background-image:
    repeating-linear-gradient(100deg,
      #ff3b6b 0%, #ff9f3a 7%, #ffe94a 14%, #4bffa5 21%,
      #3ac8ff 28%, #9b5bff 35%, #ff3b6b 42%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.16) 0 1px, transparent 1px 4px);
  mix-blend-mode: color-dodge;
  opacity: calc((0.34 + var(--active) * 0.28) * var(--foil-intensity, 1));
  animation: foil-hue 9s linear infinite, foil-creep 14s linear infinite alternate;
}
/* ---- GLYPH FIELD — tiled icons that shine under the cursor ----
   <div class="foil-glyphs" data-glyph="fa-solid fa-star"></div>
   Leave it empty; foil.js fills it. Requires the Font Awesome stylesheet. */
.foil-glyphs {
  position: absolute;
  inset: calc(var(--foil-glyph-shift, 10px) * -1);
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fill, calc(var(--foil-glyph-size, 12px) * 1.75));
  grid-auto-rows: calc(var(--foil-glyph-size, 12px) * 1.75);
  justify-content: center;
  align-content: start;
  place-items: center;
  color: #fff;
  font-size: var(--foil-glyph-size, 12px);
  line-height: 1;
  text-shadow: 0 0 6px rgba(255,255,255,0.45);
  transform: translate3d(calc((var(--fx) - 0.5) * var(--foil-glyph-shift, 10px)),
    calc((var(--fy) - 0.5) * var(--foil-glyph-shift, 10px)), 0);
  transition: opacity 260ms ease-out, transform 120ms ease-out;
  mask-image: radial-gradient(260px circle at var(--mx) var(--my),
    rgba(0,0,0,1) 0%, rgba(0,0,0,0.22) 55%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(260px circle at var(--mx) var(--my),
    rgba(0,0,0,1) 0%, rgba(0,0,0,0.22) 55%, rgba(0,0,0,0) 100%);
  mix-blend-mode: screen;
  opacity: calc((0.22 + var(--active) * 0.78) * var(--foil-intensity, 1));
  transition: opacity 260ms ease-out;
}
.foil-glyphs > * { display: block; }
.foil-glyphs > svg { width: 1em; height: 1em; }
.foil-glyphs > :nth-child(3n) { opacity: 0.55; }
.foil-glyphs > :nth-child(4n) { opacity: 0.8; }

/* ---- TEXTURE — embossed relief, like a textured trading card ----
   <div class="foil-texture foil-texture-chevron"></div>
   Variants: crosshatch (default) · chevron · scales · etch */
.foil-texture {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--foil-texture-image,
    repeating-linear-gradient(45deg, rgba(255,255,255,0.14) 0 2px, rgba(0,0,0,0.18) 2px 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.10) 0 2px, rgba(0,0,0,0.12) 2px 6px));
  background-size: var(--foil-texture-size, auto);
  mix-blend-mode: overlay;
  opacity: calc(var(--foil-texture-on, 1) * (0.55 + var(--active) * 0.45) * var(--foil-intensity, 1));
  transition: opacity 260ms ease-out;
}
/* ridges catch the light under the cursor */
.foil-texture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(200px circle at var(--mx) var(--my),
    rgba(255,255,255,1), rgba(255,255,255,0.3) 45%, transparent 78%);
  mask-image: var(--foil-texture-image,
    repeating-linear-gradient(45deg, rgba(255,255,255,0.14) 0 2px, rgba(0,0,0,0.18) 2px 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.10) 0 2px, rgba(0,0,0,0.12) 2px 6px));
  mask-size: var(--foil-texture-size, auto);
  -webkit-mask-image: var(--foil-texture-image,
    repeating-linear-gradient(45deg, rgba(255,255,255,0.14) 0 2px, rgba(0,0,0,0.18) 2px 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.10) 0 2px, rgba(0,0,0,0.12) 2px 6px));
  -webkit-mask-size: var(--foil-texture-size, auto);
  mix-blend-mode: screen;
  opacity: calc(0.25 + var(--active) * 0.75);
}
.foil-texture-crosshatch {
  --foil-texture-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.14) 0 2px, rgba(0,0,0,0.18) 2px 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.10) 0 2px, rgba(0,0,0,0.12) 2px 6px);
  --foil-texture-size: auto;
}
.foil-texture-chevron {
  --foil-texture-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.18) 0 3px, rgba(0,0,0,0.22) 3px 8px);
  --foil-texture-size: auto;
}
.foil-texture-scales {
  --foil-texture-image:
    radial-gradient(circle at 50% 120%, rgba(255,255,255,0.22) 0 42%, rgba(0,0,0,0.22) 43% 100%);
  --foil-texture-size: 12px 12px;
}
.foil-texture-etch {
  --foil-texture-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 1px, rgba(0,0,0,0.16) 1px 4px);
  --foil-texture-size: auto;
}

/* ---- NO-FOIL TIERS — plain cards, still tilt/flip/click like the rest ----
   COMMON (white) and UNCOMMON (green) get no sheen and no glare.        */
.foil-common::before, .foil-common::after,
.foil-1::before, .foil-1::after { content: none; }
.foil-common .foil-glyphs, .foil-common .foil-texture,
.foil-1 .foil-glyphs, .foil-1 .foil-texture,
.foil-uncommon .foil-glyphs, .foil-uncommon .foil-texture,
.foil-2 .foil-glyphs, .foil-2 .foil-texture { display: none; }
/* UNCOMMON keeps a soft green shine, but no glyph field */
.foil-uncommon::before,
.foil-2::before {
  background-image: linear-gradient(104deg, transparent 32%,
    rgba(120,220,150,0.26) 45%, rgba(235,255,242,0.42) 50%,
    rgba(120,220,150,0.24) 55%, transparent 70%);
  mix-blend-mode: screen;
  opacity: calc((0.35 + var(--active) * 0.45) * var(--foil-intensity, 1));
}
.foil-common,
.foil-1 {
  box-shadow: 0 0 0 1px rgba(226,232,240,0.20) inset,
    0 14px 32px -26px rgba(0,0,0,0.9);
}
.foil-uncommon,
.foil-2 {
  box-shadow: 0 0 0 1px rgba(120,220,150,0.24) inset,
    0 14px 34px -26px rgba(40,180,90,0.5);
}

/* ---- SPARKLE — drifting motes on the top tiers (mythic → absolute) ---- */
@keyframes foil-sparkle-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 42px -70px, -58px -96px, 30px -124px, -36px -108px; }
}
@keyframes foil-sparkle-drift-b {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: -48px 82px, 62px 104px, -30px 128px; }
}
@keyframes foil-sparkle-drift-c {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: -64px -88px, -64px -88px, 52px -112px, 52px -112px,
           -38px -146px, -38px -146px, 70px -74px, -56px -128px, 44px -160px; }
}
/* the twinkle pulse is a separate animation so it never clobbers opacity */
@keyframes foil-sparkle-pulse {
  0%, 100% { filter: brightness(0.55); }
  50%      { filter: brightness(1.35); }
}

/* zero-specificity defaults so the level rules below always win */
:where(.foil-sparkles, .foil-sparkles-1, .foil-sparkles-2, .foil-sparkles-3) {
  --spark-scale: 1;
  --spark-speed: 11s;
  --spark-k2: 0;
  --spark-k3: 0;
}

/* KIND 1 — round motes, every level */
.foil-sparkles,
.foil-sparkles-1, .foil-sparkles-2, .foil-sparkles-3 {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 24%, rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(1.2px 1.2px at 63% 12%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 41% 71%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1.3px 1.3px at 82% 38%, rgba(255,255,255,0.8), transparent 60%);
  background-size:
    calc(96px * var(--spark-scale)) calc(132px * var(--spark-scale)),
    calc(132px * var(--spark-scale)) calc(168px * var(--spark-scale)),
    calc(154px * var(--spark-scale)) calc(196px * var(--spark-scale)),
    calc(112px * var(--spark-scale)) calc(146px * var(--spark-scale));
  mix-blend-mode: screen;
  animation: foil-sparkle-drift var(--spark-speed) linear infinite,
    foil-sparkle-pulse calc(var(--spark-speed) * 0.5) ease-in-out infinite;
  opacity: calc((0.55 + var(--active) * 0.45) * var(--foil-intensity, 1));
  transition: opacity 260ms ease-out;
}

/* KIND 2 — four-point star glints (level 2+), each drawn as a crossed pair
   of thin ellipses. KIND 3 adds prismatic motes and larger flares. */
.foil-sparkles::before,
.foil-sparkles-1::before, .foil-sparkles-2::before, .foil-sparkles-3::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(7px 0.9px at 30% 22%, rgba(255,255,255,0.95), transparent 70%),
    radial-gradient(0.9px 7px at 30% 22%, rgba(255,255,255,0.95), transparent 70%),
    radial-gradient(6px 0.8px at 71% 58%, rgba(255,255,255,0.85), transparent 70%),
    radial-gradient(0.8px 6px at 71% 58%, rgba(255,255,255,0.85), transparent 70%),
    radial-gradient(11px 1.1px at 48% 80%, rgba(255,255,255,calc(0.9 * var(--spark-k3))), transparent 70%),
    radial-gradient(1.1px 11px at 48% 80%, rgba(255,255,255,calc(0.9 * var(--spark-k3))), transparent 70%),
    radial-gradient(2.2px 2.2px at 12% 63%, rgba(120,225,255,calc(0.85 * var(--spark-k3))), transparent 62%),
    radial-gradient(2px 2px at 88% 31%, rgba(255,150,220,calc(0.8 * var(--spark-k3))), transparent 62%),
    radial-gradient(1.8px 1.8px at 60% 8%, rgba(255,230,140,calc(0.85 * var(--spark-k3))), transparent 62%);
  background-size:
    calc(150px * var(--spark-scale)) calc(190px * var(--spark-scale)),
    calc(150px * var(--spark-scale)) calc(190px * var(--spark-scale)),
    calc(118px * var(--spark-scale)) calc(154px * var(--spark-scale)),
    calc(118px * var(--spark-scale)) calc(154px * var(--spark-scale)),
    calc(196px * var(--spark-scale)) calc(240px * var(--spark-scale)),
    calc(196px * var(--spark-scale)) calc(240px * var(--spark-scale)),
    calc(104px * var(--spark-scale)) calc(138px * var(--spark-scale)),
    calc(126px * var(--spark-scale)) calc(162px * var(--spark-scale)),
    calc(92px * var(--spark-scale)) calc(120px * var(--spark-scale));
  animation: foil-sparkle-drift-c calc(var(--spark-speed) * 1.35) linear infinite,
    foil-sparkle-pulse calc(var(--spark-speed) * 0.33) ease-in-out infinite;
  opacity: var(--spark-k2);
}
/* a brighter cluster follows the cursor */
.foil-sparkles::after,
.foil-sparkles-1::after, .foil-sparkles-2::after, .foil-sparkles-3::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.8px 1.8px at 30% 40%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 74% 66%, #fff, transparent 60%),
    radial-gradient(1.1px 1.1px at 52% 18%, #fff, transparent 60%);
  background-size:
    calc(74px * var(--spark-scale)) calc(92px * var(--spark-scale)),
    calc(88px * var(--spark-scale)) calc(104px * var(--spark-scale)),
    calc(62px * var(--spark-scale)) calc(78px * var(--spark-scale));
  mask-image: radial-gradient(150px circle at var(--mx) var(--my),
    rgba(0,0,0,1) 0%, rgba(0,0,0,0.25) 55%, transparent 80%);
  -webkit-mask-image: radial-gradient(150px circle at var(--mx) var(--my),
    rgba(0,0,0,1) 0%, rgba(0,0,0,0.25) 55%, transparent 80%);
  animation: foil-sparkle-drift-b calc(var(--spark-speed) * 0.62) linear infinite,
    foil-sparkle-pulse calc(var(--spark-speed) * 0.37) ease-in-out infinite;
  opacity: calc(0.3 + var(--active) * 0.7);
}

/* Visibility LAST so it beats the display:none in the rules above.
   .foil-sparkles auto-picks its level from the tier and stays hidden below
   mythic; .foil-sparkles-1 / -2 / -3 show on ANY tier, on their own. */
/* Three intensities. Each level ADDS a kind of sparkle on top of the last:
     1 · round motes                     (mythic)
     2 · + four-point star glints        (celestial)
     3 · + prismatic motes and big flares (absolute)
   .foil-sparkles-1 / -2 / -3 work on their OWN — they do not need the
   .foil-sparkles class, and they ignore the tier entirely. */
.foil-mythic .foil-sparkles, .foil-7 .foil-sparkles, .foil-sparkles-1 {
  --spark-scale: 1;
  --spark-speed: 11s;
  --spark-k2: 0;
  --spark-k3: 0;
}
.foil-celestial .foil-sparkles, .foil-8 .foil-sparkles, .foil-sparkles-2 {
  --spark-scale: 0.74;
  --spark-speed: 8s;
  --spark-k2: 1;
  --spark-k3: 0;
}
.foil-absolute .foil-sparkles, .foil-9 .foil-sparkles, .foil-sparkles-3 {
  --spark-scale: 0.54;
  --spark-speed: 5.5s;
  --spark-k2: 1;
  --spark-k3: 1;
}

.foil-mythic .foil-sparkles, .foil-7 .foil-sparkles,
.foil-celestial .foil-sparkles, .foil-8 .foil-sparkles,
.foil-absolute .foil-sparkles, .foil-9 .foil-sparkles,
.foil-sparkles-1, .foil-sparkles-2, .foil-sparkles-3 { display: block; }

/* ---- FLIP — click to turn the card over; the back is plain, no foil ----
   <div class="foil-flip" style="width:268px;height:372px">
     <div class="foil-flip-inner">
       <div class="foil foil-tilt foil-epic">…front…</div>
       <div class="foil-back">…back…</div>
     </div>
   </div>                                                                  */
.foil-flip {
  perspective: 1400px;
  cursor: pointer;
  transition: transform 120ms ease-out;
}
/* the wrapper owns the tilt so it never fights the flip transition */
.foil-flip:has(.foil-tilt) {
  transform: perspective(900px)
    rotateX(calc((var(--fy) - 0.5) * -9deg * var(--foil-tilt, 1)))
    rotateY(calc((var(--fx) - 0.5) * 9deg * var(--foil-tilt, 1)))
    scale(calc(1 + var(--active) * 0.012 * var(--foil-tilt, 1)));
}
.foil-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 620ms cubic-bezier(0.2, 0.75, 0.2, 1);
}
.foil-flip.is-flipped .foil-flip-inner { transform: rotateY(180deg); }
.foil-flip-inner > .foil,
.foil-flip-inner > .foil-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.foil-flip-inner > .foil-back { transform: rotateY(180deg); overflow: hidden; }
.foil-flip .foil-tilt { transform: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  .foil-flip, .foil-flip-inner { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .foil-absolute::before, .foil-celestial::before { animation: none; }
  .foil-sparkles, .foil-sparkles::before, .foil-sparkles::after,
  .foil-sparkles-1, .foil-sparkles-2, .foil-sparkles-3,
  .foil-sparkles-1::before, .foil-sparkles-2::before, .foil-sparkles-3::before,
  .foil-sparkles-1::after, .foil-sparkles-2::after, .foil-sparkles-3::after { animation: none; filter: none; }
  .foil { transition: none; }
}