/* =====================================================================
   JOMAGSON — Premium UI System
   ===================================================================== */

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Vazirmatn',sans-serif;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  transition:background .5s ease,color .5s ease;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Design tokens ---------- */
:root{
  --pink:#f9a8d4;
  --pink-deep:#ec4899;
  --blue:#a8d8ea;
  --blue-deep:#38bdf8;
  --violet:#a78bfa;
  --violet-deep:#7c3aed;
  --gold:#fcd34d;
  --radius-sm:14px;
  --radius-md:22px;
  --radius-lg:30px;
  --radius-pill:999px;
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-smooth:cubic-bezier(.16,1,.3,1);
  --grad-brand:linear-gradient(135deg,var(--pink) 0%,var(--violet) 50%,var(--blue) 100%);
  --grad-brand-deep:linear-gradient(135deg,var(--pink-deep) 0%,var(--violet-deep) 55%,var(--blue-deep) 100%);
}

::selection{background:rgba(236,72,153,.35);color:#fff}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--pink),var(--violet));border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--pink-deep),var(--violet-deep));background-clip:padding-box}

/* ---------- Themes ---------- */
body.light-mode{background:linear-gradient(160deg,#fdf6f0 0%,#f3e8f7 50%,#eaf4fb 100%);color:#241329}
body.dark-mode{background:linear-gradient(160deg,#07050f 0%,#120a24 45%,#0a0f1f 100%);color:#eee6f5}

/* ---------- Ambient aurora background (site-wide, pure CSS) ---------- */
body::before,body::after{
  content:'';
  position:fixed;
  z-index:-2;
  border-radius:50%;
  filter:blur(90px);
  opacity:.55;
  pointer-events:none;
  will-change:transform;
}
body::before{
  width:60vmax;height:60vmax;
  top:-20vmax;right:-15vmax;
  background:radial-gradient(circle at 30% 30%,var(--pink) 0%,transparent 70%);
  animation:auroraDrift1 22s ease-in-out infinite alternate;
}
body::after{
  width:55vmax;height:55vmax;
  bottom:-22vmax;left:-15vmax;
  background:radial-gradient(circle at 60% 60%,var(--blue) 0%,transparent 70%);
  animation:auroraDrift2 26s ease-in-out infinite alternate;
}
body.dark-mode::before{background:radial-gradient(circle at 30% 30%,rgba(124,58,237,.65) 0%,transparent 70%);opacity:.45}
body.dark-mode::after{background:radial-gradient(circle at 60% 60%,rgba(56,189,248,.5) 0%,transparent 70%);opacity:.4}
@keyframes auroraDrift1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-6vmax,8vmax) scale(1.15)}}
@keyframes auroraDrift2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(6vmax,-6vmax) scale(1.1)}}
@media(prefers-reduced-motion:reduce){body::before,body::after{animation:none}}

/* ---------- Utility: fade/slide-in on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-smooth),transform .7s var(--ease-smooth)}
.reveal.in-view{opacity:1;transform:translateY(0)}

/* ---------- Navbar ---------- */
.navbar-apple{
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  padding:14px 0;
  transition:all .4s var(--ease-smooth);
}
.navbar-apple.navbar-scrolled{padding:8px 0;box-shadow:0 10px 40px rgba(0,0,0,.22)}
body.light-mode .navbar-apple{background:rgba(255,255,255,.55);border-bottom-color:rgba(255,255,255,.6);box-shadow:0 8px 32px rgba(120,80,140,.08)}
body.light-mode .navbar-apple.navbar-scrolled{box-shadow:0 10px 36px rgba(120,80,140,.14)}

.navbar-brand span{position:relative}
.navbar-brand{position:relative}

.navbar-apple .nav-link{
  position:relative;
  color:inherit!important;
  font-weight:600;
  font-size:.95rem;
  padding:9px 18px;
  border-radius:var(--radius-pill);
  transition:all .3s var(--ease-smooth);
  display:flex;align-items:center;gap:6px;
}
.navbar-apple .nav-link:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
body.light-mode .navbar-apple .nav-link:hover{background:rgba(255,255,255,.55)}
.navbar-apple .nav-link.active{background:rgba(255,255,255,.15);font-weight:700}
body.light-mode .navbar-apple .nav-link.active{background:rgba(255,255,255,.7);box-shadow:0 4px 16px rgba(120,80,140,.12)}
.navbar-apple .nav-link.active::after{
  content:'';position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:18px;height:3px;border-radius:3px;background:var(--grad-brand-deep);
}

