/* ===== ApadanaSol — "Liquid Glass" design layer =====
   Adds an Apple-style frosted-glass look on key text/panels and a liquid
   ripple + zoom feedback on every click. Loaded site-wide (after rtl.css).
   Kept deliberately subtle so it enhances the luxury look without hurting
   contrast or performance. Honours prefers-reduced-motion. */

/* ---------- reusable glass surface ---------- */
.lg-glass{
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  backdrop-filter:blur(14px) saturate(155%);
  -webkit-backdrop-filter:blur(14px) saturate(155%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 10px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.4);
}

/* ---------- click: liquid ripple + zoom feedback ---------- */
/* the tap/click target zooms in a touch, then springs back */
.lg-press{transform:scale(.965)!important;transition:transform .12s cubic-bezier(.2,.7,.2,1)!important}
[data-lg-zoom]{transition:transform .28s cubic-bezier(.2,.7,.2,1)}

/* the expanding "liquid" splash injected by liquidglass.js */
.lg-ripple{
  position:absolute;border-radius:50%;pointer-events:none;z-index:40;
  transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,rgba(255,255,255,.55) 0%,rgba(232,201,138,.30) 38%,rgba(255,255,255,0) 70%);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  mix-blend-mode:screen;opacity:.85;
  animation:lgRipple .62s cubic-bezier(.22,.7,.25,1) forwards;
}
/* on light surfaces the splash reads better in gold/ink */
.lg-ripple--ink{
  background:radial-gradient(circle,rgba(184,146,79,.42) 0%,rgba(184,146,79,.18) 40%,rgba(184,146,79,0) 70%);
  mix-blend-mode:normal;
}
@keyframes lgRipple{
  0%{transform:translate(-50%,-50%) scale(0);opacity:.75}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}

/* elements that host a ripple must clip + position it */
.lg-host{position:relative;overflow:hidden}

/* ---------- glassy text / headings sheen ---------- */
/* a slow diagonal light sweep across headline text — the "liquid on text" cue */
.lg-shine{position:relative;background-clip:text;-webkit-background-clip:text}
@keyframes lgSheen{0%{background-position:220% 0}100%{background-position:-120% 0}}

/* ---------- collection / brand hero caption ----------
   The earlier big frosted-glass box smothered the banner photo (client: 'ui خیلی زشت و خراب شده').
   The banner already carries a readability scrim (listing.css), so the caption is now a clean,
   compact title+subtitle — exactly like the homepage category banners the client likes — sitting
   at the bottom with a strong text-shadow instead of a heavy blur panel. */
.collection-hero__text-wrapper.lg-card{
  display:inline-block;max-width:min(620px,94%);
  padding:0;border-radius:0;background:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none;
}
.collection-hero__text-wrapper.lg-card .collection-hero__title{
  font-size:clamp(26px,4vw,40px);line-height:1.25;margin:0 0 8px;
  text-shadow:0 2px 18px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.55)}
.collection-hero__text-wrapper.lg-card .collection-hero__description{
  font-size:clamp(14px,1.6vw,16px);line-height:1.7;margin:0;opacity:.97;
  text-shadow:0 1px 12px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5)}

/* ---------- gentle hover-lift/zoom for glassy controls ---------- */
[data-lg-zoom]:hover{transform:translateY(-2px) scale(1.03)}

@media (prefers-reduced-motion: reduce){
  .lg-ripple{display:none!important}
  .lg-press{transform:none!important}
  [data-lg-zoom]:hover{transform:none}
  .lg-shine{animation:none!important}
}