/* ============================================================
   Gift Cards page
   ============================================================
   Hero with mock gift-card visual, 3-step "how it works",
   redemption band, final CTA. Reuses tokens from site.css.
   ============================================================ */

/* ---------- Hero (Ivory, two-column — LOCKED direction) ---------- */
.gc-hero {
  background: var(--c-ivory);
  color: var(--c-ink);
  padding: 112px 24px 112px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .gc-hero { padding: 80px 24px 80px; }
}
@media (max-width: 767px) {
  .gc-hero { padding: 64px 24px 72px; }
}

.gc-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
}
@media (max-width: 1023px) {
  .gc-hero-inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}

.gc-hero-left {
  position: relative;
  padding-left: 32px;
}
@media (max-width: 767px) {
  .gc-hero-left { padding-left: 16px; }
}
.gc-hero-rule {
  position: absolute;
  left: 0;
  top: 8px;
  width: 1px;
  height: 96px;
  background: var(--c-sea);
  opacity: 0.5;
}
@media (max-width: 767px) {
  .gc-hero-rule { height: 64px; }
}
.gc-hero .eyebrow {
  margin-bottom: 20px;
  color: var(--c-sea);
}
.gc-hero .eyebrow::before { background: var(--c-sea); }
.gc-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--c-ink);
  margin: 0 0 24px;
  max-width: 14ch;
}
@media (max-width: 1023px) {
  .gc-hero h1 { font-size: 48px; }
}
@media (max-width: 767px) {
  .gc-hero h1 { font-size: 38px; line-height: 1.1; }
}
.gc-hero-sub {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-slate);
  margin: 0 0 36px;
  max-width: 46ch;
}
@media (max-width: 767px) {
  .gc-hero-sub { font-size: 16px; margin-bottom: 28px; }
}

/* Hero primary CTA — gold variant for warmth on Deep Teal */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 18px 28px;
  border-radius: 6px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  background: var(--gc-accent, var(--c-gold));
  color: var(--c-deep);
  transition:
    transform var(--d-hover) var(--ease-out),
    box-shadow var(--d-hover) var(--ease-out),
    background-color var(--d-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--gc-accent-shadow, rgba(216, 183, 124, 0.30));
  }
}
.btn-gold:active {
  transform: scale(0.97);
  transition-duration: var(--d-press);
}
.btn-gold .ext-icon { flex-shrink: 0; }
@media (max-width: 767px) {
  .btn-gold { font-size: 14px; padding: 16px 22px; }
}

/* Visually hidden — for "(opens in a new tab)" supplements */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Gift card visual (mock) ---------- */
.gc-hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.gc-card {
  /* 1.586:1 — standard credit card aspect, scaled larger for hero */
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1.586 / 1;
  background: linear-gradient(135deg, #0F4F57 0%, var(--c-deep-2) 100%);
  color: var(--c-ivory);
  border-radius: 14px;
  padding: 32px 32px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Outer + inner shadow gives the foil-edge feel */
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.35),
    0 0 0 1px var(--gc-accent-foil, rgba(216, 183, 124, 0.45)) inset;
  transform: rotate(-2deg);
  transition: transform 400ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .gc-card:hover { transform: rotate(-2deg) translateY(-4px); }
}
/* Inset gold foil border — a thin gold rule just inside the card edge */
.gc-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--gc-accent-foil-soft, rgba(216, 183, 124, 0.55));
  border-radius: 8px;
  pointer-events: none;
}
/* Subtle linen / sheen overlay so the card doesn't read as flat color */
.gc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.06), transparent 40%),
    radial-gradient(circle at 90% 100%, var(--gc-accent-glow-soft, rgba(216, 183, 124, 0.10)), transparent 50%);
  pointer-events: none;
}
/* Photo variant — the real card artwork replaces the drawn mock. The dark
   fill, gold foil rule and sheen overlay were all standing in for artwork
   the image now carries, so they are dropped; the tilt, shadow and hover
   lift stay so the card still sits in the page the same way. */
