/**
 * logo-holo.css — adapts rare-rainbow-etched.css (TCG card effect) to a
 * transparent-background LOGO instead of an opaque rectangular card.
 * Load AFTER rare-rainbow-etched.css. Package CSS stays unmodified.
 *
 * A card is an opaque rounded rectangle, so the package lets the glare and
 * the secondary rainbow sweep cover the full face — on transparent logo art
 * those layers would paint a visible glowing rectangle. Everything here
 * exists to clip every layer to the logo's alpha, remove card-shaped chrome
 * (box shadows, radius, edge glow), and de-pixelate the recipe (see the
 * anti-aliasing section at the bottom).
 */

.logo-holo.card {
  /* Mackintosh wordmark is 1101x998, not TCG 0.718 */
  --card-aspect: calc(1101 / 998);
  --card-radius: 0;
}

/* No card rectangle: kill resting/focus box-shadows and edge glow */
.logo-holo .card__rotator,
.logo-holo.card.active .card__rotator,
.logo-holo .card__rotator:focus {
  box-shadow: none;
}

/* Glare is full-face in the package; clip it to the letterforms.
   --mask is inherited from .card__front where the integrator sets it. */
.logo-holo .card__glare {
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center center;
  mask-position: center center;
}

/* The package force-unmasks the secondary rainbow sweep with !important so
   it can wash the whole card. Re-mask it for logo art — higher specificity
   + !important + later in cascade wins. Applies to both rarity variants. */
.logo-holo.card[data-rarity="rare rainbow"] .card__shine:after,
.logo-holo.card[data-rarity="rare rainbow alt"] .card__shine:after {
  -webkit-mask-image: var(--mask) !important;
  mask-image: var(--mask) !important;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center center;
  mask-position: center center;
}

/* ==========================================================================
   Anti-pixelation (verified A/B 2026-07-15)

   Three grain sources in the stock recipe read as "pixelated" on a logo:
   1. glitter.png (630px) tiled down ~4.5:1 — minification aliasing that
      crawls during motion  → pre-downscaled copy (glitter-soft.png, half
      size, high-quality bicubic) so the browser only minifies ~2:1;
   2. the etched-foil layer is the logo PNG itself, whose baked-in grain
      gets amplified into 1px noise by difference + color-dodge  → 1.4px
      blur keeps the etch modulation, kills the speckle;
   3. gradient banding + hard glitter dots under contrast(2-3) filters
      → 0.5px blur on the shine layers. The blurs are appended to the
      package's own filter chains, so those must be restated verbatim.
   ========================================================================== */

/* Glitter OFF (verified matrix A–F, 2026-07-15): on smooth liquid-chrome art
   the sparkle sheet reads as noise, not texture — it also skewed the blend
   chain toward an acid green. A 1x1 transparent PNG keeps the package's
   3-layer background recipe intact with zero sparkle contribution.
   Want subtle sparkle back? Swap the data URI for
   url("../img/glitter-soft.png") — both textures ship in img/. */
.logo-holo.card {
  --glitter: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==");
}

/* (2) soften the etched-foil layer — per rarity, base filters restated */
.logo-holo.card[data-rarity="rare rainbow alt"] .card__shine:before {
  filter: brightness(1.5) contrast(1.5) blur(1.4px);
}
.logo-holo.card[data-rarity="rare rainbow"] .card__shine:before {
  filter: brightness(2.5) contrast(1) blur(1.4px);
}

/* (3) sub-pixel blur + EDGE KNEE on the rainbow/glitter layers.

   --edge-knee is 0 while the pointer is within ~60% of center — the stock
   look is untouched there — and ramps 0→0.4 as it approaches/passes the
   logo edge. It bleeds contrast, saturation, and brightness gain out of the
   filters in exactly the range where the stock recipe clips into blown-out
   white/acid fringing (the pointer can sit past the edge indefinitely with
   our proximity-window driver, which card-hover never had to handle). */
.logo-holo.card {
  --edge-knee: max(0, var(--pointer-from-center) - 0.6);
}
/* PASTEL GRADE (2026-07-16, per client): contrast/saturation pulled down
   across the board so the holo reads as soft pastel iridescence instead of
   saturated rainbow. Knee multipliers rescaled so edge behavior stays tame. */
