/* ============================================================
   WINE GLASS — the jelly material
   1) .jelly      iridescent translucent wine blobs (ambient, behind content)
   2) .glass-card frosted panel (evolved from the old liquid-glass)
   Used sparingly: 2–3 blobs per page, behind content.
   ============================================================ */

/* ---------- AMBIENT BLOB FIELD ---------- */
.jelly-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.jelly-field.is-fixed{position:fixed;}

/* A single jelly blob: glossy maroon glass with iridescent rim + specular highlight.
   Compose with modifier classes for size/position, and inline --x/--y/--dur if needed. */
.jelly{
  position:absolute;
  width:var(--size,440px);height:var(--size,440px);
  border-radius:42% 58% 60% 40% / 48% 42% 58% 52%;
  background:
    radial-gradient(60% 55% at 32% 28%, rgba(255,245,240,0.55) 0%, rgba(255,245,240,0) 42%),
    var(--glass-iris),
    radial-gradient(120% 120% at 70% 80%, rgba(122,40,64,0.55) 0%, rgba(42,15,28,0.25) 70%);
  background-blend-mode:screen,normal,normal;
  box-shadow:
    inset 0 8px 30px rgba(255,245,240,0.35),
    inset 0 -20px 50px rgba(92,36,54,0.55),
    inset 18px 0 50px rgba(240,192,204,0.18),
    0 40px 90px rgba(20,4,9,0.5);
  filter:saturate(1.15);
  opacity:var(--op,0.9);
  animation:jelly-morph var(--dur,18s) var(--ease-in-out,ease-in-out) infinite,
            jelly-float calc(var(--dur,18s) * 1.4) var(--ease-in-out,ease-in-out) infinite;
  will-change:transform,border-radius;
}
/* specular hotspot */
.jelly::after{
  content:"";position:absolute;
  top:14%;left:20%;width:34%;height:26%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,0.85), rgba(255,255,255,0) 75%);
  filter:blur(2px);opacity:0.7;
  animation:jelly-shine var(--dur,18s) var(--ease-in-out,ease-in-out) infinite;
}

/* soft ambient (blurred, low-opacity) variant — for atmosphere behind sections */
.jelly.is-soft{
  filter:blur(var(--bl60)) saturate(1.2);
  box-shadow:none;opacity:var(--op,0.5);
}
.jelly.is-soft::after{display:none;}

@keyframes jelly-morph{
  0%,100%{border-radius:42% 58% 60% 40% / 48% 42% 58% 52%;}
  33%{border-radius:62% 38% 44% 56% / 56% 58% 42% 44%;}
  66%{border-radius:38% 62% 56% 44% / 42% 50% 50% 58%;}
}
@keyframes jelly-float{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(1);}
  50%{transform:translate(var(--drift-x,18px),var(--drift-y,-26px)) rotate(8deg) scale(1.04);}
}
@keyframes jelly-shine{
  0%,100%{transform:translate(0,0);opacity:0.7;}
  50%{transform:translate(10%,12%);opacity:0.45;}
}

/* ---------- FROSTED GLASS CARD ---------- */
.glass-card{
  position:relative;
  background:var(--glass-fill);
  backdrop-filter:blur(var(--bl14)) saturate(1.3);
  -webkit-backdrop-filter:blur(var(--bl14)) saturate(1.3);
  border-radius:var(--r-lg);
  border:1px solid transparent;
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.12),0 20px 50px rgba(20,4,9,0.4);
  overflow:hidden;
  transition:transform var(--dur-fast) var(--ease-out-expo),
             box-shadow var(--dur-fast) var(--ease-out-expo),
             background var(--dur-fast) ease;
}
/* iridescent rim light */
.glass-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:linear-gradient(160deg,
    rgba(255,245,240,0.6) 0%,
    rgba(240,192,204,0.18) 22%,
    rgba(255,255,255,0) 45%,
    rgba(255,255,255,0) 62%,
    rgba(196,116,139,0.25) 82%,
    rgba(255,245,240,0.5) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.glass-card.is-interactive:hover{
  transform:translateY(-4px);
  background:var(--glass-fill-2);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.16),0 30px 70px rgba(20,4,9,0.5),0 0 40px rgba(196,116,139,0.12);
}

/* cream "paper" surface — the deliberate light contrast card */
.paper-card{
  position:relative;
  background:var(--cream-100);
  color:var(--ink);
  border-radius:var(--r-md);
  border:1px solid var(--rose-150);
  box-shadow:0 18px 50px rgba(20,4,9,0.35);
}