.gc-card--photo {
  background: none;
  padding: 0;
  /* No box-shadow, radius or overflow clipping here: the artwork already
     carries its own rounded corners and drop shadow, and the seasonal
     ribbon is deliberately hung 10px above the card edge. */
  box-shadow: none;
  border-radius: 0;
}
.gc-card--photo::before,
.gc-card--photo::after { display: none; }
.gc-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* The artwork is supplied on a white background. Multiply drops that white
     into the section behind it so the card reads as a floating card rather
     than a white rectangle pasted on the tinted gradient. Same technique as
     .contact-hero-img. */
  mix-blend-mode: multiply;
}
@media (max-width: 1023px) {
  .gc-card { max-width: 380px; transform: rotate(-1deg); }
}
@media (max-width: 767px) {
  .gc-card { transform: none; padding: 24px 24px 20px; border-radius: 12px; }
  .gc-card::before { inset: 8px; border-radius: 6px; }
}

.gc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gc-accent, var(--c-gold));
  position: relative;
  z-index: 1;
}
.gc-card-monogram {
  /* Painted via CSS mask so the monogram tints with --gc-accent
     and follows the season palette. The PNG is a transparent
     dark-teal mark; we use it only as a shape and fill it with
     the accent color. */
  width: 40px;
  height: 40px;
  display: inline-block;
  background-color: var(--gc-accent, var(--c-gold));
  -webkit-mask: url("/images/caw-monogram.png") center / contain no-repeat;
          mask: url("/images/caw-monogram.png") center / contain no-repeat;
  transition: background-color 400ms var(--ease-out);
}
@media (max-width: 767px) {
  .gc-card-monogram { width: 34px; height: 34px; }
}

.gc-card-body {
  position: relative;
  z-index: 1;
}
.gc-card-brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.05;
  color: var(--c-ivory);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
@media (max-width: 1023px) { .gc-card-brand { font-size: 26px; } }
@media (max-width: 767px)  { .gc-card-brand { font-size: 24px; } }
.gc-card-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gc-accent-text, rgba(216, 183, 124, 0.85));
  margin: 0;
}

.gc-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.gc-card-foot .amount-line {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 246, 247, 0.55);
  margin: 0;
}
.gc-card-foot .gold-bar {
  width: 36px;
  height: 2px;
  background: var(--gc-accent, var(--c-gold));
  flex-shrink: 0;
}

/* ---------- How it works ---------- */
.gc-how {
  background: var(--c-ivory);
  padding: 112px 24px;
}
@media (max-width: 767px) {
  .gc-how { padding: 80px 24px; }
}
.gc-how-inner {
  max-width: 1080px;
  margin: 0 auto;
}
.gc-how-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 64px;
}
.gc-how-head .eyebrow {
  justify-content: center;
  margin-bottom: 20px;
}
.gc-how-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  color: var(--c-deep);
  margin: 0;
  letter-spacing: -0.005em;
}
@media (max-width: 767px) {
  .gc-how-head { margin-bottom: 48px; }
  .gc-how-head h2 { font-size: 30px; }
}

.gc-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  position: relative;
}
@media (max-width: 767px) {
  .gc-steps { grid-template-columns: 1fr; gap: 40px; }
}
/* Thin Pearl Grey rule connecting the steps on desktop only */
.gc-steps::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--c-stone) 12%,
    var(--c-stone) 88%,
    transparent
  );
  z-index: 0;
}
@media (max-width: 767px) {
  .gc-steps::before { display: none; }
}

.gc-step {
  text-align: center;
  position: relative;
  z-index: 1;
}
.gc-step-num {
  width: 48px;
  height: 48px;
  margin: 0 auto 24px;
  border-radius: 999px;
  background: var(--c-ivory);
  border: 1.5px solid var(--c-sea);
  color: var(--c-sea);
  font-family: var(--font-display);
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.gc-step h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: var(--c-deep);
  margin: 0 0 12px;
}
.gc-step p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-slate);
  margin: 0 auto;
  max-width: 32ch;
}

/* ---------- Redemption band ---------- */
.gc-uses {
  background: var(--c-mint);
  padding: 96px 24px;
}
@media (max-width: 767px) {
  .gc-uses { padding: 72px 24px; }
}
.gc-uses-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.gc-uses .eyebrow {
  justify-content: center;
  margin-bottom: 20px;
}
.gc-uses h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.15;
  color: var(--c-deep);
  margin: 0 auto 24px;
  max-width: 22ch;
  letter-spacing: -0.005em;
}
@media (max-width: 767px) {
  .gc-uses h2 { font-size: 26px; }
}
.gc-uses p {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--c-ink);
  margin: 0;
}
@media (max-width: 767px) {
  .gc-uses p { font-size: 16px; }
}
.gc-uses-inline {
  color: var(--c-deep);
  font-weight: 500;
}

