/* Visual Suspect — homepage portfolio gallery hover: "Liquid Glass".
   Scoped to the homepage grid (.ut-portfolio-79246 / #ut-masonry-79246).

   Replaces the theme's near-invisible flat tint (rgba(210,0,0,.05), generated
   from data-hovercolor/data-opacity) with a frosted translucent panel — a soft
   backdrop blur, a faint smoked tint for white-text contrast, a top specular
   highlight and a hairline rim. The category sub-line is lifted from the
   theme's dark rgba(17,17,17) to white, and the whole reveal is made fast and
   smooth.

   Mechanics this works WITH:
   - The portfolio plugin toggles the layer's INLINE opacity 0<->1 on hover
     (ut.effects.js). We don't touch opacity; we only own its easing/speed.
   - data-textcolor is white, so the plugin already paints the title + the
     layer's inherited colour white; only the <span> carried an explicit dark
     rule, which we override below.

   Performance: the gradient + shadow live on the base layer (cheap, hidden at
   opacity:0); the backdrop-filter blur is gated to :hover so only the one
   hovered tile ever computes a blur. Additive, !important-scoped, and confined
   to the homepage grid — re-export safe (re-injected by inject_gallery_hover.py). */

/* 1 — Category sub-text -> white (override the generated rgba(17,17,17,1)).
   Title is already white via data-textcolor; we keep the category line a touch
   recessive so the title still leads. */
.ut-portfolio-79246 .ut-portfolio-info-c,
.ut-portfolio-79246 .ut-portfolio-info-c span{
  color:#ffffff !important;
}
.ut-portfolio-79246 .ut-portfolio-info-c span{
  color:rgba(255,255,255,.86) !important;
}

/* Legibility over the frosted glass without leaning on a heavy dark tint —
   keeps the panel genuinely translucent. */
.ut-portfolio-79246 .ut-portfolio-info-c h3,
.ut-portfolio-79246 .portfolio-title,
.ut-portfolio-79246 .ut-portfolio-info-c span{
  text-shadow:0 1px 14px rgba(0,0,0,.34);
}

/* 2 + 3 — Liquid-glass panel + fast, smooth reveal.
   Base layer: the glass material (gradient + rim/specular shadow) painted but
   invisible at opacity:0; a snappy opacity-only transition owns enter AND
   leave. */
.ut-portfolio-79246 .ut-hover-layer{
  background:
    linear-gradient(180deg, rgba(10,12,16,.22) 0%, rgba(10,12,16,.40) 100%),
    linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.02) 46%, rgba(255,255,255,.10) 100%)
    !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 -60px 80px -38px rgba(0,0,0,.45);
  border-radius:inherit;
  transition:opacity 240ms cubic-bezier(.22,1,.36,1) !important;
  will-change:opacity;
}

/* Hovered tile only: the frosted blur (this is the costly part, so it stays off
   the 38 idle tiles). saturate lifts the softened image behind the glass. */
.ut-portfolio-79246 .ut-hover:hover .ut-hover-layer{
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
}

/* Snappier content reveal to match the faster panel (theme uses 400ms). */
.ut-portfolio-79246 .ut-portfolio-info-c{
  animation-duration:300ms !important;
}

/* Motion-sensitive users: keep the glass + white text, drop the timing. */
@media (prefers-reduced-motion:reduce){
  .ut-portfolio-79246 .ut-hover-layer{transition-duration:1ms !important;}
  .ut-portfolio-79246 .ut-portfolio-info-c{animation-duration:1ms !important;}
}