Sony Ericsson Logo done in pure CSS

HTML

<div class="logo">
    <div class="inner"></div>
    <div class="cover">
        <div class="cover_bottomright"></div>
        <div class="cover_topright"></div>
        <div class="cover_topleft"></div>
    </div>
    <div class="reflection"></div>
</div>

CSS

html {
    height: 100%;
    background: url(http://www.giga.de/androidnews/i/20110908_sony_ericsson_logo_011.jpg);
}
body {
    height: 100%;
    background: rgba(255,255,255,0.9);
}
.logo{
    position: absolute;
    top: 19px;
    left: 79px;
    width: 457px;
    height: 457px;
    overflow: hidden;
    border-radius: 228px;
}
.inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    border-radius: 228px;

    background-image: -webkit-linear-gradient(left, #164f1f 25%, #000 30%, #0f5523 75%);
    background-image: -moz-linear-gradient(left, #164f1f 25%, #000 30%, #0f5523 75%);
    background-image: -o-linear-gradient(left, #164f1f 25%, #000 30%, #0f5523 75%);
    background-image: -ms-linear-gradient(left, #164f1f 25%, #000 30%, #0f5523 75%);
    background-image: linear-gradient(left, #164f1f 25%, #000 30%, #0f5523 75%);
}
.inner:before {
    content: '';
    position: absolute;
    top: 60px;
    left: 20px;
    display: block;
    width: 380px;
    height: 380px;
    overflow: hidden;
    border-radius: 190px;

    background-image: -webkit-radial-gradient(0 364px, circle farthest-corner, #ecffd2 20%, #2d9d47 50%, #4f965c 70%, #000 85%);
    background-image: -moz-radial-gradient(0 364px, circle farthest-corner, #ecffd2 20%, #2d9d47 50%, #4f965c 70%, #000 85%);
    background-image: -o-radial-gradient(0 364px, circle farthest-corner, #ecffd2 20%, #2d9d47 50%, #4f965c 70%, #000 85%);
    background-image: -ms-radial-gradient(0 364px, circle farthest-corner, #ecffd2 20%, #2d9d47 50%, #4f965c 70%, #000 85%);
    background-image: radial-gradient(0 364px, circle farthest-corner, #ecffd2 20%, #2d9d47 50%, #4f965c 70%, #000 85%);

    box-shadow: inset -80px 0 100px rgba(10,39,17,.75);
}
.inner:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 300px;
    height: 300px;
    margin-top: -150px;
    margin-left: -160px;
    overflow: hidden;
   ...