@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap");
@font-face {
  font-family: "Rany";
  src: url("assets/Rany-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Rany";
  src: url("assets/Rany-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Rany";
  src: url("assets/Rany-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

:root {
  --surface: #e2ece2;
  --blue: #3976ff;
  --orange: #ee7b42;
  --text: #101010;
  --white: #ffffff;
  --banner-bg-image: url("assets/images/scene-main.jpg");
}

* {
  box-sizing: border-box;
}

html,
body {
  overflow: hidden;
  width: 300px;
  height: 250px;
  margin: 0;
  padding: 0;
  font-family: "Rany", sans-serif;
}

.banner {
  position: relative;
  width: 300px;
  height: 250px;
  display: block;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  background: #164364;
}

.image-layer {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(20, 67, 100, 0.5) 40%, rgba(20, 67, 100, 0.25) 100%),
    var(--layer-image, var(--banner-bg-image));
  background-size: cover;
  background-position: 67% center;
  transform: scale(1.03);
  opacity: 0;
  transition: opacity 900ms ease;
  animation: bgBreath 10s ease-in-out 700ms infinite alternate;
}

.image-layer.is-crossfade {
  z-index: 0;
}

.content-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 235px;
  height: 250px;
  padding: 14px 14px 12px 14px;
  background: transparent;
  z-index: 2;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 580ms ease, transform 580ms ease;
  animation: cardDrift 6.5s ease-in-out 1400ms infinite;
}

.content-card::before {
  content: "";
  position: absolute;
  inset: 0px 43px -36px -44px;
  background: var(--surface);
  border-radius: 9px;
  transform: rotate(16deg);
  z-index: -1;
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.16);
}

.logo,
.title,
.body,
.cta-button {
  opacity: 0;
  transform: translateY(8px);
}

.logo {
  transition: opacity 380ms ease 220ms, transform 380ms ease 220ms;
}

.logo {
  position: relative;
  z-index: 1;
  margin-bottom: 12px;
}

.logo img {
  width: 58px;
  height: auto;
  display: block;
}

.content {
  position: relative;
  z-index: 1;
  width: 170px;
  animation: contentDrift 6.5s ease-in-out 1600ms infinite;
}

.eyebrow {
  font-family: "Rany", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--orange);
  margin: 0 0 8px;
  min-height: 13px;
}

.title {
  font-size: 14px;
  line-height: 1.12;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 7px;
  letter-spacing: -0.2px;
  transition: opacity 420ms ease 290ms, transform 420ms ease 290ms;
  animation: titleGlow 6.5s ease-in-out 1600ms infinite;
}

.title span:last-child {
  color: var(--blue);
}

.body {
  font-size: 10px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--text);
  margin: 14px 0 14px;
  transition: opacity 440ms ease 360ms, transform 440ms ease 360ms;
}

.cta-button {
  font-family: "Rany", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #fdfdfd;
  background: linear-gradient(135deg, #ff8f58 0%, var(--orange) 52%, #dc642c 100%);
  border: none;
  border-radius: 12px;
  padding: 8px 18px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(238, 123, 66, 0.28);
  transition:
    transform 190ms ease,
    filter 190ms ease,
    box-shadow 190ms ease,
    opacity 460ms ease 430ms;
  animation:
    ctaPulse 2.8s ease-in-out 1600ms infinite,
    ctaFloat 6.5s ease-in-out 1600ms infinite;
}

.cta-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 8%, rgba(255, 255, 255, 0.4) 42%, transparent 72%);
  transform: translateX(-140%);
  pointer-events: none;
}

.cta-button:hover {
  animation-play-state: paused;
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.05);
  box-shadow: 0 8px 18px rgba(238, 123, 66, 0.42);
}

.cta-button:hover::before {
  animation: ctaShine 700ms ease-out 1;
}

.cta-button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.banner.banner-ready .image-layer.is-visible {
  opacity: 1;
}

.banner.banner-ready .content-card {
  opacity: 1;
  transform: translateX(0);
}

.banner.banner-ready .logo,
.banner.banner-ready .title,
.banner.banner-ready .body,
.banner.banner-ready .cta-button {
  opacity: 1;
  transform: translateY(0);
}

@keyframes bgBreath {
  0% {
    transform: scale(1.03) translateX(0);
  }
  100% {
    transform: scale(1.07) translateX(-3px);
  }
}

@keyframes ctaPulse {
  0%,
  65%,
  100% {
    box-shadow: 0 0 0 0 rgba(238, 123, 66, 0);
  }
  78% {
    box-shadow: 0 0 0 7px rgba(238, 123, 66, 0.22);
  }
}

@keyframes ctaShine {
  0% {
    transform: translateX(-140%);
  }
  100% {
    transform: translateX(140%);
  }
}

@keyframes cardDrift {
  0%,
  100% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(1px) translateY(-1px);
  }
}

@keyframes contentDrift {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
}

@keyframes titleGlow {
  0%,
  100% {
    text-shadow: 0 0 0 rgba(57, 118, 255, 0);
  }
  45% {
    text-shadow: 0 1px 8px rgba(57, 118, 255, 0.16);
  }
}

@keyframes ctaFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
}