/* =====================================================================
   Mega4Up — <gift-card> v3   (square, full-bleed, logo-driven)
   ---------------------------------------------------------------------
   You supply ONLY a transparent logo. The whole card colors itself from
   that logo (or a `color` override). Square 1:1, modern, theme-native.
   Slots (all optional): eyebrow (top), badge (bottom pill), flag (region),
   store (corner mark). Everything scales with the card via cqw units.
   ===================================================================== */

.gc {
  --brand: #6d28d9;                 /* JS overwrites from the logo        */
  --ink: #ffffff;                   /* text color on the card             */
  --d1: var(--brand);
  --d2: var(--brand);
  --l1: var(--brand);
  --ease: cubic-bezier(.2, .7, .2, 1);

  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1.5 / 1;
  border-radius: 0;                  /* flat rectangle — the outer container's
                                        overflow:hidden handles any rounding  */
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  background: var(--brand);
  color: var(--ink);
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 10px 26px -16px rgba(15, 18, 24, .5);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gc:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 46px -22px rgba(15, 18, 24, .55);
}

.gc__bg, .gc__fx { position: absolute; inset: 0; pointer-events: none; }
.gc__bg { z-index: 0; }
.gc__fx { z-index: 1; }                 /* grain / sheen above bg, below content */

/* giant faint logo watermark bleeding off the bottom-right ----------- */
.gc__ghost {
  position: absolute;
  z-index: 0;
  right: -12cqw;
  bottom: -28cqw;
  width: 64cqw;
  height: 64cqw;
  object-fit: contain;
  object-position: bottom right;
  opacity: .10;
  filter: brightness(0) invert(1);      /* force the mark white          */
  pointer-events: none;
}
.gc[data-darkink="1"] .gc__ghost { filter: none; opacity: .08; }

/* fine grain for a premium matte finish ----------------------------- */
.gc__fx {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .07;
}

/* content scaffold --------------------------------------------------- */
.gc__in {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 5cqw 6cqw;
}

/* top row : store mark (left) + region code (right) ----------------- */
.gc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 3cqw; }
.gc__store {
  font-weight: 700;
  font-size: 4cqw;
  letter-spacing: .12em;
  line-height: 1;
  padding: 2.2cqw 3cqw;
  border: .8cqw solid currentColor;
  border-radius: 2.4cqw;
  opacity: .92;
}
.gc:not([store]) .gc__store:empty { display: none; }
.gc[data-storelogo="1"] .gc__store {
  border: 0; padding: 0; border-radius: 0; line-height: 0;
}
.gc__store img {
  display: block;
  height: 11cqw;
  width: auto;
  filter: brightness(0) invert(1);          /* white mark on the brand color */
}
.gc[data-darkink="1"] .gc__store img { filter: brightness(0); opacity: .9; }
.gc__region {
  font-weight: 700;
  font-size: 3.4cqw;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 1.8cqw 3cqw;
  border-radius: 1.4cqw;                  /* rectangular pill (was 999px)   */
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .26);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.gc[data-darkink="1"] .gc__region { background: rgba(15,18,24,.10); border-color: rgba(15,18,24,.16); }
.gc:not([region]) .gc__region { display: none; }

/* eyebrow (e.g. "1 MONTH") sits just under the top row -------------- */
.gc__eyebrow {
  margin-top: 2.5cqw;
  font-weight: 700;
  font-size: 4.4cqw;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1cqw 3cqw rgba(15,18,24,.18);
}
.gc:not([eyebrow]) .gc__eyebrow { display: none; }

/* hero logo ---------------------------------------------------------- */
.gc__hero { display: grid; place-items: center; min-height: 0; padding: 2cqw; }
.gc__hero img {
  max-width: 60%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  /* default: render the supplied logo as a clean white mark (VX-style)  */
  filter: brightness(0) invert(1) drop-shadow(0 3cqw 6cqw rgba(15, 18, 24, .22));
}
.gc[data-darkink="1"] .gc__hero img {            /* light brand -> ink logo */
  filter: brightness(0) drop-shadow(0 3cqw 6cqw rgba(15, 18, 24, .14));
}
.gc[logo-color="original"] .gc__hero img {       /* keep the logo's colors  */
  filter: drop-shadow(0 3cqw 6cqw rgba(15, 18, 24, .2));
}
.gc[data-loading="1"] .gc__hero img { opacity: 0; }
.gc[data-loading="1"] .gc__hero::after {
  content: ""; width: 46%; aspect-ratio: 1; border-radius: 4cqw;
  background: linear-gradient(100deg, rgba(255,255,255,.10) 30%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.10) 70%);
  background-size: 200% 100%; animation: gcShim 1.1s linear infinite;
}
@keyframes gcShim { to { background-position: -200% 0; } }

