* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}
body {
    background: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
    font-family: 'Vazirmatn', sans-serif;
    overflow: hidden;
    width:100%;
    height:100%;
}
.slogan,
.save-text,
.content-title,
.content-desc {
    opacity: 0;
}

.content-desc {
    white-space: pre-line;
}
/* کارت اصلی */
.card {
    --scale: 1;

    --card-w: 420px;
    --card-h: 746px; /* 420 * 2208 / 1242 تقریبی */

    position: relative;
    width: var(--card-w);
    height: var(--card-h);
    overflow: hidden;
    background: black;
    box-shadow: 0 0 calc(40px * var(--scale)) rgba(0, 0, 0, .6);
    transform-origin: center center;
}

/* پس زمینه */
.bg {

    
    position: absolute;
    inset: 0;
    top: calc(50px * var(--scale));
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: grayscale(100%) brightness(.9);
    
    transition:
    opacity 2s ease,
    filter 2s ease;

}
.bg{
    opacity:.05;
}
.bg.show{

    opacity:.5;

}

@keyframes dissolveIn{      

    from{
        opacity:0;
        filter:blur(12px);
    }

    to{
        opacity:1;
        filter:blur(0);
    }

}
.qr-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* دایره بالا */
.hero-circle {
    position: absolute;
    width: 135%;
    aspect-ratio: 1;
    right: -5%;
    top: -30%;
    border-radius: 50%;
    overflow: hidden;
    z-index: 5;
    transition: all .4s ease;
    background: radial-gradient(circle at 30% 30%, #666 0%, #333 35%, #111 70%, #000 100%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
        0 0 calc(20px * var(--scale)) rgba(255,255,255,0.463),
        0 0 calc(50px * var(--scale)) rgba(235,235,235,0.203);
    transform:translateY(-500px);
}

.hero-circle:hover {
    box-shadow:
        0 0 calc(30px * var(--scale)) rgba(255,255,255,0.694),
        0 0 calc(80px * var(--scale)) rgba(235,235,235,0.34);
}

.hero-ghost {
    position: absolute;
    width: 160%;
    height: 160%;
    left: -20%;
    top: 0%;
    object-fit: scale-down;
    opacity: .15;
    filter: grayscale(100%) brightness(.8);
}

.hero-glow {
    position: absolute;
    inset: 0;
    border-radius: 100%;
    pointer-events: none;
    box-shadow:
        inset 0 0 calc(40px * var(--scale)) rgb(0, 0, 0),
        0 0 calc(40px * var(--scale)) rgba(0, 0, 0, 0.26);
}

.hero-circle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: calc(3px * var(--scale)) solid rgba(255,255,255,.08);
    pointer-events: none;
}

/* لوگو */
.logo-frame {
    position: absolute;
    left: 3%;
    top: 4%;
    width: 35%;
    z-index: 10;
    opacity: 0;

    transform:
        translate(80%,80%)
        scale(2);
}

.logo-frame.to-corner{

    left:3%;
    top:4%;

    transform:
        translate(0,0)
        scale(1);

}

.logo-frame{
    transition:
        all 2s cubic-bezier(.22,1,.36,1);
}
.logo-frame img {
    width: 100%;
   
}

/* شعار */
.slogan {
    position: absolute;
    left: 6%;
    top: 10%;
    font-size: calc(14px * var(--scale));
    font-weight: 700;
    color: white;
    z-index: 10;

    opacity:1;
    white-space:nowrap; 
}

 


/* QR */
.qr-frame {
    opacity:0 ;
    position: absolute;
    right: 5.5%;
    top: 5%;
    width: 18%;
    aspect-ratio: 1;
    z-index: 10;

    transition:all .4s ease;
}

.qr-frame.show{
    animation:dissolveIn 1.2s ease forwards;
}

 
.qr-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.save-text {
    position: absolute;
    right: 7%;
    top: 14%;
    font-size: calc(13px * var(--scale));
    color: white;
    z-index: 10;
     
}


