/* Heli Ad Banner Frontend Styles - BEM Methodology */

/* Block: hab-banner */
.hab-banner {
  position: fixed;
  display: none;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  background: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
  width: auto;
  @media (max-width: 768px) {
    height: auto !important;
    max-width: calc(100vw - 2 * var(--hab-corner-offset));
    max-height: 300px !important;
  }
  /* Banner Links */
  a {
    width: 100%;
    height: 100%;
  }
  /* Banner Images */
  img {
    width: auto;
    height: 100%;
    object-fit: contain;
    display: block;
    @media (max-width: 768px) {
      max-width: 100%;
      height: auto;
      max-height: 300px;
    }
  }
  &.hab-banner--show {
    display: block;
    opacity: 1;
  }
}

/* Element: Overlay (for modal mode) */
.hab-banner__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  &.hab-banner--show {
    display: block;
    opacity: 1;
  }
}

/* Element: Close Button */
.hab-banner__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  padding: 0;
}

.hab-banner__close svg {
  width: 16px;
  height: 16px;
}

.hab-banner__close:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: rotate(90deg);
}

/* Modifier: Modal Mode */
.hab-banner--modal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto !important;
  @media (max-width: 480px) {
    width: calc(100vw - 32px);
  }
}

/* Modifier: Fixed Mode Positions */
.hab-banner--fixed {
  --hab-corner-offset: 24px;
  @media (max-width: 768px) {
    --hab-corner-offset: 16px;
  }
  @media (max-width: 480px) {
    inset-inline: var(--hab-corner-offset);
  }
  &.hab-banner--position-top-left {
    top: var(--hab-corner-offset);
    left: var(--hab-corner-offset);
  }
  &.hab-banner--position-top-right {
    top: var(--hab-corner-offset);
    right: var(--hab-corner-offset);
  }
  &.hab-banner--position-bottom-left {
    bottom: var(--hab-corner-offset);
    left: var(--hab-corner-offset);
  }
  &.hab-banner--position-bottom-right {
    bottom: var(--hab-corner-offset);
    right: var(--hab-corner-offset);
  }
  &.hab-banner--position-center-left {
    top: 50%;
    left: var(--hab-corner-offset);
    transform: translateY(-50%);
  }
  &.hab-banner--position-center-right {
    top: 50%;
    right: var(--hab-corner-offset);
    transform: translateY(-50%);
  }
}

/* Modifier: Slide Animations */
.hab-banner--animation-slide {
  .hab-banner--modal {
    animation: habModalZoomIn 0.5s ease-out forwards;
  }
  &:where(.hab-banner--position-top-left, .hab-banner--position-top-right) {
    animation: habSlideFromTop 0.5s ease-out forwards;
  }
  &:where(
      .hab-banner--position-bottom-left,
      .hab-banner--position-bottom-right
    ) {
    animation: habSlideFromBottom 0.5s ease-out forwards;
  }
  &:where(.hab-banner--position-center-left) {
    animation: habSlideFromLeft 0.5s ease-out forwards;
  }
  &:where(.hab-banner--position-center-right) {
    animation: habSlideFromRight 0.5s ease-out forwards;
  }
}

/* Modifier: Fade Animation */
.hab-banner--animation-fade {
  animation: habFadeIn 0.5s ease-out forwards;
}

/* Modifier: Bounce Animations */
.hab-banner--animation-bounce {
  &:where(.hab-banner--modal) {
    animation: habModalZoomIn 0.8s ease-out forwards;
  }
  &:where(.hab-banner--fixed) {
    animation: habBounceIn 0.8s ease-out forwards;
    &:where(
        .hab-banner--position-center-left,
        .hab-banner--position-center-right
      ) {
      animation: habBounceInCenter 0.8s ease-out forwards;
    }
  }
}

/* Keyframe Animations */
@keyframes habSlideFromTop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes habSlideFromBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes habSlideFromLeft {
  from {
    transform: translateX(-100%) translateY(-50%);
    opacity: 0;
  }
  to {
    transform: translateX(0) translateY(-50%);
    opacity: 1;
  }
}

@keyframes habSlideFromRight {
  from {
    transform: translateX(100%) translateY(-50%);
    opacity: 0;
  }
  to {
    transform: translateX(0) translateY(-50%);
    opacity: 1;
  }
}

@keyframes habFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes habBounceIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes habModalZoomIn {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes habBounceInCenter {
  0% {
    transform: scale(0) translateY(-50%);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) translateY(-50%);
  }
  100% {
    transform: scale(1) translateY(-50%);
    opacity: 1;
  }
}