.navbar-toggler{border:none!important;box-shadow:none!important;background:rgba(255,255,255,.1);border-radius:var(--radius-sm)!important;padding:8px 10px!important}

/* ---------- Theme toggle ---------- */
.theme-toggle{
  background:rgba(255,255,255,.08);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-pill);
  padding:6px 16px;font-size:1.15rem;cursor:pointer;transition:.4s var(--ease-spring);
  color:inherit;min-height:42px;min-width:42px;
}
.theme-toggle:hover{background:rgba(255,255,255,.18);transform:rotate(20deg) scale(1.08)}
body.light-mode .theme-toggle{background:rgba(255,255,255,.5)}
body.light-mode .theme-toggle:hover{background:rgba(255,255,255,.75)}

/* ---------- Buttons ---------- */
.btn-glass{
  position:relative;overflow:hidden;isolation:isolate;
  background:rgba(255,255,255,.07);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-pill);
  padding:11px 26px;font-weight:700;transition:all .3s var(--ease-smooth);
  color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:7px;
  cursor:pointer;min-height:46px;
}
.btn-glass::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 66%);
  transform:translateX(-120%);transition:transform .7s var(--ease-smooth);
}
.btn-glass:hover::before{transform:translateX(120%)}
.btn-glass:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 30px rgba(0,0,0,.15);color:inherit}
.btn-glass:active{transform:translateY(0) scale(.98)}
body.light-mode .btn-glass{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.7)}
body.light-mode .btn-glass:hover{background:rgba(255,255,255,.8)}

.btn-primary-soft{background:linear-gradient(135deg,rgba(168,216,234,.35),rgba(124,58,237,.2));border-color:rgba(168,216,234,.4);color:#8ecae6}
.btn-primary-soft:hover{background:linear-gradient(135deg,rgba(168,216,234,.5),rgba(124,58,237,.32))}
body.light-mode .btn-primary-soft{background:linear-gradient(135deg,rgba(168,216,234,.7),rgba(167,139,250,.35));border-color:rgba(168,216,234,.7);color:#1e3a5f}
body.light-mode .btn-primary-soft:hover{background:linear-gradient(135deg,rgba(168,216,234,.85),rgba(167,139,250,.5))}

.btn-pink-soft{background:linear-gradient(135deg,rgba(249,168,212,.35),rgba(236,72,153,.2));border-color:rgba(249,168,212,.4);color:#f9a8d4}
.btn-pink-soft:hover{background:linear-gradient(135deg,rgba(249,168,212,.5),rgba(236,72,153,.32))}
body.light-mode .btn-pink-soft{background:linear-gradient(135deg,rgba(249,168,212,.75),rgba(236,72,153,.35));border-color:rgba(249,168,212,.7);color:#6b3a5a}
body.light-mode .btn-pink-soft:hover{background:linear-gradient(135deg,rgba(249,168,212,.9),rgba(236,72,153,.5))}

/* ---------- Glass cards ---------- */
.glass-card{
  position:relative;
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius-lg);
  padding:22px;
  transition:transform .45s var(--ease-smooth),box-shadow .45s var(--ease-smooth),border-color .45s;
  overflow:hidden;
}
.glass-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 40%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;opacity:.6;
}
.glass-card:hover{
  transform:translateY(-8px) scale(1.012);
  box-shadow:0 30px 60px rgba(124,58,237,.18),0 10px 25px rgba(0,0,0,.12);
  border-color:rgba(255,255,255,.22);
}
body.light-mode .glass-card{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.7);box-shadow:0 12px 40px rgba(120,80,140,.06)}
body.light-mode .glass-card:hover{box-shadow:0 30px 60px rgba(124,58,237,.14),0 10px 25px rgba(0,0,0,.06)}

.glass-card img{transition:transform .6s var(--ease-smooth)}
.glass-card:hover img{transform:scale(1.06)}
.glass-card h5{font-weight:800;margin-bottom:6px}

/* ---------- Footer ---------- */
.footer-apple{
  position:relative;
  background:rgba(255,255,255,.03);backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.06);
  padding:32px 0;margin-top:50px;
}
.footer-apple::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--grad-brand);opacity:.5;
}
body.light-mode .footer-apple{background:rgba(255,255,255,.35);border-top-color:rgba(255,255,255,.5)}

