/* ═══════════════════════════════════════════════
   React Bits wild redesign — rb-effects.css
═══════════════════════════════════════════════ */

/* ── Aurora ── */
#rb-aurora {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}


/* ── Rotating gradient border on main card ── */
@property --rb-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rb-border-spin { to { --rb-angle: 360deg; } }

.main-card {
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(transparent, transparent) padding-box,
    conic-gradient(
      from var(--rb-angle),
      rgba(45,125,210,0.9) 0%,
      rgba(124,58,237,0.9) 33%,
      rgba(168,85,247,0.9) 66%,
      rgba(45,125,210,0.9) 100%
    ) border-box !important;
  animation: rb-border-spin 5s linear infinite;
  position: relative;
  overflow: hidden;
}

/* Sidebar cards: subtler animated border */
.sidebar-card {
  border: 1px solid transparent !important;
  background:
    linear-gradient(transparent, transparent) padding-box,
    conic-gradient(
      from var(--rb-angle),
      rgba(45,125,210,0.4) 0%,
      rgba(124,58,237,0.4) 50%,
      rgba(45,125,210,0.4) 100%
    ) border-box !important;
  animation: rb-border-spin 8s linear infinite;
  position: relative;
  overflow: hidden;
}

/* ── SpotlightCard glow on hover ── */
.main-card::before,
.sidebar-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--rb-mx, 50%) var(--rb-my, 50%),
    rgba(45,125,210, 0.14),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 0;
}
.main-card:hover::before,
.sidebar-card:hover::before { opacity: 1; }

.main-card > *, .sidebar-card > * { position: relative; z-index: 1; }

/* ── 3D Card Tilt ── */
.main-card {
  transform:
    perspective(900px)
    rotateX(var(--rb-rx, 0deg))
    rotateY(var(--rb-ry, 0deg));
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.7s ease;
  will-change: transform;
}

.main-card:hover {
  box-shadow:
    0 30px 80px rgba(45,125,210, 0.25),
    0 8px 32px rgba(124, 58, 237, 0.15),
    0 2px 8px rgba(0,0,0,0.6) !important;
}

/* ── Header: animated glow underline ── */
header {
  position: relative;
}

header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #2D7DD2, #7c3aed, #2D7DD2, transparent);
  background-size: 200% 100%;
  animation: rb-header-line 4s linear infinite;
  opacity: 0.7;
}

@keyframes rb-header-line {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ── Logo glow pulse ── */
.logo {
  animation: rb-logo-pulse 3s ease-in-out infinite;
}
@keyframes rb-logo-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.25); }
  50%       { box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 30px rgba(45,125,210,0.35); }
}

/* ── Upgrade button: star border + glow ── */
.btn-upgrade {
  position: relative;
  overflow: hidden;
  animation: rb-upgrade-glow 2.5s ease-in-out infinite;
}

@keyframes rb-upgrade-glow {
  0%, 100% { box-shadow: 0 4px 18px rgba(255,183,0,0.4), inset 0 1px 0 rgba(255,255,255,0.45); }
  50%       { box-shadow: 0 6px 28px rgba(255,183,0,0.7), 0 0 40px rgba(255,160,0,0.35), inset 0 1px 0 rgba(255,255,255,0.5); }
}

.rb-star-top, .rb-star-bottom {
  position: absolute;
  width: 300%;
  height: 50%;
  opacity: 0.85;
  border-radius: 50%;
  pointer-events: none;
}
.rb-star-top {
  top: -12px; left: -250%;
  background: radial-gradient(circle, #ffe066, transparent 12%);
  animation: rb-star-top 4s linear infinite alternate;
}
.rb-star-bottom {
  bottom: -12px; right: -250%;
  background: radial-gradient(circle, #ffb300, transparent 12%);
  animation: rb-star-bottom 4s linear infinite alternate;
}
@keyframes rb-star-top {
  0%   { transform: translate(0%,0%);   opacity: 1; }
  100% { transform: translate(100%,0%); opacity: 0; }
}
@keyframes rb-star-bottom {
  0%   { transform: translate(0%,0%);    opacity: 1; }
  100% { transform: translate(-100%,0%); opacity: 0; }
}

/* ── Login button: glare sweep ── */
.btn-login {
  position: relative;
  overflow: hidden;
}
.btn-login::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, rgba(0,0,0,0) 55%, rgba(255,255,255,0.28) 65%, rgba(0,0,0,0) 100%);
  background-size: 250% 250%;
  background-position: -100% -100%;
  transition: background-position 550ms ease;
  pointer-events: none;
}
.btn-login:hover::before { background-position: 100% 100%; }

/* ── Offer badge shimmer ── */
@keyframes rb-badge-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.offer-badge {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(105deg, rgba(255,215,0,0) 35%, rgba(255,215,0,0.4) 50%, rgba(255,215,0,0) 65%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: rb-badge-shimmer 3.5s ease-in-out infinite;
}

/* ── How-it-works steps: stagger fade up ── */
.hiw-step, .hiw-step-v {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.hiw-step.rb-visible, .hiw-step-v.rb-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Card header: gradient text ── */
.card-header {
  background: linear-gradient(135deg, #e5e7eb 0%, #2D7DD2 50%, #a855f7 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rb-header-gradient 6s linear infinite alternate;
  transition: none;
}
@keyframes rb-header-gradient {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── RotatingText ── */
.header-tagline span {
  display: inline-block;
  color: var(--teal);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ── ClickSpark canvas ── */
#rb-spark-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99999;
}

/* ── Sidebar card hover lift ── */
.sidebar-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.sidebar-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(45,125,210,0.15) !important;
}

/* ── Panel glow on hover ── */
.panel {
  transition: box-shadow 0.3s ease;
}
.panel:hover {
  box-shadow: 0 0 30px rgba(45,125,210,0.08) inset !important;
}

/* ── Drop zone: teal pulse on hover ── */
.drop-zone:hover, .drop-zone-clickable:hover {
  border-color: var(--teal) !important;
  box-shadow: 0 0 20px rgba(45,125,210,0.2), 0 0 0 3px rgba(45,125,210,0.08) !important;
  animation: rb-dropzone-pulse 1.5s ease-in-out infinite;
}
@keyframes rb-dropzone-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(45,125,210,0.2), 0 0 0 3px rgba(45,125,210,0.08); }
  50%       { box-shadow: 0 0 30px rgba(45,125,210,0.4), 0 0 0 6px rgba(45,125,210,0.12); }
}

/* ── Animated gradient on generate/primary buttons ── */
.btn-generate, .btn-primary {
  background: linear-gradient(135deg, #2D7DD2, #1E6BC0, #7c3aed) !important;
  background-size: 200% 200% !important;
  animation: rb-btn-shimmer 3s ease infinite !important;
  border: none !important;
  color: #fff !important;
}
@keyframes rb-btn-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Result card: glow border on hover ── */
.result-card {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.result-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 40px rgba(45,125,210,0.2) !important;
}

/* ── Footer: gradient top border ── */
footer::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, #2D7DD2 30%, #7c3aed 70%, transparent);
  opacity: 0.5;
  margin-bottom: 0;
}