@property --axi-p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

@property --axi-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.axi {
  --axi-c: var(--primary, #c9a66b);
  --axi-ease: cubic-bezier(.2, .8, .2, 1);
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
}

.axi > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.axi-shine::before,
.axi-shine::after,
.axi-shine-loop::after,
.axi-polaroid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(135deg,
    transparent 38%,
    rgba(255, 255, 255, .12) 44%,
    rgba(255, 255, 255, .6) 50%,
    rgba(255, 255, 255, .12) 56%,
    transparent 62%) no-repeat;
  background-size: 300% 300%;
  background-position: 100% 100%;
}

.ax-js .axi-shine.is-in::before {
  animation: axiShine 1.4s .3s ease-in-out both;
}

.axi-shine:hover::after {
  background-position: 0 0;
  transition: background-position 1.1s ease-in-out;
}

.axi-shine-loop::after {
  animation: axiShineLoop 5s ease-in-out infinite;
}

@keyframes axiShine {
  from { background-position: 100% 100%; }
  to { background-position: 0 0; }
}

@keyframes axiShineLoop {
  0% { background-position: 100% 100%; }
  28%, 100% { background-position: 0 0; }
}

.axi-spot::after,
.axi-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), transparent 45%);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity .4s ease;
}

.axi-spot:hover::after,
.axi-tilt:hover::after {
  opacity: 1;
}

.axi-tilt {
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform .25s ease-out;
  will-change: transform;
}

.axi-glow {
  padding: 4px;
  background: var(--axi-c);
}

.axi-glow::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: conic-gradient(from var(--axi-a), transparent 0 60%, #fff 75%, var(--axi-c) 85%, transparent 100%);
  animation: axiSpin 4s linear infinite;
}

@keyframes axiSpin {
  to { --axi-a: 360deg; }
}

.axi-polaroid {
  --r: -3deg;
  overflow: visible;
  padding: 10px 10px 48px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18), 0 2px 4px rgba(0, 0, 0, .12);
  transform: rotate(var(--r));
  transition: transform .5s var(--axi-ease);
}

.axi-polaroid > img {
  aspect-ratio: 1 / 1;
  height: auto;
}

.axi-polaroid figcaption {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  text-align: center;
  font: 600 22px/1.2 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  color: #333;
}

.axi-polaroid::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  z-index: 3;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9a8f, #d32f2f 55%, #7f1010);
  box-shadow: 0 4px 5px rgba(0, 0, 0, .35);
}

.axi-polaroid::after {
  inset: 10px 10px 48px;
}

.axi-polaroid:hover {
  transform: perspective(800px) rotate(0deg) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) scale(1.03);
}

.ax-js .axi-polaroid[data-imgfx] {
  opacity: 0;
  transform: translateY(-90px) rotate(calc(var(--r) - 12deg));
  transition: opacity .4s ease, transform 1s cubic-bezier(.3, 1.35, .5, 1);
}

.ax-js .axi-polaroid[data-imgfx] > img {
  filter: sepia(.8) brightness(1.8) contrast(.35) blur(3px);
  transition: filter 2.6s ease .7s;
}

.ax-js .axi-polaroid[data-imgfx]::before {
  transform: scale(0);
  transition: transform .4s cubic-bezier(.3, 1.6, .5, 1) .9s;
}

.ax-js .axi-polaroid[data-imgfx].is-in {
  opacity: 1;
  transform: rotate(var(--r));
}

.ax-js .axi-polaroid[data-imgfx].is-in:hover {
  transform: perspective(800px) rotate(0deg) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) scale(1.03);
  transition: transform .5s var(--axi-ease);
}

.ax-js .axi-polaroid[data-imgfx].is-in > img {
  filter: none;
}

.ax-js .axi-polaroid[data-imgfx].is-in::before {
  transform: none;
}

