@keyframes zoom-out {
  0% {
    scale: 150%;
  }
  100% {
    scale: 100%;
  }
} 

@keyframes slide-in-from-bottom {
  0% {
    transform: translateY(200%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slide-in-from-left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes fade{
  0%   { opacity: 0; }
  5%   { opacity: 1; }   /* fade‑in */
  25%  { opacity: 1; }   /* stay visible */
  30%  { opacity: 0; }   /* fade‑out */
  100% { opacity: 0; }
}

@keyframes animate-item {
  0% {
    flex: 7;
  }
  100% {
    flex: 1;
  }
}

.ad-wrapper {
  --padding: 10px;
  --border-radius: 10px;
  --text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
  --logo-color: #fff;
  --object-position: center;
  --object-fit: cover;
  --aspect-ratio: 1/1;
  --min-width: auto;
  --max-height: 100%;

  box-sizing: border-box;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  color: #fff;
  overflow: hidden;
  font-family: Arial, sans-serif;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
  letter-spacing: 0.02em;
  margin: 0 auto; 
  max-height: var(--max-height);
  max-width: 100%;
  min-width: var(--min-width);
  container-type: inline-size;
  container-name: ad-wrapper;

  &.rectangle-portrait {
    --aspect-ratio: 3/4;
  }
  &.rectangle-landscape {
    --aspect-ratio: 4/3;
  }
  &.square {
    --aspect-ratio: 1/1;
  }
  &.landscape {
    --aspect-ratio: 16/9;
  }
  &.portrait {
    --aspect-ratio: 9/16;
  }
  &.full-width {
    --min-width: 100%;
  }
  &.hide-content {
    .ad-content {
      display: none;
    }
  }
  &.rounded-corners {
    border-radius: var(--border-radius);
    button {
      border-radius: var(--border-radius);
    }
  }

  aspect-ratio: var(--aspect-ratio);

  .ad-image {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    border-radius: var(--border-radius);
    .slide {
      width: 100%;
      height: 100%;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: var(--object-fit);
      object-position: var(--object-position);
    }      
  }
  .ad-header {
    background: rgba(255, 255, 255, .72);
    color: #4B4B4B;
    font-size: 10px;
    border-radius: var(--border-radius);
    padding: 1px var(--padding);
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    pointer-events: none;      
  }
  .ad-content {
    background: #000;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 100%);
    width: auto;
    height: auto;
    padding: var(--padding);
    gap: var(--padding);
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    border-radius: var(--border-radius);

    #header-ad {
      line-height: 1.3;
      h1 {
        text-shadow: var(--text-shadow);
        font-size: 20px;
        line-height: 1.1;
        font-weight: bold;
        margin: 0;
        margin-bottom: 5px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      p {
        text-shadow: var(--text-shadow);
        font-size: 12px;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;        
      }
    }
    #footer-ad {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--padding);
      width: 100%;
      .advertiser {
        display: flex;
        align-items: center;
        gap: var(--padding);
        .advertiser-logo {
          overflow: hidden;
          flex-shrink: 0;
          width: 35px;
          height: 35px;
          border-radius: 100%;
          background: var(--logo-color);
          display: flex;
          align-items: center;
          justify-content: center;
          border: 2px solid #fff;
          img {
            width: 25px;
            height: 25px;
          }
          &.fill {   
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center;
            }
          }
        }
        .advertiser-name {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          text-shadow: var(--text-shadow);
          gap: 2px;
          small {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 9px;
          }
          strong {
            text-transform: capitalize;
            font-size: 12px;
            font-weight: bold;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;            
            &.uppercase {
              text-transform: uppercase;
            }
          }
        }
      }
      button {
        --button-color: rgba(0, 0, 0, 0.3);
        --button-border-color: #fff;
         background: linear-gradient(
          90deg,
          oklch(from var(--button-color) calc(l - .05) c h / .33), 
          oklch(from var(--button-color) calc(l - .10) c h / .66)
        );
        border: 2px solid var(--button-border-color);
        padding: 8px 16px;
        color: #fff;
        white-space: nowrap;
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
        transition: background 0.15s ease;
      }
      button:hover {
        color: #fff;
      }
    }
    .finDisclaimer {
      width: 100%;
      text-shadow: var(--text-shadow);
      font-size: 8px;
      font-weight: bold;
      text-align: center;
      margin: 0 0 -5px 0;

    }
  }
  /*  Animations  */
  &.animated {
    .ad-image img {
      animation: zoom-out 10s ease; 
    }

    #header-ad h1 {
      transform: translateX(-120%);
      animation: slide-in-from-left 3s forwards;
      animation-delay: 2s;
    }    

    #header-ad p {
      transform: translateX(-120%);
      animation: slide-in-from-left 3s forwards;
      animation-delay: 2s;
    }

    #footer-ad button {
      transform: translateY(200%);
      animation: slide-in-from-bottom 3s forwards;
      animation-delay: 5s;
    }
  }
  &.slider {
    .ad-image {
    position: relative;
    width: 100%; /* adjust to your image dimensions */
      height: 100%;
      overflow: hidden;
      background: #000;
    
      .slide {
        position: absolute;
        inset: 0; /* top/right/bottom/left = 0 */
        background-size: cover;
        background-position: var(--object-position);
        opacity: 0;
        animation: fade 12s infinite, zoom-out 4s ease;   /* 4 slides × 4 s each = 16 s */
      }
      .slide:nth-child(1){ animation-delay: 0s; }
      .slide:nth-child(2){ animation-delay: 4s; }
      .slide:nth-child(3){ animation-delay: 8s; }
    }
  }
  &.interaction {
    .ad-content {
      pointer-events: none;
    }
    .ad-image {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 100%;
      .slide {
        flex: 1;
        height: 100%;
        background-position: var(--object-position);
        background-size: cover;
        background-repeat: none;
        transition: flex 0.8s ease;
        &:hover {
          flex: 7;
        }
      }
    }
  }
  @container ad-wrapper (width < 260px) {
    .ad-content {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    #footer-ad {
      flex-direction: column;
    }
  }
}