/* ---------- Final CTA band ---------- */
.gc-final {
  background: var(--c-deep);
  color: var(--c-ivory);
  padding: 112px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 767px) {
  .gc-final { padding: 80px 24px; }
}
.gc-final::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: radial-gradient(closest-side, rgba(127, 192, 196, 0.10), transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.gc-final-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.gc-final .gold-line {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gc-accent, var(--c-gold));
  margin: 0 auto 28px;
}
.gc-final h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.15;
  color: var(--c-ivory);
  margin: 0 auto 36px;
  max-width: 18ch;
  letter-spacing: -0.005em;
}
@media (max-width: 767px) {
  .gc-final h2 { font-size: 32px; margin-bottom: 28px; }
}


/* ============================================================
   Seasonal themes — override --gc-accent + supporting tints.
   Applied via data-season attr on .gc-page (set in JS).
   ============================================================ */

.gc-page {
  /* Default = gold; per-theme blocks override below */
  --gc-accent: #D8B77C;
  --gc-accent-soft: rgba(216, 183, 124, 0.6);
  --gc-accent-glow: rgba(216, 183, 124, 0.20);
  --gc-accent-glow-soft: rgba(216, 183, 124, 0.10);
  --gc-accent-foil: rgba(216, 183, 124, 0.45);
  --gc-accent-foil-soft: rgba(216, 183, 124, 0.55);
  --gc-accent-text: rgba(216, 183, 124, 0.85);
  --gc-accent-shadow: rgba(216, 183, 124, 0.30);
}

/* — New Year: brighter, brassier gold ——————————————— */
.gc-page[data-season="new-year"] {
  --gc-accent: #E8C97E;
  --gc-accent-soft: rgba(232, 201, 126, 0.65);
  --gc-accent-glow: rgba(232, 201, 126, 0.28);
  --gc-accent-glow-soft: rgba(232, 201, 126, 0.14);
  --gc-accent-foil: rgba(232, 201, 126, 0.55);
  --gc-accent-foil-soft: rgba(232, 201, 126, 0.65);
  --gc-accent-text: rgba(232, 201, 126, 0.92);
  --gc-accent-shadow: rgba(232, 201, 126, 0.32);
}

/* — Valentine's: soft rose blush ——————————————— */
.gc-page[data-season="valentines"] {
  --gc-accent: #D69AA2;
  --gc-accent-soft: rgba(214, 154, 162, 0.6);
  --gc-accent-glow: rgba(214, 154, 162, 0.22);
  --gc-accent-glow-soft: rgba(214, 154, 162, 0.12);
  --gc-accent-foil: rgba(214, 154, 162, 0.48);
  --gc-accent-foil-soft: rgba(214, 154, 162, 0.6);
  --gc-accent-text: rgba(214, 154, 162, 0.92);
  --gc-accent-shadow: rgba(214, 154, 162, 0.32);
}

/* — Mother's Day: warm gold with blush undertone ——— */
.gc-page[data-season="mothers-day"] {
  --gc-accent: #E0BC8F;
  --gc-accent-soft: rgba(224, 188, 143, 0.62);
  --gc-accent-glow: rgba(224, 188, 143, 0.22);
  --gc-accent-glow-soft: rgba(224, 188, 143, 0.12);
  --gc-accent-foil: rgba(224, 188, 143, 0.5);
  --gc-accent-foil-soft: rgba(224, 188, 143, 0.62);
  --gc-accent-text: rgba(224, 188, 143, 0.92);
  --gc-accent-shadow: rgba(224, 188, 143, 0.32);
}

/* — Father's Day: aqua / mineral cool ——————————— */
.gc-page[data-season="fathers-day"] {
  --gc-accent: #7FC0C4;
  --gc-accent-soft: rgba(127, 192, 196, 0.6);
  --gc-accent-glow: rgba(127, 192, 196, 0.22);
  --gc-accent-glow-soft: rgba(127, 192, 196, 0.12);
  --gc-accent-foil: rgba(127, 192, 196, 0.5);
  --gc-accent-foil-soft: rgba(127, 192, 196, 0.6);
  --gc-accent-text: rgba(127, 192, 196, 0.95);
  --gc-accent-shadow: rgba(127, 192, 196, 0.32);
}

