@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

:root{
--size: max(5px, 1vmin);
--heght: 80em;
--pad: 1.25em;
--border-radius: 6.666em;
--gutter: calc(var(--pad) * 2);
--button-width: 0.333em;
--notch-height: 3.33em;
--notch-width: 33.3%;
--notch-radius: calc(var(--border-radius) - calc(var(--pad) * 2));
--notch-duration: 0.333s;
--ease: cubic-bezier(.666, 0, .4, 1);
--ease-spring: cubic-bezier(.666, 0, .4, 1.2);
--ease-out: cubic-bezier(.15, 0, .333, 1);
--border-width: 0.4em;
--deep-purple: 284;
--gold: 30;
--space-black: 215;
--silver: 254;
--c-h: var(--deep-purple);
--c-s: 100%;
--c-l: 50%;
}

@-webkit-keyframes appear{
to{
transform: scale3d(1, 1, 1);
opacity: 1;
}
}

@keyframes appear{
to{
transform: scale3d(1, 1, 1);
opacity: 1;
}
}

body{
background: #00000a;
display: flex;
flex-direction: column;
gap: 3em;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: 'inter';
font-size: var(--size);
}

.phone{
position: relative;
z-index: 1;
aspect-ratio: 37/76;
background: black;
height: var(--heght);
 border-radius: var(--border-radius);
box-shadow: 0 0 0.1em 0.25em hsl(var(--c-h), 20%, 25%), 0 0 0 var(--border-
width) hsl(var(--c-h), 30%, 85%);
box-sizing: border-box;
opacity: 0;
transform: scale3d(1.1, 1.1, 1);
-webkit-animation: appear 1s var(--ease-out) forwards;
animation: appear 1s var(--ease-out) forwards;
--webkit-backface-visibility: hidden;
}

.phone::before{
content: "";
position: absolute;
top: var(--border-radius);
right: calc(var(--border-width) * 1);
bottom: calc(var(--border-radius));
left: calc(var(--border-width) * -1);
border: 0.5em solid hsl(var(--c-h),20%, 30%);
border-left-width: 0;
border-right-width: 0;
}

.buttons{
position: absolute;
inset: calc(var(--border-width) * -1);
pointer-events: none;
}

.buttons .left, .buttons .right{

position: absolute;
width: var(--button-width);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1.5em;
}

.buttons .left{
right: 100%;
top: calc(var(--border-radius) * 2);
}

.buttons .left .button:nth-child(1){

height: 3em;
margin-bottom: 0,5em;
}

.buttons .right{
left: 100%;
transform: scale3d(-1, 1, 1);
top: calc(var(--border-radius) * 3);
}

.buttons .right .button{

height: 9.5em;
}

.buttons .button{
 background: hsl(var(--c-h), 20%, 95%);
height: 6em;
box-shadow: inset -0.15em 0 0.1em black, inset 0 0 0.1em hsl(var(--c-h), 30%,
90%), inset 0 0.2em 0.1em hsl(var(--c-h), 30%, 90%), inset 0 -0.2em 0.1em
hsl(var(--c-h), 30%, 90%), inset -0.1em 0.333em 0.1em rgba(0, 0, 0, 0.5), inset -
0.1em -0.333em 0.1em rgba(0, 0, 0, 0.5);
border-top-left-radius: 0.2em;
border-bottom-left-radius: 0.2em;
}

.screen-container{
position: absolute;
inset: 0;
border-radius: var(--border-radius);
border: var(--pad) solid black;
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--pad) * 2);
}

.screen-container::before{
content: "";
position: absolute;
z-index: 2;
background: white;
width: 36.6%;
bottom: calc(var(--pad) * 0.75);
height: calc(var(--pad) * 0.5);
border-radius: calc(var(--pad) * 0.25);
filter: drop-shadow(0 0.1em 00.25em rgba(0, 0, 0, 0.1));
}

.bg{
position: absolute;
inset: 0;
background: black;
border-radius: calc(var(--border-radius)) - var(--pad);
overflow: hidden;
}

.bg>*{
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
opacity: 0;
transition: opacity 1s var(--ease-out) 0.5s;
}

.bg .section{
--g-h: var(--c-h);
--g-s: var(--c-s);
--g-l: var(--c-l);
flex-grow: 1;
position: relative;
overflow: hidden;
border-radius: calc(var(--border-radius)- var(--pad));
border-bottom-left-radius: 20em;
 border-bottom-right-radius: 20em;
}

.bg .section:before{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(85% 125% at 50% 140%, black 66.6%, transparent),
radial-gradient(120% 120% at 50% 145%, hsl(calc(var(--g-h) - 45), 100%, 50%) 50%,
transparent), radial-gradient(150% 100% at 50% 80%, transparent 35%,
hsl(calc(var(--g-h) + 50), 100%, 99%));
background-color: hsl(var(--g-h), var(--g-s), var(--g-l));
transform: scale3d(1.1, 1.25, 1);
transform-origin: bottom;
transition: transform 1s var(--ease-out) 0.5s;
}

.bg .section:after{
content: "";
position: absolute;
inset: 0;
border: var(--border-width) solid rgba(255, 255, 255, 0.8);
border-radius: inherit;
filter: blur(0.05em);
-webkit-mask-image: radial-gradient(100% 100% at 50% 70%, black 30%,
transparent 50%);
mask-image: radial-gradient(100% 100% at 50% 70%, black 30%, transparent 50%);;
}

.bg .section .glow{

position: absolute;
inset: 0;
border-radius: inherit;
mix-blend-mode: overlay;
z-index: 1;
background: radial-gradient(80% 150% at 50% 100%, hsl(var(--g-h), 100%,var(--g-
h)), transparent 70%);
}

.bg .section:last-of-type{
--g-h: calc(var(--c-h) - var(--g-hue-adjust, 0));
--g-s: calc(var(--c-s) - 25%);
--g-l: calc(var(--c-l) + 20%);
transform: scale3d(1, -1, 1) translateZ(1px);
}

.bg .section:last-of-type::before{
background: radial-gradient(85% 125% at 50% 140%, black 66.6%, transparent),
radial-gradient(120% 120% at 50% 145%, hsl(calc(var(--g-h) - var(--g-hue-adjust-2,
var(--g-hue-adjust, 0))), 100%, 50%) 50%, transparent), radial-gradient(150% 100%
at 50% 95%, transparent 15%, hsl(calc(var(--g-h) + 5), 100%, var(--g-lightness,
100%)));
background-color: hsl(var(--g-h), var(--g-s), var(--g-l));
}