/* ==========================================================================
   IBTDI V52 — Hero concept: Digital Horizon
   A distinct orbital launch scene replacing the previous side-glow mesh.
   ========================================================================== */

.ibtdi_hero_future{
  --v52-cyan:#55dfff;
  --v52-blue:#4f7cff;
  --v52-ice:#c6f4ff;
  --v52-deep:#030711;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 62%,rgba(31,117,187,.17),transparent 35%),
    radial-gradient(ellipse at 12% 18%,rgba(31,75,130,.11),transparent 28%),
    linear-gradient(180deg,#02050c 0%,#050b18 48%,#061222 100%)!important;
}

/* Retire the old drifting color mesh and replace it with quiet atmosphere. */
.ibtdi_hero_future:before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  background:
    radial-gradient(ellipse at 50% 36%,rgba(39,126,201,.13),transparent 29%),
    radial-gradient(ellipse at 50% 73%,rgba(85,223,255,.11),transparent 27%),
    linear-gradient(108deg,transparent 15%,rgba(108,193,255,.035) 50%,transparent 85%)!important;
  opacity:1!important;
  transform:none!important;
  animation:v52Atmosphere 11s ease-in-out infinite alternate!important;
  pointer-events:none;
}

.ibtdi_hero_future:after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  width:auto!important;
  background:
    radial-gradient(circle at 8% 23%,rgba(216,246,255,.8) 0 1px,transparent 1.5px),
    radial-gradient(circle at 17% 67%,rgba(119,202,255,.65) 0 1px,transparent 1.5px),
    radial-gradient(circle at 29% 12%,rgba(216,246,255,.55) 0 1px,transparent 1.5px),
    radial-gradient(circle at 72% 19%,rgba(157,221,255,.75) 0 1px,transparent 1.5px),
    radial-gradient(circle at 88% 42%,rgba(216,246,255,.68) 0 1px,transparent 1.5px),
    radial-gradient(circle at 95% 73%,rgba(119,202,255,.52) 0 1px,transparent 1.5px)!important;
  background-size:100% 100%!important;
  opacity:.66!important;
  filter:none!important;
  transform:none!important;
  animation:v52Stars 6s ease-in-out infinite alternate!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 76%,transparent 96%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 76%,transparent 96%);
  pointer-events:none;
}

.future_hero_shell{
  min-height:1050px;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 30%),
    rgba(2,6,15,.18)!important;
  border-color:rgba(126,205,255,.11)!important;
  box-shadow:
    inset 0 1px 0 rgba(197,238,255,.06),
    inset 0 -1px 0 rgba(85,223,255,.08),
    0 42px 110px rgba(0,0,0,.35)!important;
  backdrop-filter:none!important;
}

.future_hero_shell:before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  background:
    linear-gradient(90deg,transparent,rgba(111,204,255,.11) 50%,transparent) 50% 61%/72% 1px no-repeat,
    radial-gradient(ellipse at 50% 61%,rgba(85,223,255,.17),transparent 25%),
    radial-gradient(ellipse at 50% 45%,rgba(41,114,180,.08),transparent 38%)!important;
  opacity:1!important;
  animation:v52HorizonBreath 5.5s ease-in-out infinite alternate!important;
  pointer-events:none;
}

.future_hero_shell:after{
  content:"";
  position:absolute;
  z-index:0;
  right:7%;
  bottom:-20%;
  left:7%;
  width:auto;
  height:50%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(43,145,209,.16),transparent 67%);
  filter:blur(18px);
  pointer-events:none;
}

/* The dedicated orbital scene. */
.hero_horizon_scene{
  position:absolute;
  z-index:0;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.hero_horizon_scene:before{
  content:"";
  position:absolute;
  top:57.5%;
  right:-6%;
  left:-6%;
  height:55%;
  background:
    repeating-linear-gradient(90deg,rgba(86,191,242,.12) 0 1px,transparent 1px 94px),
    repeating-linear-gradient(0deg,rgba(86,191,242,.105) 0 1px,transparent 1px 58px);
  transform:perspective(520px) rotateX(69deg) scale(1.35);
  transform-origin:50% 0;
  opacity:.32;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.92),transparent 82%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.92),transparent 82%);
}

.hero_horizon_scene:after{
  content:"";
  position:absolute;
  top:59.7%;
  right:10%;
  left:10%;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(85,223,255,.25),#bcefff 50%,rgba(85,223,255,.25),transparent);
  box-shadow:
    0 0 12px rgba(85,223,255,.72),
    0 0 42px rgba(56,156,221,.45),
    0 12px 55px rgba(41,142,207,.24);
  opacity:.82;
}

.horizon_eclipse{
  position:absolute;
  top:8%;
  right:50%;
  width:640px;
  height:640px;
  border-radius:50%;
  transform:translateX(50%);
  background:
    radial-gradient(circle at 50% 50%,
      rgba(3,7,17,.98) 0 54%,
      rgba(31,74,115,.96) 55.4%,
      rgba(160,230,255,.74) 56%,
      rgba(67,165,226,.28) 57.2%,
      transparent 61%);
  box-shadow:
    0 0 54px rgba(85,223,255,.10),
    inset 0 0 70px rgba(0,0,0,.48);
  opacity:.92;
}

.horizon_eclipse:before{
  content:"";
  position:absolute;
  inset:-12%;
  border-radius:50%;
  border:1px solid rgba(108,198,247,.10);
  box-shadow:0 0 55px rgba(75,179,234,.05);
}

.horizon_eclipse:after{
  content:"";
  position:absolute;
  right:12%;
  bottom:13%;
  width:16px;
  height:16px;
  border:1px solid rgba(173,232,255,.55);
  border-radius:50%;
  background:#071421;
  box-shadow:0 0 0 8px rgba(85,223,255,.035),0 0 20px rgba(85,223,255,.38);
}

