html,
body{
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#fff;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
    -webkit-user-select:none;
}

body{
    display:flex;
    justify-content:center;
    align-items:center;
}

.stage{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    perspective:1800px;
    overflow:hidden;
    touch-action:none;
}

.mug{
    width:min(74vw,360px);
    height:auto;
    display:block;
    pointer-events:auto;
    cursor:grab;
    user-select:none;
    -webkit-user-drag:none;
    touch-action:none;
    will-change:transform;
    transform-style:preserve-3d;
    filter:drop-shadow(0 30px 40px rgba(0,0,0,.15));
}

.mug:active{
    cursor:grabbing;
}

.logo-panel{
    position:fixed;
    left:0;
    bottom:0;
    width:100vw;
    height:100vh;
    --logo-width:min(58vw,420px);
    --stripe-width:min(calc(var(--logo-width) * 1.08),92vw);
    --stripe-start-height:calc(var(--logo-width) * .22);
    z-index:10;
    pointer-events:none;
    overflow:visible;
    -webkit-touch-callout:none;
    user-select:none;
    -webkit-user-select:none;
}

.logo-toggle{
    position:absolute;
    left:0;
    bottom:0;
    z-index:3;
    display:block;
    width:var(--logo-width);
    padding:0;
    border:0;
    cursor:pointer;
    transform:translate3d(0,0,0);
    transform-origin:28% 68%;
    opacity:1;
    transition:
        transform .65s cubic-bezier(.22,1,.36,1),
        opacity .42s ease;
    pointer-events:auto;
    outline:0;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
    box-shadow:none;
    touch-action:manipulation;
}

.logo-toggle:focus,
.logo-toggle:focus-visible,
.logo-toggle:active{
    outline:0 !important;
    box-shadow:none !important;
    -webkit-tap-highlight-color:transparent;
}

.logo-toggle::-moz-focus-inner{
    border:0;
}

