/* LiteCMS v2.88: paper-light homepage entrance, tactile drag ripple, and crisp transitions.
   Only affects homepage tiles; all source projects, gallery pages and admin data remain unchanged. */
/* The wall is transformed independently; the card entrance is an isolated,
   compositor-friendly transform + opacity animation. No animated blur or
   overshoot: each card floats down and decelerates to a completely soft stop. */
@media (prefers-reduced-motion: no-preference) {
  .work-grid-home.grid-pan-enabled .work-tile.is-paper-pending {
    opacity: 0;
  }
  .work-grid-home.grid-pan-enabled .work-tile.is-paper-drifting,
  .work-grid-home.grid-pan-enabled .work-tile.is-paper-settling {
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    will-change: transform, opacity;
  }
  .work-grid-home.grid-pan-enabled .work-tile.is-paper-drifting {
    animation: workPaperDriftV287 1300ms cubic-bezier(.24,.40,.30,1) var(--entry-delay,0ms) both;
  }
  .work-grid-home.grid-pan-enabled .work-tile.is-paper-settling {
    animation: workPaperSettleV287 1180ms cubic-bezier(.21,.48,.30,1) var(--entry-delay,0ms) both;
  }
  .work-grid-home.grid-pan-enabled .work-tile.is-switching-out {
    animation: workFilterOutV287 270ms cubic-bezier(.4,.04,.7,.46) var(--tile-out-delay,0ms) both;
    pointer-events: none;
  }
  .work-grid-home.grid-pan-enabled .work-tile.is-switching-in {
    animation: workFilterInV287 490ms cubic-bezier(.2,.56,.3,1) var(--tile-delay,0ms) both;
  }
  .work-grid-home .work-tile > img {
    backface-visibility: hidden;
    transition: transform 650ms cubic-bezier(.2,.7,.24,1), filter 320ms ease;
  }
  .work-grid-home .work-tile-tint {transition: opacity 360ms ease;}
  .work-grid-home .work-tile-arrow {
    transition: opacity 300ms ease, transform 400ms cubic-bezier(.2,.7,.28,1);
    transform:translate3d(-5px,5px,0);
  }
  .work-grid-home .work-tile:hover .work-tile-arrow,
  .work-grid-home .work-tile:focus-visible .work-tile-arrow {transform:translate3d(0,0,0);}
}
/* Mild natural tilt, a little altitude, and no reverse travel or bounce.
   Opacity reveals the artwork as it descends, then stays fully present. */
@keyframes workPaperDriftV287 {
  0% {opacity:0;transform:translate3d(var(--entry-x,0px),var(--entry-y,-78px),0) rotateZ(var(--entry-rotate,-2deg)) scale(.989)}
  31% {opacity:1}
  100% {opacity:1;transform:translate3d(0,0,0) rotateZ(0deg) scale(1)}
}
@keyframes workPaperSettleV287 {
  0% {opacity:0;transform:translate3d(var(--entry-x,0px),-42px,0) rotateZ(var(--entry-rotate,-1deg)) scale(.994)}
  28% {opacity:1}
  100% {opacity:1;transform:translate3d(0,0,0) rotateZ(0deg) scale(1)}
}
@keyframes workFilterOutV287 {
  0% {opacity:1;transform:translate3d(0,0,0) scale(1)}
  100% {opacity:0;transform:translate3d(64px,-3px,0) scale(.989)}
}
@keyframes workFilterInV287 {
  0% {opacity:0;transform:translate3d(-56px,6px,0) scale(.989)}
  100% {opacity:1;transform:translate3d(0,0,0) scale(1)}
}
/* Ripple belongs to the stationary viewport, not the pan/zoom-transformed wall.
   No pointer interception, so links remain clickable and touch gestures work. */
