/* ============================================================
   CodebyCarter — insta-button.css
   The "trick" Instagram follow card. Looks like the codebycarter
   wordmark on a luxury card; on hover reveals it's actually a
   "follow on Instagram" link. Sneaky-clever conversion.
   ============================================================ */

.insta-bait{
  margin:60px auto 0;max-width:680px;
  padding:0 24px;text-align:center;
}

.insta-bait-link{
  display:block;
  position:relative;
  background:linear-gradient(165deg, #0A0A08 0%, #1A1610 50%, #0A0A08 100%);
  border:1px solid rgba(212,164,55,.30);
  border-radius:22px;
  padding:48px 36px;
  text-decoration:none;
  overflow:hidden;
  cursor:none;
  transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease;
  isolation:isolate;
}

/* Subtle warm glow inside */
.insta-bait-link::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(700px 400px at 50% 80%, rgba(212,164,55,.15), transparent 60%),
    radial-gradient(500px 300px at 50% 0%, rgba(168,85,247,.06), transparent 60%);
}

/* Insta gradient that bleeds in on hover (subtle teaser) */
.insta-bait-link::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg, #FCAF45 0%, #E1306C 35%, #C13584 60%, #833AB4 85%, #5851DB 100%);
  opacity:0;
  transition:opacity .55s ease;
}

.insta-bait-link:hover{
  transform:translateY(-4px);
  border-color:transparent;
  box-shadow:
    0 30px 70px -16px rgba(225,48,108,.45),
    0 0 0 1px rgba(252,175,69,.30);
}
.insta-bait-link:hover::after{opacity:.92}

/* === Top tag ("Studio" or "Built by" eyebrow) === */
.insta-bait-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.30em;text-transform:uppercase;
  color:rgba(200,169,81,.65);font-weight:700;
  margin-bottom:24px;display:inline-flex;align-items:center;gap:14px;
  transition:color .35s ease;
}
.insta-bait-eyebrow::before,
.insta-bait-eyebrow::after{
  content:"";width:30px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(200,169,81,.55), transparent);
}
.insta-bait-link:hover .insta-bait-eyebrow{color:rgba(255,255,255,.95)}
.insta-bait-link:hover .insta-bait-eyebrow::before,
.insta-bait-link:hover .insta-bait-eyebrow::after{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
}

