:root {
  --pointer-x: 50vw;
  --pointer-y: 45vh;
}

.liquid-signal {
  position: fixed;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  pointer-events: none;
  opacity: .78;
  mix-blend-mode: screen;
}

.liquid-signal::before {
  content: "";
  position: absolute;
  left: var(--pointer-x);
  top: var(--pointer-y);
  width: clamp(380px, 46vw, 780px);
  aspect-ratio: 1;
  border-radius: 42% 58% 63% 37% / 45% 36% 64% 55%;
  background: radial-gradient(circle at 42% 40%, rgba(239,29,45,.42), rgba(112,3,15,.2) 34%, transparent 68%);
  filter: blur(24px);
  transform: translate(-50%, -50%) rotate(-12deg) scale(1.04);
  transition: left .34s cubic-bezier(.16,.72,.24,1), top .34s cubic-bezier(.16,.72,.24,1);
  animation: liquid-breathe 8s ease-in-out infinite alternate;
}

.liquid-signal::after {
  content: "";
  position: absolute;
  right: -12vw;
  bottom: -26vh;
  width: min(64vw, 980px);
  aspect-ratio: 1.35;
  border-radius: 63% 37% 48% 52% / 42% 61% 39% 58%;
  background: radial-gradient(ellipse at center, rgba(142,11,22,.12), transparent 68%);
  filter: blur(58px);
  animation: liquid-drift 18s ease-in-out infinite alternate;
}

.cursor-fluid {
  position: fixed;
  left: var(--pointer-x);
  top: var(--pointer-y);
  z-index: 999;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255,35,53,.95);
  border-radius: 48% 52% 58% 42% / 44% 38% 62% 56%;
  pointer-events: none;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-8deg);
  box-shadow: 0 0 24px rgba(239,29,45,.54), inset 0 0 16px rgba(239,29,45,.22);
  transition: width .22s ease, height .22s ease, border-radius .28s ease, background .22s ease, box-shadow .22s ease;
  animation: cursor-morph 2.8s ease-in-out infinite alternate;
}

.cursor-fluid::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: inherit;
}

.cursor-fluid::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef1d2d;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 13px #ef1d2d;
}

.pointer-hot .cursor-fluid {
  width: 92px;
  height: 92px;
  border-radius: 62% 38% 44% 56% / 41% 61% 39% 59%;
  background: rgba(239,29,45,.14);
  box-shadow: 0 0 40px rgba(239,29,45,.58), inset 0 0 30px rgba(239,29,45,.18);
}

@keyframes liquid-breathe {
  to { border-radius: 61% 39% 43% 57% / 37% 59% 41% 63%; transform: translate(-50%, -50%) rotate(10deg) scale(.9); }
}

@keyframes liquid-drift {
  to { transform: translate(-13vw, -7vh) rotate(-9deg) scale(1.08); }
}

@keyframes cursor-morph {
  to { border-radius: 38% 62% 45% 55% / 58% 41% 59% 42%; transform: translate(-50%, -50%) rotate(13deg); }
}

.button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.button::after {
  content: "";
  position: absolute;
  inset: -60% -30%;
  z-index: -1;
  background: linear-gradient(112deg, transparent 30%, rgba(255,255,255,.24) 47%, rgba(239,29,45,.16) 53%, transparent 70%);
  transform: translateX(-75%) rotate(4deg);
  transition: transform .58s cubic-bezier(.2,.75,.2,1);
}

.button:hover::after { transform: translateX(75%) rotate(4deg); }

.text-link {
  background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%) 100% 100% / 200% 1px no-repeat !important;
  transition: color .22s ease, background-position .38s ease, letter-spacing .28s ease !important;
}

.text-link:hover { background-position: 0 100% !important; letter-spacing: .085em; }

.project-card,
.issue-card,
.hero-art,
.project-strip button {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --shine-x: 50%;
  --shine-y: 50%;
  --card-lift: 0px;
  position: relative;
  transform: perspective(1000px) translateY(var(--card-lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) !important;
  transform-style: preserve-3d;
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease !important;
}

.project-card::after,
.issue-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 250px at var(--shine-x) var(--shine-y), rgba(255,255,255,.11), rgba(239,29,45,.035) 36%, transparent 72%);
  transition: opacity .22s ease;
}