.ax-js .axi-polaroid[data-imgfx].is-in::after {
  animation: axiShine 1.3s 3s ease-in-out both;
}

.axi-old {
  border: 8px solid #f3ead6;
  outline: 1px solid rgba(0, 0, 0, .08);
}

.axi-old > img {
  filter: sepia(.75) contrast(.9) brightness(1.05) saturate(.8);
  transition: filter 1s ease;
}

.axi-old::before,
.axi-film::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(60, 35, 10, .55) 100%);
  transition: opacity 1s ease;
}

.axi-old::after,
.axi-film::after {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: 3;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .45;
  mix-blend-mode: multiply;
  transition: opacity 1s ease;
}

.axi-old:hover > img {
  filter: none;
}

.axi-old:hover::before,
.axi-old:hover::after {
  opacity: 0;
}

.axi-film > img {
  filter: grayscale(1) contrast(1.2) brightness(.95);
  animation: axiFlicker 3s steps(1) infinite;
}

.axi-film::after {
  opacity: .6;
  animation: axiGrain .6s steps(4) infinite;
}

.axi-film::before {
  background:
    linear-gradient(90deg, transparent calc(var(--sx, 30%) - 1px), rgba(255, 255, 255, .35) var(--sx, 30%), transparent calc(var(--sx, 30%) + 1px)),
    radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, .6) 100%);
  animation: axiScratch 4s steps(1) infinite;
}

@keyframes axiGrain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-6%, 4%); }
  50% { transform: translate(5%, -7%); }
  75% { transform: translate(-3%, -4%); }
}

@keyframes axiFlicker {
  0%, 100% { filter: grayscale(1) contrast(1.2) brightness(.95); }
  33% { filter: grayscale(1) contrast(1.25) brightness(1.02); }
  66% { filter: grayscale(1) contrast(1.15) brightness(.9); }
}

@keyframes axiScratch {
  0% { --sx: 30%; }
  20% { --sx: 72%; }
  45% { --sx: 12%; }
  70% { --sx: 55%; }
  85% { --sx: 120%; }
}

.ax-js .axi-develop[data-imgfx] > img {
  filter: sepia(1) brightness(2) contrast(.3) blur(4px);
  opacity: .3;
  transition: filter 2.6s ease, opacity 1.2s ease;
}

.ax-js .axi-develop[data-imgfx].is-in > img {
  filter: none;
  opacity: 1;
}

.axi-bw > img {
  filter: grayscale(1);
  transition: filter .8s ease;
}

.axi-bw:hover > img {
  filter: none;
}

.ax-js .axi-curtain[data-imgfx] > img {
  opacity: 0;
}

.axi-curtain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--axi-c);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.ax-js .axi-curtain[data-imgfx].is-in::after {
  animation: axiCurtain 1.3s cubic-bezier(.7, 0, .2, 1) both;
}

.ax-js .axi-curtain[data-imgfx].is-in > img {
  animation: axiCurtainImg 1.3s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes axiCurtain {
  0% { transform: scaleX(0); transform-origin: 0 50%; }
  48% { transform: scaleX(1); transform-origin: 0 50%; }
  52% { transform: scaleX(1); transform-origin: 100% 50%; }
  100% { transform: scaleX(0); transform-origin: 100% 50%; }
}

@keyframes axiCurtainImg {
  0%, 49% { opacity: 0; transform: scale(1.15); }
  50% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: none; }
}