.work-grid-home.grid-pan-enabled #portfolio-work > .work-drag-ripple {
  position:absolute;z-index:7;width:0;height:0;left:0;top:0;pointer-events:none;
  overflow:visible;transform:translate3d(0,0,0);contain:style;isolation:isolate;
}
.work-grid-home .work-drag-ripple > span {
  position:absolute;left:0;top:0;display:block;pointer-events:none;
  width:210px;height:210px;margin:-105px 0 0 -105px;border-radius:50%;
  transform-origin:center center;
}
.work-grid-home .work-ripple-glow {
  background:radial-gradient(circle, rgba(255,255,255,.29) 0%,rgba(236,239,255,.11) 27%,transparent 68%);
  animation:workRippleGlowV286 720ms cubic-bezier(.15,.66,.28,1) both;
}
.work-grid-home .work-ripple-ring {
  border:1.5px solid rgba(249,250,255,.74);
  box-shadow:0 0 18px rgba(237,243,255,.30), inset 0 0 12px rgba(255,255,255,.08);
  animation:workRippleRingV286 760ms cubic-bezier(.12,.66,.19,1) both;
}
.work-grid-home .work-ripple-ring--late {
  border-color:rgba(239,235,255,.54);
  animation-delay:105ms;
}
@keyframes workRippleGlowV286 {
  0% {opacity:.7;transform:scale(.07)}
  42% {opacity:.52}
  100% {opacity:0;transform:scale(1.22)}
}
@keyframes workRippleRingV286 {
  0% {opacity:0;transform:scale(.08)}
  16% {opacity:.72}
  100% {opacity:0;transform:scale(1.18)}
}
@media(max-width:700px){
  .work-grid-home .work-drag-ripple > span{width:160px;height:160px;margin:-80px 0 0 -80px}
}
@media(prefers-reduced-motion:reduce){
  .work-grid-home .work-tile.is-paper-pending,
  .work-grid-home .work-tile.is-paper-drifting,
  .work-grid-home .work-tile.is-paper-settling,
  .work-grid-home .work-tile.is-switching-out,
  .work-grid-home .work-tile.is-switching-in {animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .work-grid-home .work-drag-ripple{display:none!important}
}

/* v2.88: water-surface refraction on the artwork itself. The original tile
   remains stable and clickable; only this feathered image copy is displaced. */
.work-grid-home.grid-pan-enabled .work-tile > img.work-ripple-image-layer,
.work-grid-home.grid-pan-enabled .work-tile:hover > img.work-ripple-image-layer,
.work-grid-home.grid-pan-enabled .work-tile:focus-visible > img.work-ripple-image-layer {
  position:absolute!important;inset:0!important;z-index:1!important;
  display:block!important;width:100%!important;height:100%!important;
  object-fit:cover!important;pointer-events:none!important;
  transition:none!important;animation:none!important;
  transform:translate3d(var(--wave-shift-x,0px),var(--wave-shift-y,0px),0) scale(1.038)!important;
  transform-origin:center!important;will-change:transform,opacity;
  /* Soft-edged circular displacement band, moving across each photo. */
  -webkit-mask-image:radial-gradient(circle at var(--wave-x,50%) var(--wave-y,50%),
    transparent calc(var(--wave-radius,0px) - var(--wave-band,90px)),
    #000 calc(var(--wave-radius,0px) - var(--wave-band,90px) * .36),
    #000 calc(var(--wave-radius,0px) + var(--wave-band,90px) * .36),
    transparent calc(var(--wave-radius,0px) + var(--wave-band,90px)));
  mask-image:radial-gradient(circle at var(--wave-x,50%) var(--wave-y,50%),
    transparent calc(var(--wave-radius,0px) - var(--wave-band,90px)),
    #000 calc(var(--wave-radius,0px) - var(--wave-band,90px) * .36),
    #000 calc(var(--wave-radius,0px) + var(--wave-band,90px) * .36),
    transparent calc(var(--wave-radius,0px) + var(--wave-band,90px)));
}
/* The visible crest is bolder and considerably wider, but never intercepts
   the cursor or touch gestures. Its geometry follows the same wave as the art. */
.work-grid-home.grid-pan-enabled #portfolio-work > .work-drag-ripple{z-index:7!important}
.work-grid-home .work-drag-ripple > span {
  width:480px!important;height:480px!important;
  margin:-240px 0 0 -240px!important;
  animation:none!important;
  pointer-events:none!important;
}
.work-grid-home .work-drag-ripple > .work-ripple-ring {
  border:4px solid rgba(250,252,255,.84)!important;
  box-shadow:0 0 12px 5px rgba(241,247,255,.22),
    0 0 32px 13px rgba(225,235,255,.12),
    inset 0 0 16px 3px rgba(255,255,255,.18)!important;
  opacity:var(--wave-opacity,0)!important;
  transform:scale(var(--wave-scale,0))!important;
}
.work-grid-home .work-drag-ripple > .work-ripple-ring--late {
  border:2.5px solid rgba(230,243,255,.56)!important;
  box-shadow:0 0 24px 8px rgba(229,237,255,.16)!important;
  transform:scale(var(--wave-tail-scale,0))!important;
  opacity:calc(var(--wave-opacity,0) * .65)!important;
}
.work-grid-home .work-drag-ripple > .work-ripple-glow {
  border:0!important;background:radial-gradient(circle,
    transparent 54%, rgba(245,250,255,.14) 61%,
    rgba(236,245,255,.30) 65%,transparent 78%)!important;
  transform:scale(var(--wave-glow-scale,0))!important;
  opacity:var(--wave-glow-opacity,0)!important;
}
@media (max-width:700px){
  .work-grid-home .work-drag-ripple > span{width:480px!important;height:480px!important;margin:-240px 0 0 -240px!important}
  .work-grid-home .work-drag-ripple > .work-ripple-ring{border-width:4px!important}
}
@media (prefers-reduced-motion:reduce){
  .work-grid-home .work-tile > img.work-ripple-image-layer,
  .work-grid-home .work-drag-ripple{display:none!important}
}

/* v2.89: Never render surface waves on mobile, tablets using touch,
   or narrow windows. Drag and pinch navigation are unaffected. */
@media (max-width:800px), (hover:none) and (pointer:coarse) {
  .work-grid-home .work-drag-ripple,
  .work-grid-home .work-ripple-image-layer {display:none!important;}
}