@import url("styles.css");
@import url("offline-art.css");

/* Logo-only Ayudha Ezhuthu brand treatment. */
.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.campaign-header {
  height: 120px;
  justify-content: center;
}

.brand-logo-shell {
  width: 220px;
  height: 92px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(203, 160, 80, .5);
  border-radius: 13px;
  background: radial-gradient(circle at 50% 35%, #292318, #080807 72%);
  box-shadow: inset 0 0 24px rgba(203, 160, 80, .08), 0 0 24px rgba(203, 160, 80, .18);
}

.brand-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  visibility: visible;
  transform: scale(1.18);
  transform-origin: center;
  filter: invert(1) sepia(1) saturate(3.4) hue-rotate(350deg) brightness(1.12) contrast(1.18);
  mix-blend-mode: screen;
}

/* Header: large white logo with no card, border, or wrapper treatment. */
.campaign-header .brand-logo-shell {
  width: 280px;
  height: 104px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.campaign-header .brand-logo {
  transform: scale(1.2);
  filter: brightness(0) invert(1);
  mix-blend-mode: normal;
}

/* Footer keeps the existing premium bordered box. */
.brand-footer { overflow: visible; }
.brand-footer .brand-logo-shell {
  width: 240px;
  height: 100px;
  padding: 10px;
}

.campaign-video { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0e0e0c; }
.campaign-video[hidden], .process-stage[hidden] { display: none; }
.gallery-image > img { position: absolute; z-index: 8; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-image > img[hidden] { display: none; }
.gallery-card:hover .gallery-image > img { transform: scale(1.045); }

@media (max-width: 639px) {
  .campaign-header { height: 96px; }

  .campaign-header .brand-logo-shell {
    width: 220px;
    height: 82px;
    padding: 0;
  }

  .campaign-header .brand-logo { transform: scale(1.16); }

  .brand-footer .brand-logo-shell {
    width: 200px;
    height: 84px;
    padding: 8px;
  }

  .brand-footer .brand-logo { transform: scale(1.14); }
}