.horizon_orbit{
  position:absolute;
  top:22%;
  right:50%;
  border:1px solid rgba(112,205,255,.16);
  border-radius:50%;
  transform:translateX(50%) rotate(-7deg);
}

.horizon_orbit:before,
.horizon_orbit:after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:var(--v52-ice);
  box-shadow:0 0 12px rgba(85,223,255,.92);
}

.horizon_orbit:before{top:15%;left:12%;width:5px;height:5px;}
.horizon_orbit:after{right:18%;bottom:9%;width:3px;height:3px;opacity:.72;}
.orbit_one{width:900px;height:360px;animation:v52OrbitOne 18s ease-in-out infinite alternate;}
.orbit_two{top:28%;width:1040px;height:290px;transform:translateX(50%) rotate(8deg);opacity:.62;animation:v52OrbitTwo 22s ease-in-out infinite alternate;}
.orbit_three{top:15%;width:760px;height:470px;transform:translateX(50%) rotate(19deg);opacity:.48;}

.horizon_axis{
  position:absolute;
  top:17%;
  bottom:27%;
  right:50%;
  width:1px;
  background:linear-gradient(to bottom,transparent,rgba(115,210,255,.19) 28%,rgba(115,210,255,.04) 70%,transparent);
  opacity:.7;
}

.horizon_axis:before,
.horizon_axis:after{
  content:"";
  position:absolute;
  right:50%;
  width:7px;
  height:7px;
  border:1px solid rgba(176,235,255,.65);
  border-radius:50%;
  background:#07111e;
  transform:translateX(50%);
  box-shadow:0 0 14px rgba(85,223,255,.55);
}

.horizon_axis:before{top:15%;}
.horizon_axis:after{bottom:6%;}

.future_hero_content,
.future_browser_mockup,
.future_star,
.future_label{
  z-index:2!important;
}

/* Content sits on the dark center of the eclipse for strong readability. */
.future_hero_content{
  text-shadow:0 3px 22px rgba(0,0,0,.44);
}

.future_hero_content .ibtdi_eyebrow{
  background:rgba(5,14,26,.58)!important;
  border-color:rgba(143,220,255,.25)!important;
  color:#d9f5ff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 36px rgba(0,0,0,.16);
  backdrop-filter:blur(12px);
}

.future_browser_mockup{
  box-shadow:
    0 38px 100px rgba(0,0,0,.40),
    0 0 0 1px rgba(111,205,255,.10),
    0 0 80px rgba(50,150,215,.10)!important;
}

/* Labels become restrained telemetry capsules. */
.future_label{
  color:#dff7ff!important;
  background:rgba(5,18,31,.82)!important;
  border:1px solid rgba(116,211,255,.27)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 32px rgba(0,0,0,.26)!important;
  backdrop-filter:blur(12px);
}

.future_label:after{
  width:9px!important;
  height:9px!important;
  border:0!important;
  border-radius:50%;
  background:#7ce4ff;
  box-shadow:0 0 0 5px rgba(85,223,255,.08),0 0 13px rgba(85,223,255,.65);
  transform:none!important;
}

.future_label_one{top:36%!important;left:3%!important;}
.future_label_two{top:31%!important;right:3%!important;}
.future_label_three{top:55%!important;left:5%!important;}

@keyframes v52Atmosphere{
  from{opacity:.78;filter:saturate(.92);}
  to{opacity:1;filter:saturate(1.12);}
}

@keyframes v52Stars{
  from{opacity:.44;}
  to{opacity:.76;}
}

@keyframes v52HorizonBreath{
  from{opacity:.72;}
  to{opacity:1;}
}

@keyframes v52OrbitOne{
  from{transform:translateX(50%) rotate(-9deg) scale(.98);}
  to{transform:translateX(50%) rotate(-4deg) scale(1.015);}
}

@keyframes v52OrbitTwo{
  from{transform:translateX(50%) rotate(5deg) scale(1.01);}
  to{transform:translateX(50%) rotate(11deg) scale(.985);}
}

@media(max-width:1199px){
  .horizon_eclipse{top:7%;width:590px;height:590px;}
  .orbit_one{width:820px;}
  .orbit_two{width:930px;}
  .orbit_three{width:690px;}
}

@media(max-width:767px){
  .ibtdi_hero_future{
    background:
      radial-gradient(ellipse at 50% 56%,rgba(31,117,187,.15),transparent 39%),
      linear-gradient(180deg,#02050c 0%,#050b18 52%,#071421 100%)!important;
  }
  .future_hero_shell{min-height:980px;}
  .horizon_eclipse{
    top:7%;
    width:470px;
    height:470px;
    opacity:.78;
  }
  .horizon_orbit{top:20%;}
  .orbit_one{width:570px;height:250px;}
  .orbit_two{top:25%;width:650px;height:230px;}
  .orbit_three{top:13%;width:510px;height:350px;}
  .horizon_axis{top:13%;bottom:32%;}
  .hero_horizon_scene:after{top:60%;right:0;left:0;}
  .hero_horizon_scene:before{
    top:58%;
    right:-45%;
    left:-45%;
    opacity:.25;
  }
  .future_hero_content .ibtdi_eyebrow{backdrop-filter:none;}
  .future_browser_mockup{box-shadow:0 28px 70px rgba(0,0,0,.34)!important;}
}

@media(prefers-reduced-motion:reduce){
  .ibtdi_hero_future:before,
  .ibtdi_hero_future:after,
  .future_hero_shell:before,
  .orbit_one,
  .orbit_two{
    animation:none!important;
  }
}