/* Binary Star v3 — CSS Orbs + GPU Blur */
/* Cinematic hero background for ainaryventures.com */

.binary-star-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0a0a0b;
  z-index: 0;
}

/* ─── Orbs ─── */
.binary-star-scene .orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
  mix-blend-mode: screen;
  pointer-events: none;
}

.binary-star-scene .orb--gold {
  width: 340px;
  height: 340px;
  background: radial-gradient(circle at 45% 45%,
    #e8c84a 0%,
    #c8aa50 25%,
    #a08030 50%,
    transparent 72%
  );
  filter: blur(72px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: drift-silver 72s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  opacity: 0.6;
}

.binary-star-scene .orb--silver {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle at 55% 45%,
    #ffffff 0%,
    #e8f0ff 20%,
    #b0c4e8 45%,
    transparent 70%
  );
  filter: blur(68px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: drift-gold 72s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  opacity: 0.55;
}

/* Secondary glow layers for depth */
.binary-star-scene .orb--gold::after,
.binary-star-scene .orb--silver::after {
  content: '';
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  opacity: 0.3;
  filter: blur(40px);
  mix-blend-mode: screen;
}

.binary-star-scene .orb--gold::after {
  background: radial-gradient(circle, #c8aa50 0%, transparent 60%);
  animation: breathe 8s ease-in-out infinite;
}

.binary-star-scene .orb--silver::after {
  background: radial-gradient(circle, #e8f0ff 0%, transparent 60%);
  animation: breathe 10s ease-in-out infinite 2s;
}

/* ─── Luminous Bridge ─── */
.binary-star-scene .bridge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 6px;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  pointer-events: none;
  animation: bridge-drift 72s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.binary-star-scene .bridge__core {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #c8aa5000 0%,
    #c8aa5035 15%,
    #d4c48022 35%,
    #c0d0e822 65%,
    #e8f0ff35 85%,
    #e8f0ff00 100%
  );
  filter: blur(18px);
  mix-blend-mode: screen;
  border-radius: 50%;
  animation: bridge-breathe 6s ease-in-out infinite;
}

.binary-star-scene .bridge__halo {
  position: absolute;
  inset: -12px -20px;
  background: linear-gradient(90deg,
    transparent 0%,
    #c8aa5012 20%,
    #dde4f010 50%,
    #e8f0ff12 80%,
    transparent 100%
  );
  filter: blur(30px);
  mix-blend-mode: screen;
  border-radius: 50%;
  animation: bridge-breathe 8s ease-in-out infinite 1s;
}

/* ─── Ambient Stars ─── */
.binary-star-scene .ambient-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.binary-star-scene .star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  will-change: opacity;
}

.binary-star-scene .star--bright {
  width: 1.5px;
  height: 1.5px;
  box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.15);
}

.binary-star-scene .star--dim {
  width: 1px;
  height: 1px;
  opacity: 0.12;
}

/* ─── Film Grain ─── */
.binary-star-scene .grain {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  animation: grain-shift 0.5s steps(3) infinite;
  z-index: 5;
}

/* ─── Vignette ─── */
.binary-star-scene .vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    transparent 0%,
    rgba(10, 10, 11, 0.3) 55%,
    rgba(10, 10, 11, 0.75) 85%,
    #0a0a0b 100%
  );
  pointer-events: none;
  z-index: 4;
}

/* ─── Hero Text ─── */
.binary-star-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.binary-star-hero__content {
  text-align: center;
  z-index: 10;
  pointer-events: auto;
}

.binary-star-hero__title {
  font-family: -apple-system, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: #f0f0f2;
  margin: 0;
  text-shadow: 0 0 80px rgba(200, 170, 80, 0.08);
}

.binary-star-hero__sub {
  font-family: -apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 400;
  color: rgba(232, 240, 255, 0.45);
  margin-top: 1.2rem;
  letter-spacing: 0.01em;
}

/* ─── Keyframes ─── */
@keyframes drift-gold {
  0%   { transform: translate(calc(-50% - 120px), calc(-50% - 10px)) scale(1); }
  25%  { transform: translate(calc(-50% - 90px),  calc(-50% + 20px)) scale(1.04); }
  50%  { transform: translate(calc(-50% - 130px), calc(-50% + 5px)) scale(0.97); }
  75%  { transform: translate(calc(-50% - 100px), calc(-50% - 15px)) scale(1.02); }
  100% { transform: translate(calc(-50% - 120px), calc(-50% - 10px)) scale(1); }
}

@keyframes drift-silver {
  0%   { transform: translate(calc(-50% + 120px), calc(-50% - 15px)) scale(1); }
  25%  { transform: translate(calc(-50% + 90px),  calc(-50% + 15px)) scale(0.97); }
  50%  { transform: translate(calc(-50% + 130px), calc(-50% + 0px)) scale(1.03); }
  75%  { transform: translate(calc(-50% + 100px), calc(-50% - 20px)) scale(0.98); }
  100% { transform: translate(calc(-50% + 120px), calc(-50% - 15px)) scale(1); }
}

@keyframes bridge-drift {
  0%   { transform: translate(-50%, calc(-50% - 10px)) rotate(-2deg); }
  25%  { transform: translate(calc(-50% - 5px), calc(-50% - 7px)) rotate(1deg); }
  50%  { transform: translate(calc(-50% + 2px), calc(-50% - 12px)) rotate(-1deg); }
  75%  { transform: translate(calc(-50% - 3px), calc(-50% - 9px)) rotate(2deg); }
  100% { transform: translate(-50%, calc(-50% - 10px)) rotate(-2deg); }
}

@keyframes breathe {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%      { opacity: 0.4;  transform: scale(1.08); }
}

@keyframes bridge-breathe {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

@keyframes twinkle {
  0%, 100% { opacity: var(--star-base, 0.6); }
  50%      { opacity: var(--star-peak, 1); }
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, -3%); }
  66%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}