*{box-sizing:border-box}
html,body{margin:0}
body{background:#000;color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.page{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative}

:root{
--edge-gap:20px;
--panel-size:410px;
--logo-width:300px;
--title-width:250px;
--title-size:30px;
--letter-spacing:5px;
--spin-duration:34s;
--pulse-duration:2.4s;
--green:#00ff00;
}

.panel{
width:var(--panel-size);
aspect-ratio:1/1;
position:relative;
//background:rgba(255,255,255,.03);
//border:1px solid rgba(255,255,255,.1);
//border-radius:40px;
//box-shadow:0 0 24px rgba(255,255,255,.09),0 0 60px rgba(255,255,255,.07),0 20px 70px rgba(255,255,255,.08);
overflow:hidden;
}

.logo-wrap{
position:absolute;
top:var(--edge-gap);
left:50%;
transform:translateX(-50%);
width:var(--logo-width);
opacity:.98;
}

.logo{
position:absolute;
inset:0;
display:block;
width:100%;
height:auto;
}

.logo-main{
position:relative;
animation:spin var(--spin-duration) linear infinite;
}

.logo-ghost{
opacity:0;
pointer-events:none;
mix-blend-mode:screen;
animation:spin var(--spin-duration) linear infinite;
}

.logo-red{
filter:drop-shadow(0 0 0 rgba(255,0,60,.9));
}

.logo-cyan{
filter:drop-shadow(0 0 0 rgba(0,220,255,.9));
}

.title{
position:absolute;
bottom:var(--edge-gap);
left:50%;
transform:translateX(-50%);
width:var(--title-width);
display:flex;
justify-content:center;
align-items:flex-end;
font-size:var(--title-size);
font-weight:700;
letter-spacing:var(--letter-spacing);
color:var(--green);
text-shadow:0 0 6px rgba(0,255,0,.12);
animation:breathe var(--pulse-duration) ease-in-out infinite;
margin:0;
}

.ellipsis span{color:rgba(0,255,0,.35)}
.ellipsis span:nth-child(1){animation:dot 2.4s infinite 0s}
.ellipsis span:nth-child(2){animation:dot 2.4s infinite .4s}
.ellipsis span:nth-child(3){animation:dot 2.4s infinite .8s}

.footer{
position:absolute;
left:50%;
bottom:20px;
transform:translateX(-50%);
z-index:10;
font-size:12px;
letter-spacing:.08em;
opacity:.8;
}

.footer-link{
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
color:#fff;
text-decoration:none;
white-space:nowrap;
}

.footer-link:hover{
text-decoration:underline;
}

.logo-wrap.glitching .logo-main{
animation:
spin var(--spin-duration) linear infinite,
mainBreak .26s steps(2,end);
filter:contrast(1.25) brightness(1.08);
}

.logo-wrap.glitching .logo-red{
opacity:.65;
animation:
spin var(--spin-duration) linear infinite,
glitchRed .26s steps(2,end);
}

.logo-wrap.glitching .logo-cyan{
opacity:.65;
animation:
spin var(--spin-duration) linear infinite,
glitchCyan .26s steps(2,end);
}

@keyframes spin{
from{transform:rotate(0)}
to{transform:rotate(360deg)}
}

@keyframes breathe{
0%,100%{opacity:.78}
50%{opacity:1}
}

@keyframes dot{
0%,100%{color:rgba(0,255,0,.35)}
20%,32%{color:#00ff00}
}

/* main image tears slightly */
@keyframes mainBreak{
0%{
clip-path:inset(0 0 0 0);
transform:translate(0,0);
}
20%{
clip-path:inset(0 0 62% 0);
transform:translate(-2px,0);
}
40%{
clip-path:inset(38% 0 24% 0);
transform:translate(3px,0);
}
60%{
clip-path:inset(70% 0 0 0);
transform:translate(-1px,0);
}
80%{
clip-path:inset(12% 0 48% 0);
transform:translate(2px,0);
}
100%{
clip-path:inset(0 0 0 0);
transform:translate(0,0);
}
}

/* red channel slips one way */
@keyframes glitchRed{
0%{
transform:translate(0,0);
clip-path:inset(0 0 0 0);
filter:drop-shadow(-6px 0 0 rgba(255,0,80,.8));
}
25%{
transform:translate(-8px,1px);
clip-path:inset(8% 0 55% 0);
filter:drop-shadow(-10px 0 0 rgba(255,0,80,.95));
}
50%{
transform:translate(5px,-1px);
clip-path:inset(44% 0 18% 0);
filter:drop-shadow(-4px 0 0 rgba(255,0,80,.75));
}
75%{
transform:translate(-6px,0);
clip-path:inset(72% 0 0 0);
filter:drop-shadow(-12px 0 0 rgba(255,0,80,.95));
}
100%{
transform:translate(0,0);
clip-path:inset(0 0 0 0);
filter:drop-shadow(0 0 0 rgba(255,0,80,0));
}
}

/* cyan channel slips the opposite way */
@keyframes glitchCyan{
0%{
transform:translate(0,0);
clip-path:inset(0 0 0 0);
filter:drop-shadow(6px 0 0 rgba(0,220,255,.8));
}
25%{
transform:translate(8px,-1px);
clip-path:inset(18% 0 46% 0);
filter:drop-shadow(10px 0 0 rgba(0,220,255,.95));
}
50%{
transform:translate(-4px,1px);
clip-path:inset(50% 0 10% 0);
filter:drop-shadow(4px 0 0 rgba(0,220,255,.75));
}
75%{
transform:translate(6px,0);
clip-path:inset(76% 0 0 0);
filter:drop-shadow(12px 0 0 rgba(0,220,255,.95));
}
100%{
transform:translate(0,0);
clip-path:inset(0 0 0 0);
filter:drop-shadow(0 0 0 rgba(0,220,255,0));
}
}

.title { white-space: nowrap; }

@media (max-width: 500px) {
  .panel { width: 90vw; }
  .logo-wrap { width: 55vw; }
  .title { width: auto; font-size: 22px; letter-spacing: 3px; }
}