/* — 4th of July: very-patriotic red / white / blue ———
   The accent rail is navy so it reads on Deep Teal; red shows
   up through fireworks + the ribbon override below. */
.gc-page[data-season="fourth-of-july"] {
  --gc-accent: #4A78C2;
  --gc-accent-soft: rgba(74, 120, 194, 0.6);
  --gc-accent-glow: rgba(74, 120, 194, 0.28);
  --gc-accent-glow-soft: rgba(74, 120, 194, 0.14);
  --gc-accent-foil: rgba(245, 241, 227, 0.5);
  --gc-accent-foil-soft: rgba(245, 241, 227, 0.6);
  --gc-accent-text: rgba(245, 241, 227, 0.92);
  --gc-accent-shadow: rgba(27, 59, 111, 0.4);
}
/* The ribbon goes RED so red/white/blue are all represented on
   the card. White-cream text on saturated red. */
.gc-page[data-season="fourth-of-july"] .gc-card-ribbon {
  background: #B22234;
  color: #F5F1E3;
  box-shadow: 0 6px 14px rgba(120, 20, 32, 0.35);
}
.gc-page[data-season="fourth-of-july"] .gc-card-foot .gold-bar {
  background: linear-gradient(
    to right,
    #B22234 0 12px,
    #F5F1E3 12px 24px,
    #1B3B6F 24px 36px
  );
}
.gc-page[data-season="fourth-of-july"] .gc-final .gold-line {
  background: linear-gradient(
    to right,
    #B22234 0 33%,
    #F5F1E3 33% 66%,
    #1B3B6F 66% 100%
  );
}

/* — Veterans Day: woodland camo over olive base ———
   Accent color (--gc-accent) stays a flat muted olive so text,
   eyebrows, and thin rules read cleanly. A separate variable
   --gc-accent-pattern carries a tileable SVG camo applied to
   filled surfaces (button, ribbon, gold-bar) where the pattern
   has room to read. */
.gc-page[data-season="veterans-day"] {
  --gc-accent: #5C6B3E;
  --gc-accent-soft: rgba(92, 107, 62, 0.55);
  --gc-accent-glow: rgba(92, 107, 62, 0.22);
  --gc-accent-glow-soft: rgba(92, 107, 62, 0.12);
  --gc-accent-foil: rgba(92, 107, 62, 0.55);
  --gc-accent-foil-soft: rgba(216, 183, 124, 0.5);
  --gc-accent-text: rgba(232, 220, 196, 0.92);
  --gc-accent-shadow: rgba(60, 70, 40, 0.35);
  --gc-accent-pattern:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'><rect width='110' height='110' fill='%238A8862'/><path d='M-5,18 C12,4 32,8 40,22 C46,34 28,40 14,36 C2,32 -10,26 -5,18 Z' fill='%234A5232'/><path d='M65,2 C82,6 98,22 92,36 C86,46 64,42 56,28 C50,16 56,-2 65,2 Z' fill='%236B7548'/><path d='M2,58 C20,50 42,58 40,74 C38,86 18,90 6,82 C-4,75 -8,62 2,58 Z' fill='%235C4A30'/><path d='M60,60 C78,55 96,66 92,80 C88,92 68,94 58,84 C48,75 48,62 60,60 Z' fill='%233D4628'/><path d='M82,28 C92,30 100,40 96,50 C92,58 80,56 76,46 C74,38 74,26 82,28 Z' fill='%23A89F7E'/></svg>");
}

/* Veterans Day — pattern applied to filled surfaces only */
.gc-page[data-season="veterans-day"] .btn-gold {
  background-color: #8A8862;
  background-image: var(--gc-accent-pattern);
  background-size: 110px 110px;
  color: var(--c-ivory);
  text-shadow: 0 1px 2px rgba(40, 50, 25, 0.45);
}
.gc-page[data-season="veterans-day"] .gc-card-ribbon {
  background-color: #8A8862;
  background-image: var(--gc-accent-pattern);
  background-size: 110px 110px;
  color: var(--c-ivory);
  text-shadow: 0 1px 1px rgba(40, 50, 25, 0.45);
}
/* Thin accents (2px bars / lines) — use solid olive; pattern would
   compress to noise at that height. */