.social-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:inherit;transition:all .35s var(--ease-spring);font-size:1.5rem;text-decoration:none;
}
.social-icon:hover{transform:translateY(-5px) scale(1.1) rotate(-6deg);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.social-icon.telegram:hover{color:#0088cc;border-color:#0088cc}
.social-icon.instagram:hover{color:#E4405F;border-color:#E4405F}
.social-icon.youtube:hover{color:#FF0000;border-color:#FF0000}
.social-icon.github:hover{color:#6e5494;border-color:#6e5494}
.social-icon.aparat:hover{color:#ED1A3B;border-color:#ED1A3B}
.social-icon.rubika:hover{color:#6C2BD9;border-color:#6C2BD9}

/* ---------- Page header ---------- */
.page-header{margin:26px 0 34px}
.page-header h1{
  font-size:clamp(1.7rem,4.5vw,2.6rem);
  font-weight:900;
  background:var(--grad-brand-deep);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  background-size:200% auto;
  line-height:1.3;
  animation:shine 6s linear infinite;
}
@keyframes shine{to{background-position:200% center}}
.page-header p{color:rgba(255,255,255,.65);font-size:clamp(.9rem,2vw,1.05rem)}
body.light-mode .page-header p{color:rgba(40,20,45,.6)}

/* ---------- Forms ---------- */
.form-control{
  background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.1)!important;
  border-radius:var(--radius-md)!important;color:inherit!important;
  padding:13px 18px!important;font-size:1rem!important;min-height:50px!important;
  transition:all .3s var(--ease-smooth)!important;
}
.form-control:focus{
  background:rgba(255,255,255,.09)!important;border-color:var(--pink)!important;
  box-shadow:0 0 0 4px rgba(249,168,212,.15)!important;
}
body.light-mode .form-control{background:rgba(255,255,255,.6)!important;border-color:rgba(255,255,255,.8)!important}
body.light-mode .form-control:focus{background:rgba(255,255,255,.85)!important}
label{font-weight:600;font-size:.9rem;opacity:.85;display:inline-block;margin-bottom:6px}

/* ============================================================
   LOADING SCREEN — premium reveal
   ============================================================ */
.loading-page{
  position:fixed;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;
  z-index:9999;transition:opacity .8s var(--ease-smooth),visibility .8s;
  background:radial-gradient(circle at 50% 40%,#1c0f2e 0%,#07030d 75%);
  overflow:hidden;
}
.loading-page.hide{opacity:0;pointer-events:none;visibility:hidden}
body.light-mode .loading-page{background:radial-gradient(circle at 50% 40%,#fdf1f8 0%,#eaf4fb 80%)}

.loading-box{
  position:relative;text-align:center;padding:44px 34px;
  background:rgba(255,255,255,.05);border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(18px);
  box-shadow:0 0 90px rgba(167,139,250,.25);
  min-width:280px;max-width:92%;
  animation:loadBoxIn .7s var(--ease-spring);
}
@keyframes loadBoxIn{0%{opacity:0;transform:translateY(24px) scale(.94)}100%{opacity:1;transform:translateY(0) scale(1)}}
body.light-mode .loading-box{background:rgba(255,255,255,.75);border-color:rgba(255,255,255,.9);box-shadow:0 0 90px rgba(236,72,153,.15)}

.load-ring{
  width:76px;height:76px;margin:0 auto 22px;border-radius:50%;
  background:conic-gradient(var(--pink) 0deg,var(--violet) 140deg,var(--blue) 260deg,var(--pink) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));
  animation:spin 1.4s linear infinite;
  filter:drop-shadow(0 0 14px rgba(167,139,250,.5));
}
@keyframes spin{to{transform:rotate(360deg)}}

.minecraft-font{
  font-family:'Vazirmatn',sans-serif;font-weight:900;font-size:clamp(1.5rem,5vw,2.1rem);
  background:var(--grad-brand-deep);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;letter-spacing:1px;margin-bottom:6px;direction:ltr;
}
.load-caption{font-size:.85rem;opacity:.6;margin-bottom:22px;letter-spacing:.5px}

.progress-bar-container{width:100%;max-width:320px;height:8px;background:rgba(255,255,255,.1);border-radius:30px;overflow:hidden;margin:0 auto;position:relative}
body.light-mode .progress-bar-container{background:rgba(0,0,0,.08)}
.progress-bar-fill{
  height:100%;width:0%;border-radius:30px;
  background:var(--grad-brand-deep);background-size:200% auto;
  transition:width .15s linear;box-shadow:0 0 16px rgba(167,139,250,.6);
  animation:shine 3s linear infinite;
}
.loading-dots{font-size:.75rem;opacity:.55;margin-top:14px;direction:ltr;display:flex;justify-content:center;gap:3px;letter-spacing:1px}
.loading-dots span{display:inline-block;animation:dotBounce 1.4s infinite}
.loading-dots span:nth-child(1){animation-delay:0s}
.loading-dots span:nth-child(2){animation-delay:.1s}
.loading-dots span:nth-child(3){animation-delay:.2s}
.loading-dots span:nth-child(4){animation-delay:.3s}
.loading-dots span:nth-child(5){animation-delay:.4s}
.loading-dots span:nth-child(6){animation-delay:.5s}
.loading-dots span:nth-child(7){animation-delay:.6s}
.loading-dots span:nth-child(8){animation-delay:.7s}
.loading-dots span:nth-child(9){animation-delay:.8s}
.loading-dots span:nth-child(10){animation-delay:.9s}
@keyframes dotBounce{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1.25)}}

/* ============================================================
   GENDER SCREEN — premium selection
   ============================================================ */
.gender-page{
  display:none;width:100%;min-height:100vh;justify-content:center;align-items:center;text-align:center;
  flex-direction:column;padding:24px;transition:background .3s;
}
.gender-page.active{display:flex;animation:fadeIn .6s var(--ease-smooth)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.gender-title{
  font-size:clamp(1.7rem,5vw,2.4rem);font-weight:900;
  background:var(--grad-brand-deep);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;margin-bottom:12px;
}
.gender-sub{font-size:1.05rem;color:#5a4a5a;margin-bottom:36px;opacity:.85}
body.dark-mode .gender-sub{color:#c9bcd6}
.gender-box{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
.gender-btn{
  position:relative;width:170px;height:180px;border-radius:32px;
  background:rgba(255,255,255,.08);backdrop-filter:blur(18px) saturate(180%);
  border:1.5px solid rgba(255,255,255,.14);
  box-shadow:0 14px 40px rgba(0,0,0,.12);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  cursor:pointer;transition:all .4s var(--ease-spring);
  font-size:1.15rem;font-weight:800;color:#3d2a3d;
  animation:floatGender 5s ease-in-out infinite;
}
body.light-mode .gender-btn{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.8)}
body.dark-mode .gender-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#eee}
.gender-btn:nth-child(1){animation-delay:0s}
.gender-btn:nth-child(2){animation-delay:.7s}
.gender-icon-badge{
  width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;color:#fff;transition:transform .4s var(--ease-spring);
}
.gender-btn:hover .gender-icon-badge{transform:scale(1.15) rotate(-8deg)}
.gender-btn.male .gender-icon-badge{background:linear-gradient(135deg,var(--blue),var(--blue-deep))}
.gender-btn.female .gender-icon-badge{background:linear-gradient(135deg,var(--pink),var(--pink-deep))}
.gender-btn.male{color:#1e3a5f}
.gender-btn.male:hover{transform:scale(1.07) translateY(-4px);box-shadow:0 24px 55px rgba(56,189,248,.28);border-color:var(--blue)}
.gender-btn.female{color:#6b3a5a}
.gender-btn.female:hover{transform:scale(1.07) translateY(-4px);box-shadow:0 24px 55px rgba(236,72,153,.28);border-color:var(--pink)}
body.dark-mode .gender-btn.male{color:#8ecae6}
body.dark-mode .gender-btn.female{color:#f9a8d4}
@keyframes floatGender{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.main-site{display:none}
.main-site.fade-in{animation:fadeIn .7s var(--ease-smooth)}

/* ---------- Comments block ---------- */
#commentsContainer .border-bottom{border-color:rgba(255,255,255,.08)!important;transition:background .3s;border-radius:12px}
#commentsContainer .border-bottom:hover{background:rgba(255,255,255,.03)}

/* =====================================================================
   MEDIA QUERIES — Mobile-first refinements
   ===================================================================== */
@media(max-width:992px){
  .page-header h1{font-size:clamp(1.5rem,4vw,2rem)}
  .glass-card{padding:18px}
}

@media(max-width:768px){
  .navbar-apple .nav-link{font-size:.85rem;padding:7px 13px}
  .navbar-apple .navbar-brand{font-size:1.35rem!important}
  .navbar-apple .btn-glass{padding:7px 16px;font-size:.8rem;min-height:38px}
  .theme-toggle{padding:5px 13px;font-size:1.05rem;min-height:36px;min-width:36px}
  .page-header{margin:18px 0 22px}
  .glass-card{padding:16px;border-radius:24px}
  .btn-glass{padding:9px 20px;font-size:.85rem;min-height:42px}
  .form-control{padding:11px 15px!important;font-size:.9rem!important;min-height:44px!important}
  .footer-apple{padding:24px 0}
  .social-icon{width:42px;height:42px;font-size:1.25rem}
  .loading-box{min-width:240px;padding:32px 22px}
  .load-ring{width:64px;height:64px}
  .gender-btn{width:140px;height:150px;font-size:1rem;border-radius:26px}
  .gender-icon-badge{width:52px;height:52px;font-size:1.5rem}
  .gender-box{gap:18px}
  body::before,body::after{filter:blur(60px)}
}

@media(max-width:576px){
  .navbar-apple .navbar-brand{font-size:1.15rem!important}
  .navbar-apple .nav-link{font-size:.8rem;padding:6px 11px}
  .navbar-apple .btn-glass{padding:6px 14px;font-size:.75rem;min-height:34px}
  .theme-toggle{padding:4px 11px;font-size:.95rem;min-height:32px;min-width:32px}
  .page-header p{font-size:.85rem}
  .glass-card{padding:14px;border-radius:20px}
  .btn-glass{padding:7px 16px;font-size:.8rem;min-height:38px}
  .form-control{padding:9px 13px!important;font-size:.85rem!important;min-height:40px!important}
  .footer-apple{padding:18px 0}
  .social-icon{width:38px;height:38px;font-size:1.1rem}
  .loading-box{min-width:210px;padding:26px 16px}
  .load-ring{width:56px;height:56px}
  .minecraft-font{font-size:1.3rem}
  .gender-title{font-size:1.5rem}
  .gender-sub{font-size:.9rem;margin-bottom:26px}
  .gender-btn{width:120px;height:130px;font-size:.9rem;border-radius:22px;gap:6px}
  .gender-icon-badge{width:44px;height:44px;font-size:1.3rem}
  .gender-box{gap:14px}
  .container.py-5{max-width:100%!important;padding-top:20px!important;padding-bottom:20px!important}
  .container{padding-left:14px!important;padding-right:14px!important}
  .row{margin-left:-6px!important;margin-right:-6px!important}
  .col-md-4,.col-md-6,.col-lg-4{padding-left:6px!important;padding-right:6px!important}
}

@media(max-width:400px){
  .gender-btn{width:105px;height:115px;font-size:.8rem;border-radius:18px}
  .gender-icon-badge{width:38px;height:38px;font-size:1.1rem}
  .minecraft-font{font-size:1.1rem}
  .loading-box{min-width:190px;padding:22px 14px}
  .navbar-apple .btn-glass{padding:5px 12px;font-size:.7rem;min-height:30px}
}