/* ADI MASTER T2.3.15.1 — Premium Communication Aperture
   Replaces the simple orb with an integrated cinematic HUD transmission system. */

.adiTransmission{
  --tx-cyan:#68edf4;
  --tx-magenta:#e854a7;
  --tx-gold:#e9bd72;
  position:relative;
  width:min(520px,96%);
  height:230px;
  margin:28px 0 0;
  overflow:hidden;
  isolation:isolate;
  border-radius:28px;
  background:
    radial-gradient(ellipse at 50% 52%,rgba(62,222,236,.055),transparent 44%),
    linear-gradient(90deg,transparent,rgba(77,224,238,.018),transparent);
}

.adiTransmission::before{
  content:"";
  position:absolute;
  inset:22px 12px 28px;
  border-top:1px solid rgba(101,231,241,.06);
  border-bottom:1px solid rgba(101,231,241,.045);
  opacity:.75;
}

.adiTransmission::after{
  content:"";
  position:absolute;
  left:9%;
  right:9%;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(105,233,242,.08),rgba(105,233,242,.32),rgba(232,79,166,.16),transparent);
  box-shadow:0 0 18px rgba(77,224,238,.04);
  opacity:.8;
}

.adiTxGrid{
  position:absolute;
  inset:22% 4% 20%;
  opacity:.22;
  background:
    linear-gradient(rgba(96,232,243,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,232,243,.055) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse at center,#000 0 40%,transparent 77%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0 40%,transparent 77%);
  transform:perspective(420px) rotateX(64deg) scale(1.15);
  transform-origin:center 68%;
}

.adiTxAperture{
  position:absolute;
  left:50%;
  top:48%;
  width:270px;
  height:122px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
}

.adiTxArc{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.adiTxArc.a1{
  width:252px;
  height:94px;
  border:1px solid rgba(102,236,245,.18);
  box-shadow:0 0 30px rgba(78,226,239,.035),inset 0 0 28px rgba(80,224,237,.025);
}

.adiTxArc.a2{
  width:216px;
  height:76px;
  border:1px solid rgba(235,84,168,.11);
  border-left-color:rgba(104,236,244,.24);
  border-right-color:rgba(235,84,168,.20);
  animation:adiTxArcDrift 9s ease-in-out infinite alternate;
}

.adiTxArc.a3{
  width:170px;
  height:58px;
  border:1px solid rgba(107,238,246,.10);
  border-top-color:rgba(107,238,246,.27);
  border-bottom-color:rgba(234,185,112,.14);
  animation:adiTxArcDrift2 7.4s ease-in-out infinite alternate;
}

.adiTxCoreLine{
  position:absolute;
  left:50%;
  top:50%;
  width:124px;
  height:34px;
  transform:translate(-50%,-50%);
  border-left:1px solid rgba(105,237,245,.30);
  border-right:1px solid rgba(235,83,168,.22);
  border-radius:50%;
  box-shadow:0 0 30px rgba(77,225,239,.06);
}

.adiTxCoreLine::before,
.adiTxCoreLine::after{
  content:"";
  position:absolute;
  left:50%;
  width:62px;
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(111,239,246,.52),transparent);
}
.adiTxCoreLine::before{top:8px}
.adiTxCoreLine::after{bottom:8px;opacity:.55}

.adiTxCore{
  position:relative;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(121,242,248,.34);
  background:
    radial-gradient(circle at 42% 38%,rgba(255,255,255,.40),transparent 9%),
    radial-gradient(circle,rgba(86,231,242,.16),rgba(4,14,20,.88) 58%,rgba(2,7,11,.98));
  box-shadow:
    0 0 24px rgba(84,228,240,.13),
    0 0 72px rgba(84,228,240,.05),
    inset 0 0 20px rgba(232,79,166,.06);
  animation:adiTxCoreIdle 3.8s ease-in-out infinite;
}

.adiTxCore::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(111,239,246,.14);
  border-radius:50%;
}

.adiTxTelemetry{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.adiTxTick{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:rgba(111,239,246,.70);
  box-shadow:0 0 9px rgba(111,239,246,.58);
  opacity:.34;
}
.adiTxTick.t1{left:17%;top:41%}
.adiTxTick.t2{left:27%;top:59%}
.adiTxTick.t3{right:26%;top:34%;background:rgba(235,84,168,.62);box-shadow:0 0 9px rgba(235,84,168,.42)}
.adiTxTick.t4{right:16%;top:56%}
.adiTxTick.t5{left:36%;top:28%;opacity:.22}
.adiTxTick.t6{right:38%;top:67%;opacity:.22}

.adiTxScan{
  position:absolute;
  left:18%;
  right:18%;
  top:48%;
  height:32px;
  transform:translateY(-50%);
  overflow:hidden;
  opacity:.18;
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
}
.adiTxScan::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:70px;
  left:-80px;
  background:linear-gradient(90deg,transparent,rgba(106,237,245,.20),transparent);
  animation:adiTxScanSweep 5.2s linear infinite;
}

