/* ============================================
   BASE PAGE STYLES
   ============================================ */
body {
  margin: 0px;
  padding: 0px;
  font-family: Verdana, sans-serif;
  overflow: hidden;
}

/* ============================================
   BANNER CONTAINER
   ============================================ */
.container {
  display: inline-block;
  width: 1280px;
  height: 720px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(72, 49, 189, 1) 0%, rgba(191, 17, 104, 1) 100%);
}


/* ============================================
   GLOW EFFECT — CUSTOMIZABLE VARIABLES
   Change these values to adjust color, speed and
   delay of the rotating glow without touching the
   rest of the code.
   ============================================ */
:root {
  --glow-color-outer: #d3a3df;   /* outer color of the glow band */
  --glow-color-inner: #CBA8D4;   /* center/peak color of the glow band */
  --glow-speed: 2.7s;            /* duration of one full rotation */
  --glow-delay: 0.35s;            /* delay before the animation starts */

  --card-width: 874px;           /* card width — matches img/card.jpg */
  --card-height: 682px;          /* card height — matches img/card.jpg */
}

/* ============================================
   CARD IMAGE

/* Outer wrapper: only handles position and size.
   overflow:visible so the soft ambient glow can
   bleed outward beyond the card. */
#card {
    transform: translateY(300px);
  display: block;
  overflow: visible;
  position: absolute;
  bottom: 0;
  left: 30px;
  width: var(--card-width);
  height: var(--card-height);
  z-index: 2;
  container-type: size; /* used by .glow-ambient below */
}


/* Border wrapper: this is the key piece that makes
   the rotating gradient read as a THIN BORDER instead
   of a big visible square. The padding equals the
   ring thickness; overflow:hidden clips the huge
   rotating gradient down to just that thin strip. */
.glow-border {
  position: absolute;
  inset: -6px;               /* ring thickness */
  padding: 6px;               /* must match the inset value above */
  border-radius: 22px 22px 0px 0px; /* card radius + ring thickness */
  overflow: hidden;
  container-type: size;
  z-index: 1;
}

/* The rotating gradient itself, sized much larger than
   its (thin) box so it always fully covers the ring
   at every rotation angle. Only the thin strip left
   visible by .glow-border's padding+overflow shows. */
.glow-border::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250cqmax;
  height: 250cqmax;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0deg,
    var(--glow-color-outer) 10deg,
    var(--glow-color-inner) 45deg,
    var(--glow-color-outer) 80deg,
    transparent 90deg,
    transparent 360deg);
  animation: glow-spin var(--glow-speed) linear var(--glow-delay) infinite;
}

/* Inner wrapper: actually clips the image to the
   rounded corners. Fills 100% of .glow-border's
   content box (i.e. the original card size). */
.card-content {
  position: relative;
  overflow: hidden;
  border-radius: 20px 20px 0px 0px;
  width: 100%;
  height: 100%;
}

/* The actual image, filling its clipped container */
.cardimg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes glow-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ============================================
   LOGO
   ============================================ */
.logoimg {
  transform: scale(0.05);
  display: block;
  opacity: 0;
}

#logo {
  overflow: hidden;
  position: absolute;
  top: 458px;
  left: 938px;
  z-index: 20;
}

/* ============================================
   BOOKMARK
   ============================================ */
.bookmarkimg {
  transform: translateX(100px);
  display: block;
  opacity: 0;
}

#bookmark {
  overflow: hidden;
  position: absolute;
  top: 343px;
  right: 0px;
  z-index: 19;
}

/* ============================================
   TT (title/tag) ELEMENT
   ============================================ */
.ttimg {
  transform: scale(0.65) translateY(50px);
  display: block;
  opacity: 0;
}

#tt {
  overflow: hidden;
  position: absolute;
  top: 140px;
  left: 0px;
  z-index: 21;
}

/* ============================================
   CTA (call to action)
   ============================================ */
.ctaimg {
  transform: scale(0.05);
  display: block;
  opacity: 0;
}

#cta {
  position: absolute;
  top: 576px;
  left: 992px;
  z-index: 75;
  transform-origin: center;
}

/* ============================================
   PRICE
   ============================================ */
.priceimg {
  transform: translateY(200px);
  display: block;
}

#price {
  overflow: hidden;
  position: absolute;
  top: 116px;
  left: 973px;
  z-index: 15;
  transform-origin: center;
}

/* ============================================
   SIDE COPY
   ============================================ */
#side-copy {
  overflow: hidden;
  position: absolute;
  bottom: 20px;
  right: 15px;
  z-index: 14;
}

/* ============================================
   BOTTOM COPY
   ============================================ */
#bottom-copy {
  overflow: hidden;
  position: absolute;
  top: 670px;
  left: 938px;
  z-index: 20;
}

/* ============================================
   BACKGROUND IMAGE
   ============================================ */
#bg {
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
}