:root {
  /* Corner radius tokens */
  --ai-radius-s: 24px;
  --ai-radius-m: 32px;
  --ai-radius-l: 42.67px;

  /* Portrait sizes */
  --ai-portrait-s-w: 114.16px;
  --ai-portrait-s-h: 127.9px;

  --ai-portrait-m-w: 152.22px;
  --ai-portrait-m-h: 170.53px;

  --ai-portrait-l-w: 202.96px;
  --ai-portrait-l-h: 227.37px;

  /* Landscape sizes */
  --ai-landscape-s-w: 148.5px;
  --ai-landscape-s-h: 111.38px;

  --ai-landscape-m-w: 198px;
  --ai-landscape-m-h: 148.5px;

  --ai-landscape-l-w: 264px;
  --ai-landscape-l-h: 198px;
}

/* Base wrapper – reserves layout space */
.amplity-animated-image {
  position: relative;
  display: block;
  overflow: hidden;
}

/* Media */
.amplity-animated-image__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Animation wrapper */
.amplity-animated-image__inner {
  width: 100%;
  height: 100%;
  opacity: var(--amplity-opacity, 0);
  transform: translate(var(--amplity-tx, 0), var(--amplity-ty, 0));
  transition:
    transform var(--amplity-duration, 400ms) ease-out var(--amplity-delay, 0ms),
    opacity var(--amplity-duration, 400ms) ease-out var(--amplity-delay, 0ms);
  will-change: transform, opacity;
}

.amplity-animated-image.is-visible .amplity-animated-image__inner {
  opacity: 1;
  transform: translate(0, 0);
}

/* Origin */
.amplity-origin-north { --amplity-tx: 0; --amplity-ty: calc(var(--amplity-distance, 40px) * -1); }
.amplity-origin-south { --amplity-tx: 0; --amplity-ty: var(--amplity-distance, 40px); }
.amplity-origin-east  { --amplity-tx: var(--amplity-distance, 40px); --amplity-ty: 0; }
.amplity-origin-west  { --amplity-tx: calc(var(--amplity-distance, 40px) * -1); --amplity-ty: 0; }

/* ===============================
   PORTRAIT
================================ */

.amplity-orientation-portrait.amplity-size-s {
  width: var(--ai-portrait-s-w);
  height: var(--ai-portrait-s-h);
  border-radius: var(--ai-radius-s);
}

.amplity-orientation-portrait.amplity-size-m {
  width: var(--ai-portrait-m-w);
  height: var(--ai-portrait-m-h);
  border-radius: var(--ai-radius-m);
}

.amplity-orientation-portrait.amplity-size-l {
  width: var(--ai-portrait-l-w);
  height: var(--ai-portrait-l-h);
  border-radius: var(--ai-radius-l);
}

/* ===============================
   LANDSCAPE
================================ */

.amplity-orientation-landscape.amplity-size-s {
  width: var(--ai-landscape-s-w);
  height: var(--ai-landscape-s-h);
  border-radius: var(--ai-radius-s);
}

.amplity-orientation-landscape.amplity-size-m {
  width: var(--ai-landscape-m-w);
  height: var(--ai-landscape-m-h);
  border-radius: var(--ai-radius-m);
}

.amplity-orientation-landscape.amplity-size-l {
  width: var(--ai-landscape-l-w);
  height: var(--ai-landscape-l-h);
  border-radius: var(--ai-radius-l);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .amplity-animated-image__inner {
    transition: none;
    opacity: 1;
    transform: none;
  }
}