.logo{
    width:100%;
    height:auto;
    display:block;
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
    opacity:1;
    transform:translate3d(0,0,0);
    -webkit-mask-image:linear-gradient(#000,#000);
    mask-image:linear-gradient(#000,#000);
    transition:
        opacity .58s ease,
        transform .68s cubic-bezier(.16,1,.3,1),
        filter .58s ease;
}

.logo-stripes{
    position:absolute;
    left:0;
    bottom:0;
    z-index:1;
    width:var(--stripe-width);
    height:38%;
    pointer-events:none;
    overflow:visible;
    transform:translate3d(1%,4%,0) rotate(-2deg);
    transform-origin:left bottom;
}

.logo-stripes span{
    position:absolute;
    left:var(--stripe-left);
    bottom:var(--stripe-bottom);
    display:block;
    height:var(--stripe-height);
    width:var(--stripe-closed);
    border-radius:999px;
    background:linear-gradient(90deg,#8e6ee5 0%,#bcaadf 80%,rgba(188,170,223,0) 100%);
    opacity:.34;
    transform:translate3d(0,0,0) scaleX(.42);
    transform-origin:left center;
    transition:
        opacity .36s ease,
        transform .96s cubic-bezier(.16,1,.3,1),
        width .96s cubic-bezier(.16,1,.3,1);
}

.logo-stripes span:nth-child(1){
    --stripe-left:4%;
    --stripe-bottom:8%;
    --stripe-height:clamp(4px,.9vw,8px);
    --stripe-closed:12%;
    --stripe-open:34%;
    transition-delay:.01s;
}

.logo-stripes span:nth-child(2){
    --stripe-left:9%;
    --stripe-bottom:13%;
    --stripe-height:clamp(6px,1.1vw,10px);
    --stripe-closed:18%;
    --stripe-open:48%;
    transition-delay:.04s;
}

.logo-stripes span:nth-child(3){
    --stripe-left:2%;
    --stripe-bottom:19%;
    --stripe-height:clamp(5px,1vw,9px);
    --stripe-closed:16%;
    --stripe-open:42%;
    transition-delay:.07s;
}

.logo-stripes span:nth-child(4){
    --stripe-left:14%;
    --stripe-bottom:24%;
    --stripe-height:clamp(7px,1.3vw,12px);
    --stripe-closed:14%;
    --stripe-open:54%;
    transition-delay:.1s;
}

.logo-stripes span:nth-child(5){
    --stripe-left:7%;
    --stripe-bottom:30%;
    --stripe-height:clamp(4px,.9vw,8px);
    --stripe-closed:19%;
    --stripe-open:38%;
    transition-delay:.13s;
}

.logo-stripes span:nth-child(6){
    --stripe-left:18%;
    --stripe-bottom:36%;
    --stripe-height:clamp(6px,1.15vw,11px);
    --stripe-closed:15%;
    --stripe-open:58%;
    transition-delay:.16s;
}

.logo-stripes span:nth-child(7){
    --stripe-left:11%;
    --stripe-bottom:42%;
    --stripe-height:clamp(5px,1vw,9px);
    --stripe-closed:22%;
    --stripe-open:44%;
    transition-delay:.19s;
}

.logo-stripes span:nth-child(8){
    --stripe-left:24%;
    --stripe-bottom:48%;
    --stripe-height:clamp(7px,1.35vw,13px);
    --stripe-closed:13%;
    --stripe-open:60%;
    transition-delay:.22s;
}

.logo-stripes span:nth-child(9){
    --stripe-left:16%;
    --stripe-bottom:54%;
    --stripe-height:clamp(4px,.85vw,8px);
    --stripe-closed:18%;
    --stripe-open:46%;
    transition-delay:.25s;
}

.logo-stripes span:nth-child(10){
    --stripe-left:28%;
    --stripe-bottom:60%;
    --stripe-height:clamp(6px,1.2vw,11px);
    --stripe-closed:16%;
    --stripe-open:56%;
    transition-delay:.28s;
}

.logo-stripes span:nth-child(11){
    --stripe-left:20%;
    --stripe-bottom:66%;
    --stripe-height:clamp(5px,1vw,9px);
    --stripe-closed:17%;
    --stripe-open:40%;
    transition-delay:.31s;
}

.logo-stripes span:nth-child(12){
    --stripe-left:31%;
    --stripe-bottom:72%;
    --stripe-height:clamp(7px,1.35vw,13px);
    --stripe-closed:13%;
    --stripe-open:58%;
    transition-delay:.34s;
}

.logo-stripes span:nth-child(13){
    --stripe-left:8%;
    --stripe-bottom:78%;
    --stripe-height:clamp(4px,.85vw,8px);
    --stripe-closed:14%;
    --stripe-open:34%;
    transition-delay:.12s;
}

.logo-stripes span:nth-child(14){
    --stripe-left:22%;
    --stripe-bottom:84%;
    --stripe-height:clamp(5px,1vw,9px);
    --stripe-closed:12%;
    --stripe-open:50%;
    transition-delay:.18s;
}

.logo-stripes span:nth-child(15){
    --stripe-left:35%;
    --stripe-bottom:90%;
    --stripe-height:clamp(6px,1.15vw,11px);
    --stripe-closed:10%;
    --stripe-open:55%;
    transition-delay:.24s;
}

.logo-stripes span:nth-child(16){
    --stripe-left:13%;
    --stripe-bottom:96%;
    --stripe-height:clamp(4px,.9vw,8px);
    --stripe-closed:14%;
    --stripe-open:38%;
    transition-delay:.3s;
}

.logo-stripes span:nth-child(17){
    --stripe-left:26%;
    --stripe-bottom:102%;
    --stripe-height:clamp(5px,1vw,9px);
    --stripe-closed:12%;
    --stripe-open:52%;
    transition-delay:.36s;
}

.logo-stripes span:nth-child(18){
    --stripe-left:39%;
    --stripe-bottom:108%;
    --stripe-height:clamp(4px,.85vw,8px);
    --stripe-closed:9%;
    --stripe-open:44%;
    transition-delay:.42s;
}

.logo-panel.is-open .logo-toggle{
    opacity:0;
    transform:translate3d(0,-46%,0) rotate(-.35deg);
    transition:
        transform .65s cubic-bezier(.22,1,.36,1),
        opacity .38s ease .18s;
}

.logo-panel.is-open .logo{
    opacity:0;
    transform:translate3d(0,-18%,0) scaleY(.92);
    filter:blur(2.5px);
    -webkit-mask-image:repeating-linear-gradient(
        112deg,
        transparent 0,
        transparent 5px,
        #000 5px,
        #000 10px,
        transparent 10px,
        transparent 16px
    );
    mask-image:repeating-linear-gradient(
        112deg,
        transparent 0,
        transparent 5px,
        #000 5px,
        #000 10px,
        transparent 10px,
        transparent 16px
    );
}

.logo-panel.is-open .logo-stripes span{
    width:var(--stripe-open);
    opacity:.9;
    transform:translate3d(0,-22%,0) scaleX(1);
}

@media (min-width:900px){

    .mug{
        width:min(46vw,680px);
    }

    .logo-panel{
        width:100vw;
        height:100vh;
        --logo-width:min(34vw,520px);
    }

    .logo-toggle{
        width:var(--logo-width);
    }

    .logo-stripes{
        width:var(--stripe-width);
    }

}

@media (min-width:1400px){

    .mug{
        width:820px;
    }

    .logo-panel{
        width:100vw;
        height:100vh;
        --logo-width:640px;
    }

    .logo-toggle{
        width:var(--logo-width);
    }

    .logo-stripes{
        width:var(--stripe-width);
    }

}

/* Logo stripe reveal */

.logo-stripes{
    left:0;
    bottom:0;
    z-index:2;
    width:var(--stripe-width);
    height:clamp(54px,var(--stripe-start-height),98px);
    overflow:hidden;
    opacity:.18;
    transform:translate3d(0,0,0);
    -webkit-mask-image:linear-gradient(
        to top,
        transparent 0%,
        rgba(0,0,0,.16) 14%,
        rgba(0,0,0,.62) 34%,
        rgba(0,0,0,.46) 54%,
        rgba(0,0,0,.12) 76%,
        transparent 100%
    ),
    linear-gradient(
        to right,
        #000 0%,
        #000 68%,
        rgba(0,0,0,.52) 82%,
        transparent 100%
    );
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(
        to top,
        transparent 0%,
        rgba(0,0,0,.16) 14%,
        rgba(0,0,0,.62) 34%,
        rgba(0,0,0,.46) 54%,
        rgba(0,0,0,.12) 76%,
        transparent 100%
    ),
    linear-gradient(
        to right,
        #000 0%,
        #000 68%,
        rgba(0,0,0,.52) 82%,
        transparent 100%
    );
    mask-composite:intersect;
    transition:
        height .86s cubic-bezier(.16,1,.3,1),
        opacity .42s ease,
        transform .86s cubic-bezier(.16,1,.3,1);
}

.logo-stripes span{
    display:none;
}

.logo-stripes::before{
    content:"";
    position:absolute;
    inset:-560% -18% -18% -4%;
    background:
        repeating-linear-gradient(
            112deg,
            rgba(142,110,229,.12) 0,
            rgba(142,110,229,.12) 2px,
            rgba(142,110,229,.86) 2px,
            rgba(142,110,229,.86) 5px,
            rgba(188,170,223,.76) 5px,
            rgba(188,170,223,.76) 8px,
            transparent 8px,
            transparent 14px
        );
    transform:translate3d(-9%,10%,0);
    transition:transform .86s cubic-bezier(.16,1,.3,1);
}

.logo-stripes::after{
    content:"";
    position:absolute;
    inset:0;
    background:none;
    pointer-events:none;
}

.logo-panel.is-open .logo-stripes{
    height:100vh;
    opacity:.96;
    transform:translate3d(0,0,0);
    -webkit-mask-image:linear-gradient(
        to top,
        transparent 0%,
        rgba(0,0,0,.2) 5%,
        rgba(0,0,0,.86) 14%,
        #000 24%,
        #000 100%
    ),
    linear-gradient(
        to right,
        #000 0%,
        #000 68%,
        rgba(0,0,0,.52) 84%,
        transparent 100%
    );
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(
        to top,
        transparent 0%,
        rgba(0,0,0,.2) 5%,
        rgba(0,0,0,.86) 14%,
        #000 24%,
        #000 100%
    ),
    linear-gradient(
        to right,
        #000 0%,
        #000 68%,
        rgba(0,0,0,.52) 84%,
        transparent 100%
    );
    mask-composite:intersect;
}

.logo-panel.is-open .logo-stripes::after{
    background:none;
}

.logo-panel.is-open .logo-stripes::before{
    transform:translate3d(-4%,0,0);
}

img{
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
}