/* Shared PL card effects. Page-specific grids, colors and content stay intact. */
.bento-card {
  --bento-x: 50%; --bento-y: 50%; --bento-active: 0;
  position: relative; isolation: isolate; overflow: hidden;
}
.bento-card.bento-card {
  transition: transform .25s ease-out, border-color .25s, box-shadow .25s;
  transform: perspective(1000px) translate3d(var(--bento-tx, 0px), var(--bento-ty, 0px), 0) rotateX(var(--bento-rx, 0deg)) rotateY(var(--bento-ry, 0deg));
}
.bento-effect { position: absolute; pointer-events: none; }
.bento-spotlight { inset: 0; z-index: 4; opacity: var(--bento-active); background: radial-gradient(300px circle at var(--bento-x) var(--bento-y), #4aba6a24, transparent 80%); transition: opacity .25s; }
.bento-border { inset: 0; z-index: 5; border-radius: inherit; padding: 1px; opacity: var(--bento-active); background: radial-gradient(300px circle at var(--bento-x) var(--bento-y), #4aba6a, transparent 65%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity .25s; }
.bento-particle { z-index: 4; width: 3px; height: 3px; border-radius: 50%; background: #4aba6a; box-shadow: 0 0 8px #4aba6a99; animation: bento-float var(--duration) ease-in-out var(--delay) infinite alternate; }
.bento-ripple { z-index: 4; width: var(--ripple-size); height: var(--ripple-size); border-radius: 50%; background: radial-gradient(circle, #4aba6a05 20%, #4aba6a40 65%, transparent 72%); animation: bento-ripple .8s ease-out forwards; }
.bento-card:focus-within { outline: 2px solid #4aba6a; outline-offset: 3px; }
.bento-card[hidden] { display: none !important; }
@keyframes bento-float { from { opacity: .25; transform: translate(0, 0) scale(.5); } to { opacity: .85; transform: translate(var(--drift-x), var(--drift-y)) scale(1); } }
@keyframes bento-ripple { from { opacity: 1; transform: translate(-50%, -50%) scale(0); } to { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@media (hover: hover) and (pointer: fine) and (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .bento-card.bento-card:hover { border-color: #4aba6a80; box-shadow: 0 12px 30px #00235a12; }
}
@media (max-width: 768px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .bento-card.bento-card { transform: none; transition: none; }
  .bento-effect { display: none; }
}