.project-card:hover { --card-lift: -14px; box-shadow: 0 28px 70px rgba(0,0,0,.6), 0 0 52px rgba(239,29,45,.22); }
.issue-card:hover { --card-lift: -8px; box-shadow: 0 20px 46px rgba(0,0,0,.52); }
.hero-art:hover { --card-lift: -12px; filter: saturate(1.06) contrast(1.14) brightness(1.07); box-shadow: -24px 22px 70px rgba(0,0,0,.48), 0 0 46px rgba(239,29,45,.18); }
.project-strip button:hover { --card-lift: -12px; z-index: 2; background: rgba(239,29,45,.2) !important; box-shadow: 0 20px 44px rgba(0,0,0,.55), inset 0 -3px 0 #ef1d2d, 0 0 28px rgba(239,29,45,.18); }
.project-card:hover::after,
.issue-card:hover::after { opacity: 1; }

@media (max-width: 820px) {
  .liquid-signal { opacity: .3; }
  .liquid-signal::before { left: 68%; top: 34%; width: 620px; transition: none; animation-duration: 12s; }
}

@media (prefers-reduced-motion: reduce) {
  .liquid-signal::before,
  .cursor-fluid { animation: none !important; transition: none !important; }
  .project-card,
  .issue-card,
  .hero-art,
  .project-strip button { transition: none !important; }
}

@media (hover: none), (pointer: coarse) {
  .cursor-fluid { display: none; }
}

/* Refined brine cursor */
.liquid-signal { opacity: .56; }
.flow-knot { position: absolute; left: var(--pointer-x); top: var(--pointer-y); display: block; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.72); transition-property: left, top, opacity, transform, width, height; transition-timing-function: cubic-bezier(.12,.72,.18,1); }
.pointer-active .flow-knot { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.flow-knot-a { width: 104px; height: 86px; border: 1px solid rgba(255,38,55,.25); border-radius: 46% 54% 63% 37% / 55% 38% 62% 45%; background: radial-gradient(ellipse at 43% 42%, rgba(239,29,45,.11), rgba(239,29,45,.035) 38%, transparent 70%); box-shadow: 0 0 28px rgba(239,29,45,.13), inset 0 0 24px rgba(239,29,45,.07); transition-duration: .11s; animation: brine-shell 4.6s ease-in-out infinite alternate; }
.flow-knot-a::before, .flow-knot-a::after { content: ""; position: absolute; }
.flow-knot-a::before { inset: 16px 13px 18px 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 61% 39% 48% 52% / 37% 58% 42% 63%; animation: brine-core 3.2s ease-in-out infinite alternate; }
.flow-knot-a::after { left: 63%; top: -3px; width: 5px; height: 5px; border-radius: 62% 38% 71% 29%; background: rgba(255,55,70,.68); box-shadow: 10px 8px 0 -1px rgba(255,55,70,.32), -9px 69px 0 -1px rgba(255,55,70,.24), 0 0 10px rgba(255,35,53,.45); animation: brine-drops 2.7s ease-in-out infinite alternate; }
.flow-knot-b { width: 178px; height: 76px; margin-left: -48px; margin-top: 22px; border: 1px solid rgba(239,29,45,.1); border-radius: 62% 38% 67% 33% / 46% 56% 44% 54%; background: radial-gradient(ellipse, rgba(142,11,22,.07), transparent 66%); filter: blur(1.5px); transition-duration: .27s; animation: flow-warp 5s ease-in-out infinite alternate; }
.flow-knot-c { width: 238px; height: 48px; margin-left: -102px; margin-top: 50px; border-top: 1px solid rgba(239,29,45,.11); border-radius: 63% 37% 54% 46% / 44% 61% 39% 56%; filter: blur(.4px) drop-shadow(0 0 6px rgba(239,29,45,.18)); transition-duration: .52s; animation: brine-wake 4.2s ease-in-out infinite alternate; }
.pointer-hot .flow-knot-a { width: 148px; height: 108px; border-color: rgba(255,63,77,.36); border-radius: 68% 32% 41% 59% / 34% 62% 38% 66%; }
.pointer-hot .flow-knot-a::before { inset: 10px 25px 26px 12px; border-radius: 37% 63% 29% 71% / 62% 31% 69% 38%; animation-duration: 1.15s; }
.pointer-hot .flow-knot-b { width: 226px; height: 62px; margin-left: -72px; opacity: .6; animation-duration: 1.45s; }
.pointer-hot .flow-knot-c { width: 286px; height: 34px; margin-left: -130px; animation-duration: 1.2s; }
.cursor-fluid { width: 26px; height: 24px; border-width: 1px; border-color: rgba(255,35,53,.62); opacity: .72; box-shadow: 0 0 14px rgba(239,29,45,.26), inset 0 0 9px rgba(239,29,45,.1); }
.cursor-fluid::before { inset: 5px 4px 6px 7px; border-color: rgba(255,255,255,.18); border-radius: 62% 38% 47% 53% / 35% 59% 41% 65%; animation: brine-core 2.2s ease-in-out infinite alternate; }
.cursor-fluid::after { left: 54%; top: 48%; width: 4px; height: 4px; border-radius: 67% 33% 58% 42%; background: rgba(255,35,53,.7); box-shadow: 0 0 8px rgba(255,35,53,.6); }
.pointer-hot .cursor-fluid { width: 62px; height: 50px; opacity: .82; border-radius: 69% 31% 43% 57% / 38% 66% 34% 62%; background: rgba(239,29,45,.075); box-shadow: 0 0 25px rgba(239,29,45,.3), inset 0 0 19px rgba(239,29,45,.1); }
@keyframes brine-shell { to { border-radius: 67% 33% 42% 58% / 37% 64% 36% 63%; transform: translate(-50%, -50%) scaleX(1.08) scaleY(.9) rotate(7deg); } }
@keyframes brine-core { to { inset: 11px 22px 23px 10px; border-radius: 34% 66% 71% 29% / 63% 32% 68% 37%; transform: rotate(-18deg) skewX(9deg); } }
@keyframes brine-drops { to { transform: translate(7px, 5px) rotate(18deg); box-shadow: 16px 3px 0 -1px rgba(255,55,70,.24), -15px 74px 0 -1px rgba(255,55,70,.18), 0 0 12px rgba(255,35,53,.38); } }
@keyframes brine-wake { to { transform: translate(-50%, -50%) scaleX(.84) skewX(-12deg); border-radius: 31% 69% 38% 62% / 67% 28% 72% 33%; } }
@keyframes flow-warp { to { border-radius: 35% 65% 42% 58% / 63% 38% 62% 37%; rotate: 8deg; } }

@media (hover: none), (pointer: coarse) { .flow-knot { display: none; } }