/* عکس محو */
.ghost-frame {
    position: absolute;
    left: 10%;
    top: -8%;
    width: 32%;
    height: 35%;
    opacity: .18;
    overflow: hidden;
    z-index: 2;
}

.ghost-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.5) translate(0%, 20%);
    transform-origin: right;
    filter: grayscale(100%) blur(5px);
    display: block;
}

/* عکس اصلی */
.profile-frame {

    
        opacity:0;
    
    position: absolute;
    left: 20%;
    top: 20%;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: calc(6px * var(--scale)) solid rgba(167, 167, 167, 0.418);
    box-shadow: 0 0 calc(20px * var(--scale)) rgba(0, 0, 0, 0.795);
    z-index: 20;

    --zoom: 2.5;
    --pan-x: 45%;
    --pan-y: 0%;

    transition:all .4s ease;
}

.profile-frame.show{
    animation:dissolveIn 1.2s ease forwards;
}

 
.profile-frame img {
    width: 110%;
    height: 100%;
    transform-origin: center;
    transform: translate(var(--pan-x), var(--pan-y)) scale(var(--zoom));
    display: block;
}

.profile-frame:hover{
    transform:scale(1.05);
    box-shadow:
        0 0 40px rgb(0, 0, 0),
        0 0 50px rgba(0, 0, 0, 0.804);
}   

.profile-frame:active{
    transform:scale(.95);
}

/* دکمه تماس */
.call-frame{
     
    top:50% !important; 
    width:38% !important;
    aspect-ratio:auto;
    left:31%;
    z-index:30;
}
.call-frame img{
    width:100%;
    height:auto;
}

/* دایره پایین */
.bottom-circle {
    position: absolute;
    width: 150%;
    aspect-ratio: 1;
    right: -55%;
    bottom: -52%;
    border-radius: 50%;
    background: linear-gradient(240deg, #332f6c 40%, #a04607 65%);
    z-index: 3;
    transform:translateY(500px);
}

/* آیکون‌ها */
.icon {
    position: absolute;
    width: 17%;
    aspect-ratio: 1;
    z-index: 40;
    /*انیمیشن */
        transition:
        transform .25s ease,
        filter .25s ease;
    cursor:pointer;
    transform:translateY(400px);
}
.icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/*.icon::before{
    content: attr(data-title);
    position: absolute;
    bottom: 110%;
    right: 50%;
    transform:
        translateX(50%)
        translateY(10px);
    opacity: 0;
    background: #000;
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    transition: .3s;

    pointer-events: none;
    z-index: 999;
     
}*/

.icon:hover{
    transform:scale(1.15);
}

.icon:hover::before{
    opacity:1;
    transform:
        translateX(50%)
        translateY(0);
}
.icon:active{
    transform:scale(.9);
}

.rubika { left: 42%; top: 67%; }
.whatsapp { left: 60%; top: 64%; }
.website { left: 79%; top: 64%; }
.bale { left: 26%; top: 73%; }
.instagram { left: 13%; top: 81%; }
.location { left: 4%; top: 90%; }

/* متن */
.content {
    position: absolute;
    right: 6%;
    left: 35%;
    bottom: 5%;
    color: white;       
    z-index: 50;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    max-height:30%;
    overflow:hidden;
}

.card.is-mobile .content {
    left: 35%;
    right: 5%;
    bottom: 5%;
}

.content h1 {
    font-size: calc(20px * var(--scale));
    font-weight: 300;
    margin-bottom: calc(15px * var(--scale));
    line-height: 1;
}

.content p {
    font-size:calc(12px * var(--scale));
    line-height:1.3;
    overflow:hidden;

    display:-webkit-box;
    -webkit-line-clamp:8;
    -webkit-box-orient:vertical;
}


.card.is-mobile .content h1 {
    font-size: calc(20px * var(--scale));
    line-height: 1.3;
}

.card.is-mobile .content p {
    font-size: calc(12px * var(--scale));
    line-height: 1.3;
}

.card.is-mobile .save-text {
    font-size: calc(12px * var(--scale));
}

.card.is-short .content p {
    line-height: 1.3;
}

.animate-in{
    opacity:1 !important;
    transform:none ;
}