.adiTxPacket{
  position:absolute;
  left:12%;
  top:48%;
  width:42px;
  height:2px;
  transform:translateY(-50%);
  opacity:0;
  background:linear-gradient(90deg,transparent,rgba(203,252,255,.92),rgba(106,237,245,.72),transparent);
  box-shadow:0 0 14px rgba(99,235,244,.52);
  border-radius:999px;
}

.adiTxPacket::before{
  content:"";
  position:absolute;
  right:6px;
  top:50%;
  width:5px;
  height:5px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#e9feff;
  box-shadow:0 0 12px rgba(111,239,246,.85);
}

.adiTxStatus{
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  text-align:center;
  color:#738494;
  font:850 8px/1.2 system-ui,sans-serif;
  letter-spacing:.20em;
  text-transform:uppercase;
  transition:color .2s ease,opacity .2s ease;
}

.adiTransmission.isSending .adiTxArc.a2{animation:adiTxArcSend .85s linear infinite}
.adiTransmission.isSending .adiTxArc.a3{animation:adiTxArcSend2 .62s linear infinite reverse}
.adiTransmission.isSending .adiTxCore{
  animation:adiTxCoreCharge .62s ease-in-out infinite alternate;
  box-shadow:
    0 0 30px rgba(84,228,240,.30),
    0 0 92px rgba(84,228,240,.12),
    inset 0 0 28px rgba(232,79,166,.10);
}
.adiTransmission.isSending .adiTxPacket{
  opacity:1;
  animation:adiTxTransmit 1.15s cubic-bezier(.28,.64,.34,1) infinite;
}
.adiTransmission.isSending .adiTxScan{opacity:.42}

.adiTransmission.isSuccess .adiTxCore{
  animation:adiTxSuccessCore 1.05s ease both;
  border-color:rgba(116,242,204,.62);
  box-shadow:0 0 42px rgba(102,237,200,.28),0 0 100px rgba(90,230,240,.10);
}
.adiTransmission.isSuccess .adiTxArc.a1{
  border-color:rgba(116,242,204,.24);
  box-shadow:0 0 42px rgba(102,237,200,.08);
}
.adiTransmission.isSuccess .adiTxStatus{color:#75eecb}

.adiTransmission.isError .adiTxCore{
  animation:adiTxErrorCore .42s ease 2;
  border-color:rgba(255,112,143,.62);
  box-shadow:0 0 36px rgba(255,90,126,.22);
}
.adiTransmission.isError .adiTxStatus{color:#ff8ea8}
.adiTransmission.isPreview .adiTxStatus{color:#dcb977}

@keyframes adiTxCoreIdle{
  0%,100%{transform:scale(.97);filter:brightness(.92)}
  50%{transform:scale(1.035);filter:brightness(1.13)}
}
@keyframes adiTxArcDrift{
  from{transform:translate(-50%,-50%) rotate(-2deg) scale(.99)}
  to{transform:translate(-50%,-50%) rotate(3deg) scale(1.015)}
}
@keyframes adiTxArcDrift2{
  from{transform:translate(-50%,-50%) rotate(2deg) scale(1)}
  to{transform:translate(-50%,-50%) rotate(-3deg) scale(.985)}
}
@keyframes adiTxScanSweep{
  to{left:110%}
}
@keyframes adiTxArcSend{
  to{transform:translate(-50%,-50%) rotate(1turn)}
}
@keyframes adiTxArcSend2{
  to{transform:translate(-50%,-50%) rotate(1turn) scale(.985)}
}
@keyframes adiTxCoreCharge{
  from{transform:scale(.98);filter:brightness(1)}
  to{transform:scale(1.12);filter:brightness(1.65)}
}
@keyframes adiTxTransmit{
  0%{left:11%;opacity:0;transform:translateY(-50%) scaleX(.45)}
  10%{opacity:.95}
  50%{left:46%;transform:translateY(-50%) scaleX(1.1)}
  66%{left:53%;opacity:1;transform:translateY(-50%) scaleX(.55)}
  100%{left:88%;opacity:0;transform:translateY(-50%) scaleX(.25)}
}
@keyframes adiTxSuccessCore{
  0%{transform:scale(1)}
  42%{transform:scale(1.34);filter:brightness(1.9)}
  100%{transform:scale(1.04);filter:brightness(1.18)}
}
@keyframes adiTxErrorCore{
  0%,100%{transform:translateX(0)}
  35%{transform:translateX(-5px)}
  70%{transform:translateX(5px)}
}

@media(max-width:900px){
  .adiTransmission{height:200px;width:100%;margin-top:24px}
  .adiTxAperture{width:230px;height:108px}
  .adiTxArc.a1{width:218px;height:84px}
  .adiTxArc.a2{width:184px;height:68px}
  .adiTxArc.a3{width:146px;height:52px}
}
@media(max-width:760px){
  .adiTransmission{height:170px;margin-top:20px}
  .adiTxGrid{display:none}
  .adiTxAperture{top:45%}
  .adiTxStatus{bottom:4px}
}
@media(prefers-reduced-motion:reduce){
  .adiTxArc,.adiTxCore,.adiTxScan::before,.adiTxPacket{animation:none!important}
}