.gc-page[data-season="veterans-day"] .gc-card-foot .gold-bar,
.gc-page[data-season="veterans-day"] .gc-final .gold-line {
  background: var(--gc-accent);
}
/* Card-edge foil — keep a subtle warm gold foil so the card still
   reads as premium. The cream foil var is set above. */

/* — Holidays: evergreen ——————————————————————— */
.gc-page[data-season="christmas"] {
  --gc-accent: #6E9883;
  --gc-accent-soft: rgba(110, 152, 131, 0.65);
  --gc-accent-glow: rgba(110, 152, 131, 0.22);
  --gc-accent-glow-soft: rgba(110, 152, 131, 0.12);
  --gc-accent-foil: rgba(110, 152, 131, 0.55);
  --gc-accent-foil-soft: rgba(110, 152, 131, 0.65);
  --gc-accent-text: rgba(110, 152, 131, 0.95);
  --gc-accent-shadow: rgba(110, 152, 131, 0.32);
}

/* — Birthday: warm gold (same default vibe, brighter glow) ——— */
.gc-page[data-season="birthday"] {
  --gc-accent: #D8B77C;
  --gc-accent-glow: rgba(216, 183, 124, 0.28);
  --gc-accent-glow-soft: rgba(216, 183, 124, 0.14);
}

/* ---------- CTA button accent inherits the theme ----------- */
/* On Deep Teal backgrounds (hero + final CTA) the gold pill becomes
   the season accent. Text stays Deep Teal for contrast — works for
   the lighter accents (gold, blush, mint, aqua). */
.gc-page .btn-gold {
  background: var(--gc-accent);
  color: var(--c-deep);
}
@media (hover: hover) and (pointer: fine) {
  .gc-page .btn-gold:hover {
    box-shadow: 0 6px 20px var(--gc-accent-shadow);
  }
}

/* Ivory hero (LOCKED direction): the hero CTA is the solid Deep Teal
   primary button — the visual anchor of the light hero — not a gold
   pill. The accent pill remains on the Deep Teal final CTA only. */
.gc-page .gc-hero .btn-gold {
  background: var(--c-deep);
  color: var(--c-ivory);
}
@media (hover: hover) and (pointer: fine) {
  .gc-page .gc-hero .btn-gold:hover {
    box-shadow: 0 6px 20px rgba(15, 79, 87, 0.22);
  }
}

/* ---------- Seasonal ribbon (top of card) ----------- */
.gc-card-ribbon {
  position: absolute;
  top: -10px;
  right: 24px;
  z-index: 2;
  background: var(--gc-accent);
  color: var(--c-deep);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .gc-card-ribbon { right: 16px; top: -8px; font-size: 10px; padding: 5px 10px; }
}


/* ============================================================
   Seasonal decorations
   ============================================================
   All decoration layers live INSIDE .gc-hero (a position:relative
   container) so they cannot bleed into the Header or Footer. They
   are pointer-events:none and aria-hidden via the parent component.
   Hero content uses z-index:1 so it sits above decorations.
   ============================================================ */

.gc-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.gc-hero-inner { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .gc-decor * { animation: none !important; }
}