/* hero text fallback — when no logo is supplied, render the brand name
   centred in the hero area so the card is never visually empty. JS toggles
   .gc[data-no-logo="1"]; the <img> is hidden, the wordmark takes over. */
.gc[data-no-logo="1"] .gc__hero img { display: none; }
.gc[data-no-logo="1"] .gc__ghost { display: none; }
.gc__heroText {
  display: none;
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 11.5cqw;
  line-height: 1.05;
  letter-spacing: -.012em;
  text-align: center;
  padding: 0 4cqw;
  color: var(--ink);
  text-shadow: 0 1cqw 3cqw rgba(15,18,24,.18);
  word-break: break-word;
  hyphens: auto;
}
.gc[data-no-logo="1"] .gc__heroText { display: block; }
/* Auto-shrink long names so they don't blow out the card. JS adds a
   data-len bucket; CSS picks the right size step. */
.gc[data-no-logo="1"][data-len="2"] .gc__heroText { font-size: 10cqw; }
.gc[data-no-logo="1"][data-len="3"] .gc__heroText { font-size: 8.5cqw; }
.gc[data-no-logo="1"][data-len="4"] .gc__heroText { font-size: 7cqw; }

/* bottom : badge pill + region flag chip ---------------------------- */
.gc__bottom { display: flex; flex-direction: column; align-items: center; gap: 2.5cqw; }
.gc__badge {
  font-weight: 700;
  font-size: 4.4cqw;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  padding: 2.6cqw 5cqw;
  border: .8cqw solid currentColor;
  border-radius: 3cqw;
  text-align: center;
}
.gc:not([badge]) .gc__badge { display: none; }
.gc__flag {
  font-size: 8.5cqw;
  line-height: 0;
  padding: 1.4cqw;
  border-radius: 2.2cqw;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2cqw 6cqw -2cqw rgba(15,18,24,.4);
}
.gc__flag img {
  display: block;
  width: 11cqw;
  height: auto;
  border-radius: 1cqw;
}
.gc:not([flag]) .gc__flag { display: none; }

/* =====================================================================
   STYLE 1 — "spotlight"  (recommended)
   Vertical brand gradient + soft white halo behind the logo + ghost mark.
   ===================================================================== */
.gc[data-style="spotlight"] .gc__bg {
  background:
    radial-gradient(42% 36% at 50% 46%, rgba(255,255,255,.20) 0%, transparent 64%),
    linear-gradient(157deg, var(--l1) 0%, var(--brand) 46%, var(--d2) 100%);
}
.gc[data-style="spotlight"][data-darkink="1"] .gc__bg {
  background:
    radial-gradient(42% 36% at 50% 46%, rgba(255,255,255,.42) 0%, transparent 64%),
    linear-gradient(157deg, var(--l1) 0%, var(--brand) 46%, var(--d2) 100%);
}

/* =====================================================================
   STYLE 2 — "mesh"  (modern blurred mesh gradient)
   ===================================================================== */
.gc[data-style="mesh"] .gc__bg {
  background:
    radial-gradient(40% 38% at 18% 16%, color-mix(in srgb, var(--l1) 92%, #fff) 0%, transparent 60%),
    radial-gradient(46% 44% at 86% 22%, color-mix(in srgb, var(--brand) 70%, #000) 0%, transparent 62%),
    radial-gradient(54% 50% at 78% 92%, color-mix(in srgb, var(--l1) 88%, #fff) 0%, transparent 60%),
    radial-gradient(50% 48% at 12% 90%, color-mix(in srgb, var(--brand) 78%, #000) 0%, transparent 60%),
    var(--brand);
}
.gc[data-style="mesh"] .gc__ghost { opacity: .07; }

/* =====================================================================
   STYLE 3 — "flow"  (refined flowing waves)
   ===================================================================== */
.gc[data-style="flow"] .gc__bg {
  background: linear-gradient(160deg, var(--l1) 0%, var(--brand) 60%, var(--d2) 100%);
}
.gc[data-style="flow"] .gc__bg::before,
.gc[data-style="flow"] .gc__bg::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%;
  height: 70%;
  background: rgba(255, 255, 255, .12);
}
.gc[data-style="flow"][data-darkink="1"] .gc__bg::before,
.gc[data-style="flow"][data-darkink="1"] .gc__bg::after { background: rgba(255,255,255,.5); }
.gc[data-style="flow"] .gc__bg::before {
  top: 30%;
  border-radius: 50% 50% 0 0 / 26% 26% 0 0;
  transform: rotate(-8deg);
}
.gc[data-style="flow"] .gc__bg::after {
  top: 52%;
  background: rgba(255, 255, 255, .08);
  border-radius: 46% 54% 0 0 / 30% 22% 0 0;
  transform: rotate(-6deg);
}

@media (prefers-reduced-motion: reduce) {
  .gc { transition: none; }
  .gc[data-loading="1"] .gc__hero::after { animation: none; }
}