.ax-js .axi-blinds[data-imgfx] > img {
  --axi-p: 0%;
  -webkit-mask-image: linear-gradient(90deg, #000 var(--axi-p), transparent var(--axi-p));
  mask-image: linear-gradient(90deg, #000 var(--axi-p), transparent var(--axi-p));
  -webkit-mask-size: 12.5% 100%;
  mask-size: 12.5% 100%;
  transition: --axi-p 1.1s cubic-bezier(.7, 0, .2, 1);
}

.ax-js .axi-blinds[data-imgfx].is-in > img {
  --axi-p: 100%;
}

.ax-js .axi-circle[data-imgfx] > img {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1.4s cubic-bezier(.7, 0, .2, 1);
}

.ax-js .axi-circle[data-imgfx].is-in > img {
  clip-path: circle(75% at 50% 50%);
}

.ax-js .axi-diagonal[data-imgfx] > img {
  clip-path: polygon(0 0, 0 0, 0 0);
  transition: clip-path 1.4s cubic-bezier(.7, 0, .2, 1);
}

.ax-js .axi-diagonal[data-imgfx].is-in > img {
  clip-path: polygon(0 0, 200% 0, 0 200%);
}

.ax-js .axi-zoomout[data-imgfx] > img {
  opacity: 0;
  transform: scale(1.35);
  transition: opacity 1s ease, transform 1.8s var(--axi-ease);
}

.ax-js .axi-zoomout[data-imgfx].is-in > img {
  opacity: 1;
  transform: none;
}

.axi-zoom > img {
  transition: transform .9s var(--axi-ease);
}

.axi-zoom:hover > img {
  transform: scale(1.12) rotate(2deg);
}

.axi-duo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--axi-c);
  mix-blend-mode: color;
  opacity: .9;
  transition: opacity .7s ease;
}

.axi-duo:hover::after {
  opacity: 0;
}

.axi-frame {
  overflow: visible;
}

.axi-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 2px solid var(--axi-c);
  transform: translate(16px, 16px);
  transition: transform .5s var(--axi-ease);
}

.axi-frame:hover::before {
  transform: translate(0, 0);
}

.axi-caption::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, color-mix(in srgb, var(--axi-c) 55%, #000) 0%, color-mix(in srgb, var(--axi-c) 70%, transparent) 45%, transparent 80%);
  opacity: 0;
  transition: opacity .5s ease;
}

.axi-caption > img {
  transition: transform .9s var(--axi-ease);
}

.axi-caption figcaption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 2;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s var(--axi-ease);
}

.axi-caption:hover::after,
.axi-caption:hover figcaption {
  opacity: 1;
  transform: none;
}

.axi-caption:hover > img {
  transform: scale(1.06);
}

.axi-focus > img {
  filter: blur(4px) saturate(.7);
  transform: scale(1.05);
  transition: filter .7s ease, transform .9s var(--axi-ease);
}

.axi-focus:hover > img {
  filter: none;
  transform: none;
}

.axi-ken > img {
  animation: axiKen 18s ease-in-out infinite alternate;
}

@keyframes axiKen {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.15) translate(-3%, -2%); }
}

.axi-parallax > img {
  height: 120%;
  margin-top: -10%;
  transform: translate3d(0, var(--axi-py, 0%), 0);
  will-change: transform;
}

.axi-blob {
  border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%;
  animation: axiBlob 12s ease-in-out infinite;
}

@keyframes axiBlob {
  0%, 100% { border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%; }
  33% { border-radius: 60% 40% 38% 62% / 55% 62% 38% 45%; }
  66% { border-radius: 35% 65% 55% 45% / 38% 50% 50% 62%; }
}

@media (prefers-reduced-motion: reduce) {
  .axi,
  .axi > img,
  .axi::before,
  .axi::after {
    animation: none !important;
    transition: none !important;
  }
  .ax-js .axi[data-imgfx],
  .ax-js .axi[data-imgfx] > img {
    opacity: 1 !important;
    filter: none !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .ax-js .axi[data-imgfx]:not(.axi-polaroid),
  .ax-js .axi[data-imgfx] > img {
    transform: none !important;
  }
  .ax-js .axi-polaroid[data-imgfx] {
    transform: rotate(var(--r)) !important;
  }
  .ax-js .axi-polaroid[data-imgfx]::before {
    transform: none !important;
  }
  .axi-tilt {
    transform: none !important;
  }
}