@property --sweep-progress { syntax:'<number>'; inherits:true; initial-value:0; }

.white-btn-wrap{ padding:24px 0; text-align:inherit; }

.white-holo-btn{
  --btn-col:#fff; --btn-border:rgba(72,184,168,1);
  --btn-border-anim:#66ffe5; --btn-glow:0 0 .08em rgba(102,255,259,.7);
  --btn-speed:1.7s;

  position:relative; display:inline-block; margin:8px 0;
  font:400 clamp(10px,3.5vw,14px)/1 'Archivo Black',Arial,sans-serif;
  letter-spacing:clamp(1px,0.6vw,4px);
  padding:clamp(12px,4vw,18px) clamp(18px,6vw,32px);
  text-transform:uppercase; white-space:nowrap;

  color:var(--btn-col); background:rgba(2,16,20,.9);
  border:1px solid var(--btn-border); border-radius:1px;
  text-shadow:var(--btn-glow); cursor:pointer; touch-action:manipulation;

  box-sizing:border-box; max-width:calc(100% - 4px);
  transition:transform var(--btn-speed) ease,color .3s,text-shadow .3s ease;

  /* 🛑 disable text selection */
  -webkit-user-select:none; -ms-user-select:none; user-select:none;

  --sweep-progress:0;
}
.white-holo-btn:hover{ transform:scale(.95); }

.white-holo-btn::after{
  content:''; position:absolute; inset:-2px;
  border:1px solid var(--btn-border-anim); border-radius:0px;
  box-sizing:border-box;
  clip-path:inset(0 calc(100%*(1 - var(--sweep-progress))) 0 0);
  transition:clip-path var(--btn-speed) cubic-bezier(.4,1.5,.5,1.1); z-index:0;
}
.white-holo-btn span{
  position:relative; z-index:2; pointer-events:none;
  -webkit-user-select:none; -ms-user-select:none; user-select:none;
}