.logo-holo.card[data-rarity="rare rainbow alt"] .card__shine {
  filter: brightness(calc((var(--pointer-from-center) * 0.3) + 0.34 - var(--edge-knee) * 0.15))
          contrast(calc(2.5 - var(--edge-knee) * 1.7))
          saturate(calc(1.25 - var(--edge-knee) * 0.6))
          blur(0.5px);
}
.logo-holo.card[data-rarity="rare rainbow alt"] .card__shine:after {
  filter: brightness(calc((var(--pointer-from-center) * 0.5) + 0.6 - var(--edge-knee) * 0.5))
          contrast(calc(2.4 - var(--edge-knee) * 1.6))
          saturate(0.95)
          blur(0.5px);
}
.logo-holo.card[data-rarity="rare rainbow"] .card__shine {
  filter: brightness(calc((var(--pointer-from-center) * 0.25) + 0.62 - var(--edge-knee) * 0.15))
          contrast(calc(2 - var(--edge-knee) * 1))
          saturate(0.7)
          blur(0.5px);
}
.logo-holo.card[data-rarity="rare rainbow"] .card__shine:after {
  filter: brightness(calc((var(--pointer-from-center) * 0.3) + 0.55 - var(--edge-knee) * 0.3))
          contrast(calc(1.85 - var(--edge-knee) * 1.05))
          saturate(0.95)
          blur(0.5px);
}

/* (4) the vignette glare is the other half of the harsh edge look — same
   knee treatment, base filters restated from the package */
.logo-holo.card[data-rarity="rare rainbow alt"] .card__glare {
  filter: brightness(0.92) contrast(calc(1.7 - var(--edge-knee) * 1.2));
  opacity: calc(var(--card-opacity) * (0.6 - var(--edge-knee) * 0.4));
}
.logo-holo.card[data-rarity="rare rainbow"] .card__glare {
  filter: brightness(0.92) contrast(calc(1.6 - var(--edge-knee) * 0.9));
  /* also gated by --card-opacity: the package relied on its driver resetting
     --pointer-from-center on leave; smooth-holo tracks window-wide and rests
     with from-center nonzero, which would leave this glare permanently lit */
  opacity: calc(var(--card-opacity) * (var(--pointer-from-center) * 0.9 - var(--edge-knee) * 0.6));
}

/* (5) TOUCH DEVICES: same recipes WITHOUT the blur() passes.
   The shine layers repaint every frame (their backgrounds ride the pointer
   vars), so any blur() in their filter chain costs a full gaussian pass per
   frame — WebKit in particular collapses under it (measured 7fps in the
   iPhone battery; removing the blurs fixes it). At phone logo sizes the
   grain/banding those blurs hide is subsampled away — nothing visual lost. */
@media (hover: none), (pointer: coarse) {
  .logo-holo.card[data-rarity="rare rainbow alt"] .card__shine {
    filter: brightness(calc((var(--pointer-from-center) * 0.3) + 0.34 - var(--edge-knee) * 0.15))
            contrast(calc(2.5 - var(--edge-knee) * 1.7))
            saturate(calc(1.25 - var(--edge-knee) * 0.6));
  }
  /* phones also drop the SECOND color-dodge pass entirely: at ~330px the
     extra sparkle layer is imperceptible, but it doubles the per-frame
     blend cost (it repaints every frame with the pointer vars) */
  .logo-holo.card[data-rarity="rare rainbow alt"] .card__shine:after,
  .logo-holo.card[data-rarity="rare rainbow"] .card__shine:after {
    content: none;
  }
  .logo-holo.card[data-rarity="rare rainbow alt"] .card__shine:before {
    filter: brightness(1.5) contrast(1.5);
  }
  .logo-holo.card[data-rarity="rare rainbow"] .card__shine {
    filter: brightness(calc((var(--pointer-from-center) * 0.25) + 0.62 - var(--edge-knee) * 0.15))
            contrast(calc(2 - var(--edge-knee) * 1))
            saturate(0.7);
  }
  .logo-holo.card[data-rarity="rare rainbow"] .card__shine:before {
    filter: brightness(2.5) contrast(1);
  }
}