/* ---------- Christmas string lights ---------- */
.gc-lights-wire {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 80px;
  display: block;
  z-index: 0;
}
.gc-lights {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 1;
}
.gc-light {
  position: absolute;
  top: 28px;
  width: 12px;
  height: 16px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: translateX(-50%);
  animation: gc-light-twinkle 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px currentColor);
}
.gc-light::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 4px;
  border-radius: 2px 2px 0 0;
  background: #555;
}
.gc-light-0 { background: #E84545; color: #E84545; }
.gc-light-1 { background: #F4C95D; color: #F4C95D; }
.gc-light-2 { background: #6AB7C2; color: #6AB7C2; }
.gc-light-3 { background: #6FA081; color: #6FA081; }
@keyframes gc-light-twinkle {
  0%, 100% { opacity: 1;   filter: drop-shadow(0 0 8px currentColor); }
  50%      { opacity: 0.55; filter: drop-shadow(0 0 3px currentColor); }
}

/* ---------- Valentine's hearts ---------- */
.gc-hearts {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gc-heart {
  position: absolute;
  bottom: -40px;
  color: var(--gc-accent);
  opacity: 0;
  animation: gc-heart-rise linear infinite;
  will-change: transform, opacity;
}
.gc-heart svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(214, 154, 162, 0.35));
}
@keyframes gc-heart-rise {
  0%   { transform: translateY(0) rotate(-6deg);    opacity: 0; }
  10%  { opacity: 0.85; }
  50%  { transform: translateY(-50vh) rotate(8deg); }
  90%  { opacity: 0.85; }
  100% { transform: translateY(-110vh) rotate(-4deg); opacity: 0; }
}

/* ---------- New Year fireworks + confetti ---------- */
.gc-fireworks {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gc-firework {
  position: absolute;
  width: 120px;
  height: 120px;
  margin-left: -60px;
  margin-top: -60px;
  color: var(--gc-accent);
  opacity: 0;
  animation: gc-firework-burst 5s ease-out infinite;
  transform-origin: center;
}
.gc-firework svg { width: 100%; height: 100%; display: block; }
@keyframes gc-firework-burst {
  0%   { opacity: 0; transform: scale(var(--s, 1)) scale(0.1); }
  8%   { opacity: 1; transform: scale(var(--s, 1)) scale(0.4); }
  20%  { opacity: 1; transform: scale(var(--s, 1)) scale(1); }
  35%  { opacity: 0; transform: scale(var(--s, 1)) scale(1.2); }
  100% { opacity: 0; transform: scale(var(--s, 1)) scale(1.2); }
}

.gc-confetti {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gc-conf {
  position: absolute;
  top: -20px;
  width: 6px;
  height: 12px;
  border-radius: 1px;
  opacity: 0;
  animation: gc-confetti-fall linear infinite;
}
.gc-conf-gold  { background: var(--gc-accent); }
.gc-conf-ivory { background: var(--c-aqua); }
@keyframes gc-confetti-fall {
  0%   { transform: translateY(0)      rotate(0deg);   opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translateY(110vh)  rotate(720deg); opacity: 0.85; }
}

/* ---------- Mother's Day petals ---------- */
.gc-petals {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gc-petal {
  position: absolute;
  top: -40px;
  border-radius: 50% 0 50% 0;
  background: linear-gradient(135deg, rgba(224, 188, 143, 0.95), rgba(232, 201, 174, 0.7));
  opacity: 0;
  animation: gc-petal-fall linear infinite;
  transform-origin: center;
  filter: drop-shadow(0 4px 8px rgba(224, 188, 143, 0.25));
}
@keyframes gc-petal-fall {
  0%   { transform: translate(0, 0)      rotate(0deg);    opacity: 0; }
  8%   { opacity: 0.95; }
  50%  { transform: translate(28px, 50vh) rotate(180deg); }
  100% { transform: translate(-12px, 110vh) rotate(360deg); opacity: 0; }
}

/* ---------- Father's Day stars ---------- */
.gc-stars {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gc-star {
  position: absolute;
  background: var(--gc-accent);
  border-radius: 50%;
  opacity: 0;
  box-shadow:
    0 0 4px var(--gc-accent),
    0 0 12px var(--gc-accent-glow);
  animation: gc-star-twinkle 4s ease-in-out infinite;
}
.gc-star::before, .gc-star::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gc-accent);
  border-radius: 1px;
}
.gc-star::before { transform: scaleX(3); }
.gc-star::after  { transform: scaleY(3); }
@keyframes gc-star-twinkle {
  0%, 100% { opacity: 0.2;  transform: scale(0.8); }
  50%      { opacity: 0.95; transform: scale(1.1); }
}

/* ---------- Birthday balloons + sparkles ---------- */
.gc-balloons {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gc-balloon {
  position: absolute;
  bottom: -60px;
  width: 36px;
  height: 44px;
  opacity: 0;
  animation: gc-balloon-rise linear infinite;
}
.gc-balloon-bulb {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  box-shadow:
    inset -6px -10px 14px rgba(0,0,0,0.18),
    inset 6px 6px 10px rgba(255,255,255,0.25),
    0 8px 16px rgba(0,0,0,0.18);
}
.gc-balloon-bulb::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid currentColor;
  opacity: 0.85;
}
.gc-balloon-string {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 60px;
  background: rgba(255,255,255,0.35);
  transform: translateX(-50%);
}
.gc-balloon-a .gc-balloon-bulb { background: #D89A9A; color: #D89A9A; }
.gc-balloon-b .gc-balloon-bulb { background: #E0BC8F; color: #E0BC8F; }
.gc-balloon-c .gc-balloon-bulb { background: #7FB7C0; color: #7FB7C0; }
@keyframes gc-balloon-rise {
  0%   { transform: translateY(0)      translateX(0);   opacity: 0; }
  8%   { opacity: 0.95; }
  50%  { transform: translateY(-50vh)  translateX(20px); }
  100% { transform: translateY(-120vh) translateX(-12px); opacity: 0; }
}

.gc-sparkles {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gc-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, var(--gc-accent), transparent 70%);
  border-radius: 50%;
  opacity: 0;
  animation: gc-sparkle-pulse 3s ease-in-out infinite;
}
@keyframes gc-sparkle-pulse {
  0%, 100% { opacity: 0;   transform: scale(0.6); }
  50%      { opacity: 1;   transform: scale(1.4); }
}

/* ---------- Veterans Day stars ---------- */
.gc-vstars {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gc-vstar {
  position: absolute;
  bottom: -30px;
  color: var(--gc-accent-foil, rgba(232, 220, 196, 0.9));
  opacity: 0;
  animation: gc-vstar-drift linear infinite;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  will-change: transform, opacity;
}
.gc-vstar svg { width: 100%; height: 100%; display: block; }
@keyframes gc-vstar-drift {
  0%   { transform: translateY(0)      rotate(-4deg); opacity: 0; }
  10%  { opacity: 0.85; }
  50%  { transform: translateY(-50vh)  rotate(6deg); }
  90%  { opacity: 0.85; }
  100% { transform: translateY(-110vh) rotate(-2deg); opacity: 0; }
}

/* ---------- 4th of July ----------
   Re-uses the firework burst keyframe from New Year, but each
   burst is colored independently (red / white / blue). Flags rise
   and gently sway. Star confetti drifts in patriotic colors. */
.gc-fireworks-july .gc-firework-red   { color: #B22234; }
.gc-fireworks-july .gc-firework-white { color: #F5F1E3; }
.gc-fireworks-july .gc-firework-blue  { color: #4A78C2; }

.gc-flags {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gc-flag {
  position: absolute;
  bottom: -50px;
  width: 36px;
  height: 24px;
  opacity: 0;
  animation:
    gc-flag-rise linear infinite,
    gc-flag-wave 2.4s ease-in-out infinite;
  transform-origin: left center;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  will-change: transform, opacity;
}
.gc-flag svg { width: 100%; height: 100%; display: block; }
@keyframes gc-flag-rise {
  0%   { transform: translateY(0)      rotate(-2deg); opacity: 0; }
  10%  { opacity: 0.95; }
  50%  { transform: translateY(-50vh)  rotate(3deg); }
  90%  { opacity: 0.95; }
  100% { transform: translateY(-110vh) rotate(-1deg); opacity: 0; }
}
/* Subtle wave — applies a tiny horizontal skew so the flag looks
   like it's catching a breeze as it rises. */
@keyframes gc-flag-wave {
  0%, 100% { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) skewX(-3deg); }
  50%      { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) skewX(3deg); }
}

.gc-jstars {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gc-jstar {
  position: absolute;
  bottom: -30px;
  width: 14px;
  height: 14px;
  opacity: 0;
  animation: gc-jstar-drift linear infinite;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
.gc-jstar svg { width: 100%; height: 100%; display: block; }
.gc-jstar-red   { color: #B22234; }
.gc-jstar-white { color: #F5F1E3; }
.gc-jstar-blue  { color: #4A78C2; }
@keyframes gc-jstar-drift {
  0%   { transform: translateY(0)      rotate(-8deg); opacity: 0; }
  10%  { opacity: 0.85; }
  50%  { transform: translateY(-50vh)  rotate(12deg); }
  90%  { opacity: 0.85; }
  100% { transform: translateY(-110vh) rotate(-4deg); opacity: 0; }
}