/* ============================================================
   لودینگ ورودی سایت کسا — نمایش قوطی سوهان بسته، چرخش آن،
   و ظاهر شدن لوگوی کسا روی درب — به‌صورت overlay روی صفحه اصلی
   ============================================================ */

html.kasa-loading-lock,
html.kasa-loading-lock body{
  overflow:hidden;
  height:100%;
}

.loader-wrap{
  position:fixed;
  inset:0;
  z-index:9999;
  background:var(--ink-deep);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:opacity .5s ease;
}
.loader-wrap::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(201,162,74,0.07), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(201,162,74,0.06), transparent 45%);
  pointer-events:none;
}
.loader-wrap.fade-out{opacity:0;}

/* --- صحنه سه‌بعدی برای چرخش قوطی --- */
.flip-stage{
  perspective:1300px;
  width:260px;
  height:260px;
  position:relative;
  z-index:1;
}
.flip-card{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform 0.9s cubic-bezier(.65,.05,.36,1);
}
.flip-card.flipped{
  transform:rotateY(180deg);
}
.face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.face-back{
  transform:rotateY(180deg);
}

/* --- روی قوطی سوهان بسته (نمای روبه‌رو) --- */
.tin-svg{width:100%; height:100%; overflow:visible;}
.tin-shadow{fill:#04140e; opacity:.5;}
.tin-body{fill:url(#tinBodyGrad); stroke:var(--gold-dim); stroke-width:2;}
.tin-lid{fill:url(#lidGrad); stroke:var(--gold-bright); stroke-width:2.5;}

/* --- روی درب (بعد از چرخش): لوگوی کسا --- */
.lid-face-circle{
  fill:url(#lidFaceGrad);
  stroke:var(--gold-bright);
  stroke-width:3;
}
.lid-face-ring{
  fill:none; stroke:var(--gold-dim); stroke-width:1; opacity:.7;
}
.logo-on-lid{
  transform:scale(.6);
  opacity:0;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .5s ease;
  transform-origin:200px 200px;
}
.loader-wrap.logo-in .logo-on-lid{
  transform:scale(1);
  opacity:1;
}

/* --- متن زیر صحنه --- */
.loader-caption{
  margin-top:30px;
  font-size:14px;
  letter-spacing:1px;
  color:var(--cream-dim);
  position:relative; z-index:1;
  min-height:20px;
}
.loader-dots span{
  display:inline-block;
  width:5px; height:5px;
  margin:0 2px;
  border-radius:50%;
  background:var(--gold-bright);
  animation:dotPulse 1.1s ease-in-out infinite;
}
.loader-dots span:nth-child(2){animation-delay:.15s;}
.loader-dots span:nth-child(3){animation-delay:.3s;}
@keyframes dotPulse{
  0%, 80%, 100%{opacity:.25; transform:scale(.8);}
  40%{opacity:1; transform:scale(1.15);}
}

/* --- لینک عبور --- */
.skip-link{
  position:absolute;
  top:26px; left:26px;
  font-size:12.5px;
  color:var(--cream-dim);
  text-decoration:none;
  border:1px solid var(--gold-dim);
  border-radius:20px;
  padding:8px 16px;
  opacity:0;
  transition:opacity .4s ease, color .2s, border-color .2s;
  z-index:2;
}
.skip-link.visible{opacity:1;}
.skip-link:hover{color:var(--gold-bright); border-color:var(--gold-bright);}

@media(prefers-reduced-motion: reduce){
  .flip-card{transition:none;}
  .logo-on-lid{transition:none;}
  .loader-wrap{transition:none;}
}

@media(max-width:480px){
  .flip-stage{width:210px; height:210px;}
}