/* Shared hover decoration for clickable gallery cards
   (used on ai.html, vfx.html, photography.html) */

.card { position: relative; }
.card .thumb { position: relative; }

.card .corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid #faf3e9;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(.5,.1,.2,1);
  pointer-events: none;
  z-index: 3;
}
.card .c-tl { top: 12px; left: 12px;  border-right: 0; border-bottom: 0; transform: translate(-4px,-4px); }
.card .c-tr { top: 12px; right: 12px; border-left: 0;  border-bottom: 0; transform: translate( 4px,-4px); }
.card .c-bl { bottom: 12px; left: 12px;  border-right: 0; border-top: 0; transform: translate(-4px, 4px); }
.card .c-br { bottom: 12px; right: 12px; border-left: 0;  border-top: 0; transform: translate( 4px, 4px); }
.card .thumb:hover .corner { opacity: 1; transform: translate(0,0); }

.card .iconwrap {
  position: absolute;
  top: 50%; left: 50%;
  width: 38px; height: 38px;
  transform: translate(-50%,-50%);
  pointer-events: none;
  z-index: 3;
}
.card .iconwrap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.card .iconwrap .dot { fill: #faf3e9; opacity: 0; transition: opacity 0.22s ease; }
.card .thumb:hover .iconwrap .dot.d0 { opacity: 1; transition-delay: 0.00s; }
.card .thumb:hover .iconwrap .dot.d1 { opacity: 1; transition-delay: 0.10s; }
.card .thumb:hover .iconwrap .dot.d2 { opacity: 1; transition-delay: 0.20s; }
.card .iconwrap .ring {
  fill: none; stroke: #faf3e9; stroke-width: 1;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: 19px 19px;
  transition: stroke-dashoffset 0s;
}
.card .thumb:hover .iconwrap .ring {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.75s cubic-bezier(.5,.1,.2,1) 0.3s;
}
.card .iconwrap .inner {
  fill: none; stroke: #faf3e9; stroke-width: 1;
  transform: rotate(0); transform-origin: 19px 19px;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.7s cubic-bezier(.5,.1,.2,1);
}
.card .thumb:hover .iconwrap .inner {
  opacity: 1; transform: rotate(180deg);
  transition-delay: 1.0s, 1.05s;
}