/* === The wordmark — full italic-serif "codebycarter." === */
.insta-bait-mark{
  display:block;
  font-family:'Instrument Serif',serif;
  font-style:italic;font-weight:400;
  font-size:clamp(48px,8vw,108px);
  line-height:.95;
  letter-spacing:-.035em;
  color:#F2EDE0;
  text-shadow:0 6px 30px rgba(212,164,55,.18);
  transition:color .35s ease, text-shadow .35s ease;
}
.insta-bait-mark .bait-c{
  display:inline-block;
  font-size:1.20em;
  letter-spacing:-.10em;
  margin-right:-2px;
  background:linear-gradient(135deg, #FFE8A0 0%, #D4A437 50%, #B58620 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  filter:drop-shadow(0 4px 14px rgba(212,164,55,.30));
  transition:background .55s ease, -webkit-text-fill-color .55s ease;
}
.insta-bait-mark .bait-period{
  display:inline-block;margin-left:2px;
  background:linear-gradient(135deg, #FFE8A0 0%, #D4A437 50%, #B58620 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  transition:background .55s ease;
}
.insta-bait-link:hover .insta-bait-mark{
  color:#FFFFFF;
  text-shadow:0 6px 30px rgba(225,48,108,.40);
}
.insta-bait-link:hover .insta-bait-mark .bait-c,
.insta-bait-link:hover .insta-bait-mark .bait-period{
  background:linear-gradient(135deg, #FFFFFF, #FFE8A0) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
}

/* === Hover-reveal handle/tag === */
.insta-bait-handle{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:22px;
  font-family:'JetBrains Mono',monospace;
  font-size:13px;letter-spacing:.06em;font-weight:600;
  color:rgba(200,169,81,.65);
  transition:color .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.insta-bait-handle-icon{
  display:inline-grid;place-items:center;
  width:26px;height:26px;border-radius:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(200,169,81,.30);
  transition:background .45s ease, border-color .45s ease, transform .45s ease;
}
.insta-bait-handle-icon svg{display:block;color:rgba(212,164,55,.85);transition:color .45s ease}
.insta-bait-link:hover .insta-bait-handle{color:#FFFFFF;transform:translateY(-2px)}
.insta-bait-link:hover .insta-bait-handle-icon{
  background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.45);
  transform:rotate(-8deg) scale(1.1);
}
.insta-bait-link:hover .insta-bait-handle-icon svg{color:#FFFFFF}

/* === Subtle reveal text "Follow @codebycarter" === */
.insta-bait-foot{
  margin-top:30px;
  font-family:'Helvetica',Arial,sans-serif;
  font-size:12px;letter-spacing:.04em;
  color:rgba(245,239,224,.45);
  display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;border-top:1px solid rgba(200,169,81,.18);
  transition:color .35s ease, border-color .35s ease;
}
.insta-bait-foot b{color:rgba(245,239,224,.75);font-weight:600}
.insta-bait-link:hover .insta-bait-foot{color:rgba(255,255,255,.85);border-top-color:rgba(255,255,255,.30)}
.insta-bait-link:hover .insta-bait-foot b{color:#FFFFFF}

/* === Mobile === */
@media (max-width:600px){
  .insta-bait-link{padding:36px 24px}
  .insta-bait-foot{flex-direction:column;gap:8px;text-align:center}
}

/* === Theme overrides — keep card visible per theme === */
body[data-theme="red"] .insta-bait-link{
  background:linear-gradient(165deg, #150A0C 0%, #2A1218 50%, #0E0606 100%) !important;
  border-color:rgba(220,38,38,.30) !important;
}
body[data-theme="red"] .insta-bait-mark .bait-c,
body[data-theme="red"] .insta-bait-mark .bait-period{
  background:linear-gradient(135deg, #FF8090, #DC143C) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
}
body[data-theme="red"] .insta-bait-eyebrow{color:rgba(255,128,144,.65) !important}

body[data-theme="luxe"] .insta-bait-link{
  background:linear-gradient(165deg, #08152C 0%, #0F2545 50%, #050B14 100%) !important;
  border-color:rgba(91,224,250,.30) !important;
}
body[data-theme="luxe"] .insta-bait-mark .bait-c,
body[data-theme="luxe"] .insta-bait-mark .bait-period{
  background:linear-gradient(135deg, #5BE0FA, #2DA8E0) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
}
body[data-theme="luxe"] .insta-bait-eyebrow{color:rgba(91,224,250,.65) !important}

body[data-theme="editorial"] .insta-bait-link{
  background:linear-gradient(165deg, #FFFFFF 0%, #F5F2EC 50%, #FAF4E8 100%) !important;
  border-color:rgba(192,65,39,.30) !important;
}
body[data-theme="editorial"] .insta-bait-link::before{
  background:radial-gradient(700px 400px at 50% 80%, rgba(192,65,39,.10), transparent 60%) !important;
}
body[data-theme="editorial"] .insta-bait-mark{color:#1E1A14 !important;text-shadow:none !important}
body[data-theme="editorial"] .insta-bait-mark .bait-c,
body[data-theme="editorial"] .insta-bait-mark .bait-period{
  background:none !important;-webkit-background-clip:initial !important;
  -webkit-text-fill-color:#C04127 !important;color:#C04127 !important;
}
body[data-theme="editorial"] .insta-bait-eyebrow{color:#9E9EA8 !important}
body[data-theme="editorial"] .insta-bait-foot{color:#6E6E7A !important;border-top-color:rgba(192,65,39,.20) !important}
body[data-theme="editorial"] .insta-bait-foot b{color:#1E1A14 !important}
body[data-theme="editorial"] .insta-bait-handle{color:#6E6E7A !important}
body[data-theme="editorial"] .insta-bait-handle-icon{background:rgba(192,65,39,.06) !important;border-color:rgba(192,65,39,.30) !important}
body[data-theme="editorial"] .insta-bait-handle-icon svg{color:#C04127 !important}